kritzel-stencil 0.1.82 → 0.1.83

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-4HATwIMK.js');
+var workspace_migrations = require('./workspace.migrations-K5oVASsb.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CFnj_FXt.js');
-var workspace_migrations = require('./workspace.migrations-4HATwIMK.js');
+var workspace_migrations = require('./workspace.migrations-K5oVASsb.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -21354,6 +21354,12 @@ class KritzelObjectMap {
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
+    /**
+     * When true, update() only modifies local state (quadtree + idMap)
+     * without writing to Yjs. Used during drag operations to avoid
+     * redundant full serializations of every child object per frame.
+     */
+    _localOnlyMode = false;
     /**
      * Indicates whether the object map has been initialized and is ready for use.
      * @returns `true` if providers are connected and the map is operational
@@ -21907,6 +21913,25 @@ class KritzelObjectMap {
             this._ydoc.transact(callback, 'local');
         }
     }
+    /**
+     * Executes a callback where all update() calls only modify local state
+     * (quadtree + idMap) without writing to Yjs. This avoids expensive full
+     * serializations during continuous operations like dragging many objects.
+     *
+     * Objects updated inside this callback must be persisted later
+     * (e.g., via a normal update() call at drag end).
+     *
+     * @param callback - The function containing operations to execute locally
+     */
+    withLocalUpdatesOnly(callback) {
+        this._localOnlyMode = true;
+        try {
+            callback();
+        }
+        finally {
+            this._localOnlyMode = false;
+        }
+    }
     /**
      * Loads all objects from the Yjs objects map into the local quadtree.
      * Clears the existing quadtree and repopulates it by deserializing each
@@ -21998,7 +22023,7 @@ class KritzelObjectMap {
         }
         this.quadtree.update(object);
         this._idMap.set(object.id, object);
-        if (this._objectsMap && this.isPersistable(object)) {
+        if (!this._localOnlyMode && this._objectsMap && this.isPersistable(object)) {
             const serialized = object.serialize();
             const origin = options.temporary ? 'temporary' : 'local';
             this._ydoc?.transact(() => {
@@ -28708,7 +28733,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.82';
+const KRITZEL_VERSION = '0.1.83';
 
 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:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 

package/dist/cjs/{workspace.migrations-4HATwIMK.js → workspace.migrations-K5oVASsb.js}

@@ -18543,6 +18543,10 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     handleColor;
     handleStrokeColor;
     handleSize = 6;
+    /** Timestamp of the last Yjs persist for children during a drag */
+    _lastChildPersistTime = 0;
+    /** Minimum interval (ms) between child Yjs persists during drag */
+    static CHILD_PERSIST_THROTTLE_MS = 100;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -18828,7 +18832,11 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Moves the selection group and all its contained objects by calculating the delta from drag coordinates.
      * Updates anchor points for any lines connected to the moved objects.
-     * Uses a transaction to batch all object updates for performance.
+     *
+     * Child objects are moved locally without writing to Yjs during the drag to avoid
+     * N+1 full serializations per frame, which can overwhelm the WebSocket server.
+     * Children must be persisted at drag end via {@link persistChildren}.
+     *
      * @param startX - The starting x-coordinate of the drag operation (in screen space)
      * @param startY - The starting y-coordinate of the drag operation (in screen space)
      * @param endX - The ending x-coordinate of the drag operation (in screen space)
@@ -18839,21 +18847,51 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.objects.transaction(() => {
+        const now = Date.now();
+        const shouldPersistChildren = now - this._lastChildPersistTime >= KritzelSelectionGroup.CHILD_PERSIST_THROTTLE_MS;
+        if (shouldPersistChildren) {
+            // Periodically persist children to Yjs so remote peers see movement in real-time
+            this._core.store.objects.transaction(() => {
+                this._core.store.objects.update(this);
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+            this._lastChildPersistTime = now;
+        }
+        else {
+            // Between throttle intervals, only persist the selection group itself.
+            // Children are moved locally for smooth local rendering.
             this._core.store.objects.update(this);
-            const children = this.objects;
-            for (const obj of children) {
-                obj.move(startX, startY, endX, endY);
-                // Update any lines that are anchored to this object
-                this._core.anchorManager.updateAnchorsForObject(obj.id);
-            }
-        });
+            this._core.store.objects.withLocalUpdatesOnly(() => {
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+        }
         // Update snapshots
         this.unchangedObjectSnapshots.forEach(snapshot => {
             snapshot.translateX += deltaX;
             snapshot.translateY += deltaY;
         });
     }
+    /**
+     * Persists all child objects to Yjs in a single transaction.
+     * Must be called after a drag operation completes to sync the final
+     * positions of children that were only updated locally during the drag.
+     */
+    persistChildren() {
+        this._core.store.objects.transaction(() => {
+            const children = this.objects;
+            for (const obj of children) {
+                this._core.store.objects.update(obj);
+            }
+        });
+    }
     /**
      * Resizes the selection group and scales all contained objects proportionally.
      * Uses snapshot values to avoid compounding errors during continuous drag operations.
@@ -20367,6 +20405,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;
@@ -20377,6 +20416,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;

package/dist/collection/classes/handlers/move.handler.js

@@ -210,6 +210,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;
@@ -220,6 +221,7 @@ export class KritzelMoveHandler extends KritzelBaseHandler {
             if (this._core.store.state.isDragging) {
                 this._core.store.state.isDragging = false;
                 if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
                     this._core.store.selectionGroup.update();
                     this._core.engine.emitObjectsChange();
                     this._core.store.state.hasObjectsChanged = true;

package/dist/collection/classes/objects/selection-group.class.js

@@ -29,6 +29,10 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     handleColor;
     handleStrokeColor;
     handleSize = 6;
+    /** Timestamp of the last Yjs persist for children during a drag */
+    _lastChildPersistTime = 0;
+    /** Minimum interval (ms) between child Yjs persists during drag */
+    static CHILD_PERSIST_THROTTLE_MS = 100;
     /**
      * Gets the array of object IDs contained in this selection group.
      * @returns Array of string IDs for the selected objects
@@ -314,7 +318,11 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Moves the selection group and all its contained objects by calculating the delta from drag coordinates.
      * Updates anchor points for any lines connected to the moved objects.
-     * Uses a transaction to batch all object updates for performance.
+     *
+     * Child objects are moved locally without writing to Yjs during the drag to avoid
+     * N+1 full serializations per frame, which can overwhelm the WebSocket server.
+     * Children must be persisted at drag end via {@link persistChildren}.
+     *
      * @param startX - The starting x-coordinate of the drag operation (in screen space)
      * @param startY - The starting y-coordinate of the drag operation (in screen space)
      * @param endX - The ending x-coordinate of the drag operation (in screen space)
@@ -325,21 +333,51 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const deltaY = (startY - endY) / this._core.store.state.scale;
         this.translateX += deltaX;
         this.translateY += deltaY;
-        this._core.store.objects.transaction(() => {
+        const now = Date.now();
+        const shouldPersistChildren = now - this._lastChildPersistTime >= KritzelSelectionGroup.CHILD_PERSIST_THROTTLE_MS;
+        if (shouldPersistChildren) {
+            // Periodically persist children to Yjs so remote peers see movement in real-time
+            this._core.store.objects.transaction(() => {
+                this._core.store.objects.update(this);
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+            this._lastChildPersistTime = now;
+        }
+        else {
+            // Between throttle intervals, only persist the selection group itself.
+            // Children are moved locally for smooth local rendering.
             this._core.store.objects.update(this);
-            const children = this.objects;
-            for (const obj of children) {
-                obj.move(startX, startY, endX, endY);
-                // Update any lines that are anchored to this object
-                this._core.anchorManager.updateAnchorsForObject(obj.id);
-            }
-        });
+            this._core.store.objects.withLocalUpdatesOnly(() => {
+                const children = this.objects;
+                for (const obj of children) {
+                    obj.move(startX, startY, endX, endY);
+                    this._core.anchorManager.updateAnchorsForObject(obj.id);
+                }
+            });
+        }
         // Update snapshots
         this.unchangedObjectSnapshots.forEach(snapshot => {
             snapshot.translateX += deltaX;
             snapshot.translateY += deltaY;
         });
     }
+    /**
+     * Persists all child objects to Yjs in a single transaction.
+     * Must be called after a drag operation completes to sync the final
+     * positions of children that were only updated locally during the drag.
+     */
+    persistChildren() {
+        this._core.store.objects.transaction(() => {
+            const children = this.objects;
+            for (const obj of children) {
+                this._core.store.objects.update(obj);
+            }
+        });
+    }
     /**
      * Resizes the selection group and scales all contained objects proportionally.
      * Uses snapshot values to avoid compounding errors during continuous drag operations.

package/dist/collection/classes/structures/object-map.structure.js

@@ -38,6 +38,12 @@ export class KritzelObjectMap {
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
+    /**
+     * When true, update() only modifies local state (quadtree + idMap)
+     * without writing to Yjs. Used during drag operations to avoid
+     * redundant full serializations of every child object per frame.
+     */
+    _localOnlyMode = false;
     /**
      * Indicates whether the object map has been initialized and is ready for use.
      * @returns `true` if providers are connected and the map is operational
@@ -591,6 +597,25 @@ export class KritzelObjectMap {
             this._ydoc.transact(callback, 'local');
         }
     }
+    /**
+     * Executes a callback where all update() calls only modify local state
+     * (quadtree + idMap) without writing to Yjs. This avoids expensive full
+     * serializations during continuous operations like dragging many objects.
+     *
+     * Objects updated inside this callback must be persisted later
+     * (e.g., via a normal update() call at drag end).
+     *
+     * @param callback - The function containing operations to execute locally
+     */
+    withLocalUpdatesOnly(callback) {
+        this._localOnlyMode = true;
+        try {
+            callback();
+        }
+        finally {
+            this._localOnlyMode = false;
+        }
+    }
     /**
      * Loads all objects from the Yjs objects map into the local quadtree.
      * Clears the existing quadtree and repopulates it by deserializing each
@@ -682,7 +707,7 @@ export class KritzelObjectMap {
         }
         this.quadtree.update(object);
         this._idMap.set(object.id, object);
-        if (this._objectsMap && this.isPersistable(object)) {
+        if (!this._localOnlyMode && this._objectsMap && this.isPersistable(object)) {
             const serialized = object.serialize();
             const origin = options.temporary ? 'temporary' : 'local';
             this._ydoc?.transact(() => {

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

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-BWj1eE2b.js";export{d as KritzelBrushTool,b as KritzelGroup,a as KritzelImage,e as KritzelLineTool,h as KritzelSelectionTool,c as KritzelShape,g as KritzelShapeTool,K as KritzelText,f as KritzelTextTool,S as ShapeType}from"./p-BPQOTise.js";export{a as KritzelLine,K as KritzelPath}from"./p-DQK_4lkI.js";export{A as APP_STATE_MIGRATIONS,I as IndexedDBSyncProvider,d as KritzelAlignment,c as KritzelAnchorManager,b as KritzelCursorHelper,K as KritzelEraserTool,a as KritzelImageTool,W as WORKSPACE_MIGRATIONS,r as runMigrations}from"./p-CgtykATT.js";import*as t from"yjs";import{WebsocketProvider as i}from"y-websocket";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,H as HocuspocusSyncProvider,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelWorkspace,W as WORKSPACE_EXPORT_VERSION}from"./p-DhMlShij.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-CjazGGq3.js";export{C as CURRENT_APP_STATE_SCHEMA_VERSION,a as CURRENT_WORKSPACE_SCHEMA_VERSION}from"./p-CW-VyJgK.js";export{KritzelActiveUsers,defineCustomElement as defineCustomElementKritzelActiveUsers}from"./kritzel-active-users.js";export{KritzelAvatar,defineCustomElement as defineCustomElementKritzelAvatar}from"./kritzel-avatar.js";export{KritzelAwarenessCursors,defineCustomElement as defineCustomElementKritzelAwarenessCursors}from"./kritzel-awareness-cursors.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelButton,defineCustomElement as defineCustomElementKritzelButton}from"./kritzel-button.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{KritzelCurrentUser,defineCustomElement as defineCustomElementKritzelCurrentUser}from"./kritzel-current-user.js";export{KritzelCurrentUserDialog,defineCustomElement as defineCustomElementKritzelCurrentUserDialog}from"./kritzel-current-user-dialog.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{KritzelInput,defineCustomElement as defineCustomElementKritzelInput}from"./kritzel-input.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelLoginDialog,defineCustomElement as defineCustomElementKritzelLoginDialog}from"./kritzel-login-dialog.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{KritzelPillTabs,defineCustomElement as defineCustomElementKritzelPillTabs}from"./kritzel-pill-tabs.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{KritzelShareDialog,defineCustomElement as defineCustomElementKritzelShareDialog}from"./kritzel-share-dialog.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";const o=Math.floor,n=127,m=Number.MAX_SAFE_INTEGER;class u{constructor(){this.cpos=0,this.cbuf=new Uint8Array(100),this.bufs=[]}}const z=()=>new u,E=e=>{const t=new Uint8Array((e=>{let t=e.cpos;for(let r=0;r<e.bufs.length;r++)t+=e.bufs[r].length;return t})(e));let r=0;for(let s=0;s<e.bufs.length;s++){const i=e.bufs[s];t.set(i,r),r+=i.length}return t.set(new Uint8Array(e.cbuf.buffer,0,e.cpos),r),t},p=(e,t)=>{const r=e.cbuf.length;e.cpos===r&&(e.bufs.push(e.cbuf),e.cbuf=new Uint8Array(2*r),e.cpos=0),e.cbuf[e.cpos++]=t},k=(e,t)=>{for(;t>n;)p(e,128|n&t),t=o(t/128);p(e,n&t)},x=(e,t)=>{k(e,t.byteLength),((e,t)=>{const r=e.cbuf.length,s=e.cpos,i=((e,t)=>e<t?e:t)(r-s,t.length),o=t.length-i;e.cbuf.set(t.subarray(0,i),s),e.cpos+=i,o>0&&(e.bufs.push(e.cbuf),e.cbuf=new Uint8Array(((e,t)=>e>t?e:t)(2*r,o)),e.cbuf.set(t.subarray(i)),e.cpos=o)})(e,t)},j=e=>Error(e),T=j("Unexpected end of array"),y=j("Integer out of Range");class w{constructor(e){this.arr=e,this.pos=0}}const P=e=>((e,t)=>{const r=new Uint8Array(e.arr.buffer,e.pos+e.arr.byteOffset,t);return e.pos+=t,r})(e,M(e)),M=e=>{let t=0,r=1;const s=e.arr.length;for(;e.pos<s;){const s=e.arr[e.pos++];if(t+=(s&n)*r,r*=128,s<128)return t;if(t>m)throw y}throw T};class U{type="local";doc;channel;_synced=!1;constructor(e,t,r){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),r?.quiet||console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,t)=>{if(t!==this){const t=z();k(t,0),x(t,e),this.channel.postMessage(E(t))}};handleMessage(e){const r=(e=>new w(e))(new Uint8Array(e));switch(M(r)){case 0:const e=P(r);t.applyUpdate(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const s=P(r),i=t.encodeStateAsUpdate(this.doc,s);if(i.length>0){const e=z();k(e,0),x(e,i),this.channel.postMessage(E(e))}}}broadcastSync(){const e=z();k(e,2),x(e,t.encodeStateVector(this.doc)),this.channel.postMessage(E(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}async reconnect(){return this.disconnect(),this.connect()}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}class _{type="network";provider;isConnected=!1;_quiet=!1;get awareness(){return this.provider.awareness}constructor(e,t,r){const s=r?.url||"ws://localhost:1234",o=r?.roomName||e;this.provider=new i(s,o,t,{params:r?.params,protocols:r?.protocols,WebSocketPolyfill:r?.WebSocketPolyfill,awareness:r?.awareness,maxBackoffTime:r?.maxBackoffTime,disableBc:!0}),this._quiet=r?.quiet??!1,this.setupEventListeners(),this._quiet||console.info(`WebSocket Provider initialized: ${s}/${o}`)}static with(e){return{create:(t,r,s)=>{const i=s?{...e,...s}:e;return new _(t,r,i)}}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,this._quiet||console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,this._quiet||console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&!this._quiet&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const r=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),s=({status:t})=>{"connected"===t&&(clearTimeout(r),this.provider.off("status",s),this.isConnected=!0,e())};this.provider.on("status",s),this.provider.wsconnected&&(clearTimeout(r),this.provider.off("status",s),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}async reconnect(){return this.disconnect(),this.connect()}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}export{U as BroadcastSyncProvider,_ as WebSocketSyncProvider}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-BWj1eE2b.js";export{d as KritzelBrushTool,b as KritzelGroup,a as KritzelImage,e as KritzelLineTool,h as KritzelSelectionTool,c as KritzelShape,g as KritzelShapeTool,K as KritzelText,f as KritzelTextTool,S as ShapeType}from"./p-zM6hQ55n.js";export{a as KritzelLine,K as KritzelPath}from"./p-DQK_4lkI.js";export{A as APP_STATE_MIGRATIONS,I as IndexedDBSyncProvider,d as KritzelAlignment,c as KritzelAnchorManager,b as KritzelCursorHelper,K as KritzelEraserTool,a as KritzelImageTool,W as WORKSPACE_MIGRATIONS,r as runMigrations}from"./p-CKfjz1gj.js";import*as t from"yjs";import{WebsocketProvider as i}from"y-websocket";export{D as DEFAULT_BRUSH_CONFIG,b as DEFAULT_LINE_TOOL_CONFIG,a as DEFAULT_TEXT_CONFIG,H as HocuspocusSyncProvider,KritzelEditor,defineCustomElement as defineCustomElementKritzelEditor}from"./kritzel-editor.js";export{K as KritzelWorkspace,W as WORKSPACE_EXPORT_VERSION}from"./p-DhMlShij.js";export{K as KritzelThemeManager,d as darkTheme,l as lightTheme}from"./p-CjazGGq3.js";export{C as CURRENT_APP_STATE_SCHEMA_VERSION,a as CURRENT_WORKSPACE_SCHEMA_VERSION}from"./p-CW-VyJgK.js";export{KritzelActiveUsers,defineCustomElement as defineCustomElementKritzelActiveUsers}from"./kritzel-active-users.js";export{KritzelAvatar,defineCustomElement as defineCustomElementKritzelAvatar}from"./kritzel-avatar.js";export{KritzelAwarenessCursors,defineCustomElement as defineCustomElementKritzelAwarenessCursors}from"./kritzel-awareness-cursors.js";export{KritzelBackToContent,defineCustomElement as defineCustomElementKritzelBackToContent}from"./kritzel-back-to-content.js";export{KritzelBrushStyle,defineCustomElement as defineCustomElementKritzelBrushStyle}from"./kritzel-brush-style.js";export{KritzelButton,defineCustomElement as defineCustomElementKritzelButton}from"./kritzel-button.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{KritzelCurrentUser,defineCustomElement as defineCustomElementKritzelCurrentUser}from"./kritzel-current-user.js";export{KritzelCurrentUserDialog,defineCustomElement as defineCustomElementKritzelCurrentUserDialog}from"./kritzel-current-user-dialog.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{KritzelInput,defineCustomElement as defineCustomElementKritzelInput}from"./kritzel-input.js";export{KritzelLineEndings,defineCustomElement as defineCustomElementKritzelLineEndings}from"./kritzel-line-endings.js";export{KritzelLoginDialog,defineCustomElement as defineCustomElementKritzelLoginDialog}from"./kritzel-login-dialog.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{KritzelPillTabs,defineCustomElement as defineCustomElementKritzelPillTabs}from"./kritzel-pill-tabs.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{KritzelShareDialog,defineCustomElement as defineCustomElementKritzelShareDialog}from"./kritzel-share-dialog.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";const o=Math.floor,n=127,m=Number.MAX_SAFE_INTEGER;class u{constructor(){this.cpos=0,this.cbuf=new Uint8Array(100),this.bufs=[]}}const z=()=>new u,E=e=>{const t=new Uint8Array((e=>{let t=e.cpos;for(let r=0;r<e.bufs.length;r++)t+=e.bufs[r].length;return t})(e));let r=0;for(let s=0;s<e.bufs.length;s++){const i=e.bufs[s];t.set(i,r),r+=i.length}return t.set(new Uint8Array(e.cbuf.buffer,0,e.cpos),r),t},p=(e,t)=>{const r=e.cbuf.length;e.cpos===r&&(e.bufs.push(e.cbuf),e.cbuf=new Uint8Array(2*r),e.cpos=0),e.cbuf[e.cpos++]=t},k=(e,t)=>{for(;t>n;)p(e,128|n&t),t=o(t/128);p(e,n&t)},x=(e,t)=>{k(e,t.byteLength),((e,t)=>{const r=e.cbuf.length,s=e.cpos,i=((e,t)=>e<t?e:t)(r-s,t.length),o=t.length-i;e.cbuf.set(t.subarray(0,i),s),e.cpos+=i,o>0&&(e.bufs.push(e.cbuf),e.cbuf=new Uint8Array(((e,t)=>e>t?e:t)(2*r,o)),e.cbuf.set(t.subarray(i)),e.cpos=o)})(e,t)},j=e=>Error(e),T=j("Unexpected end of array"),y=j("Integer out of Range");class w{constructor(e){this.arr=e,this.pos=0}}const P=e=>((e,t)=>{const r=new Uint8Array(e.arr.buffer,e.pos+e.arr.byteOffset,t);return e.pos+=t,r})(e,M(e)),M=e=>{let t=0,r=1;const s=e.arr.length;for(;e.pos<s;){const s=e.arr[e.pos++];if(t+=(s&n)*r,r*=128,s<128)return t;if(t>m)throw y}throw T};class U{type="local";doc;channel;_synced=!1;constructor(e,t,r){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),r?.quiet||console.info("BroadcastChannel Provider initialized: "+e)}handleDocUpdate=(e,t)=>{if(t!==this){const t=z();k(t,0),x(t,e),this.channel.postMessage(E(t))}};handleMessage(e){const r=(e=>new w(e))(new Uint8Array(e));switch(M(r)){case 0:const e=P(r);t.applyUpdate(this.doc,e,this);break;case 1:this.broadcastSync();break;case 2:const s=P(r),i=t.encodeStateAsUpdate(this.doc,s);if(i.length>0){const e=z();k(e,0),x(e,i),this.channel.postMessage(E(e))}}}broadcastSync(){const e=z();k(e,2),x(e,t.encodeStateVector(this.doc)),this.channel.postMessage(E(e))}async connect(){if(!this._synced)return new Promise((e=>{const t=()=>{this._synced?e():setTimeout(t,50)};t()}))}disconnect(){}async reconnect(){return this.disconnect(),this.connect()}destroy(){this.doc.off("update",this.handleDocUpdate),this.channel.close()}}class _{type="network";provider;isConnected=!1;_quiet=!1;get awareness(){return this.provider.awareness}constructor(e,t,r){const s=r?.url||"ws://localhost:1234",o=r?.roomName||e;this.provider=new i(s,o,t,{params:r?.params,protocols:r?.protocols,WebSocketPolyfill:r?.WebSocketPolyfill,awareness:r?.awareness,maxBackoffTime:r?.maxBackoffTime,disableBc:!0}),this._quiet=r?.quiet??!1,this.setupEventListeners(),this._quiet||console.info(`WebSocket Provider initialized: ${s}/${o}`)}static with(e){return{create:(t,r,s)=>{const i=s?{...e,...s}:e;return new _(t,r,i)}}}setupEventListeners(){this.provider.on("status",(({status:e})=>{"connected"===e?(this.isConnected=!0,this._quiet||console.info("WebSocket connected")):"disconnected"===e&&(this.isConnected=!1,this._quiet||console.info("WebSocket disconnected"))})),this.provider.on("sync",(e=>{e&&!this._quiet&&console.info("WebSocket synced")}))}async connect(){if(!this.isConnected)return new Promise(((e,t)=>{const r=setTimeout((()=>{t(Error("WebSocket connection timeout"))}),1e4),s=({status:t})=>{"connected"===t&&(clearTimeout(r),this.provider.off("status",s),this.isConnected=!0,e())};this.provider.on("status",s),this.provider.wsconnected&&(clearTimeout(r),this.provider.off("status",s),this.isConnected=!0,e())}))}disconnect(){this.provider&&this.provider.disconnect(),this.isConnected=!1}async reconnect(){return this.disconnect(),this.connect()}destroy(){this.provider&&this.provider.destroy(),this.isConnected=!1}}export{U as BroadcastSyncProvider,_ as WebSocketSyncProvider}

package/dist/components/kritzel-controls.js

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