kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/objects/text.class.js

@@ -0,0 +1,292 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { KritzelToolRegistry } from '../registries/tool.registry';
+import { KritzelBaseObject } from './base-object.class';
+import { KritzelKeyboardHelper } from '../../helpers/keyboard.helper';
+import { KritzelDevicesHelper } from '../../helpers/devices.helper';
+import { EditorState, TextSelection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Schema } from 'prosemirror-model';
+import { schema } from 'prosemirror-schema-basic';
+import { addListNodes } from 'prosemirror-schema-list';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap } from 'prosemirror-commands';
+import { KritzelColorHelper } from '../../helpers/color.helper';
+export class KritzelText extends KritzelBaseObject {
+    get isEmpty() {
+        if (!this.editor) {
+            return true;
+        }
+        const doc = this.editor.state.doc;
+        if (doc.content.size === 0) {
+            return true;
+        }
+        const text = doc.textContent.trim();
+        return text.length === 0;
+    }
+    constructor(config) {
+        var _a;
+        super();
+        this.__class__ = 'KritzelText';
+        this.fontFamily = 'Arial';
+        this.fontSize = 8;
+        this.fontColor = { light: '#000000', dark: '#ffffff' };
+        this.initialWidth = 1;
+        this.initialHeight = 1;
+        this.scale = 1;
+        this.scaleFactor = 1;
+        this.isDebugInfoVisible = true;
+        this.isEditable = true;
+        this.isEditing = false;
+        this.editor = null;
+        this.content = null;
+        this._schema = new Schema({
+            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+            marks: schema.spec.marks,
+        });
+        this.uneditedObject = null;
+        this.rows = 1;
+        if (config) {
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.fontSize = config.fontSize || 8;
+            this.fontFamily = config.fontFamily || 'Arial';
+            this.fontColor = config.fontColor || { light: '#000000', dark: '#ffffff' };
+            this.width = this.initialWidth / (this._core.store.state.scale < 0 ? this._core.store.state.scale : 1);
+            this.height = (this.fontSize * 1.2) / (this._core.store.state.scale < 0 ? this._core.store.state.scale : 1);
+            this.scale = config.scale || 1;
+            this.scaleFactor = (_a = config.scaleX) !== null && _a !== void 0 ? _a : 1;
+        }
+    }
+    static create(core, fontSize, fontFamily, scale) {
+        const object = new KritzelText();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.fontSize = fontSize;
+        object.fontFamily = fontFamily;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.width = object.initialWidth / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._core.store.state.scale < 0 ? object._core.store.state.scale : 1);
+        object.backgroundColor = { light: 'transparent', dark: 'transparent' };
+        object.initialWidth = object.width;
+        object.initialHeight = object.height;
+        object.scaleFactor = 1;
+        object.scale = scale !== null && scale !== void 0 ? scale : object._core.store.state.scale;
+        object.zIndex = core.store.currentZIndex;
+        object.editor = object.createEditor();
+        return object;
+    }
+    mount(element) {
+        if (element === null || this.isInViewport() === false) {
+            return;
+        }
+        element.style.fontFamily = this.fontFamily;
+        element.style.fontSize = `${this.fontSize}pt`;
+        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
+            if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
+                requestAnimationFrame(() => this.adjustSizeOnInput());
+            }
+            return;
+        }
+        this.elementRef = element;
+        this.elementRef.style.whiteSpace = 'pre-wrap';
+        this.elementRef.style.wordWrap = 'break-word';
+        this.elementRef.innerHTML = '';
+        this.elementRef.appendChild(this.editor.dom);
+        this.isMounted = true;
+        requestAnimationFrame(() => this.adjustSizeOnInput());
+    }
+    createEditor() {
+        const doc = this._schema.node('doc', null, [this._schema.node('paragraph')]);
+        return new EditorView(null, {
+            state: EditorState.create({
+                doc: doc,
+                plugins: [keymap(baseKeymap)],
+            }),
+            editable: () => false,
+            dispatchTransaction: transaction => {
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
+                if (transaction.docChanged) {
+                    this.content = newState.doc.toJSON();
+                    this.adjustSizeOnInput();
+                    if (!transaction.getMeta('fromRemote')) {
+                        this._core.store.state.objects.update(this, { temporary: true });
+                    }
+                }
+            },
+        });
+    }
+    setContent(content) {
+        this.content = content;
+        if (this.editor && content) {
+            const newDoc = this.editor.state.schema.nodeFromJSON(content);
+            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
+            tr.setMeta('fromRemote', true);
+            this.editor.dispatch(tr);
+        }
+    }
+    adjustSizeOnInput() {
+        const element = this.elementRef;
+        if (element && this.isMounted && element.scrollWidth > 0) {
+            const previousTotalWidth = this.totalWidth;
+            const previousTotalHeight = this.totalHeight;
+            const newWidth = element.scrollWidth;
+            const newHeight = element.scrollHeight;
+            this.width = newWidth * this.scaleFactor;
+            this.height = newHeight * this.scaleFactor;
+            if (this.rotation !== 0) {
+                const newTotalWidth = this.totalWidth;
+                const newTotalHeight = this.totalHeight;
+                const deltaWidth = (newTotalWidth - previousTotalWidth) / 2 / this.scale;
+                const deltaHeight = (newTotalHeight - previousTotalHeight) / 2 / this.scale;
+                if (deltaWidth !== 0 || deltaHeight !== 0) {
+                    const cos = Math.cos(this.rotation);
+                    const sin = Math.sin(this.rotation);
+                    const rotatedDeltaX = cos * deltaWidth - sin * deltaHeight;
+                    const rotatedDeltaY = sin * deltaWidth + cos * deltaHeight;
+                    this.translateX += rotatedDeltaX - deltaWidth;
+                    this.translateY += rotatedDeltaY - deltaHeight;
+                }
+            }
+        }
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const originalWidth = this.width / this.scaleFactor;
+        const originalHeight = this.height / this.scaleFactor;
+        const scaleX = width / originalWidth;
+        const scaleY = height / originalHeight;
+        this.scaleFactor = Math.min(scaleX, scaleY);
+        this.width = originalWidth * this.scaleFactor;
+        this.height = originalHeight * this.scaleFactor;
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.state.objects.update(this);
+    }
+    focus(coords) {
+        if (this.editor) {
+            const doc = this.editor.state.doc;
+            if (coords.x && coords.y && !this.isEmpty) {
+                const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
+                if (pos) {
+                    this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
+                    this.editor.focus();
+                    if (KritzelDevicesHelper.isIOS()) {
+                        this.scrollIntoViewOnIOS();
+                    }
+                    return;
+                }
+            }
+            const end = Math.max(1, doc.content.size - 1);
+            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
+            this.editor.focus();
+            if (KritzelDevicesHelper.isIOS()) {
+                this.scrollIntoViewOnIOS();
+            }
+        }
+    }
+    scrollIntoViewOnIOS() {
+        setTimeout(() => {
+            if (this.editor && this.editor.dom) {
+                this.editor.dom.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                    inline: 'nearest'
+                });
+            }
+        }, 300);
+    }
+    edit(event) {
+        KritzelKeyboardHelper.disableInteractiveWidget();
+        this.uneditedObject = this.clone();
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+        this.editor.setProps({ editable: () => true });
+        this.isEditing = true;
+        this._core.rerender();
+        this.adjustSizeOnInput();
+        this.focus({ x: event === null || event === void 0 ? void 0 : event.clientX, y: event === null || event === void 0 ? void 0 : event.clientY });
+        KritzelKeyboardHelper.enableInteractiveWidget();
+    }
+    save() {
+        requestAnimationFrame(() => this.adjustSizeOnInput());
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
+        this.isEditing = false;
+        this._core.store.state.objects.consolidateTemporaryItems();
+        this._core.store.state.objects.update(this);
+        this._core.engine.emitObjectsChange();
+    }
+    handlePointerDown(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    handlePointerMove(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        // Only stop propagation if the engine is not tracking this pointer.
+        // During text creation, the engine adds the pointer before the text element
+        // is in the DOM. We must let move events propagate so the engine can
+        // update its pointer state.
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
+    }
+    handlePointerUp(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        // Only stop propagation if the engine is not tracking this pointer.
+        // When a text is created during pointerdown, the engine adds the pointer
+        // to its map before the text element exists in the DOM. By the time
+        // pointerup fires, the text element may intercept the event (especially
+        // on iOS where pointer capture may not redirect events in shadow DOM).
+        // We must let the event propagate so the engine can clean up the pointer.
+        // Without this, stale pointers accumulate and single-finger touches
+        // get misinterpreted as two-finger zoom gestures.
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
+    }
+    copy() {
+        const copiedObject = super.copy();
+        copiedObject.editor = copiedObject.createEditor();
+        if (this.content) {
+            copiedObject.setContent(this.content);
+        }
+        return copiedObject;
+    }
+    serialize() {
+        const _a = this, { _core, _elementRef, _schema, element, totalWidth, totalHeight, editor, uneditedObject } = _a, remainingProps = __rest(_a, ["_core", "_elementRef", "_schema", "element", "totalWidth", "totalHeight", "editor", "uneditedObject"]);
+        const clonedProps = structuredClone(remainingProps);
+        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
+            clonedProps.element = element.cloneNode(true);
+        }
+        return clonedProps;
+    }
+    deserialize(object) {
+        super.deserialize(object);
+        if (object.content) {
+            this.setContent(object.content);
+        }
+        return this;
+    }
+}

