kritzel-stencil 0.4.22 → 0.4.24

package/dist/components/{p-BNeE3SiZ.js → p-DwEYMvIn.js}

@@ -1,17 +1,17 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-Cm33td2O.js';
-import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$4 } from './p-bAacqNHq.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { a as KritzelMouseButton, d as defineCustomElement$3 } from './p-3tBE7SyG.js';
+import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$4 } from './p-D6JycG-I.js';
 import { c as commonjsGlobal } from './p-BFTU3MAI.js';
 import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-7I4Uzjrw.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { K as KritzelFontRegistry, r as resolveTextToolAvailableFonts } from './p-DJkKlUyZ.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-DtnMdWWB.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-BShrnlam.js';
 import { K as KritzelWorkspace, W as WORKSPACE_EXPORT_VERSION } from './p-DAwPPDMS.js';
 import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
 import { O as ObjectHelper } from './p-DPONTran.js';
 import * as Y from 'yjs';
 import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
-import { K as KritzelIconRegistry, d as defineCustomElement$2 } from './p-CSuU8frA.js';
+import { K as KritzelIconRegistry, d as defineCustomElement$2 } from './p-Ck-87E2G.js';
 
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
@@ -5076,10 +5076,11 @@ class Fitter {
     }
     openMore() {
         let { content, openStart, openEnd } = this.unplaced;
-        let inner = contentAt(content, openStart);
-        if (!inner.childCount || inner.firstChild.isLeaf)
+        if (maxOpen(content, -1) <= openStart)
             return false;
-        this.unplaced = new Slice(content, openStart + 1, Math.max(openEnd, inner.size + openStart >= content.size - openEnd ? openStart + 1 : 0));
+        if (this.unplaced.size > 1 && maxOpen(content, 1) > openEnd)
+            openEnd++;
+        this.unplaced = new Slice(content, openStart + 1, openEnd);
         return true;
     }
     dropNode() {
@@ -5249,6 +5250,14 @@ function invalidMarks(type, fragment, start) {
 function definesContent(type) {
     return type.spec.defining || type.spec.definingForContent;
 }
+function maxOpen(frag, side) {
+    for (let count = 0;; count++) {
+        let ch = side < 0 ? frag.firstChild : frag.lastChild;
+        if (!ch || ch.isAtom)
+            return count;
+        frag = ch.content;
+    }
+}
 function replaceRange(tr, from, to, slice) {
     if (!slice.size)
         return tr.deleteRange(from, to);
@@ -7953,7 +7962,8 @@ class WidgetViewDesc extends ViewDesc {
                 wrap.appendChild(dom);
                 dom = wrap;
             }
-            dom.contentEditable = "false";
+            if (!dom.hasAttribute("contenteditable"))
+                dom.contentEditable = "false";
             dom.classList.add("ProseMirror-widget");
         }
         super(parent, [], dom, null);
@@ -9801,8 +9811,14 @@ function maybeWrapTrusted(html) {
     // With the require-trusted-types-for CSP, Chrome will block
     // innerHTML, even on a detached document. This wraps the string in
     // a way that makes the browser allow us to use its parser again.
-    if (!_policy)
-        _policy = trustedTypes.defaultPolicy || trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+    if (!_policy) {
+        if (_policy = trustedTypes.defaultPolicy)
+            try {
+                return _policy.createHTML(html);
+            }
+            catch (_a) { }
+        _policy = trustedTypes.createPolicy("ProseMirrorClipboard", { createHTML: (s) => s });
+    }
     return _policy.createHTML(html);
 }
 function readHTML(html) {
@@ -9859,6 +9875,12 @@ function addContext(slice, context) {
         let type = schema.nodes[array[i]];
         if (!type || type.hasRequiredAttrs())
             break;
+        try {
+            type.checkAttrs(array[i + 1]);
+        }
+        catch (e) {
+            break;
+        }
         content = Fragment.from(type.create(array[i + 1], content));
         openStart++;
         openEnd++;
@@ -13517,16 +13539,20 @@ a custom function to determine the type of the newly split off block.
 */
 function splitBlockAs(splitNode) {
     return (state, dispatch) => {
-        let { $from} = state.selection;
         if (state.selection instanceof NodeSelection && state.selection.node.isBlock) {
+            let { $from } = state.selection;
             if (!$from.parentOffset || !canSplit(state.doc, $from.pos))
                 return false;
             if (dispatch)
                 dispatch(state.tr.split($from.pos).scrollIntoView());
             return true;
         }
-        if (!$from.depth)
+        if (!state.selection.$from.depth)
             return false;
+        let tr = state.tr;
+        if (!state.selection.empty && (state.selection instanceof TextSelection || state.selection instanceof AllSelection))
+            tr.deleteSelection();
+        let { $from } = tr.selection, mapFrom = tr.steps.length;
         let types = [];
         let splitDepth, deflt, atEnd = false, atStart = false;
         for (let d = $from.depth;; d--) {
@@ -13545,10 +13571,7 @@ function splitBlockAs(splitNode) {
                 types.unshift(null);
             }
         }
-        let tr = state.tr;
-        if (state.selection instanceof TextSelection || state.selection instanceof AllSelection)
-            tr.deleteSelection();
-        let splitPos = tr.mapping.map($from.pos);
+        let splitPos = $from.pos;
         let can = canSplit(tr.doc, splitPos, types.length, types);
         if (!can) {
             types[0] = deflt ? { type: deflt } : null;
@@ -13558,9 +13581,10 @@ function splitBlockAs(splitNode) {
             return false;
         tr.split(splitPos, types.length, types);
         if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
-            let first = tr.mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
+            let mapping = tr.mapping.slice(mapFrom);
+            let first = mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first);
             if (deflt && $from.node(splitDepth - 1).canReplaceWith($first.index(), $first.index() + 1, deflt))
-                tr.setNodeMarkup(tr.mapping.map($from.before(splitDepth)), deflt);
+                tr.setNodeMarkup(mapping.map($from.before(splitDepth)), deflt);
         }
         if (dispatch)
             dispatch(tr.scrollIntoView());
@@ -19295,12 +19319,12 @@ class KritzelCursorHelper {
         // We rotate around the center of the SVG canvas
         const center = size / 2;
         // We use a group to apply the rotation
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <g transform="rotate(${rotation} ${center} ${center})">
-          ${content}
-        </g>
-      </svg>
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
     `;
         // Encode the SVG for use in a data URI
         // We need to be careful with encoding to ensure it works across browsers
@@ -43319,10 +43343,6 @@ class KritzelObjectMap {
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
     _objectsChangeCallbacks = [];
-    _remoteChangesCallbacks = [];
-    _docUpdateHandler = null;
-    _remoteOrigins = new Set();
-    _appliedRemoteChanges = false;
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -43346,44 +43366,12 @@ class KritzelObjectMap {
         return this._isReady;
     }
     /**
-     * Promise that settles when network providers finish connecting and complete
-     * their Yjs sync handshake. Resolves immediately if no network providers.
+     * Promise that settles when network providers finish connecting.
+     * Resolves immediately if no network providers. Awaited by the loading overlay.
      */
     whenNetworkSynced() {
         return this._networkSyncPromise ?? Promise.resolve();
     }
-    /**
-     * Whether any configured provider synchronizes over the network.
-     */
-    get hasNetworkSyncProvider() {
-        return this._providers.some(provider => provider.type === 'network');
-    }
-    /**
-     * Whether remote-originated changes can be told apart from local writes.
-     * Requires every network provider to expose its Yjs update origin.
-     */
-    get supportsRemoteChangeDetection() {
-        const networkProviders = this._providers.filter(provider => provider.type === 'network');
-        return networkProviders.length > 0 && networkProviders.every(provider => provider.updateOrigin !== undefined);
-    }
-    /**
-     * Whether at least one update originating from a network provider has been
-     * applied to this document. Stays `false` when the remote held no data the
-     * local document was missing, because Yjs suppresses empty updates.
-     */
-    get hasAppliedRemoteChanges() {
-        return this._appliedRemoteChanges;
-    }
-    /**
-     * Registers a callback invoked whenever a network provider applies changes to this document.
-     * @returns A function that unregisters the callback.
-     */
-    onRemoteChangesApplied(callback) {
-        this._remoteChangesCallbacks.push(callback);
-        return () => {
-            this._remoteChangesCallbacks = this._remoteChangesCallbacks.filter(registered => registered !== callback);
-        };
-    }
     /**
      * Returns the Yjs Awareness instance, if a network provider is available.
      */
@@ -43626,22 +43614,6 @@ class KritzelObjectMap {
             const providerList = this._providers.map(p => `${p.constructor.name} (${p.type})`).join(', ');
             console.info(`[Kritzel] Workspace sync providers initialized for ${docName}: ${providerList || 'none'}`);
         }
-        // Registered before any provider connects so no remote update can be missed.
-        for (const provider of this._providers) {
-            if (provider.type === 'network' && provider.updateOrigin !== undefined) {
-                this._remoteOrigins.add(provider.updateOrigin);
-            }
-        }
-        this._docUpdateHandler = (_update, origin) => {
-            if (!this._remoteOrigins.has(origin)) {
-                return;
-            }
-            this._appliedRemoteChanges = true;
-            for (const callback of [...this._remoteChangesCallbacks]) {
-                callback();
-            }
-        };
-        this._ydoc.on('update', this._docUpdateHandler);
         // captureTimeout is effectively infinite — undo-step boundaries are
         // marked explicitly via markUndoBoundary() in insert/remove/reset and
         // at stroke/gesture boundaries in the tools. This prevents a single
@@ -43695,15 +43667,12 @@ class KritzelObjectMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] Workspace network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider
-            .connect()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
         }));
-        // Settles once remote data has been reconciled, not merely once the transport connected
+        // Network sync awaited by loading overlay to show remote workspace hydration
         this._networkSyncPromise = networkConnectPromises.length > 0 ? Promise.allSettled(networkConnectPromises).then(() => undefined) : null;
         this._isReady = true;
         // Find the first provider that exposes awareness (network providers)
@@ -44361,13 +44330,6 @@ class KritzelObjectMap {
             this._objectsMap.unobserve(this._objectsObserver);
             this._objectsObserver = null;
         }
-        if (this._ydoc && this._docUpdateHandler) {
-            this._ydoc.off('update', this._docUpdateHandler);
-        }
-        this._docUpdateHandler = null;
-        this._remoteOrigins.clear();
-        this._remoteChangesCallbacks = [];
-        this._appliedRemoteChanges = false;
         // Remove undo manager event listeners
         if (this._undoManager) {
             if (this._stackItemAddedHandler) {
@@ -44863,10 +44825,7 @@ class KritzelAppStateMap {
         if (showSyncProviderInfo && networkProviders.length > 0) {
             console.info(`[Kritzel] App-state network providers connecting in background: ${networkProviders.length}`);
         }
-        const networkConnectPromises = networkProviders.map(provider => provider
-            .connect()
-            .then(() => provider.whenSynced?.())
-            .catch(err => {
+        const networkConnectPromises = networkProviders.map(provider => provider.connect().catch(err => {
             if (showSyncProviderInfo) {
                 console.error(`[Kritzel] Network sync provider "${provider.constructor.name}" failed to connect:`, err);
             }
@@ -48150,8 +48109,8 @@ class KritzelSvgExportHelper {
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
         const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
-        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
-  ${elements}
+        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
+  ${elements}
 </svg>`;
     }
     /**
@@ -48303,8 +48262,8 @@ class KritzelSvgExportHelper {
         const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
         const refX = 0;
         const refY = size / 2;
-        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
-      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
+        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
+      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
     </marker>`;
     }
     /**
@@ -48351,10 +48310,10 @@ class KritzelSvgExportHelper {
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
         const scale = this.getObjectScale(path);
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
-      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
+      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
+    </svg>
   </g>`;
     }
     /**
@@ -48370,10 +48329,10 @@ class KritzelSvgExportHelper {
         const scale = this.getObjectScale(line);
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
-      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
+      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
+    </svg>
   </g>`;
     }
     /**
@@ -48397,18 +48356,18 @@ class KritzelSvgExportHelper {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
                 const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
-                textContent = `
-    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
-        ${textHtml}
-      </div>
+                textContent = `
+    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
+        ${textHtml}
+      </div>
     </foreignObject>`;
             }
         }
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
-      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
+      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
+    </svg>
   </g>`;
     }
     /**
@@ -48439,10 +48398,10 @@ class KritzelSvgExportHelper {
         // adjusted font-size already accounts for it – keeping both would double-scale
         // the content and overflow the foreignObject.
         const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
-        return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
-    </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
+    </foreignObject>
   </g>`;
     }
     /**
@@ -48476,9 +48435,9 @@ class KritzelSvgExportHelper {
             return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
         })
             .join('');
-        return `<g transform="${transform}"${opacity}>
-    ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
+        return `<g transform="${transform}"${opacity}>
+    ${bgRect}
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
@@ -48506,8 +48465,8 @@ class KritzelSvgExportHelper {
         const width = image.totalWidth / scale;
         const height = image.totalHeight / scale;
         const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
-        return `<g transform="${transform}"${opacity}>
-    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
+        return `<g transform="${transform}"${opacity}>
+    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
     }
     /**
@@ -48527,19 +48486,19 @@ class KritzelSvgExportHelper {
         if (rasterSafeForCanvas) {
             // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
             console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
-            return `<g transform="${transform}"${opacity}>
-      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
-      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
+            return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
     </g>`;
         }
         // SVG export: use foreignObject to embed HTML
         const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
-        return `<g transform="${transform}"${opacity}>
-      <foreignObject x="0" y="0" width="${width}" height="${height}">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
-          ${html}
-        </div>
-      </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+      <foreignObject x="0" y="0" width="${width}" height="${height}">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
     </g>`;
     }
     /**
@@ -48559,8 +48518,8 @@ class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**
@@ -48970,7 +48929,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     contextMenuStateChange;
     /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
     loadingChange;
-    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
+    /** Emitted when remote workspace synchronization is in progress. */
     syncingChange;
     forceUpdate = 0;
     isSyncing = false;
@@ -50551,13 +50510,18 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _syncConfigRevision = 0;
     _assetStorageConfigRevision = 0;
     _isWorkspaceLoading = false;
+    _syncingRequestId = 0;
+    _syncingShowTimeout = null;
+    _syncingHideTimeout = null;
+    _syncingVisibleSince = null;
+    _syncingShowDelayMs = 300;
+    _syncingMinimumVisibleMs = 500;
     _hasLoggedUnlicensedWelcomeBanner = false;
     _previousVisibleCustomElements = new Set();
     _revealedImageKeys = new Set();
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
-    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -50574,16 +50538,65 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
         this.loadingChange.emit(this.core.store.state.isLoading);
     }
-    syncSyncingState(isSyncing) {
-        if (this.isSyncing === isSyncing) {
+    beginSyncingRequest() {
+        this._syncingRequestId++;
+        this.clearSyncingShowTimeout();
+        this.clearSyncingHideTimeout();
+        return this._syncingRequestId;
+    }
+    syncSyncingState(isSyncing, requestId) {
+        if (requestId !== this._syncingRequestId) {
+            return;
+        }
+        if (isSyncing) {
+            this.clearSyncingHideTimeout();
+            if (this.isSyncing || this._syncingShowTimeout !== null) {
+                return;
+            }
+            this._syncingShowTimeout = setTimeout(() => {
+                this._syncingShowTimeout = null;
+                if (requestId !== this._syncingRequestId || this.isSyncing) {
+                    return;
+                }
+                this.isSyncing = true;
+                this._syncingVisibleSince = Date.now();
+                this.syncingChange.emit(true);
+            }, this._syncingShowDelayMs);
+            return;
+        }
+        this.clearSyncingShowTimeout();
+        if (!this.isSyncing) {
+            return;
+        }
+        this.clearSyncingHideTimeout();
+        const elapsedMs = Date.now() - (this._syncingVisibleSince ?? Date.now());
+        const remainingVisibleMs = Math.max(0, this._syncingMinimumVisibleMs - elapsedMs);
+        if (remainingVisibleMs === 0) {
+            this.finishSyncingState(requestId);
+            return;
+        }
+        this._syncingHideTimeout = setTimeout(() => this.finishSyncingState(requestId), remainingVisibleMs);
+    }
+    finishSyncingState(requestId) {
+        this._syncingHideTimeout = null;
+        if (requestId !== this._syncingRequestId || !this.isSyncing) {
             return;
         }
-        this.isSyncing = isSyncing;
-        this.syncingChange.emit(isSyncing);
+        this.isSyncing = false;
+        this._syncingVisibleSince = null;
+        this.syncingChange.emit(false);
+    }
+    clearSyncingShowTimeout() {
+        if (this._syncingShowTimeout !== null) {
+            clearTimeout(this._syncingShowTimeout);
+            this._syncingShowTimeout = null;
+        }
     }
-    clearRemoteChangesSubscription() {
-        this._remoteChangesUnsubscribe?.();
-        this._remoteChangesUnsubscribe = null;
+    clearSyncingHideTimeout() {
+        if (this._syncingHideTimeout !== null) {
+            clearTimeout(this._syncingHideTimeout);
+            this._syncingHideTimeout = null;
+        }
     }
     isNetworkAvailable() {
         return typeof navigator !== 'undefined' && navigator.onLine;
@@ -50700,7 +50713,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
-        this.clearRemoteChangesSubscription();
+        this.beginSyncingRequest();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -50950,12 +50963,27 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         }
         this._isWorkspaceLoading = true;
         this.syncLoadingState();
+        const syncingRequestId = this.beginSyncingRequest();
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            this.trackRemoteSynchronization();
+            // Track remote sync in the background without blocking the loading overlay.
+            const initializedObjects = this.core.store.objects;
+            const networkSyncPromise = initializedObjects?.whenNetworkSynced();
+            if (networkSyncPromise && this.isNetworkAvailable()) {
+                this.syncSyncingState(true, syncingRequestId);
+                void networkSyncPromise.finally(() => {
+                    // Only clear syncing for the currently active object map.
+                    if (this.core.store.objects === initializedObjects) {
+                        this.syncSyncingState(false, syncingRequestId);
+                    }
+                });
+            }
+            else {
+                this.syncSyncingState(false, syncingRequestId);
+            }
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -50967,38 +50995,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             }
         }
     }
-    /**
-     * Reports syncing only while remote data is actually being reconciled into the
-     * active workspace. Yjs suppresses updates that carry nothing new, so a workspace
-     * that already matches the remote never reports syncing at all.
-     */
-    trackRemoteSynchronization() {
-        this.clearRemoteChangesSubscription();
-        this.syncSyncingState(false);
-        const initializedObjects = this.core.store.objects;
-        if (!initializedObjects?.hasNetworkSyncProvider || !this.isNetworkAvailable()) {
-            return;
-        }
-        if (initializedObjects.supportsRemoteChangeDetection) {
-            this._remoteChangesUnsubscribe = initializedObjects.onRemoteChangesApplied(() => {
-                if (this.core.store.objects !== initializedObjects) {
-                    return;
-                }
-                this.syncSyncingState(true);
-            });
-        }
-        else {
-            // Custom providers without an update origin cannot be diffed, so fall back to reporting the whole handshake.
-            this.syncSyncingState(true);
-        }
-        void initializedObjects.whenNetworkSynced().finally(() => {
-            if (this.core.store.objects !== initializedObjects) {
-                return;
-            }
-            this.clearRemoteChangesSubscription();
-            this.syncSyncingState(false);
-        });
-    }
     emitObjectsChange() {
         const objectsMap = this.core.store.objects;
         if (!objectsMap) {

package/dist/components/{p-DKGg-76-.js → p-Dznwo6oc.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 
 const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
 
@@ -97,7 +97,7 @@ const KritzelNumericInput = /*@__PURE__*/ proxyCustomElement(class KritzelNumeri
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '68e6fecd79c3c970d1742b1a0bb8667ca2d31729' }, h("div", { key: 'efcf623186d221690bbb956088ec51343de07f3a', class: "input-container" }, this.label && h("label", { key: '300de793f02008ad037da021003b46fc34fc5239', class: "input-label" }, this.label), h("div", { key: '9ff424901fddfcbdac4835e2b2089df2e0966d0f', class: "input-wrapper" }, h("input", { key: 'fc77e6ad1c0b15e3dd3f960b6448ddab1a9beeb1', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'c286606fa0617cc3acbbe40a27e40b154002e01d', class: "spinner-buttons" }, h("button", { key: 'e3a65a327975918fe604cd196ffb087fc4d3ca47', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '62b2ff4ed67ca8b6fc220ff9c63ceca90f75baea', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '803d5c30826d40d95f282071f3f88356366a9faf', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '3c54a48e7082f5aaa9ed923357d0cc4a722018b5', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '9f6cb5f34bbb0e70b5773aecec519b7d8b742712', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '6539b0d4f4bd26e463fa9152cf58757497355cf6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '7af3efe94c98934dcfe701c516ffc7cea2b4fde9' }, h("div", { key: '81347ea86a62f72b5b7662d90670e2ace98b16e7', class: "input-container" }, this.label && h("label", { key: '35b7650a3c4d1b93dbcb763b0c8f3767e3b519ac', class: "input-label" }, this.label), h("div", { key: '691ade138e5ba2ef51a76b1fc54da51fb7dd7389', class: "input-wrapper" }, h("input", { key: '58445c41cc8be438d1065787d375fb9d271f3873', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'c669fc612696c555b96f046a8c70e75e9650af23', class: "spinner-buttons" }, h("button", { key: 'ae904cc60925d48120405f74d656ee9cbf312d70', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '4a4964336820cfc2128b98bf245556425919dfb6', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'f305136d337690b0eaa39983d26a67454e4862da', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'c90f2d9a3deac66dc577142f87f73aef491e5f25', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '2a3e33c55b6ace48f15ec56d78c6aab782c64520', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'f327413078824800ad061126417a8f25578ba2de', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{