kritzel-stencil 0.1.15 → 0.1.16

package/dist/cjs/{default-line-tool.config-DuwiflC4.js → default-line-tool.config-BXYWjUSM.js}

@@ -397,6 +397,13 @@ class KritzelBaseObject {
     edit(_event) {
         // This method can be overridden by subclasses to handle edit actions.
     }
+    /**
+     * Called after properties are updated via updateObject.
+     * Override in subclasses to perform custom logic when specific properties change.
+     */
+    onAfterUpdate(_changedProperties) {
+        // Default implementation does nothing
+    }
     hitTest(_x, _y) {
         return true; // Default implementation, can be overridden by subclasses
     }
@@ -14089,7 +14096,6 @@ const lightTheme = {
         dividerColor: '#e0e0e0',
         focusColor: '#007acc',
         focusRingColor: 'rgba(0, 122, 255, 0.3)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#ebebeb',
@@ -14323,7 +14329,6 @@ const darkTheme = {
         dividerColor: '#3a3a3a',
         focusColor: '#4da3ff',
         focusRingColor: 'rgba(0, 122, 255, 0.4)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 100%, 8%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#555555',
@@ -15101,6 +15106,12 @@ class KritzelPath extends KritzelBaseObject {
         const scaleY = height / this.height;
         this.width = width;
         this.height = height;
+        if (this.points.length === 1) {
+            const p = this.points[0];
+            const spreadX = Math.max(0, width - this.strokeWidth) / scaleX;
+            const spreadY = Math.max(0, height - this.strokeWidth) / scaleY;
+            this.points.push([p[0] + spreadX, p[1] + spreadY]);
+        }
         this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
         this.d = this.generateSvgPath();
         this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
@@ -15201,6 +15212,13 @@ class KritzelPath extends KritzelBaseObject {
         this._adjustedPoints = null;
         this._core.store.state.objects.update(this);
     }
+    onAfterUpdate(changedProperties) {
+        if (changedProperties.includes('strokeWidth')) {
+            this.d = this.generateSvgPath();
+            this.updateBoundingBox();
+            this._adjustedPoints = null;
+        }
+    }
     computeAdjustedPoints() {
         if (!this.points?.length) {
             return [];
@@ -15268,6 +15286,25 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX = (this.x + this.translateX) / this.scale;
         this.translateY = (this.y + this.translateY) / this.scale;
     }
+    /**
+     * Updates width, height, x, y based on current points and strokeWidth.
+     * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
+     */
+    updateBoundingBox() {
+        const rotatedPoints = this.points.map(([x, y]) => {
+            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
+            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
+            return [rotatedX, rotatedY];
+        });
+        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
+        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
+        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
+        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        this.width = maxX - minX + this.lineSlack;
+        this.height = maxY - minY + this.lineSlack;
+        this.x = minX;
+        this.y = minY;
+    }
     generateSvgPath() {
         const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
         return this.getSvgPathFromStroke(stroke);
@@ -17454,12 +17491,11 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();
@@ -17492,12 +17528,11 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();
@@ -17548,7 +17583,7 @@ KritzelIconRegistry.registerIcons({
     'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
     'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
     'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
-    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
+    'chevron-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
     'chevron-right': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>',
     'chevrons-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>',
     'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-DuwiflC4.js');
+var defaultLineTool_config = require('./default-line-tool.config-BXYWjUSM.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-i21-qqbc.js');
-var defaultLineTool_config = require('./default-line-tool.config-DuwiflC4.js');
+var defaultLineTool_config = require('./default-line-tool.config-BXYWjUSM.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -20209,12 +20209,12 @@ class KritzelCursorManager {
         // Reset cursor on old target
         if (this._targetElement) {
             this._targetElement.style.cursor = '';
-            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+            this._targetElement.style.removeProperty('--kritzel-global-pointer-cursor');
         }
         this._targetElement = element;
         // Set the pointer cursor CSS variable for child components to use
         if (this._targetElement) {
-            this._targetElement.style.setProperty('--kritzel-pointer-cursor', defaultLineTool_config.KritzelCursorHelper.getPointerCursor());
+            this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', defaultLineTool_config.KritzelCursorHelper.getPointerCursor());
         }
     }
     /**
@@ -20525,11 +20525,14 @@ class KritzelCore {
         this._store.state.objects.remove(o => o.id === object.id);
     }
     updateObject(object, updatedProperties) {
+        const changedKeys = [];
         for (const key in updatedProperties) {
             if (updatedProperties.hasOwnProperty(key)) {
                 object[key] = updatedProperties[key];
+                changedKeys.push(key);
             }
         }
+        object.onAfterUpdate(changedKeys);
         this._store.state.objects.update(object);
     }
     addSelectionGroup(selectionGroup) {
@@ -22586,8 +22589,10 @@ const KritzelEngine = class {
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'round',
                     fill: 'none',
-                } })), !this.isSelecting && (index.h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, index.h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } })), !this.isSelecting && (index.h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, index.h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), index.h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
@@ -22596,8 +22601,10 @@ const KritzelEngine = class {
                     ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
                     : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
                     ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), index.h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined
                     ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
@@ -22606,8 +22613,10 @@ const KritzelEngine = class {
                     : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), index.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',
@@ -22686,7 +22695,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '951133ef09893b3ab59a27ad0e4bc6c0d371ef28', 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 && (index.h("kritzel-context-menu", { key: 'a2860f9b1ccfa0183324939b7c11987e6aaaa168', 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`,
@@ -22697,7 +22706,7 @@ const KritzelEngine = class {
                     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 defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'aa44b379924d80b8e3413e240a7b3f184a332875', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof defaultLineTool_config.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '20dc66627a01cb9840807b3fe9d96be8599a48f8', core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -23708,7 +23717,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.15';
+const KRITZEL_VERSION = '0.1.16';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 
@@ -24123,7 +24132,7 @@ const KritzelToolConfig = class {
     handlePropertyChange = (propertyName, value) => {
         // Special handling for shape fill
         if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
-            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : 'transparent';
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : { light: 'transparent', dark: 'transparent' };
             this.tool.fillColor = newFillColor;
             // When switching to fill mode, also update stroke color to match
             if (value === 'filled') {
@@ -24142,7 +24151,9 @@ const KritzelToolConfig = class {
     };
     getShapeFillValue() {
         const fillColor = this.tool.fillColor;
-        return fillColor === 'transparent' ? 'transparent' : 'filled';
+        const isTransparent = typeof fillColor === 'string' ? fillColor === 'transparent' :
+            (fillColor.light === 'transparent' && fillColor.dark === 'transparent');
+        return isTransparent ? 'transparent' : 'filled';
     }
     renderControl(control) {
         const value = this.tool[control.propertyName];

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

@@ -232,11 +232,14 @@ export class KritzelCore {
         this._store.state.objects.remove(o => o.id === object.id);
     }
     updateObject(object, updatedProperties) {
+        const changedKeys = [];
         for (const key in updatedProperties) {
             if (updatedProperties.hasOwnProperty(key)) {
                 object[key] = updatedProperties[key];
+                changedKeys.push(key);
             }
         }
+        object.onAfterUpdate(changedKeys);
         this._store.state.objects.update(object);
     }
     addSelectionGroup(selectionGroup) {

package/dist/collection/classes/managers/cursor.manager.js

@@ -18,12 +18,12 @@ export class KritzelCursorManager {
         // Reset cursor on old target
         if (this._targetElement) {
             this._targetElement.style.cursor = '';
-            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+            this._targetElement.style.removeProperty('--kritzel-global-pointer-cursor');
         }
         this._targetElement = element;
         // Set the pointer cursor CSS variable for child components to use
         if (this._targetElement) {
-            this._targetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+            this._targetElement.style.setProperty('--kritzel-global-pointer-cursor', KritzelCursorHelper.getPointerCursor());
         }
     }
     /**

package/dist/collection/classes/objects/base-object.class.js

@@ -218,6 +218,13 @@ export class KritzelBaseObject {
     edit(_event) {
         // This method can be overridden by subclasses to handle edit actions.
     }
+    /**
+     * Called after properties are updated via updateObject.
+     * Override in subclasses to perform custom logic when specific properties change.
+     */
+    onAfterUpdate(_changedProperties) {
+        // Default implementation does nothing
+    }
     hitTest(_x, _y) {
         return true; // Default implementation, can be overridden by subclasses
     }

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

@@ -61,6 +61,12 @@ export class KritzelPath extends KritzelBaseObject {
         const scaleY = height / this.height;
         this.width = width;
         this.height = height;
+        if (this.points.length === 1) {
+            const p = this.points[0];
+            const spreadX = Math.max(0, width - this.strokeWidth) / scaleX;
+            const spreadY = Math.max(0, height - this.strokeWidth) / scaleY;
+            this.points.push([p[0] + spreadX, p[1] + spreadY]);
+        }
         this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
         this.d = this.generateSvgPath();
         this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
@@ -161,6 +167,13 @@ export class KritzelPath extends KritzelBaseObject {
         this._adjustedPoints = null;
         this._core.store.state.objects.update(this);
     }
+    onAfterUpdate(changedProperties) {
+        if (changedProperties.includes('strokeWidth')) {
+            this.d = this.generateSvgPath();
+            this.updateBoundingBox();
+            this._adjustedPoints = null;
+        }
+    }
     computeAdjustedPoints() {
         if (!this.points?.length) {
             return [];
@@ -228,6 +241,25 @@ export class KritzelPath extends KritzelBaseObject {
         this.translateX = (this.x + this.translateX) / this.scale;
         this.translateY = (this.y + this.translateY) / this.scale;
     }
+    /**
+     * Updates width, height, x, y based on current points and strokeWidth.
+     * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
+     */
+    updateBoundingBox() {
+        const rotatedPoints = this.points.map(([x, y]) => {
+            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
+            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
+            return [rotatedX, rotatedY];
+        });
+        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
+        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
+        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
+        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        this.width = maxX - minX + this.lineSlack;
+        this.height = maxY - minY + this.lineSlack;
+        this.x = minX;
+        this.y = minY;
+    }
     generateSvgPath() {
         const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
         return this.getSvgPathFromStroke(stroke);

package/dist/collection/classes/registries/icon-registry.class.js

@@ -34,7 +34,7 @@ KritzelIconRegistry.registerIcons({
     'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
     'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
     'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
-    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
+    'chevron-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
     'chevron-right': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>',
     'chevrons-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>',
     'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',

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

@@ -42,12 +42,11 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();
@@ -80,12 +79,11 @@ export class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();

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

@@ -677,8 +677,10 @@ export class KritzelEngine {
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'round',
                     fill: 'none',
-                } })), !this.isSelecting && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } })), !this.isSelecting && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
@@ -687,8 +689,10 @@ export class KritzelEngine {
                     ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
                     : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
                     ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined
                     ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
@@ -697,8 +701,10 @@ export class KritzelEngine {
                     : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
+                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                     paintOrder: 'fill',
                 } }), 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',
@@ -777,7 +783,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '951133ef09893b3ab59a27ad0e4bc6c0d371ef28', 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: 'a2860f9b1ccfa0183324939b7c11987e6aaaa168', 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`,
@@ -788,7 +794,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: 'aa44b379924d80b8e3413e240a7b3f184a332875', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '20dc66627a01cb9840807b3fe9d96be8599a48f8', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,7 +120,7 @@ export class KritzelToolConfig {
     handlePropertyChange = (propertyName, value) => {
         // Special handling for shape fill
         if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
-            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : 'transparent';
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : { light: 'transparent', dark: 'transparent' };
             this.tool.fillColor = newFillColor;
             // When switching to fill mode, also update stroke color to match
             if (value === 'filled') {
@@ -139,7 +139,9 @@ export class KritzelToolConfig {
     };
     getShapeFillValue() {
         const fillColor = this.tool.fillColor;
-        return fillColor === 'transparent' ? 'transparent' : 'filled';
+        const isTransparent = typeof fillColor === 'string' ? fillColor === 'transparent' :
+            (fillColor.light === 'transparent' && fillColor.dark === 'transparent');
+        return isTransparent ? 'transparent' : 'filled';
     }
     renderControl(control) {
         const value = this.tool[control.propertyName];

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.15';
+export const KRITZEL_VERSION = '0.1.16';

package/dist/collection/themes/dark-theme.js

@@ -8,7 +8,6 @@ export const darkTheme = {
         dividerColor: '#3a3a3a',
         focusColor: '#4da3ff',
         focusRingColor: 'rgba(0, 122, 255, 0.4)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 100%, 8%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#555555',

package/dist/collection/themes/light-theme.js

@@ -8,7 +8,6 @@ export const lightTheme = {
         dividerColor: '#e0e0e0',
         focusColor: '#007acc',
         focusRingColor: 'rgba(0, 122, 255, 0.3)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#ebebeb',

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-BqZdHh6f.js";import{w as t,a as i,t as o,r as n,b as m,e as u,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 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 A,x as L,y as O,z as N,A as _,B as $,C as R,H as Y,D as q}from"./p-NBmc8spY.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-NBmc8spY.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-D9GoermT.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 X{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=m(s);p(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const n=m(s),r=u(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 Z=new Map,Q="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,V=e=>x(Z,e,(()=>{const t=y(),s=new Q(e);return s.onmessage=e=>t.forEach((t=>t(e.data,"broadcastchannel"))),{bc:s,subs:t}})),ee=(e,t,s=null)=>{const i=V(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,u(s,o))},ie=(e,t,s,i)=>{try{p(t,m(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),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,m(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),m=e.states.get(t),u=void 0===h?0:h.clock;(u<s||u===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,m)||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,m(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(me,$(100*R(2,e.wsUnsuccessfulReconnects),e.maxBackoffTime),e))},me=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"}])}},ue=(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:m=2500,disableBc:u=!1}={}){for(super();"/"===e[e.length-1];)e=e.slice(0,e.length-1);this.serverUrl=e,this.bcChannel=e+"/"+s,this.maxBackoffTime=m,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=u,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),ue(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)),ue(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=(()=>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)=>{V(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)),ue(this,o(e)),this.bcconnected&&(((e,t)=>{const s=V(e);s.subs.delete(t)&&0===s.subs.size&&(s.bc.close(),Z.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||(me(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 Y(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 Y(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 q(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{X 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-Cuf-GvO0.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 T,o as w,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 Y,D as q}from"./p-bE-Bpn0g.js";export{I as IndexedDBSyncProvider,J as KritzelAnchorManager,G as KritzelAppStateMap,F as KritzelCursorHelper,K as KritzelEraserTool,E as KritzelImageTool}from"./p-bE-Bpn0g.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-UNc_oph8.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 X{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(){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 Y(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 Y(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 q(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{X as BroadcastSyncProvider,ze as HocuspocusSyncProvider,pe as WebSocketSyncProvider}

package/dist/components/kritzel-back-to-content.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CinNuTeF.js";const p=o,r=s;export{p as KritzelBackToContent,r as defineCustomElement}
+import{K as o,d as s}from"./p-yWjTje8m.js";const j=o,m=s;export{j as KritzelBackToContent,m as defineCustomElement}