package/dist/kritzel-stencil/src/classes/providers/broadcast-sync-provider.class.js

@@ -0,0 +1,101 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as Y from 'yjs';
+import * as encoding from 'lib0/encoding';
+import * as decoding from 'lib0/decoding';
+/**
+ * BroadcastChannel sync provider for cross-tab synchronization
+ * This is a lightweight alternative to y-webrtc for browser-tab-only sync
+ */
+export class BroadcastSyncProvider {
+    constructor(docName, doc, _options) {
+        this._synced = false;
+        this.handleDocUpdate = (update, origin) => {
+            // Don't broadcast updates that came from other tabs (to prevent loops)
+            if (origin !== this) {
+                const encoder = encoding.createEncoder();
+                encoding.writeVarUint(encoder, 0); // Message type: sync update
+                encoding.writeVarUint8Array(encoder, update);
+                this.channel.postMessage(encoding.toUint8Array(encoder));
+            }
+        };
+        this.doc = doc;
+        this.channel = new BroadcastChannel(docName);
+        // Handle incoming messages from other tabs
+        this.channel.onmessage = (event) => {
+            this.handleMessage(event.data);
+        };
+        // Listen to document updates and broadcast them
+        this.doc.on('update', this.handleDocUpdate);
+        // Send initial sync request
+        this.broadcastSync();
+        // Mark as synced after a short delay (to receive any pending updates)
+        setTimeout(() => {
+            this._synced = true;
+        }, 100);
+        console.info(`BroadcastChannel Provider initialized: ${docName}`);
+    }
+    handleMessage(message) {
+        const decoder = decoding.createDecoder(new Uint8Array(message));
+        const messageType = decoding.readVarUint(decoder);
+        switch (messageType) {
+            case 0: // Sync update
+                const update = decoding.readVarUint8Array(decoder);
+                Y.applyUpdate(this.doc, update, this);
+                break;
+            case 1: // Sync request
+                this.broadcastSync();
+                break;
+            case 2: // Sync response
+                const stateVector = decoding.readVarUint8Array(decoder);
+                const updateResponse = Y.encodeStateAsUpdate(this.doc, stateVector);
+                if (updateResponse.length > 0) {
+                    const encoder = encoding.createEncoder();
+                    encoding.writeVarUint(encoder, 0); // Send as regular update
+                    encoding.writeVarUint8Array(encoder, updateResponse);
+                    this.channel.postMessage(encoding.toUint8Array(encoder));
+                }
+                break;
+        }
+    }
+    broadcastSync() {
+        // Broadcast our current state vector to request missing updates
+        const encoder = encoding.createEncoder();
+        encoding.writeVarUint(encoder, 2); // Message type: sync response
+        encoding.writeVarUint8Array(encoder, Y.encodeStateVector(this.doc));
+        this.channel.postMessage(encoding.toUint8Array(encoder));
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Wait for initial sync to complete
+            if (this._synced) {
+                return;
+            }
+            return new Promise((resolve) => {
+                const checkSync = () => {
+                    if (this._synced) {
+                        resolve();
+                    }
+                    else {
+                        setTimeout(checkSync, 50);
+                    }
+                };
+                checkSync();
+            });
+        });
+    }
+    disconnect() {
+        // BroadcastChannel doesn't have explicit disconnect
+    }
+    destroy() {
+        this.doc.off('update', this.handleDocUpdate);
+        this.channel.close();
+    }
+}

