kritzel-stencil 0.1.0 → 0.1.1

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

@@ -22,6 +22,7 @@ export class KritzelLine extends KritzelBaseObject {
     isDebugInfoVisible = true;
     isCompleted = false;
     _adjustedPoints = null;
+    _clipInfo = null;
     get d() {
         if (this.controlX !== undefined && this.controlY !== undefined) {
             return `M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`;
@@ -99,6 +100,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
         // Update anchors after the line is updated
         this._core.anchorManager.updateAnchorsForObject(this.id);
@@ -112,6 +114,7 @@ export class KritzelLine extends KritzelBaseObject {
     rotate(value) {
         this.rotation = value;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     move(startX, startY, endX, endY) {
@@ -127,6 +130,7 @@ export class KritzelLine extends KritzelBaseObject {
             this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
         }
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     hitTest(x, y) {
@@ -138,12 +142,16 @@ export class KritzelLine extends KritzelBaseObject {
         }
         // For curved lines, use distance to the Bezier curve
         if (this.controlX !== undefined && this.controlY !== undefined) {
-            const distance = this.pointToBezierDistance(x, y);
+            const clip = this.getClipInfo();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
+            const distance = this.pointToBezierDistance(x, y, startT, endT);
             return distance <= halfStroke;
         }
         // For straight lines, use distance to line segment
-        const p1 = this._adjustedPoints[0];
-        const p2 = this._adjustedPoints[1];
+        const clip = this.getClipInfo();
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
         const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
         return distance <= halfStroke;
     }
@@ -152,6 +160,7 @@ export class KritzelLine extends KritzelBaseObject {
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
         }
+        const clip = this.getClipInfo();
         const polyPoints = [
             { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
             { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
@@ -159,7 +168,11 @@ export class KritzelLine extends KritzelBaseObject {
             { x: polygon.topLeft.x, y: polygon.topLeft.y },
         ];
         // Check if any endpoint is inside the polygon
-        for (const [px, py] of this._adjustedPoints) {
+        // Use clipped endpoints
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const endpoints = [p1, p2];
+        for (const [px, py] of endpoints) {
             if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
                 return true;
             }
@@ -175,9 +188,12 @@ export class KritzelLine extends KritzelBaseObject {
             const p0 = this._adjustedPoints[0];
             const p2 = this._adjustedPoints[1];
             const controlAdjusted = this.computeAdjustedControlPoint();
+            const startT = clip.start?.t ?? 0;
+            const endT = clip.end?.t ?? 1;
             const samples = 20;
-            for (let i = 1; i < samples; i++) {
-                const t = i / samples;
+            for (let i = 0; i <= samples; i++) {
+                const fraction = i / samples;
+                const t = startT + fraction * (endT - startT);
                 const oneMinusT = 1 - t;
                 const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
                 const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
@@ -197,19 +213,19 @@ export class KritzelLine extends KritzelBaseObject {
             return false;
         }
         // For straight lines, check if line intersects any polygon edge
-        const p1 = { x: this._adjustedPoints[0][0], y: this._adjustedPoints[0][1] };
-        const p2 = { x: this._adjustedPoints[1][0], y: this._adjustedPoints[1][1] };
+        const checkP1 = { x: p1[0], y: p1[1] };
+        const checkP2 = { x: p2[0], y: p2[1] };
         for (let j = 0; j < polyPoints.length; j++) {
             const q1 = polyPoints[j];
             const q2 = polyPoints[(j + 1) % polyPoints.length];
-            if (KritzelGeometryHelper.intersectLines(p1, p2, q1, q2)) {
+            if (KritzelGeometryHelper.intersectLines(checkP1, checkP2, q1, q2)) {
                 return true;
             }
             // Check distance from polygon edges to line segment
-            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, p1.x, p1.y, p2.x, p2.y);
-            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, p1.x, p1.y, p2.x, p2.y);
-            const d3 = this.pointToLineSegmentDistance(p1.x, p1.y, q1.x, q1.y, q2.x, q2.y);
-            const d4 = this.pointToLineSegmentDistance(p2.x, p2.y, q1.x, q1.y, q2.x, q2.y);
+            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d3 = this.pointToLineSegmentDistance(checkP1.x, checkP1.y, q1.x, q1.y, q2.x, q2.y);
+            const d4 = this.pointToLineSegmentDistance(checkP2.x, checkP2.y, q1.x, q1.y, q2.x, q2.y);
             const minD = Math.min(d1, d2, d3, d4);
             if (minD <= halfStroke) {
                 return true;
@@ -221,6 +237,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateX = x;
         this.translateY = y;
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     /**
@@ -279,6 +296,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateY += correctionY / this.scale;
         // Clear cached adjusted points
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     updateControlPoint(newX, newY) {
@@ -321,6 +339,7 @@ export class KritzelLine extends KritzelBaseObject {
         this.translateY += correctionY / this.scale;
         // Clear cached adjusted points
         this._adjustedPoints = null;
+        this._clipInfo = null;
         this._core.store.state.objects.update(this);
     }
     computeAdjustedPoints() {
@@ -377,7 +396,7 @@ export class KritzelLine extends KritzelBaseObject {
      * Calculates the minimum distance from a point to a quadratic Bezier curve.
      * Uses sampling along the curve to find the closest point.
      */
-    pointToBezierDistance(x, y) {
+    pointToBezierDistance(x, y, startT = 0, endT = 1) {
         if (this._adjustedPoints === null) {
             this._adjustedPoints = this.computeAdjustedPoints();
         }
@@ -388,7 +407,8 @@ export class KritzelLine extends KritzelBaseObject {
         let minDistance = Infinity;
         const samples = 20; // Number of samples along the curve
         for (let i = 0; i <= samples; i++) {
-            const t = i / samples;
+            const fraction = i / samples;
+            const t = startT + fraction * (endT - startT);
             const oneMinusT = 1 - t;
             // Quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
             const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
@@ -402,6 +422,33 @@ export class KritzelLine extends KritzelBaseObject {
         }
         return minDistance;
     }
+    getClipInfo() {
+        if (this._clipInfo)
+            return this._clipInfo;
+        const startAnchor = this.startAnchor;
+        const endAnchor = this.endAnchor;
+        const result = {};
+        if (startAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'start');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'start', target);
+                if (clip) {
+                    result.start = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        if (endAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'end');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'end', target);
+                if (clip) {
+                    result.end = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        this._clipInfo = result;
+        return result;
+    }
     /**
      * Computes the adjusted control point in world coordinates, accounting for rotation and translation.
      */

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

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   user-select: none;
+  max-width: calc(100vw - 28px);
 }
 
 :host(.mobile) {
@@ -23,6 +24,57 @@
   border: var(--kritzel-controls-border, 1px solid #ebebeb);
   z-index: 10000;
   position: relative;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.kritzel-tools-scroll {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kritzel-controls-gap, 8px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1 1 auto;
+  min-width: 0;
+  
+  /* Hide scrollbar for all browsers */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.kritzel-tools-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Scroll indicator gradients */
+.scroll-indicator-left,
+.scroll-indicator-right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+  z-index: 1;
+}
+
+.scroll-indicator-left {
+  left: 0;
+  background: linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);
+  border-radius: var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px);
+}
+
+.scroll-indicator-right {
+  right: 0;
+  background: linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);
+  border-radius: 0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0;
+}
+
+.scroll-indicator-left.visible,
+.scroll-indicator-right.visible {
+  opacity: 1;
 }
 
 .kritzel-control {
@@ -185,6 +237,7 @@
   height: 40px;
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
+  flex-shrink: 0;
   
   /* Hidden state - collapsed */
   width: 0;
@@ -202,6 +255,19 @@
   opacity: 1;
   pointer-events: auto;
   margin-left: 0;
+  overflow: visible;
+}
+
+/* Left gradient on config container */
+.config-gradient-left {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -16px;
+  width: 16px;
+  background: linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));
+  pointer-events: none;
+  z-index: 1;
 }
 
 .kritzel-config {

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

@@ -14,6 +14,8 @@ export class KritzelControls {
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     selectedSubOptions = new Map();
     openSubMenuControl = null;
+    canScrollLeft = false;
+    canScrollRight = false;
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
@@ -37,6 +39,7 @@ export class KritzelControls {
     }
     kritzelEngine = null;
     tooltipRef = null;
+    toolsScrollRef = null;
     get activeToolAsTextTool() {
         return this.activeControl?.tool;
     }
@@ -48,6 +51,20 @@ export class KritzelControls {
         await this.initializeTools();
         this.isControlsReady.emit();
     }
+    componentDidLoad() {
+        this.updateScrollIndicators();
+    }
+    updateScrollIndicators() {
+        if (!this.toolsScrollRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.toolsScrollRef;
+        const threshold = 2; // Small threshold to account for rounding
+        this.canScrollLeft = scrollLeft > threshold;
+        this.canScrollRight = scrollLeft + clientWidth < scrollWidth - threshold;
+    }
+    handleToolsScroll = () => {
+        this.updateScrollIndicators();
+    };
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
         this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
@@ -142,55 +159,58 @@ export class KritzelControls {
     render() {
         const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
             this.activeControl?.tool instanceof KritzelTextTool;
-        return (h(Host, { key: 'ed5816cbeb8fe8b91e14b23bf61df4753fb0da0f', class: {
+        // 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: '78858516fdd1ccec007c9c8ddfc846d7907df664', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '7218fff9c89f525baf655eea46aec1698a28babd', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f24a6dc28e86a543a6e9d6ed2d3a5ca552eb7c48', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1dc0fa7b02a953474aae9c7822c651d5006e89e5', class: "kritzel-controls" }, this.controls.map(control => {
-            if (control.type === 'tool') {
-                // Check if this control has sub-options (split-button)
-                if (control.subOptions?.length) {
-                    const selectedSubOption = this.getSelectedSubOption(control);
-                    const isActive = this.activeControl?.name === control.name;
-                    const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
-                    return (h("div", { class: {
-                            'kritzel-control-split': true,
-                            'selected': isActive,
-                        }, key: control.name, ref: el => {
-                            if (el)
-                                control._anchorRef = el;
-                        } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
-                            'kritzel-control-dropdown': true,
-                            'visible': isActive,
-                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
-                            'kritzel-submenu-item': true,
-                            'active': option.id === selectedSubOption?.id,
-                        }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
-                }
-                // Regular tool control (no sub-options)
-                return (h("button", { class: {
-                        'kritzel-control': true,
-                        'selected': this.activeControl?.name === control?.name,
-                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
-            }
-            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '50dfa80ac8f76a2a00f3fa171a3d6d8503fb0857', class: "kritzel-controls" }, h("div", { key: '75230491b29899e3e08ecf7cf0adae274bd34728', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'be5939db03ffe6bb72c38c1c753963f120bf9c58', class: "kritzel-tools-scroll", ref: el => {
+                this.toolsScrollRef = el;
+                // Update indicators when ref is set
+                if (el)
+                    this.updateScrollIndicators();
+            }, onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            // Check if this control has sub-options (split-button)
+            if (control.subOptions?.length) {
+                const selectedSubOption = this.getSelectedSubOption(control);
+                const isActive = this.activeControl?.name === control.name;
+                const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
                 return (h("div", { class: {
-                        'kritzel-config-container': true,
-                        'visible': hasConfigUI,
-                    }, key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
-                        if (event.key === 'Enter') {
-                            this.handleConfigClick?.(event);
-                        }
-                    }, style: {
-                        cursor: 'pointer',
-                    } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
-                        borderRadius: '50%',
-                        border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))))));
+                        'kritzel-control-split': true,
+                        'selected': isActive,
+                    }, key: control.name, ref: el => {
+                        if (el)
+                            control._anchorRef = el;
+                    } }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                        'kritzel-control-dropdown': true,
+                        'visible': isActive,
+                    }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { isVisible: isSubMenuOpen, anchorElement: control._anchorRef, onTooltipClosed: () => { this.openSubMenuControl = null; } }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                        'kritzel-submenu-item': true,
+                        'active': option.id === selectedSubOption?.id,
+                    }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
             }
-        }))));
+            // Regular tool control (no sub-options)
+            return (h("button", { class: {
+                    'kritzel-control': true,
+                    'selected': this.activeControl?.name === control?.name,
+                }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
+        })), h("div", { key: '27aa7dd0f1a93a435eebc78c8abe6bc4c8b578f0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight } }), configControl && this.activeControl && (h("div", { class: {
+                'kritzel-config-container': true,
+                'visible': hasConfigUI,
+            }, key: configControl.name }, h("div", { key: '68c28268a98d4cc3bf949acbdea50ed2ec83c0db', class: "config-gradient-left" }), h("kritzel-tooltip", { key: '76af8159e08e78b32ab6798ef408e9246e77afbf', ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { key: '32cce44dd99f5bdbc730a66997af6930e8da4110', style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { key: 'da8ce6b563e276cd1566f31e96146e58b3cfa21f', tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { key: 'f7f9d55e52feba674521d5f8a20d4e7f62b14347', tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { key: '59082cc78fabaf11468c41c5333ebc21f9e491c1', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                if (event.key === 'Enter') {
+                    this.handleConfigClick?.(event);
+                }
+            }, style: {
+                cursor: 'pointer',
+            } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { key: 'd77c688e9f92293e8a7e63ad63483552479a96ef', class: "color-container" }, h("kritzel-color", { key: '42272e42b004f8de4711032f47c5ac2b2724953f', value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
+                borderRadius: '50%',
+                border: 'none',
+            } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { key: '6f9d8bc06a57717c3a683f20610395f7ea4df48e', class: "font-container" }, h("kritzel-font", { key: '6079881df1283fd176b223506deb9ac5ee9c81e3', fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor })))))))));
     }
     static get is() { return "kritzel-controls"; }
     static get encapsulation() { return "shadow"; }
@@ -307,7 +327,9 @@ export class KritzelControls {
             "isTooltipVisible": {},
             "isTouchDevice": {},
             "selectedSubOptions": {},
-            "openSubMenuControl": {}
+            "openSubMenuControl": {},
+            "canScrollLeft": {},
+            "canScrollRight": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -17,7 +17,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '998008f3c138f18d0e3f5183c3280e646e6c8e73' }, h("button", { key: '2ea58a2df20e038e00c0090c44714efbc1221314', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1843d211731f83f2f828b17f0bc0cf83a76705e1', name: "undo" })), h("button", { key: '71064186570d8e849a634a4c68e96f3fba1ebdab', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '12694a6dcddc1f893752d3edcc1deafe700cff5c', name: "redo" })), h("div", { key: '5bbfb5e535d9e0a861d227df57bd5cc7ab8c22fb', class: "utility-separator" }), h("button", { key: 'fda95410a66afa98c0abf6eb82e323f926ef596a', class: "utility-button" }, h("kritzel-icon", { key: '0d1d77f6d65481825c2edbdb38de821a2de7b043', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: 'e8a12bdde840301c5bd9448e2c6be1c3cd558c38' }, h("button", { key: '9ffc5db3ac9d31e6e66822ebcbd60bd60c413062', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'caec852e6f83132e46b3ef87c376f62a03554f6b', name: "undo" })), h("button", { key: '6b5eaebd6f1dcfa5fbb96719b8456647132c1415', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: 'bbb07b34186f3a2f1a586a629f0cca738ca924bf', name: "redo" })), h("div", { key: '5a80149b3231e23b1e16fd7f52c4b4b2a5108e75', class: "utility-separator" }), h("button", { key: 'b7d826a7e6667a3a8e28c11507bfc760dc9526e0', class: "utility-button" }, h("kritzel-icon", { key: 'c47c4acead03cee13c64045b817aa166f397ce90', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

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-Bj_Og27M.js";export{b as KritzelBrushTool,a as KritzelPath,K as KritzelText,c as KritzelTextTool}from"./p-Cp15toXH.js";import{w as t,a as e,t as i,r as o,b as n,e as l,c as h,d,f as u,g as m,s as f,h as p,i as z,v as C,j as k,o as y,k as S,l as x,m as w,O as v,n as j,p as T,q as B,u as W,x as U,y as H,z as A,A as O,B as _,C as $,H as R,D as X}from"./p-D3LRBk2t.js";export{N as IndexedDBSyncProvider,Q as KritzelAnchorManager,P as KritzelAppStateMap,L as KritzelCursorHelper,I as KritzelEraserTool,F as KritzelGroup,K as KritzelImage,J as KritzelImageTool,E as KritzelLine,G as KritzelLineTool,M as KritzelSelectionTool}from"./p-D3LRBk2t.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{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{KritzelControlBrushConfig,defineCustomElement as defineCustomElementKritzelControlBrushConfig}from"./kritzel-control-brush-config.js";export{KritzelControlTextConfig,defineCustomElement as defineCustomElementKritzelControlTextConfig}from"./kritzel-control-text-config.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.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{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.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 Y{doc;channel;_synced=!1;constructor(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(s,o)=>{if(o!==this){const o=u();t(o,0),e(o,s),this.channel.postMessage(i(o))}};handleMessage(s){const r=m(new Uint8Array(s));switch(o(r)){case 0:const s=n(r);h(this.doc,s,this);break;case 1:this.broadcastSync();break;case 2:const o=n(r),c=l(this.doc,o);if(c.length>0){const s=u();t(s,0),e(s,c),this.channel.postMessage(i(s))}}}broadcastSync(){const s=u();t(s,2),e(s,d(this.doc)),this.channel.postMessage(i(s))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:z(e.newValue||"")}),y(this._onChange)}postMessage(t){C.setItem(this.room,k(S(t)))}close(){x(this._onChange)}}:BroadcastChannel,Z=t=>f(q,t,(()=>{const e=p(),s=new V(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),tt=(t,e,s=null)=>{const i=Z(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},et=(s,i)=>{t(s,0);const o=d(i);e(s,o)},st=(s,i,o)=>{t(s,1),e(s,l(i,o))},it=(t,e,s,i)=>{try{h(e,n(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},ot=it;class nt extends v{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=T();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&rt(this,e,"timeout")}),j(3e3)),t.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(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:T()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),B(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const rt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:T()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},lt=(e,s,o=e.states)=>{const n=s.length,r=u();t(r,n);for(let i=0;i<n;i++){const n=s[i],l=o.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),W(r,JSON.stringify(l))}return i(r)},ct=[];ct[0]=(e,s,i,r)=>{t(e,0);const l=((t,e,s,i,r)=>{const l=o(t);switch(l){case 0:((t,e,s)=>{st(e,s,n(t))})(t,e,s);break;case 1:it(t,s,i,r);break;case 2:ot(t,s,i,r);break;default:throw Error("Unknown message type")}return l})(s,e,i.doc,i);r&&1===l&&!i.synced&&(i.synced=!0)},ct[3]=(s,i,o)=>{t(s,1),e(s,lt(o.awareness,Array.from(o.awareness.getStates().keys())))},ct[1]=(t,e,s)=>{((t,e,s)=>{const i=m(e),n=T(),r=[],l=[],c=[],a=[],h=o(i);for(let e=0;e<h;e++){const e=o(i);let s=o(i);const h=JSON.parse(w(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:n}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(B(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,n(e),s)},ct[2]=(t,e,s)=>{((t,e,s)=>{0===o(t)&&s(0,w(t))})(e,0,((t,e)=>at(s,e)))};const at=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),ht=(t,e,s)=>{const i=m(e),n=u(),r=o(i),l=t.messageHandlers[r];return l?l(n,i,t,s,r):console.error("Unable to compute message"),n},dt=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,rt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(ut,_(100*$(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},ut=s=>{if(s.shouldConnect&&null===s.ws){const o=new s._WS(s.url,s.protocols);o.binaryType="arraybuffer",s.ws=o,s.wsconnecting=!0,s.wsconnected=!1,s.synced=!1,o.onmessage=t=>{s.wsLastMessageReceived=T();const e=ht(s,new Uint8Array(t.data),!0);A(e)>1&&o.send(i(e))},o.onerror=t=>{s.emit("connection-error",[t,s])},o.onclose=t=>{dt(s,o,t)},o.onopen=()=>{s.wsLastMessageReceived=T(),s.wsconnecting=!1,s.wsconnected=!0,s.wsUnsuccessfulReconnects=0,s.emit("status",[{status:"connected"}]);const n=u();if(t(n,0),et(n,s.doc),o.send(i(n)),null!==s.awareness.getLocalState()){const n=u();t(n,1),e(n,lt(s.awareness,[s.doc.clientID])),o.send(i(n))}},s.emit("status",[{status:"connecting"}])}},mt=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&tt(t.bcChannel,e,t)};class ft extends H{constructor(s,o,n,{connect:r=!0,awareness:l=new nt(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-1,maxBackoffTime:m=2500,disableBc:f=!1}={}){for(super();"/"===s[s.length-1];)s=s.slice(0,s.length-1);this.serverUrl=s,this.bcChannel=s+"/"+o,this.maxBackoffTime=m,this.params=c,this.protocols=a,this.roomname=o,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=f,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ct.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=u();t(e,0),et(e,n),this.ws.send(i(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=ht(this,new Uint8Array(t),!1);A(e)>1&&tt(this.bcChannel,i(e),this)}},this._updateHandler=(s,o)=>{if(o!==this){const o=u();t(o,0),((s,i)=>{t(s,2),e(s,i)})(o,s),mt(this,i(o))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:s,updated:o,removed:n})=>{const r=s.concat(o).concat(n),c=u();t(c,1),e(c,lt(l,r)),mt(this,i(c))},this._exitHandler=()=>{rt(this.awareness,[n.clientID],"app closed")},O&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<T()-this.wsLastMessageReceived&&dt(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>U(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),O&&"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||(((t,e)=>{Z(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const s=u();t(s,0),et(s,this.doc),tt(this.bcChannel,i(s),this);const o=u();t(o,0),st(o,this.doc),tt(this.bcChannel,i(o),this);const n=u();t(n,3),tt(this.bcChannel,i(n),this);const r=u();t(r,1),e(r,lt(this.awareness,[this.doc.clientID])),tt(this.bcChannel,i(r),this)}disconnectBc(){const s=u();t(s,1),e(s,lt(this.awareness,[this.doc.clientID],new Map)),mt(this,i(s)),this.bcconnected&&(((t,e)=>{const s=Z(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),q.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&dt(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ut(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new ft(i,o,e,{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(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class zt{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||zt.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new R(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new R(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(zt.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),zt.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),zt.sharedWebSocketProvider=new X(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),zt.sharedWebSocketProvider}static destroySharedWebSocket(){zt.sharedWebSocketProvider&&(zt.sharedWebSocketProvider.destroy(),zt.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return zt.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new zt(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();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{Y as BroadcastSyncProvider,zt as HocuspocusSyncProvider,pt as WebSocketSyncProvider}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-Bj_Og27M.js";export{b as KritzelBrushTool,a as KritzelPath,K as KritzelText,c as KritzelTextTool}from"./p-Cp15toXH.js";import{w as t,a as e,t as i,r as o,b as n,e as l,c as h,d,f as u,g as m,s as f,h as p,i as z,v as C,j as k,o as y,k as x,l as S,m as w,O as v,n as j,p as T,q as B,u as W,x as U,y as H,z as A,A as O,B as _,C as $,H as R,D as X}from"./p-exWKDgI8.js";export{N as IndexedDBSyncProvider,Q as KritzelAnchorManager,P as KritzelAppStateMap,L as KritzelCursorHelper,I as KritzelEraserTool,F as KritzelGroup,K as KritzelImage,J as KritzelImageTool,E as KritzelLine,G as KritzelLineTool,M as KritzelSelectionTool}from"./p-exWKDgI8.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{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{KritzelControlBrushConfig,defineCustomElement as defineCustomElementKritzelControlBrushConfig}from"./kritzel-control-brush-config.js";export{KritzelControlTextConfig,defineCustomElement as defineCustomElementKritzelControlTextConfig}from"./kritzel-control-text-config.js";export{KritzelControls,defineCustomElement as defineCustomElementKritzelControls}from"./kritzel-controls.js";export{KritzelCursorTrail,defineCustomElement as defineCustomElementKritzelCursorTrail}from"./kritzel-cursor-trail.js";export{KritzelDropdown,defineCustomElement as defineCustomElementKritzelDropdown}from"./kritzel-dropdown.js";export{KritzelEngine,defineCustomElement as defineCustomElementKritzelEngine}from"./kritzel-engine.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{KritzelMenu,defineCustomElement as defineCustomElementKritzelMenu}from"./kritzel-menu.js";export{KritzelMenuItem,defineCustomElement as defineCustomElementKritzelMenuItem}from"./kritzel-menu-item.js";export{KritzelPortal,defineCustomElement as defineCustomElementKritzelPortal}from"./kritzel-portal.js";export{KritzelSplitButton,defineCustomElement as defineCustomElementKritzelSplitButton}from"./kritzel-split-button.js";export{KritzelStrokeSize,defineCustomElement as defineCustomElementKritzelStrokeSize}from"./kritzel-stroke-size.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 Y{doc;channel;_synced=!1;constructor(t,e,s){this.doc=e,this.channel=new BroadcastChannel(t),this.channel.onmessage=t=>{this.handleMessage(t.data)},this.doc.on("update",this.handleDocUpdate),this.broadcastSync(),setTimeout((()=>{this._synced=!0}),100),console.info("BroadcastChannel Provider initialized: "+t)}handleDocUpdate=(s,o)=>{if(o!==this){const o=u();t(o,0),e(o,s),this.channel.postMessage(i(o))}};handleMessage(s){const r=m(new Uint8Array(s));switch(o(r)){case 0:const s=n(r);h(this.doc,s,this);break;case 1:this.broadcastSync();break;case 2:const o=n(r),c=l(this.doc,o);if(c.length>0){const s=u();t(s,0),e(s,c),this.channel.postMessage(i(s))}}}broadcastSync(){const s=u();t(s,2),e(s,d(this.doc)),this.channel.postMessage(i(s))}async connect(){if(!this._synced)return new Promise((t=>{const e=()=>{this._synced?t():setTimeout(e,50)};e()}))}disconnect(){}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}const q=new Map,V="undefined"==typeof BroadcastChannel?class{constructor(t){this.room=t,this.onmessage=null,this._onChange=e=>e.key===t&&null!==this.onmessage&&this.onmessage({data:z(e.newValue||"")}),y(this._onChange)}postMessage(t){C.setItem(this.room,k(x(t)))}close(){S(this._onChange)}}:BroadcastChannel,Z=t=>f(q,t,(()=>{const e=p(),s=new V(t);return s.onmessage=t=>e.forEach((e=>e(t.data,"broadcastchannel"))),{bc:s,subs:e}})),tt=(t,e,s=null)=>{const i=Z(t);i.bc.postMessage(e),i.subs.forEach((t=>t(e,s)))},et=(s,i)=>{t(s,0);const o=d(i);e(s,o)},st=(s,i,o)=>{t(s,1),e(s,l(i,o))},it=(t,e,s,i)=>{try{h(e,n(t),s)}catch(t){null!=i&&i(t),console.error("Caught error while handling a Yjs update",t)}},ot=it;class nt extends v{constructor(t){super(),this.doc=t,this.clientID=t.clientID,this.states=new Map,this.meta=new Map,this._checkInterval=setInterval((()=>{const t=T();null!==this.getLocalState()&&15e3<=t-this.meta.get(this.clientID).lastUpdated&&this.setLocalState(this.getLocalState());const e=[];this.meta.forEach(((s,i)=>{i!==this.clientID&&3e4<=t-s.lastUpdated&&this.states.has(i)&&e.push(i)})),e.length>0&&rt(this,e,"timeout")}),j(3e3)),t.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(t){const e=this.clientID,s=this.meta.get(e),i=void 0===s?0:s.clock+1,o=this.states.get(e);null===t?this.states.delete(e):this.states.set(e,t),this.meta.set(e,{clock:i,lastUpdated:T()});const n=[],r=[],l=[],c=[];null===t?c.push(e):null==o?null!=t&&n.push(e):(r.push(e),B(o,t)||l.push(e)),(n.length>0||l.length>0||c.length>0)&&this.emit("change",[{added:n,updated:l,removed:c},"local"]),this.emit("update",[{added:n,updated:r,removed:c},"local"])}setLocalStateField(t,e){const s=this.getLocalState();null!==s&&this.setLocalState({...s,[t]:e})}getStates(){return this.states}}const rt=(t,e,s)=>{const i=[];for(let s=0;s<e.length;s++){const o=e[s];if(t.states.has(o)){if(t.states.delete(o),o===t.clientID){const e=t.meta.get(o);t.meta.set(o,{clock:e.clock+1,lastUpdated:T()})}i.push(o)}}i.length>0&&(t.emit("change",[{added:[],updated:[],removed:i},s]),t.emit("update",[{added:[],updated:[],removed:i},s]))},lt=(e,s,o=e.states)=>{const n=s.length,r=u();t(r,n);for(let i=0;i<n;i++){const n=s[i],l=o.get(n)||null,c=e.meta.get(n).clock;t(r,n),t(r,c),W(r,JSON.stringify(l))}return i(r)},ct=[];ct[0]=(e,s,i,r)=>{t(e,0);const l=((t,e,s,i,r)=>{const l=o(t);switch(l){case 0:((t,e,s)=>{st(e,s,n(t))})(t,e,s);break;case 1:it(t,s,i,r);break;case 2:ot(t,s,i,r);break;default:throw Error("Unknown message type")}return l})(s,e,i.doc,i);r&&1===l&&!i.synced&&(i.synced=!0)},ct[3]=(s,i,o)=>{t(s,1),e(s,lt(o.awareness,Array.from(o.awareness.getStates().keys())))},ct[1]=(t,e,s)=>{((t,e,s)=>{const i=m(e),n=T(),r=[],l=[],c=[],a=[],h=o(i);for(let e=0;e<h;e++){const e=o(i);let s=o(i);const h=JSON.parse(w(i)),d=t.meta.get(e),u=t.states.get(e),m=void 0===d?0:d.clock;(m<s||m===s&&null===h&&t.states.has(e))&&(null===h?e===t.clientID&&null!=t.getLocalState()?s++:t.states.delete(e):t.states.set(e,h),t.meta.set(e,{clock:s,lastUpdated:n}),void 0===d&&null!==h?r.push(e):void 0!==d&&null===h?a.push(e):null!==h&&(B(h,u)||c.push(e),l.push(e)))}(r.length>0||c.length>0||a.length>0)&&t.emit("change",[{added:r,updated:c,removed:a},s]),(r.length>0||l.length>0||a.length>0)&&t.emit("update",[{added:r,updated:l,removed:a},s])})(s.awareness,n(e),s)},ct[2]=(t,e,s)=>{((t,e,s)=>{0===o(t)&&s(0,w(t))})(e,0,((t,e)=>at(s,e)))};const at=(t,e)=>console.warn(`Permission denied to access ${t.url}.\n${e}`),ht=(t,e,s)=>{const i=m(e),n=u(),r=o(i),l=t.messageHandlers[r];return l?l(n,i,t,s,r):console.error("Unable to compute message"),n},dt=(t,e,s)=>{e===t.ws&&(t.emit("connection-close",[s,t]),t.ws=null,e.close(),t.wsconnecting=!1,t.wsconnected?(t.wsconnected=!1,t.synced=!1,rt(t.awareness,Array.from(t.awareness.getStates().keys()).filter((e=>e!==t.doc.clientID)),t),t.emit("status",[{status:"disconnected"}])):t.wsUnsuccessfulReconnects++,setTimeout(ut,_(100*$(2,t.wsUnsuccessfulReconnects),t.maxBackoffTime),t))},ut=s=>{if(s.shouldConnect&&null===s.ws){const o=new s._WS(s.url,s.protocols);o.binaryType="arraybuffer",s.ws=o,s.wsconnecting=!0,s.wsconnected=!1,s.synced=!1,o.onmessage=t=>{s.wsLastMessageReceived=T();const e=ht(s,new Uint8Array(t.data),!0);A(e)>1&&o.send(i(e))},o.onerror=t=>{s.emit("connection-error",[t,s])},o.onclose=t=>{dt(s,o,t)},o.onopen=()=>{s.wsLastMessageReceived=T(),s.wsconnecting=!1,s.wsconnected=!0,s.wsUnsuccessfulReconnects=0,s.emit("status",[{status:"connected"}]);const n=u();if(t(n,0),et(n,s.doc),o.send(i(n)),null!==s.awareness.getLocalState()){const n=u();t(n,1),e(n,lt(s.awareness,[s.doc.clientID])),o.send(i(n))}},s.emit("status",[{status:"connecting"}])}},mt=(t,e)=>{const s=t.ws;t.wsconnected&&s&&s.readyState===s.OPEN&&s.send(e),t.bcconnected&&tt(t.bcChannel,e,t)};class ft extends H{constructor(s,o,n,{connect:r=!0,awareness:l=new nt(n),params:c={},protocols:a=[],WebSocketPolyfill:h=WebSocket,resyncInterval:d=-1,maxBackoffTime:m=2500,disableBc:f=!1}={}){for(super();"/"===s[s.length-1];)s=s.slice(0,s.length-1);this.serverUrl=s,this.bcChannel=s+"/"+o,this.maxBackoffTime=m,this.params=c,this.protocols=a,this.roomname=o,this.doc=n,this._WS=h,this.awareness=l,this.wsconnected=!1,this.wsconnecting=!1,this.bcconnected=!1,this.disableBc=f,this.wsUnsuccessfulReconnects=0,this.messageHandlers=ct.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=u();t(e,0),et(e,n),this.ws.send(i(e))}}),d)),this._bcSubscriber=(t,e)=>{if(e!==this){const e=ht(this,new Uint8Array(t),!1);A(e)>1&&tt(this.bcChannel,i(e),this)}},this._updateHandler=(s,o)=>{if(o!==this){const o=u();t(o,0),((s,i)=>{t(s,2),e(s,i)})(o,s),mt(this,i(o))}},this.doc.on("update",this._updateHandler),this._awarenessUpdateHandler=({added:s,updated:o,removed:n})=>{const r=s.concat(o).concat(n),c=u();t(c,1),e(c,lt(l,r)),mt(this,i(c))},this._exitHandler=()=>{rt(this.awareness,[n.clientID],"app closed")},O&&"undefined"!=typeof process&&process.on("exit",this._exitHandler),l.on("update",this._awarenessUpdateHandler),this._checkInterval=setInterval((()=>{this.wsconnected&&3e4<T()-this.wsLastMessageReceived&&dt(this,this.ws,null)}),3e3),r&&this.connect()}get url(){const t=(()=>U(this.params,((t,e)=>`${encodeURIComponent(e)}=${encodeURIComponent(t)}`)).join("&"))();return this.serverUrl+"/"+this.roomname+(0===t.length?"":"?"+t)}get synced(){return this._synced}set synced(t){this._synced!==t&&(this._synced=t,this.emit("synced",[t]),this.emit("sync",[t]))}destroy(){0!==this._resyncInterval&&clearInterval(this._resyncInterval),clearInterval(this._checkInterval),this.disconnect(),O&&"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||(((t,e)=>{Z(this.bcChannel).subs.add(e)})(0,this._bcSubscriber),this.bcconnected=!0);const s=u();t(s,0),et(s,this.doc),tt(this.bcChannel,i(s),this);const o=u();t(o,0),st(o,this.doc),tt(this.bcChannel,i(o),this);const n=u();t(n,3),tt(this.bcChannel,i(n),this);const r=u();t(r,1),e(r,lt(this.awareness,[this.doc.clientID])),tt(this.bcChannel,i(r),this)}disconnectBc(){const s=u();t(s,1),e(s,lt(this.awareness,[this.doc.clientID],new Map)),mt(this,i(s)),this.bcconnected&&(((t,e)=>{const s=Z(t);s.subs.delete(e)&&0===s.subs.size&&(s.bc.close(),q.delete(t))})(this.bcChannel,this._bcSubscriber),this.bcconnected=!1)}disconnect(){this.shouldConnect=!1,this.disconnectBc(),null!==this.ws&&dt(this,this.ws,null)}connect(){this.shouldConnect=!0,this.wsconnected||null!==this.ws||(ut(this),this.connectBc())}}class pt{provider;isConnected=!1;constructor(t,e,s){const i=s?.url||"ws://localhost:1234",o=s?.roomName||t;this.provider=new ft(i,o,e,{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(t){return{create:(e,s)=>new pt(e,s,t)}}setupEventListeners(){this.provider.on("status",(({status:t})=>{"connected"===t?(this.isConnected=!0,console.info("WebSocket connected")):"disconnected"===t&&(this.isConnected=!1,console.info("WebSocket disconnected"))})),this.provider.on("sync",(t=>{t&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("WebSocket connection timeout"))}),1e4),i=({status:e})=>{"connected"===e&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())};this.provider.on("status",i),this.provider.wsconnected&&(clearTimeout(s),this.provider.off("status",i),this.isConnected=!0,t())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}class zt{provider;isConnected=!1;isSynced=!1;usesSharedSocket=!1;static sharedWebSocketProvider=null;constructor(t,e,s){const i=s?.name||t,o=s?.url||"ws://localhost:1234",n=s?.websocketProvider||zt.sharedWebSocketProvider;if(n){this.usesSharedSocket=!0;const t={websocketProvider:n,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),this.provider=new R(t),this.provider.attach(),s?.quiet||console.info("Hocuspocus Provider initialized (multiplexed): "+i)}else{this.usesSharedSocket=!1;const t={url:o,name:i,document:e,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&&(t.forceSyncInterval=s.forceSyncInterval),s?.onAuthenticationFailed&&(t.onAuthenticationFailed=s.onAuthenticationFailed),s?.onStatus&&(t.onStatus=s.onStatus),s?.WebSocketPolyfill&&(t.WebSocketPolyfill=s.WebSocketPolyfill),this.provider=new R(t),s?.quiet||console.info(`Hocuspocus Provider initialized: ${o}/${i}`)}}static createSharedWebSocket(t){if(zt.sharedWebSocketProvider)return console.warn("Shared WebSocket already exists. Returning existing instance."),zt.sharedWebSocketProvider;const e={url:t.url};return t.WebSocketPolyfill&&(e.WebSocketPolyfill=t.WebSocketPolyfill),t.onConnect&&(e.onConnect=t.onConnect),t.onDisconnect&&(e.onDisconnect=t.onDisconnect),t.onStatus&&(e.onStatus=t.onStatus),zt.sharedWebSocketProvider=new X(e),console.info("Shared Hocuspocus WebSocket created: "+t.url),zt.sharedWebSocketProvider}static destroySharedWebSocket(){zt.sharedWebSocketProvider&&(zt.sharedWebSocketProvider.destroy(),zt.sharedWebSocketProvider=null,console.info("Shared Hocuspocus WebSocket destroyed"))}static getSharedWebSocket(){return zt.sharedWebSocketProvider}static with(t){return{create:(e,s)=>new zt(e,s,t)}}async connect(){if(!this.isSynced)return new Promise(((t,e)=>{const s=setTimeout((()=>{e(Error("Hocuspocus connection timeout"))}),1e4),i=()=>{clearTimeout(s),this.provider.off("synced",i),t()};if(this.provider.on("synced",i),this.provider.isSynced)return clearTimeout(s),this.provider.off("synced",i),void t();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{Y as BroadcastSyncProvider,zt as HocuspocusSyncProvider,pt as WebSocketSyncProvider}

package/dist/components/kritzel-controls.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-B7Fdo5QJ.js";const p=o,r=s;export{p as KritzelControls,r as defineCustomElement}
+import{K as o,d as s}from"./p-D4n7UbGY.js";const p=o,r=s;export{p as KritzelControls,r 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 a,t as i}from"./p-Bj_Og27M.js";import{K as r,d as n}from"./p-DTezr6w9.js";import{S as c,R as l,T as p,M as f,G as d,I as m,U as k,J as h,V as b}from"./p-D3LRBk2t.js";import{b as u,c as g,d as y}from"./p-Cp15toXH.js";import{K as z}from"./p-n789Y3S-.js";import{K as j}from"./p-l10It7Nm.js";import{d as C}from"./p-CXzfYQ_u.js";import{d as w}from"./p-Du1vxHy8.js";import{d as E}from"./p-IAqZFssU.js";import{d as x}from"./p-CeKT_dTd.js";import{d as I}from"./p-C3UriJh7.js";import{d as R}from"./p-B7Fdo5QJ.js";import{d as O}from"./p-D1tfzpy8.js";import{d as v}from"./p-g0N9j_uT.js";import{d as W}from"./p-C4krHoUl.js";import{d as S}from"./p-C-d2IH4v.js";import{d as F}from"./p-BXaWhpO2.js";import{d as M,a as V}from"./p-1z-ds26_.js";import{d as D}from"./p-Cy77SpWt.js";import{d as T}from"./p-D5ZsALCP.js";import{d as A}from"./p-CF5L2Gdl.js";import{d as B}from"./p-BtuXeItZ.js";import{d as U}from"./p-DB5s1NY4.js";import{d as P}from"./p-4FEa4ADy.js";const K={type:"pen",color:"#000000",size:16,palettes:{pen:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"],highlighter:["#0000006e","#ff52526e","#ffbb006e","#00c8536e","#0000FF6e","#d500f96e","#fafafa6e","#a527146e","#ee81006e","#558b2f6e","#01579b6e","#8e24aa6e","#90a4ae6e","#ff40816e","#ff6e406e","#aeea006e","#304ffe6e","#7c4dff6e","#cfd8dc6e","#f8bbd06e","#ffccbc6e","#f0f4c36e","#9fa8da6e","#d1c4e96e"]}},Y={color:"#000000",size:8,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"]},_={color:"#000000",size:4,palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#b3e5fc","#e1bee7"],arrows:{end:{enabled:!0,style:"triangle"}}},G={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae"]},H=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")}get host(){return this}scaleMax=l;scaleMin=p;controls=[{name:"selection",type:"tool",isDefault:!0,tool:f,icon:"cursor"},{name:"brush",type:"tool",tool:u,icon:"pen",config:K},{name:"line",type:"tool",tool:d,icon:"arrow",config:_},{name:"eraser",type:"tool",tool:m,icon:"eraser"},{name:"text",type:"tool",tool:g,icon:"type",config:Y},{name:"shape",type:"tool",tool:k,icon:"shape-rectangle",config:G,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:h,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;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;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)}}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 createWorkspace(e,t){const s=new z("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;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}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}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))r.register(e,t)}listenForMobileKeyboard(){y.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(j.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-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-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(a,{key:"dd67bea86f807f0ccd5905183e73713a015d6bee"},o("kritzel-workspace-manager",{key:"557edc7e3a131d338be6df91698ba6923e7bc50e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-engine",{key:"98969d0f2bb5a9a365885fb4765e0c04c1394caa",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,scaleMin:this.scaleMin,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)}),o("kritzel-controls",{key:"6092f393562af07643622c07d432f6100497aaf0",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,onIsControlsReady:()=>this.isControlsReady=!0}))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange: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{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}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%))}"}},[512,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),L=H,X=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-control-brush-config","kritzel-control-text-config","kritzel-controls","kritzel-cursor-trail","kritzel-dropdown","kritzel-engine","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button","kritzel-stroke-size","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(i(e))||customElements.define(i(e),H);break;case"kritzel-color":customElements.get(i(e))||C();break;case"kritzel-color-palette":customElements.get(i(e))||w();break;case"kritzel-context-menu":customElements.get(i(e))||E();break;case"kritzel-control-brush-config":customElements.get(i(e))||x();break;case"kritzel-control-text-config":customElements.get(i(e))||I();break;case"kritzel-controls":customElements.get(i(e))||R();break;case"kritzel-cursor-trail":customElements.get(i(e))||O();break;case"kritzel-dropdown":customElements.get(i(e))||v();break;case"kritzel-engine":customElements.get(i(e))||b();break;case"kritzel-font":customElements.get(i(e))||W();break;case"kritzel-font-family":customElements.get(i(e))||S();break;case"kritzel-font-size":customElements.get(i(e))||F();break;case"kritzel-icon":customElements.get(i(e))||n();break;case"kritzel-menu":customElements.get(i(e))||V();break;case"kritzel-menu-item":customElements.get(i(e))||M();break;case"kritzel-portal":customElements.get(i(e))||D();break;case"kritzel-split-button":customElements.get(i(e))||T();break;case"kritzel-stroke-size":customElements.get(i(e))||A();break;case"kritzel-tooltip":customElements.get(i(e))||B();break;case"kritzel-utility-panel":customElements.get(i(e))||U();break;case"kritzel-workspace-manager":customElements.get(i(e))||P()}}))};export{K as D,L as KritzelEditor,Y as a,_ as b,X as defineCustomElement}
+import{p as e,H as t,c as s,h as o,d as a,t as i}from"./p-Bj_Og27M.js";import{K as r,d as n}from"./p-DTezr6w9.js";import{S as c,R as l,T as p,M as f,G as d,I as m,U as k,J as h,V as b}from"./p-exWKDgI8.js";import{b as u,c as g,d as y}from"./p-Cp15toXH.js";import{K as z}from"./p-n789Y3S-.js";import{K as j}from"./p-l10It7Nm.js";import{d as C}from"./p-CXzfYQ_u.js";import{d as w}from"./p-Du1vxHy8.js";import{d as E}from"./p-IAqZFssU.js";import{d as x}from"./p-CeKT_dTd.js";import{d as I}from"./p-C3UriJh7.js";import{d as R}from"./p-D4n7UbGY.js";import{d as O}from"./p-D1tfzpy8.js";import{d as W}from"./p-g0N9j_uT.js";import{d as v}from"./p-C4krHoUl.js";import{d as S}from"./p-C-d2IH4v.js";import{d as F}from"./p-BXaWhpO2.js";import{d as M,a as V}from"./p-1z-ds26_.js";import{d as D}from"./p-Cy77SpWt.js";import{d as T}from"./p-D5ZsALCP.js";import{d as A}from"./p-CF5L2Gdl.js";import{d as U}from"./p-BtuXeItZ.js";import{d as K}from"./p-XGgKC_Fe.js";import{d as P}from"./p-4FEa4ADy.js";const B={type:"pen",color:"#000000",size:16,palettes:{pen:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"],highlighter:["#0000006e","#ff52526e","#ffbb006e","#00c8536e","#0000FF6e","#d500f96e","#fafafa6e","#a527146e","#ee81006e","#558b2f6e","#01579b6e","#8e24aa6e","#90a4ae6e","#ff40816e","#ff6e406e","#aeea006e","#304ffe6e","#7c4dff6e","#cfd8dc6e","#f8bbd06e","#ffccbc6e","#f0f4c36e","#9fa8da6e","#d1c4e96e"]}},G={color:"#000000",size:8,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#9fa8da","#d1c4e9"]},_={color:"#000000",size:4,palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae","#ff4081","#ff6e40","#aeea00","#304ffe","#7c4dff","#cfd8dc","#f8bbd0","#ffccbc","#f0f4c3","#b3e5fc","#e1bee7"],arrows:{end:{enabled:!0,style:"triangle"}}},X={shapeType:c.Rectangle,fillColor:"transparent",strokeColor:"#000000",strokeWidth:4,fontColor:"#000000",fontSize:16,fontFamily:"Arial",palette:["#000000","#ff5252","#ffbc00","#00c853","#0000FF","#d500f9","#fafafa","#a52714","#ee8100","#558b2f","#01579b","#8e24aa","#90a4ae"]},Y=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")}get host(){return this}scaleMax=l;scaleMin=p;controls=[{name:"selection",type:"tool",isDefault:!0,tool:f,icon:"cursor"},{name:"brush",type:"tool",tool:u,icon:"pen",config:B},{name:"line",type:"tool",tool:d,icon:"arrow",config:_},{name:"eraser",type:"tool",tool:m,icon:"eraser"},{name:"text",type:"tool",tool:g,icon:"type",config:G},{name:"shape",type:"tool",tool:k,icon:"shape-rectangle",config:X,subOptions:[{id:"rectangle",icon:"shape-rectangle",label:"Rectangle",value:c.Rectangle,toolProperty:"shapeType"},{id:"ellipse",icon:"shape-ellipse",label:"Ellipse",value:c.Ellipse,toolProperty:"shapeType"},{id:"triangle",icon:"shape-triangle",label:"Triangle",value:c.Triangle,toolProperty:"shapeType"}]},{name:"image",type:"tool",tool:h,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;isEngineReady=!1;isControlsReady=!1;isWorkspaceManagerReady=!1;workspaces=[];activeWorkspace;isVirtualKeyboardOpen=!1;undoState=null;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)}}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 createWorkspace(e,t){const s=new z("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;splitButtonRef;componentDidLoad(){this.registerCustomSvgIcons(),this.listenForMobileKeyboard(),this.setOsSpecificCssVariables()}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}registerCustomSvgIcons(){for(const[e,t]of Object.entries(this.customSvgIcons))r.register(e,t)}listenForMobileKeyboard(){y.onKeyboardVisibleChanged((e=>{this.isVirtualKeyboardOpen=e}))}setOsSpecificCssVariables(){switch(j.detectOS()){case"iOS":this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-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-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","24px");break;default:this.host.style.setProperty("--kritzel-editor-workspace-manager-top","14px"),this.host.style.setProperty("--kritzel-editor-workspace-manager-left","14px"),this.host.style.setProperty("--kritzel-editor-controls-bottom","14px")}}render(){return o(a,{key:"dd67bea86f807f0ccd5905183e73713a015d6bee"},o("kritzel-workspace-manager",{key:"557edc7e3a131d338be6df91698ba6923e7bc50e",workspaces:this.workspaces,activeWorkspace:this.activeWorkspace,onWorkspaceChange:e=>this.activeWorkspace=e.detail,onIsWorkspaceManagerReady:()=>this.isWorkspaceManagerReady=!0}),o("kritzel-engine",{key:"98969d0f2bb5a9a365885fb4765e0c04c1394caa",ref:e=>this.engineRef=e,workspace:this.activeWorkspace,syncConfig:this.syncConfig,scaleMax:this.scaleMax,scaleMin:this.scaleMin,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)}),o("kritzel-controls",{key:"6092f393562af07643622c07d432f6100497aaf0",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,onIsControlsReady:()=>this.isControlsReady=!0}))}static get watchers(){return{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange: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{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}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%))}"}},[512,"kritzel-editor",{scaleMax:[2,"scale-max"],scaleMin:[2,"scale-min"],controls:[16],globalContextMenuItems:[16],objectContextMenuItems:[16],customSvgIcons:[16],isControlsVisible:[4,"is-controls-visible"],isUtilityPanelVisible:[4,"is-utility-panel-visible"],syncConfig:[16],isEngineReady:[32],isControlsReady:[32],isWorkspaceManagerReady:[32],workspaces:[32],activeWorkspace:[32],isVirtualKeyboardOpen:[32],undoState:[32],getObjectById:[64],addObject:[64],updateObject:[64],removeObject:[64],getSelectedObjects:[64],selectObjects:[64],selectAllObjectsInViewport:[64],clearSelection:[64],centerObjectInViewport:[64],createWorkspace:[64],updateWorkspace:[64],deleteWorkspace:[64],getWorkspaces:[64],getActiveWorkspace:[64]},[[0,"dblclick","onTouchStart"]],{isEngineReady:[{onIsEngineReady:0}],isControlsReady:[{onIsControlsReady:0}],workspaces:[{onWorkspacesChange:0}]}]),H=Y,L=function(){"undefined"!=typeof customElements&&["kritzel-editor","kritzel-color","kritzel-color-palette","kritzel-context-menu","kritzel-control-brush-config","kritzel-control-text-config","kritzel-controls","kritzel-cursor-trail","kritzel-dropdown","kritzel-engine","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button","kritzel-stroke-size","kritzel-tooltip","kritzel-utility-panel","kritzel-workspace-manager"].forEach((e=>{switch(e){case"kritzel-editor":customElements.get(i(e))||customElements.define(i(e),Y);break;case"kritzel-color":customElements.get(i(e))||C();break;case"kritzel-color-palette":customElements.get(i(e))||w();break;case"kritzel-context-menu":customElements.get(i(e))||E();break;case"kritzel-control-brush-config":customElements.get(i(e))||x();break;case"kritzel-control-text-config":customElements.get(i(e))||I();break;case"kritzel-controls":customElements.get(i(e))||R();break;case"kritzel-cursor-trail":customElements.get(i(e))||O();break;case"kritzel-dropdown":customElements.get(i(e))||W();break;case"kritzel-engine":customElements.get(i(e))||b();break;case"kritzel-font":customElements.get(i(e))||v();break;case"kritzel-font-family":customElements.get(i(e))||S();break;case"kritzel-font-size":customElements.get(i(e))||F();break;case"kritzel-icon":customElements.get(i(e))||n();break;case"kritzel-menu":customElements.get(i(e))||V();break;case"kritzel-menu-item":customElements.get(i(e))||M();break;case"kritzel-portal":customElements.get(i(e))||D();break;case"kritzel-split-button":customElements.get(i(e))||T();break;case"kritzel-stroke-size":customElements.get(i(e))||A();break;case"kritzel-tooltip":customElements.get(i(e))||U();break;case"kritzel-utility-panel":customElements.get(i(e))||K();break;case"kritzel-workspace-manager":customElements.get(i(e))||P()}}))};export{B as D,H as KritzelEditor,G as a,_ as b,L as defineCustomElement}

package/dist/components/kritzel-engine.js

@@ -1 +1 @@
-import{W as o,V as s}from"./p-D3LRBk2t.js";const t=o,p=s;export{t as KritzelEngine,p as defineCustomElement}
+import{W as o,V as s}from"./p-exWKDgI8.js";const p=o,r=s;export{p as KritzelEngine,r as defineCustomElement}

package/dist/components/kritzel-utility-panel.js

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