package/dist/kritzel-stencil/src/classes/providers/hocuspocus-sync-provider.class.js

@@ -0,0 +1,241 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { HocuspocusProvider, HocuspocusProviderWebsocket } from '@hocuspocus/provider';
+/**
+ * Hocuspocus sync provider for real-time collaboration
+ * Supports multiplexing - multiple documents can share the same WebSocket connection
+ */
+export class HocuspocusSyncProvider {
+    constructor(docName, doc, options) {
+        this.isConnected = false;
+        this.isSynced = false;
+        this.usesSharedSocket = false;
+        const name = (options === null || options === void 0 ? void 0 : options.name) || docName;
+        const url = (options === null || options === void 0 ? void 0 : options.url) || 'ws://localhost:1234';
+        // Use provided websocketProvider or the static shared one
+        const websocketProvider = (options === null || options === void 0 ? void 0 : options.websocketProvider) || HocuspocusSyncProvider.sharedWebSocketProvider;
+        if (websocketProvider) {
+            // Multiplexing mode - use shared WebSocket connection
+            this.usesSharedSocket = true;
+            const config = {
+                websocketProvider,
+                name,
+                document: doc,
+                token: (options === null || options === void 0 ? void 0 : options.token) || null,
+                onConnect: () => {
+                    this.isConnected = true;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus connected: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onConnect) {
+                        options.onConnect();
+                    }
+                },
+                onDisconnect: () => {
+                    this.isConnected = false;
+                    this.isSynced = false;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus disconnected: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onDisconnect) {
+                        options.onDisconnect();
+                    }
+                },
+                onSynced: () => {
+                    this.isSynced = true;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus synced: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onSynced) {
+                        options.onSynced();
+                    }
+                },
+            };
+            // Add optional settings
+            if ((options === null || options === void 0 ? void 0 : options.forceSyncInterval) !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options === null || options === void 0 ? void 0 : options.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            if (options === null || options === void 0 ? void 0 : options.onStatus) {
+                config.onStatus = options.onStatus;
+            }
+            this.provider = new HocuspocusProvider(config);
+            // Must call attach() explicitly when using shared socket
+            this.provider.attach();
+            if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                console.info(`Hocuspocus Provider initialized (multiplexed): ${name}`);
+            }
+        }
+        else {
+            // Standalone mode - create own WebSocket connection
+            this.usesSharedSocket = false;
+            const config = {
+                url,
+                name,
+                document: doc,
+                token: (options === null || options === void 0 ? void 0 : options.token) || null,
+                onConnect: () => {
+                    this.isConnected = true;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus connected: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onConnect) {
+                        options.onConnect();
+                    }
+                },
+                onDisconnect: () => {
+                    this.isConnected = false;
+                    this.isSynced = false;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus disconnected: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onDisconnect) {
+                        options.onDisconnect();
+                    }
+                },
+                onSynced: () => {
+                    this.isSynced = true;
+                    if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                        console.info(`Hocuspocus synced: ${name}`);
+                    }
+                    if (options === null || options === void 0 ? void 0 : options.onSynced) {
+                        options.onSynced();
+                    }
+                },
+            };
+            // Add optional settings
+            if ((options === null || options === void 0 ? void 0 : options.forceSyncInterval) !== undefined) {
+                config.forceSyncInterval = options.forceSyncInterval;
+            }
+            if (options === null || options === void 0 ? void 0 : options.onAuthenticationFailed) {
+                config.onAuthenticationFailed = options.onAuthenticationFailed;
+            }
+            if (options === null || options === void 0 ? void 0 : options.onStatus) {
+                config.onStatus = options.onStatus;
+            }
+            if (options === null || options === void 0 ? void 0 : options.WebSocketPolyfill) {
+                config.WebSocketPolyfill = options.WebSocketPolyfill;
+            }
+            this.provider = new HocuspocusProvider(config);
+            if (!(options === null || options === void 0 ? void 0 : options.quiet)) {
+                console.info(`Hocuspocus Provider initialized: ${url}/${name}`);
+            }
+        }
+    }
+    /**
+     * Create a shared WebSocket connection for multiplexing
+     * Call this once to create a shared connection that multiple providers can use
+     */
+    static createSharedWebSocket(options) {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            console.warn('Shared WebSocket already exists. Returning existing instance.');
+            return HocuspocusSyncProvider.sharedWebSocketProvider;
+        }
+        const config = {
+            url: options.url,
+        };
+        if (options.WebSocketPolyfill) {
+            config.WebSocketPolyfill = options.WebSocketPolyfill;
+        }
+        if (options.onConnect) {
+            config.onConnect = options.onConnect;
+        }
+        if (options.onDisconnect) {
+            config.onDisconnect = options.onDisconnect;
+        }
+        if (options.onStatus) {
+            config.onStatus = options.onStatus;
+        }
+        HocuspocusSyncProvider.sharedWebSocketProvider = new HocuspocusProviderWebsocket(config);
+        console.info(`Shared Hocuspocus WebSocket created: ${options.url}`);
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Destroy the shared WebSocket connection
+     * Call this when you're done with all multiplexed providers
+     */
+    static destroySharedWebSocket() {
+        if (HocuspocusSyncProvider.sharedWebSocketProvider) {
+            HocuspocusSyncProvider.sharedWebSocketProvider.destroy();
+            HocuspocusSyncProvider.sharedWebSocketProvider = null;
+            console.info('Shared Hocuspocus WebSocket destroyed');
+        }
+    }
+    /**
+     * Get the shared WebSocket provider instance (if it exists)
+     */
+    static getSharedWebSocket() {
+        return HocuspocusSyncProvider.sharedWebSocketProvider;
+    }
+    /**
+     * Static factory method for creating HocuspocusSyncProvider with configuration options
+     * Returns a ProviderFactory that can be used in sync configuration
+     */
+    static with(options) {
+        return {
+            create: (docName, doc) => {
+                return new HocuspocusSyncProvider(docName, doc, options);
+            },
+        };
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isSynced) {
+                return;
+            }
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    reject(new Error('Hocuspocus connection timeout'));
+                }, 10000); // 10 second timeout
+                const syncHandler = () => {
+                    clearTimeout(timeout);
+                    this.provider.off('synced', syncHandler);
+                    resolve();
+                };
+                this.provider.on('synced', syncHandler);
+                // If already synced, resolve immediately
+                if (this.provider.isSynced) {
+                    clearTimeout(timeout);
+                    this.provider.off('synced', syncHandler);
+                    resolve();
+                    return;
+                }
+                // Connect if not already connected (standalone mode only)
+                if (!this.isConnected && !this.usesSharedSocket) {
+                    this.provider.connect();
+                }
+            });
+        });
+    }
+    disconnect() {
+        if (this.provider) {
+            if (this.usesSharedSocket) {
+                // Detach from shared socket instead of disconnecting
+                this.provider.detach();
+            }
+            else {
+                this.provider.disconnect();
+            }
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+    }
+    destroy() {
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+        this.isSynced = false;
+    }
+}
+// Static shared WebSocket instance for multiplexing
+HocuspocusSyncProvider.sharedWebSocketProvider = null;

package/dist/kritzel-stencil/src/classes/providers/indexeddb-sync-provider.class.js

@@ -0,0 +1,43 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { IndexeddbPersistence } from 'y-indexeddb';
+/**
+ * IndexedDB sync provider for local persistence
+ */
+export class IndexedDBSyncProvider {
+    constructor(docName, doc, options) {
+        this.isConnected = false;
+        const dbName = (options === null || options === void 0 ? void 0 : options.name) || docName;
+        this.provider = new IndexeddbPersistence(dbName, doc);
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.isConnected) {
+                return;
+            }
+            return new Promise(resolve => {
+                this.provider.on('synced', () => {
+                    this.isConnected = true;
+                    resolve();
+                });
+            });
+        });
+    }
+    disconnect() {
+        // IndexedDB doesn't need explicit disconnect
+        this.isConnected = false;
+    }
+    destroy() {
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+    }
+}