kritzel-stencil 0.1.73 → 0.1.74

package/dist/cjs/{kritzel-active-users_41.cjs.entry.js → kritzel-active-users_42.cjs.entry.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Dc7LOVhs.js');
-var workspace_migrations = require('./workspace.migrations-DcwqsqPC.js');
+var workspace_migrations = require('./workspace.migrations-Dyt35LBC.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -154,16 +154,16 @@ const KritzelAvatar = class {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (index.h(index.Host, { key: '9f2756b21f5cf12c770ecae3917b889e651180fd', style: containerStyles, class: {
+        return (index.h(index.Host, { key: '67c0c1f944b9c835d1685d2b743114a1b5a1f061', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: '4d73aed6c3cb4832a661163e780b4950beb33ff3', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (index.h("img", { key: 'd71ccd7449a27133bcf8cc01f3cd654cc9b00142', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: '9e71b25b721d18e213da38ceead31ed5cf861bd8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: 'f330747bda5862d9e2d19d9dda331bced2bdc6de', class: "avatar-default" }, index.h("svg", { key: '4eefdc2e502669c193fbe54a20c57701f0ecc0ae', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '1788425bba4559c34d9f16069cfa32bc84cf1b17', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (index.h("span", { key: '818ad4a24d6489565dffc8c64b3d4e76b701444c', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (index.h("span", { key: '87af93fd968f3bf5b1f86295de6bd4b71c94120c', class: "avatar-default" }, index.h("svg", { key: '3267317fe99fb8d90432e207516bb48f603c08ed', viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '9e4e225f9a058a24f63b508f36969c8c429fccd6', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get watchers() { return {
         "user": [{
@@ -176,6 +176,262 @@ const KritzelAvatar = class {
 };
 KritzelAvatar.style = kritzelAvatarCss();
 
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9500}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0.3}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0.3}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3))}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+
+const STALE_THRESHOLD_MS = 10_000;
+const REMOVE_THRESHOLD_MS = 30_000;
+const CLEANUP_INTERVAL_MS = 3_000;
+const KritzelAwarenessCursors = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    core;
+    showEdgeIndicators = true;
+    edgeIndicatorPadding = 8;
+    remoteCursors = new Map();
+    objectVersion = 0;
+    cleanupIntervalId;
+    objectChangeRafId = null;
+    componentDidLoad() {
+        this.core.store.state.objects?.onAwarenessChange(states => {
+            this.handleAwarenessChange(states);
+        });
+        this.core.store.state.objects?.onObjectsChange(() => {
+            this.handleRemoteObjectChange();
+        });
+        this.cleanupIntervalId = setInterval(() => {
+            this.cleanupStaleCursors();
+        }, CLEANUP_INTERVAL_MS);
+    }
+    disconnectedCallback() {
+        if (this.cleanupIntervalId) {
+            clearInterval(this.cleanupIntervalId);
+        }
+        if (this.objectChangeRafId !== null) {
+            cancelAnimationFrame(this.objectChangeRafId);
+        }
+    }
+    handleAwarenessChange(states) {
+        const localClientId = this.core.store.state.objects?.localClientId;
+        const now = Date.now();
+        const updated = new Map(this.remoteCursors);
+        // Track which clientIds are still present
+        const activeClientIds = new Set();
+        states.forEach((state, clientId) => {
+            if (clientId === localClientId)
+                return;
+            if (!state.user)
+                return;
+            activeClientIds.add(clientId);
+            const user = state.user;
+            const cursor = state.cursor;
+            const activeObjectId = state.activeObjectId || null;
+            const selectionBox = state.selectionBox || null;
+            updated.set(clientId, {
+                clientId,
+                user,
+                cursor,
+                activeObjectId,
+                selectionBox,
+                lastUpdated: now,
+            });
+        });
+        // Remove cursors for disconnected clients
+        for (const clientId of updated.keys()) {
+            if (!activeClientIds.has(clientId)) {
+                updated.delete(clientId);
+            }
+        }
+        this.remoteCursors = updated;
+    }
+    cleanupStaleCursors() {
+        const now = Date.now();
+        let changed = false;
+        const updated = new Map(this.remoteCursors);
+        for (const [clientId, cursor] of updated) {
+            if (now - cursor.lastUpdated > REMOVE_THRESHOLD_MS) {
+                updated.delete(clientId);
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.remoteCursors = updated;
+        }
+    }
+    isStale(cursor) {
+        return Date.now() - cursor.lastUpdated > STALE_THRESHOLD_MS;
+    }
+    hasActiveDrawingCursors() {
+        for (const cursor of this.remoteCursors.values()) {
+            if (cursor.activeObjectId)
+                return true;
+        }
+        return false;
+    }
+    handleRemoteObjectChange() {
+        if (!this.hasActiveDrawingCursors())
+            return;
+        // Debounce via rAF to batch multiple rapid Yjs updates into a single re-render
+        if (this.objectChangeRafId !== null)
+            return;
+        this.objectChangeRafId = requestAnimationFrame(() => {
+            this.objectChangeRafId = null;
+            this.objectVersion++;
+        });
+    }
+    getActiveObjectTip(objectId) {
+        const obj = this.core.store.state.objects?.findById(objectId);
+        if (!obj)
+            return null;
+        if (obj instanceof workspace_migrations.KritzelPath && !obj.isCompleted) {
+            const lastPoint = obj.points[obj.points.length - 1];
+            if (!lastPoint)
+                return null;
+            return {
+                x: (lastPoint[0] - obj.x) / obj.scale + obj.translateX,
+                y: (lastPoint[1] - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        if (obj instanceof workspace_migrations.KritzelLine && !obj.isCompleted) {
+            return {
+                x: (obj.endX - obj.x) / obj.scale + obj.translateX,
+                y: (obj.endY - obj.y) / obj.scale + obj.translateY,
+            };
+        }
+        // Shapes normalize their bounding box (x/y always top-left, width/height
+        // always positive), so we can't determine which corner the user is actively
+        // dragging. Fall back to the throttled awareness cursor position instead.
+        return null;
+    }
+    worldToScreen(worldX, worldY) {
+        const { scale, translateX, translateY } = this.core.store.state;
+        return {
+            x: worldX * scale + translateX,
+            y: worldY * scale + translateY,
+        };
+    }
+    isInViewport(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        return screenX >= 0 && screenX <= viewportWidth && screenY >= 0 && screenY <= viewportHeight;
+    }
+    clampToEdge(screenX, screenY) {
+        const { viewportWidth, viewportHeight } = this.core.store.state;
+        const padding = this.edgeIndicatorPadding; // 8px
+        // Clamp symmetrically
+        const clampedX = Math.max(padding, Math.min(viewportWidth - padding, screenX));
+        const clampedY = Math.max(padding, Math.min(viewportHeight - padding, screenY));
+        // Determine nearest edge to position avatar inside
+        const distLeft = clampedX - padding;
+        const distRight = (viewportWidth - padding) - clampedX;
+        const distTop = clampedY - padding;
+        const distBottom = (viewportHeight - padding) - clampedY;
+        let edge = 'top';
+        const minDist = Math.min(distLeft, distRight, distTop, distBottom);
+        if (minDist === distLeft)
+            edge = 'left';
+        else if (minDist === distRight)
+            edge = 'right';
+        else if (minDist === distTop)
+            edge = 'top';
+        else
+            edge = 'bottom';
+        const angle = Math.atan2(screenY - clampedY, screenX - clampedX);
+        return { x: clampedX, y: clampedY, angle, edge };
+    }
+    getUserDisplayName(user) {
+        if (user.displayName)
+            return user.displayName;
+        if (user.firstName || user.lastName) {
+            return [user.firstName, user.lastName].filter(Boolean).join(' ');
+        }
+        return 'Unknown';
+    }
+    render() {
+        const cursors = Array.from(this.remoteCursors.values());
+        return (index.h(index.Host, { key: 'b8676d9a7a3d4a79ea8ad9763355ecf4c2f90e17' }, cursors.map(remoteCursor => {
+            if (!remoteCursor.cursor)
+                return null;
+            // When a remote user is actively drawing, derive cursor position from
+            // the object's latest coordinates (synced via Yjs) instead of the
+            // throttled awareness cursor position
+            let screen;
+            let trackingObject = false;
+            if (remoteCursor.activeObjectId) {
+                const tip = this.getActiveObjectTip(remoteCursor.activeObjectId);
+                if (tip) {
+                    trackingObject = true;
+                    screen = this.worldToScreen(tip.x, tip.y);
+                }
+                else {
+                    screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+                }
+            }
+            else {
+                screen = this.worldToScreen(remoteCursor.cursor.x, remoteCursor.cursor.y);
+            }
+            const inViewport = this.isInViewport(screen.x, screen.y);
+            const stale = this.isStale(remoteCursor);
+            const color = remoteCursor.user.color || '#6B7280';
+            if (inViewport) {
+                return this.renderCursor(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            if (this.showEdgeIndicators) {
+                return this.renderEdgeIndicator(remoteCursor, screen.x, screen.y, color, stale, trackingObject);
+            }
+            return null;
+        }), cursors.map(remoteCursor => {
+            if (!remoteCursor.selectionBox)
+                return null;
+            const color = remoteCursor.user.color || '#6B7280';
+            const box = remoteCursor.selectionBox;
+            const topLeft = this.worldToScreen(box.x, box.y);
+            const { scale } = this.core.store.state;
+            const screenWidth = box.width * scale;
+            const screenHeight = box.height * scale;
+            return (index.h("div", { key: `selection-box-${remoteCursor.clientId}`, class: "remote-selection-box", style: {
+                    transform: `translate(${topLeft.x}px, ${topLeft.y}px)`,
+                    width: `${screenWidth}px`,
+                    height: `${screenHeight}px`,
+                    backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+                    borderColor: `color-mix(in srgb, ${color} 50%, transparent)`,
+                } }));
+        })));
+    }
+    renderCursor(cursor, screenX, screenY, color, stale, trackingObject) {
+        return (index.h("div", { key: `cursor-${cursor.clientId}`, class: { 'awareness-cursor': true, stale, 'tracking-object': trackingObject }, style: { transform: `translate(${screenX}px, ${screenY}px)` } }, index.h("svg", { class: "cursor-arrow", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 3L19 12L12 13L9 20L5 3Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "cursor-label", style: { backgroundColor: color } }, this.getUserDisplayName(cursor.user))));
+    }
+    renderEdgeIndicator(cursor, screenX, screenY, color, stale, trackingObject) {
+        const clamped = this.clampToEdge(screenX, screenY);
+        const arrowDeg = (clamped.angle * 180) / Math.PI + 90;
+        // Position the username label opposite to the edge
+        const labelOffset = 20;
+        let labelX = 0;
+        let labelY = 0;
+        // Default transform origin is somewhat arbitrary without explicit layout
+        // We'll calculate simple translations relative to center point
+        if (clamped.edge === 'left') {
+            labelX = labelOffset;
+        }
+        else if (clamped.edge === 'right') {
+            labelX = -labelOffset;
+        }
+        else if (clamped.edge === 'top') {
+            labelY = labelOffset;
+        }
+        else if (clamped.edge === 'bottom') {
+            labelY = -labelOffset;
+        }
+        const displayName = this.getUserDisplayName(cursor.user);
+        return (index.h("div", { key: `edge-${cursor.clientId}`, class: { 'edge-indicator': true, stale, 'tracking-object': trackingObject }, style: {
+                transform: `translate(${clamped.x}px, ${clamped.y}px)`,
+            } }, index.h("svg", { class: "edge-arrow", width: "16", height: "16", viewBox: "0 0 16 16", style: { transform: `rotate(${arrowDeg}deg)` } }, index.h("path", { d: "M8 1L14 13H2L8 1Z", fill: color, stroke: "#ffffff", "stroke-width": "1.5", "stroke-linejoin": "round" })), index.h("span", { class: "edge-label", style: {
+                backgroundColor: color,
+                transform: `translate(${labelX}px, ${labelY}px)`,
+            } }, displayName)));
+    }
+};
+KritzelAwarenessCursors.style = kritzelAwarenessCursorsCss();
+
 const kritzelBackToContentCss = () => `:host{display:block;z-index:var(--kritzel-back-to-content-z-index, 1000)}.back-to-content-button{display:flex;align-items:center;justify-content:center;height:var(--kritzel-back-to-content-height, 50px);box-sizing:border-box;gap:var(--kritzel-back-to-content-gap, 6px);padding:var(--kritzel-back-to-content-padding, 0 16px);border:var(--kritzel-back-to-content-border, 1px solid #ebebeb);border-radius:var(--kritzel-back-to-content-border-radius, 12px);background-color:var(--kritzel-back-to-content-background-color, #ffffff);color:var(--kritzel-back-to-content-color, #000000);font-size:var(--kritzel-back-to-content-font-size, 14px);font-weight:var(--kritzel-back-to-content-font-weight, 500);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}.back-to-content-button.visible{opacity:1;pointer-events:auto}@media (hover: hover){.back-to-content-button:hover{background-color:var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%))}}.back-to-content-button:active{background-color:var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%))}`;
 
 const KritzelBackToContent = class {
@@ -199,7 +455,7 @@ const KritzelBackToContent = class {
         this.backToContent.emit();
     };
     render() {
-        return (index.h(index.Host, { key: 'e42bfb365d1ae7fba820234ae0d59cd1e468a258' }, index.h("button", { key: 'b8c376989685c0aca4ee9c425944289ccc6e351a', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick }, index.h("kritzel-icon", { key: '7955fafe06de1d2f6827bbd933dffd575c9ba9ed', name: "chevrons-left" }))));
+        return (index.h(index.Host, { key: '890501d05ecfadaedbf298590d43b5efd67f1d5f' }, index.h("button", { key: 'fae3acd5aed5d0a5322fe9e0da2186577d873c5c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick }, index.h("kritzel-icon", { key: 'eaa718ab29fad870464c6b67d5ad27c4300dfd54', name: "chevrons-left" }))));
     }
 };
 KritzelBackToContent.style = kritzelBackToContentCss();
@@ -226,11 +482,11 @@ const KritzelButton = class {
         this.buttonClick.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '3efc2197a7f10b5da36eba52e03b48e6aa2500dc' }, index.h("button", { key: '0d506f62756b3cd60ebdd78c52c903dddcd1d6ff', type: this.type, class: {
+        return (index.h(index.Host, { key: '3a285bfdc1b336fb450304856aa81c1bd9c4e5e3' }, index.h("button", { key: 'f3119bfe9cf8ca1b6e031cdcc8bee9549c18e620', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '76ab315100ff334ad47dad974cd83f117f73e844' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '5a26eee0781c5fafc7a41260364b2a2c11f192a6' }))));
     }
 };
 KritzelButton.style = kritzelButtonCss();
@@ -278,13 +534,13 @@ const KritzelColorComponent = class {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (index.h(index.Host, { key: 'a95e6bc89330b9a5baecf53b5fa3e54316ad153d' }, index.h("div", { key: 'e19d5fc8f59dce48f815a382c358a2068b05f8c3', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '7e36e97c383cff73b3146279e971526dd5c7f0f7' }, index.h("div", { key: 'e8ad3ca5e9771c51a96a846627ea20c75212ceeb', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '61678e783b6ea5890fc0eb74f37592b94b09f59e', class: {
+            } }, index.h("div", { key: '9269087c7694604d70d50d846cedb6ce022373cd', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -340,7 +596,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '8dd3fe8327b3d5ce4f420cbff752b523e66b8356' }, index.h("div", { key: '554f867b63450fa0f423b71cdfa5b1d6de3e12a9', class: {
+        return (index.h(index.Host, { key: '22b6f0362933848cd40ad44c73a48fd4d8330884' }, index.h("div", { key: '38adb9abc39d78ae9528341212acf2de425b4eb8', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -538,7 +794,7 @@ const KritzelContextMenu = class {
         })));
     }
     render() {
-        return (index.h(index.Host, { key: 'e1d2c078548eda801784424fb9ba77a8fc905a90' }, index.h("div", { key: '39cba641f90e2ad6d30553974880cdedd7fe3877', class: "menu-container" }, this.processedItems.map(({ item, isDisabled, processedChildren }, index$1) => {
+        return (index.h(index.Host, { key: '11f279a1ef329569988b1c1ce6311a1f81695ebe' }, index.h("div", { key: 'e0aa8ab22df018ae0a2b1c22513575d67099d35d', class: "menu-container" }, this.processedItems.map(({ item, isDisabled, processedChildren }, index$1) => {
             const prevItem = index$1 > 0 ? this.processedItems[index$1 - 1].item : null;
             const showDivider = prevItem && prevItem.group !== item.group;
             const hasChildren = processedChildren && processedChildren.length > 0;
@@ -818,13 +1074,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.controls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.controls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: 'f706b101d3ec5dd4453ffd906499f6f4bbbb64bf', class: {
+        return (index.h(index.Host, { key: 'fa03f9eae6ebc0a043d6ac3cb774ae32491ae943', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '414bda49650cb551036654639fbf1d9bb6bbac4e', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '2e789118656dc3366f131b520f2be4386e5889c8', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '1be53e2fba46a37398768d39fbbed0543eb31628', class: "kritzel-controls" }, index.h("div", { key: 'b26fa897d079043ca007a12b8941a9ee474274be', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: 'ff7b7fb6bd24fccc5e42dd29fc449cd69340bf79', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '29b4d14746f81f7def022ec5769c9d1bf21a6dab', class: "kritzel-controls" }, index.h("div", { key: 'eb5a4ddd2c0ee9d77c008ddae1223e4ce4449116', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '5c41c8fc6770ef5eae7e5b03752f0fe65bcf30e1', class: "kritzel-tools-scroll", ref: el => this.toolsScrollRef = el, onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -854,10 +1110,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: '2644af8c1c448ae961e03a6ceab5c978c077b5c9', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: 'a924ed9102961f992b27afe6945732c8541c13a0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: '4f15bb371e325916bdfae2f3137a7cffed47f6ee', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'eac2874ca75faeb68a5623cd1fa96350469a1566', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '139afc8fb1852d196aa9e659a8d9c7a0c97c1453', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: 'd8725a81b5bfce5b795175a2ff5f8c3aaef7869e', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: '9709b046ceb6ba0982ca45b93212b2d449c2b2fe', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'b2a2521c810f176f54ef8accff5b98a4a1acf42d', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: 'cdfc29f2b8a3cd800789f68879216e73700d546e', tool: this.activeControl.tool, theme: this.theme, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '09d77705945e3e52eff40107c3bcbccbb636586d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -901,7 +1157,7 @@ const KritzelCurrentUser = class {
         this.dialogRef?.open();
     };
     render() {
-        return (index.h(index.Host, { key: '3e35539db9f34e3da3debb1b32973c597ef4a69e' }, index.h("kritzel-avatar", { key: '9db84121465097a39174d26fbec5edab4c4aecaa', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: 'da202b64e1c4781d9d49744ed95e9479780e4cd9', ref: el => (this.dialogRef = el), user: this.user })));
+        return (index.h(index.Host, { key: '603389630e3c1fb02c94663bebdc374bbbfaa79e' }, index.h("kritzel-avatar", { key: 'b346db9aaa7681c484725a42c05ab94f468a19f0', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), index.h("kritzel-current-user-dialog", { key: '647b32cff0ffbfa08ce8d00f1a2f42a6d17027a3', ref: el => (this.dialogRef = el), user: this.user })));
     }
 };
 KritzelCurrentUser.style = kritzelCurrentUserCss();
@@ -933,7 +1189,7 @@ const KritzelCurrentUserDialog = class {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (index.h(index.Host, { key: '3f315637242364ec1a184ab0287e1647903b00df' }, index.h("kritzel-dialog", { key: '124cbb9e0236e7f1f9abfbf22a7de1ad8e9d418c', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '6e74746bb20197e8cf85bc0f9745a7da3a73c248', class: "user-info" }, index.h("kritzel-avatar", { key: '57f6f79b2eb61f503891065845915ca1de8534ad', user: this.user, size: 80 }), displayName && index.h("div", { key: '35d94a67ee50d764484c5f7ad1cbf2a188b030dc', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '9c118a62a29bc32dfc383d59616581a73f52b6f5', class: "user-email" }, this.user.email)))));
+        return (index.h(index.Host, { key: 'f2b3c74f360bc81671e405d05e9a250878722911' }, index.h("kritzel-dialog", { key: 'c042f0574d72ed8705d27730aea8106e089cbcf6', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '3d02828a3444eebb92bdb317923315873e791831', class: "user-info" }, index.h("kritzel-avatar", { key: '172f2a529de8f397e327cbe6395272e12f7a51d0', user: this.user, size: 80 }), displayName && index.h("div", { key: '8537c57e8eaa2172caebcc5d53700f4835b4d1bf', class: "user-name" }, displayName), this.user?.email && index.h("div", { key: '446e60e1d422455518f38049eda813d7c52c8c0d', class: "user-email" }, this.user.email)))));
     }
 };
 KritzelCurrentUserDialog.style = kritzelCurrentUserDialogCss();
@@ -1006,7 +1262,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '603a385702512357af1fbcc778b29feecf8cf208' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '5f7e4478599d482e624b77a752f601088b343f4e', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: 'b6a9e84ce49dd72f353e0b87ae0bc02b0e5aeb1e' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '238ea314a937d556c75ae080495c2e6559340c6f', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -1557,7 +1813,7 @@ const KritzelDropdown = class {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (index.h(index.Host, { key: 'cc92e22245b066a6fdaa821d97f00b94d7bd6232' }, index.h("div", { key: '281288744c360fba3437394bb0a0270986f49de8', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: '5fc4058de36acd05f2ab356ac50aa23a526809e1', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: '317fa76695aad0fad9951def45ee3517e5de316d', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: 'd1221c8b8ea645a6ea19e7ada683405a287f3fe1', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: 'd485070f35bddd9af068a361ce3d94407d011af0', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: '5d617070fb91996b9af3056b294484794953bfcb', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: 'd462cbd0d9172f1617abc6bfeaf990e88bd4300d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '762c57ae655bcf7b3d3f7e29100400c82728f177', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: '8ed792a632ac9b0e91b4b75ce89c4b024ee9b1b9', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: '7cb57ef569aa447198f98714eb0ed41d9e198d75', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
+        return (index.h(index.Host, { key: 'b753a3cf28a0f21625c213c9ec5337b922023206' }, index.h("div", { key: 'dffe30b1d6968ad612c94718eea72f118c43f378', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: '0a08fa5aa5a2040e85ac80643d11ec778ed89b31', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: '8a8b4519787863d53fa7c72928e7632de6daa848', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: '803fe1e4ef138a58cde8941771875dd5eadfe944', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: '05d9dfe94e62134c91316f33cf64f2a9efb57fbb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: '332d5206a67ae8ef4ce0982d62c108210bca6252', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: 'f73539b0decf59fd59d075618dc5028ac82d11b5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '7b45a14ab898233a68845a40363ee37c9922098c', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: '8936739a53b5dca8debdce27c4bead487a5bf803', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: 'f20417649f8988e46db5992100d93fd7bd827b96', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index$1 === this.focusedIndex;
             const optionClasses = {
@@ -1772,7 +2028,7 @@ const KritzelEditor = class {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     syncConfig = {
-        providers: [workspace_migrations.IndexedDBSyncProvider],
+        providers: [workspace_migrations.IndexedDBSyncProvider]
     };
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
     loginConfig;
@@ -2289,7 +2545,7 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '84231308ca4b12863139aeeafa754d544345df3f' }, index.h("div", { key: 'b8cdd2862e9bd892dfeed356e85d608759307bf7', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: '2bce2b9564f5a083ba32667718685310d060f23a', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'b013213fc04fe86eefcc324911693fcffb8eea51', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '7338446462bfdc3995c0897704e9594a875895e1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: '97b9d8805446afc101f01d99bc96bc24a7054722', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '0986b1e82b8fbf989e716fe07a401faca618f642', class: "top-right-buttons" }, index.h("kritzel-settings", { key: '6f4cfe92bb54f0de291b0a0482742b859e86ecf3', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'd669ecae49f721e765d1f8d2f6725633c28cd635', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: 'e44843dcdc9c0ff1e760aadac3f2ec79a7371aba', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '364e09a58fd147f29ce7402406907c6c633124bc', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: '79705ba4c5f991229ae08b90a3397bd3bac56333', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: '95bd3a7f755aa941bd3d9ffdbc2c7f433e5beaaa', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: '94f6cfdb67b82d35c6e86f37c88c2ec323234360', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'bc4fd1ec6e61f4d4e61c043ad33a0b0e2c3c8792', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
+        return (index.h(index.Host, { key: 'd1944655652eb2939e3696ed70050baaca0871e2' }, index.h("div", { key: 'ce5dfd9b8f8d9927e9a6ace4056f9053163c7e0a', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'e127a667c6e4e853bb4f0c9ffd0edaa6d80d9dfa', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'a9abb378f3c79f356d2164cbddf6badba10188a8', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'c5f764580f3623eeb9381e54769a891a48c04620', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.currentTheme, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: '2479b6979d5b2b6c55a873bd1d8468b5fd967f72', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, theme: this.currentTheme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'ec6ac72ba154abe0738259464f20cae9e7dbdd9e', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'f68f791d673b30331e55f358b9c71b3e2a9a8388', ref: el => (this.settingsRef = el), shortcuts: this.shortcuts, editorId: this.editorId, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'dfe5a051caccee504df4f347705303fa1f812556', ref: el => (this.exportRef = el), workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '48983a14d3902cd238cf0d9ed302ed561a655a9a', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: '589bdc895741a2d17f60c4b549d14fe8fff74c17', user: this.user }), shouldShowLoginButton && index.h("kritzel-button", { key: '50414a9d7ade623678c767ce63c49f5e99336bed', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in"), index.h("kritzel-more-menu", { key: 'db3069ee0b093acd238750df81c6f426139c9b87', items: this.moreMenuItems }), index.h("kritzel-share-dialog", { key: 'e16057838f00b2c3f239e794b4310bd2690d16e2', ref: el => (this.shareDialogRef = el), isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'a6d1fc06c983542c6af95e7bb4b2b2d522a03605', ref: el => (this.loginDialogRef = el), providers: this.loginConfig.providers, dialogTitle: this.loginConfig.title, subtitle: this.loginConfig.subtitle, onProviderLogin: this.handleProviderLogin })))));
     }
     static get watchers() { return {
         "isEngineReady": [{
@@ -20414,6 +20670,7 @@ class KritzelCustomElement extends workspace_migrations.KritzelBaseObject {
         object._core = core;
         object.id = object.generateId();
         object.workspaceId = core.store.state.activeWorkspace.id;
+        object.userId = core.user?.id;
         return object;
     }
     /**
@@ -21002,6 +21259,7 @@ class KritzelObjectMap {
     _stackItemPoppedHandler = null;
     _awarenessChangeHandler = null;
     _awarenessChangeCallbacks = [];
+    _objectsChangeCallbacks = [];
     _lastAwarenessEmitTime = 0;
     _awarenessEmitTimeout = null;
     AWARENESS_THROTTLE_INTERVAL = 100; // milliseconds
@@ -21018,6 +21276,19 @@ class KritzelObjectMap {
     get awareness() {
         return this._awareness;
     }
+    /**
+     * Whether a network awareness instance is available.
+     */
+    get hasAwareness() {
+        return !!this._awareness;
+    }
+    /**
+     * Returns the local client ID from the awareness instance.
+     * Used to filter out the local user when rendering remote cursors.
+     */
+    get localClientId() {
+        return this._awareness?.clientID ?? null;
+    }
     /**
      * Sets the local user identity in the awareness state.
      * This broadcasts the user's identity to all connected peers.
@@ -21026,12 +21297,21 @@ class KritzelObjectMap {
         if (!this._awareness || !user) {
             return;
         }
+        const displayName = user.displayName || user.firstName || 'Anonymous';
         this._awareness.setLocalStateField('user', {
             id: user.id,
-            name: user.displayName || user.firstName || 'Anonymous',
-            color: user.color,
+            displayName,
+            color: user.color || this.generateColorFromName(displayName),
         });
     }
+    generateColorFromName(name) {
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 45%, 55%)`;
+    }
     /**
      * Updates the local cursor position in the awareness state.
      * This broadcasts the cursor position to all connected peers.
@@ -21051,6 +21331,37 @@ class KritzelObjectMap {
         }
         this._awareness.setLocalStateField('cursor', null);
     }
+    /**
+     * Sets the ID of the object currently being drawn by the local user.
+     * Remote clients use this to derive cursor position from the object's latest
+     * coordinates instead of the throttled awareness cursor, reducing desync.
+     * Pass `null` when drawing ends.
+     */
+    setActiveDrawingObject(objectId) {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('activeObjectId', objectId);
+    }
+    /**
+     * Broadcasts the local user's selection box bounds via awareness.
+     * Remote clients use this to render the selection rectangle in the user's color.
+     */
+    setLocalSelectionBox(box) {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('selectionBox', box);
+    }
+    /**
+     * Clears the local selection box from awareness (e.g., when selection completes or is cancelled).
+     */
+    clearLocalSelectionBox() {
+        if (!this._awareness) {
+            return;
+        }
+        this._awareness.setLocalStateField('selectionBox', null);
+    }
     /**
      * Registers a callback to be invoked when the awareness state changes.
      * The callback receives the full awareness states map.
@@ -21058,6 +21369,14 @@ class KritzelObjectMap {
     onAwarenessChange(callback) {
         this._awarenessChangeCallbacks.push(callback);
     }
+    /**
+     * Registers a callback to be invoked when remote object changes are received.
+     * Used by the awareness cursors component to re-derive cursor positions
+     * from the latest object data when a remote user is actively drawing.
+     */
+    onObjectsChange(callback) {
+        this._objectsChangeCallbacks.push(callback);
+    }
     /**
      * Returns the Yjs UndoManager instance for managing undo/redo operations.
      * @returns The UndoManager instance, or `null` if not initialized
@@ -21356,6 +21675,10 @@ class KritzelObjectMap {
         if (updatedObjects.length > 0) {
             this._core?.engine.emitObjectsUpdated(updatedObjects.map(obj => ({ object: obj, changedProperties: [] })));
         }
+        // Notify subscribers of remote object changes (e.g., awareness cursors)
+        for (const callback of this._objectsChangeCallbacks) {
+            callback();
+        }
     }
     /**
      * Initializes document metadata if not already set.
@@ -21782,6 +22105,7 @@ class KritzelStore {
     _cachedSelectionGroup = null;
     _selectionBoxCacheValid = false;
     _selectionGroupCacheValid = false;
+    _localUserId = null;
     /**
      * Gets the current engine state.
      * @returns The mutable engine state object
@@ -21859,9 +22183,7 @@ class KritzelStore {
             height: this._state.viewportHeight / this._state.scale,
             depth: 100,
         };
-        return this._state.objects
-            .query(viewportBounds)
-            .sort((a, b) => a.zIndex - b.zIndex);
+        return this._state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
     }
     /**
      * Gets all objects excluding selection-related objects (selection group and selection box).
@@ -21892,16 +22214,22 @@ class KritzelStore {
         return this._cachedSelectionBox;
     }
     /**
-     * Gets the current selection group if one exists.
+     * Gets the current local user's selection group if one exists.
+     * When a local user ID is set, returns only the selection group belonging to that user.
      * Uses caching for O(1) access after initial lookup.
-     * @returns The selection group or null if none exists
+     * @returns The local user's selection group or null if none exists
      */
     get selectionGroup() {
         if (this._selectionGroupCacheValid) {
             return this._cachedSelectionGroup;
         }
         const selectionGroups = this._state.objects.filter(o => o instanceof workspace_migrations.KritzelSelectionGroup);
-        this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
+        if (this._localUserId) {
+            this._cachedSelectionGroup = selectionGroups.find(sg => sg.userId === this._localUserId) ?? null;
+        }
+        else {
+            this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
+        }
         this._selectionGroupCacheValid = true;
         return this._cachedSelectionGroup;
     }
@@ -21930,6 +22258,15 @@ class KritzelStore {
         this._cachedSelectionGroup = group;
         this._selectionGroupCacheValid = true;
     }
+    /**
+     * Sets the local user ID for scoping selection group lookups.
+     * When set, the selectionGroup getter returns only the group owned by this user.
+     * @param userId - The local user's ID, or null for non-collaborative mode
+     */
+    setLocalUserId(userId) {
+        this._localUserId = userId;
+        this.invalidateSelectionCache();
+    }
     /**
      * Gets the currently active text object being edited.
      * @returns The text object in editing mode, or null if none
@@ -22679,6 +23016,7 @@ class KritzelCore {
      */
     setUser(user) {
         this._user = user;
+        this._store.setLocalUserId(user?.id ?? null);
         this._store.state.objects?.setLocalUser(user);
     }
     /**
@@ -23078,6 +23416,7 @@ class KritzelCore {
         if (selectionBox) {
             this._store.state.objects.remove(object => object.id === selectionBox.id);
             this._store.setSelectionBox(null);
+            this._store.state.objects.clearLocalSelectionBox();
         }
     }
     /**
@@ -23550,7 +23889,9 @@ class KritzelCore {
      */
     clearSelection() {
         this.removeSelectionGroup();
-        this._store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox || o instanceof workspace_migrations.KritzelSelectionGroup);
+        const localUserId = this._user?.id;
+        this._store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox ||
+            (o instanceof workspace_migrations.KritzelSelectionGroup && (localUserId == null || o.userId === localUserId || o.userId == null)));
         this._store.setSelectionBox(null);
         this._store.setSelectionGroup(null);
         this._store.state.isSelecting = false;
@@ -23704,6 +24045,10 @@ class KritzelCore {
         if (!object.isSelected) {
             return false;
         }
+        // Remote selection groups always show group UI (border only, no handles)
+        if (object instanceof workspace_migrations.KritzelSelectionGroup && this._user?.id != null && object.userId != null && object.userId !== this._user.id) {
+            return true;
+        }
         const selectionGroup = this._store.selectionGroup;
         if (!selectionGroup) {
             // During selection phase (no group yet), hide UI for KritzelLine objects
@@ -25436,6 +25781,7 @@ const KritzelEngine = class {
         this.core.store.state.isContextMenuVisible = false;
         this.core.store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox);
         this.core.store.setSelectionBox(null);
+        this.core.store.state.objects.clearLocalSelectionBox();
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
         this.core.rerender();
@@ -26383,6 +26729,7 @@ const KritzelEngine = class {
             this.core.clearSelection();
             this.core.store.state.objects.remove(o => o instanceof workspace_migrations.KritzelSelectionBox);
             this.core.store.setSelectionBox(null);
+            this.core.store.state.objects.clearLocalSelectionBox();
             this.core.store.state.isSelecting = false;
             this.core.store.state.isResizeHandleSelected = false;
             this.core.store.state.isRotationHandleSelected = false;
@@ -26559,114 +26906,153 @@ const KritzelEngine = class {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                    zIndex: (object.zIndex + 1).toString(),
-                    height: object?.totalHeight.toString(),
-                    width: object?.totalWidth.toString(),
-                    left: '0',
-                    top: '0',
-                    position: 'absolute',
-                    transform: `rotate(${object.rotationDegrees}deg)`,
-                    transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
-                    overflow: 'visible',
-                    pointerEvents: 'none',
-                } }, this.core.displaySelectionGroupUI(object) && (index.h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, index.h("g", { class: "selection-group-borders" }, index.h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                    strokeLinecap: 'square',
-                } }), index.h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                    strokeLinecap: 'square',
-                } }), index.h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                    strokeLinecap: 'square',
-                } }), index.h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                    strokeLinecap: 'square',
-                } })), !this.isSelecting && (index.h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, index.h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                } }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }))))), this.core.displaySelectionLineUI(object) && workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, index.h("g", { class: "selection-line-borders" }, index.h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
-                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
-                    strokeLinecap: 'round',
-                    fill: 'none',
-                } })), !this.isSelecting && (index.h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, index.h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle-overlay start", "data-testid": "line-handle-start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined
-                    ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
-                    : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
-                    ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle-overlay center", "data-testid": "line-handle-center", cx: object.controlX !== undefined
-                    ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
-                    : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
-                    ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                    : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), index.h("circle", { class: "selection-line-handle-overlay end", "data-testid": "line-handle-end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'transparent',
-                    paintOrder: 'fill',
-                } })))))))));
+                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                (() => {
+                    const isRemoteSelection = workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+                        object.userId != null &&
+                        this.core.user?.id != null &&
+                        object.userId !== this.core.user.id;
+                    let remoteUserColor;
+                    if (isRemoteSelection) {
+                        const awarenessStates = this.core.store.state.objects?.awareness?.getStates();
+                        if (awarenessStates) {
+                            for (const state of awarenessStates.values()) {
+                                if (state.user?.id === object.userId) {
+                                    remoteUserColor = state.user.color;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    const selectionBorderColor = remoteUserColor
+                        ?? (workspace_migrations.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
+                    const selectionHandleStrokeColor = remoteUserColor
+                        ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                            zIndex: (object.zIndex + 1).toString(),
+                            height: object?.totalHeight.toString(),
+                            width: object?.totalWidth.toString(),
+                            left: '0',
+                            top: '0',
+                            position: 'absolute',
+                            transform: `rotate(${object.rotationDegrees}deg)`,
+                            transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
+                            overflow: 'visible',
+                            pointerEvents: 'none',
+                        } }, this.core.displaySelectionGroupUI(object) && (index.h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, (() => {
+                        const remoteLineObject = isRemoteSelection &&
+                            workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+                            object.objects.length === 1 &&
+                            workspace_migrations.KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelLine')
+                            ? object.objects[0]
+                            : null;
+                        if (remoteLineObject) {
+                            return (index.h("g", { class: "selection-line-borders" }, index.h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(remoteLineObject, true), style: {
+                                    stroke: selectionBorderColor,
+                                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                                    strokeLinecap: 'round',
+                                    fill: 'none',
+                                } })));
+                        }
+                        return (index.h("g", { class: "selection-group-borders" }, index.h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                                stroke: selectionBorderColor,
+                                strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                                strokeLinecap: 'square',
+                            } }), index.h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
+                                stroke: selectionBorderColor,
+                                strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                                strokeLinecap: 'square',
+                            } }), index.h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
+                                stroke: selectionBorderColor,
+                                strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                                strokeLinecap: 'square',
+                            } }), index.h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
+                                stroke: selectionBorderColor,
+                                strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                                strokeLinecap: 'square',
+                            } })));
+                    })(), !this.isSelecting && !isRemoteSelection && (index.h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, index.h("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, width: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, height: `${(baseHandleTouchSize * 2 * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                            stroke: selectionBorderColor,
+                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                        } }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }))))), this.core.displaySelectionLineUI(object) && workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, index.h("g", { class: "selection-line-borders" }, index.h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                            stroke: selectionBorderColor,
+                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                            strokeLinecap: 'round',
+                            fill: 'none',
+                        } })), !this.isSelecting && !isRemoteSelection && (index.h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, index.h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "selection-line-handle-overlay start", "data-testid": "line-handle-start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined
+                            ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
+                            : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
+                            ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
+                            : (object.startY - object.y + object.endY - object.y) / 2, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "selection-line-handle-overlay center", "data-testid": "line-handle-center", cx: object.controlX !== undefined
+                            ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
+                            : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
+                            ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
+                            : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), index.h("circle", { class: "selection-line-handle-overlay end", "data-testid": "line-handle-end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'transparent',
+                            paintOrder: 'fill',
+                        } })))))));
+                })()));
         }), (() => {
             const data = this.core.anchorManager.getAnchorLinesRenderData();
             if (!data)
@@ -26751,7 +27137,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof workspace_migrations.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state.objects?.hasAwareness && index.h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof workspace_migrations.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { core: this.core })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -26874,7 +27260,7 @@ const KritzelExport = class {
         return (index.h("div", { class: "export-tab-content" }, index.h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (index.h(index.Host, { key: 'e0b87fc15a375fdd82283d75b477d987db8b81ca' }, index.h("kritzel-dialog", { key: 'bd360887428ce5f43f6fc8871c6acb8b5e373216', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, index.h("div", { key: '7787b3be81cfbc812bc7430399a9c3ad4c230cdb', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '942677f661c85092233d69b681fbf174968cbb61', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: '19a39246beff8b8b36770581e8d1c45b0a9ea5f4', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (index.h(index.Host, { key: '89824b452ccc845f4dfd1e13c01a24a72e5d9488' }, index.h("kritzel-dialog", { key: 'a9190d093e84b5850146db39e1016abce9de0d83', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, index.h("div", { key: '3068dbb979a029bf580e2d00a721768bc08d12b3', class: "export-content" }, index.h("kritzel-pill-tabs", { key: '6241491cc549f576b822bc9fda37c9edffd9143f', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), index.h("button", { key: 'a9fe2a7ccb5b97095271a6e00fe9585f39b137fc', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
 };
 KritzelExport.style = kritzelExportCss();
@@ -26889,7 +27275,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: '70bc1c26fc43bffbd3df59c60453e3229725c8d1' }, index.h("div", { key: 'd7ed7c78581f8ce760dd6c143a311ee540a4df94', class: "font-preview", style: {
+        return (index.h(index.Host, { key: '3d5fd9aecf7abc96c438b890f5831281d6194922' }, index.h("div", { key: '2b3df82e475177e803f172f440ffcee97dbe5aa5', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -26964,7 +27350,7 @@ const KritzelFontSize = class {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (index.h(index.Host, { key: 'ceea18a28a3b292ee89839a7a183da2000eaf156' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: '32615ac4756efd047219b93642f7b5cc7d80669b' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
@@ -27031,7 +27417,7 @@ const KritzelInput = class {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (index.h(index.Host, { key: '1b151bb26c9398c5c29e3d3367cb6ba21e6864fe' }, index.h("div", { key: 'd2ba0fa75ad80e357d6684928bd48aeaa102a706', class: "input-container" }, this.label && index.h("label", { key: '47ed17ec74d26b29fc7857780d070d6cfac157f1', class: "input-label" }, this.label), index.h("div", { key: 'bfcbe25bf4b876e7f5466a2f48dd63309fb310a5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: 'ef58442a0bd2fee845a9d35ddc9d04b357d93940', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '8b6f73557fa2c44cf0ba7720685306e29df44179', class: "input-suffix" }, this.suffix)))));
+        return (index.h(index.Host, { key: '5cfc93853afd27dd24ff9709dcd277571ae4d0a1' }, index.h("div", { key: 'fa0a43610b98ffbc30bf9485a4f8730b80f74ab7', class: "input-container" }, this.label && index.h("label", { key: '151346732ef4a00a1ea78bbc19ac56a94488dfc4', class: "input-label" }, this.label), index.h("div", { key: '79b28f6f45cdacf7d122988bb4c844c929544cce', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, index.h("input", { key: 'e22abd0e10ee231b2e66f50085693769584a1254', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && index.h("span", { key: '5c96287d24dc28f4ac321f108a356527194f4e81', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{
@@ -27171,7 +27557,7 @@ const KritzelLoginDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '1daa4d598e883bb5d212d681692bde9de4a09969' }, index.h("kritzel-dialog", { key: 'ae21cc3a8978ea19cba8a07a3a22f791efd20915', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '81c278e44685a040066caccb747f272182b10ee6', class: "login-content" }, this.subtitle && (index.h("p", { key: '9a2478c3713cc119b933fbf7f928f4928d14b0d7', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: '0e273e0c48886f68d0ffec9c46a5427cc8949ddc', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
+        return (index.h(index.Host, { key: '21b548c3d1391203a02a33e66afa5d3dae603071' }, index.h("kritzel-dialog", { key: '1254e8bdc8e84e71e606109e20f938ecb42b05e3', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '99d23d7c0d52da043c3d59ee9d527d02e68d3b2b', class: "login-content" }, this.subtitle && (index.h("p", { key: '7ce2131761e0127a190dbc1f7b4cd32884e4657b', class: "login-subtitle" }, this.subtitle)), index.h("div", { key: 'bc32c6e61856c963cf9c0d22bfe5935c6c55568d', class: "login-providers" }, this.providers.map(provider => (index.h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
@@ -27277,15 +27663,15 @@ const KritzelMasterDetail = class {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (index.h(index.Host, { key: 'fbdbf1151992c991945de48b593a8c9d0b6ed788' }, index.h("div", { key: 'e46113c8f3f0aa7ca376a288f5bccc8d25789880', class: {
+        return (index.h(index.Host, { key: '25913464ef131f1332146a5372c0caf9f7050f24' }, index.h("div", { key: '206346f9bee671f1b283ebfaca4c4401706a074f', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, index.h("nav", { key: '7c125b758e71eb9082d2c0583ba6aad95123776d', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
+            } }, index.h("nav", { key: 'f4cf41f060d1d25887d2b11a264de040e878d25c', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index$1) => (index.h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index$1), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index$1 === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: '1ead5122c67ba7ea40065240d921deaf0c3ca76f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: 'a31f779aa0a70ce76dadb7028d2cee46e0e8be05', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '355c38dfe879ef89a431d0c674304b32cbb2022b', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: 'f70d9250d8f7a0c1d31b3f706a1494778b60f5dc' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index$1), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index$1), onFocus: () => this.handleFocus(index$1), onBlur: this.handleBlur }, item.icon && (index.h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), index.h("span", { class: "menu-item-label" }, item.label), index.h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "m9 18 6-6-6-6" }))))))), index.h("div", { key: 'efb20b2c1c6dfcf03bee2c1ef06c2c7a6de27e7a', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, index.h("button", { key: '13b97670c0c0b7f8fe493438d26179cd5039cd9c', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, index.h("kritzel-icon", { key: '6a52e00dd7fc61bcacce71127bf78637bbff7e30', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), index.h("slot", { key: '99bd31682d0e8accc6c2eacfcbaf6778f3b92d05' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{
@@ -27358,7 +27744,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '9c5cf77bd92351cac399076343ca35d26c9d2230', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'b7df3b9b683c51093701abd789290ccfcfbdc3cf', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (index.h(index.Host, { key: '9a14983012bb0c286a17811d3e3c41743799c560', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: '0540a587c117a09857e9d87b65e019c8fa85c694', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss();
@@ -27463,12 +27849,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'f81a52f2536c759530b0b069ff02e0a71c363b0a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '5a0d685c83cb3f82e64e74feef124ae0c9bca162', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, index.h("div", { key: '212dbdbfc7a1cac000c8b25f9f51ad3de5420219', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: '02415ff1e0abf326ae284ed5b31b2a0241d4c7e2', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": [{
@@ -27535,7 +27921,7 @@ const KritzelMoreMenu = class {
         this.closeMenu();
     };
     render() {
-        return (index.h(index.Host, { key: '02d18106b6a932cd4508bebc6ada3416f38eafc6', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'dff3f7bd69f8f1eafbff03b9ecc2f96c85784a85', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: '28586ce5dd15be347cc59555608a2cbbf2978a2b', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '3ca9260c3602a639687bc1341736c15a1b5c10a7', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'e8e88cc9f827d93d9adcc86ad1041774cfc282af', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
+        return (index.h(index.Host, { key: '951577ab19a6bb10e7c578546a386e6159d16aff', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '2b5112a4458544945c91536cb974e230401c6cd2', class: "more-menu-button", onClick: this.toggleMenu }, index.h("kritzel-icon", { key: 'e37122c20fa642ad4e53ae039ab43539f3b5b195', name: this.icon, size: this.iconSize })), index.h("kritzel-portal", { key: '5b4fd597eb4ec299ca672194f0dd69d3d50c270b', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'a3a48b1ebb064293ecb6bb06f1783cba849d2ade', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect }))));
     }
 };
 KritzelMoreMenu.style = kritzelMoreMenuCss();
@@ -27633,7 +28019,7 @@ const KritzelNumericInput = class {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (index.h(index.Host, { key: '8f8984a3b29bad180be48c0d0cfdb269cbfb4c68' }, index.h("div", { key: '94e161c3dd1a8d05270f4611a5ba19323f8d9657', class: "input-container" }, this.label && index.h("label", { key: '53d8ba3d7fd0fcc888aaa167754854cc3ab9c98b', class: "input-label" }, this.label), index.h("div", { key: '4b0d15134fbdacf2a64213e73265adfb1e468525', class: "input-wrapper" }, index.h("input", { key: '59f62088b3a85aa8dfa3d9b1c04f50c289e4ab67', 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 }), index.h("div", { key: '2fe741f055b0a05e1605096287bda58a84760363', class: "spinner-buttons" }, index.h("button", { key: '0777d4483dc2ec8835a232d5da3f8fb8ce7acce2', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '37b962d0fcae37f6e8cf552e7a36d015b377f3ff', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'd2916bc1cc40476418b9ee2e8c5c16172be90c2b', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: 'c3f8c27fef2f95787d3a6e1a1d46c92f4bf20a8e', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '35658bd8d44502509b3b6bda3490962e180fb692', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '67672b3a12f4973570698a8bd0a8cb856c0d0f82', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (index.h(index.Host, { key: '9f5b165e9c4db1cc6724020e12d18beb0a70ad11' }, index.h("div", { key: 'e5e3d790f9d9bd7bb2d25367bb7d7d86c731091f', class: "input-container" }, this.label && index.h("label", { key: '0ee62b45cbfe34405a888d0d61af472936b0a453', class: "input-label" }, this.label), index.h("div", { key: '49bbdca156346c1e0dd7b08d6790ae5829fa6d1f', class: "input-wrapper" }, index.h("input", { key: '986e05275c90bee119ff3c803d90ba16a0005f8d', 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 }), index.h("div", { key: '4c468fdca0018390bdc57f1b2fd7fa2e68b09f98', class: "spinner-buttons" }, index.h("button", { key: '7b433424c6817049b6229e249d715ebd43dfe350', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, index.h("svg", { key: '666b0c184d00d000a1fa97d4bdda3a9a6b0d299d', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: '223f829a0b808e9fdde656294729121e2c8ae0d3', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("button", { key: '40f72b01e59b98c7bca4952c94eeb631fe3d17a1', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, index.h("svg", { key: '5f304877010fc9fa1c7559270b5105659b2f4863', viewBox: "0 0 10 6", class: "spinner-icon" }, index.h("path", { key: 'e31b6f1edb583eebbf608fc5360c53d49d4d2d5c', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{
@@ -27672,7 +28058,7 @@ const KritzelOpacitySlider = class {
     }
     render() {
         const percentage = this.getPercentage();
-        return (index.h(index.Host, { key: '01ab026ae319eaf7bebdd74f5d06e79be4871630' }, index.h("div", { key: '67a5dec5570d7f16162fb5d43f18e020f642df68', class: "opacity-container" }, index.h("div", { key: '87362a95645b164331c58c46add78e1497e27ba1', class: "slider-wrapper" }, index.h("input", { key: '0ec74a8e864c7ac47a5ac4eea4d1c960d10214d4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (index.h(index.Host, { key: 'a0307b2fc97221881f0e2a21035427fcf0c5fdb3' }, index.h("div", { key: 'a77c6e973f92671daa3a8299b51d70b2d2fd98db', class: "opacity-container" }, index.h("div", { key: 'c5df7c6fe6db3aa9a8430ea7580d6cc7a23666b8', class: "slider-wrapper" }, index.h("input", { key: '6d3cae027e5a9b391f36ede911dedb201630d525', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
             } })))));
     }
@@ -28008,7 +28394,7 @@ const KritzelPortal = class {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (index.h(index.Host, { key: '14116403d3ecb83928b66999da1561f233fd23e9', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '1f5d5789b30699de4d332b89e51356fa06b34bf3' })));
+        return (index.h(index.Host, { key: '70a29385ee7f1bef37f903e1e6821b46fc9a147f', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '8f50bce48c3aa82abbfc34331f8e80f205a45f03' })));
     }
     static get watchers() { return {
         "anchor": [{
@@ -28022,7 +28408,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.73';
+const KRITZEL_VERSION = '0.1.74';
 
 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)}`;
 
@@ -28217,7 +28603,7 @@ const KritzelSettings = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fc940d4154b06378cf13f7cde5238f4a1ac1d2ba' }, index.h("kritzel-dialog", { key: '0c50f5cb3570eba67ce4c04f9f453361e0c9626a', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '974adda5868d1261784366b59e285a0c45d265ca', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (index.h(index.Host, { key: '0d4cd5ad565a1ff1140f308765ff887ba68ba6c8' }, index.h("kritzel-dialog", { key: '170a15a41d18f56981a99aae266026625d7fe644', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, index.h("kritzel-master-detail", { key: '6569f351fdef57dd189af63f7d6c4d98ce815c1b', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
 };
 KritzelSettings.style = kritzelSettingsCss();
@@ -28343,9 +28729,9 @@ const KritzelShareDialog = class {
         this.dialogClosed.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '0e498848cf6c680cd7ce0233b258317ae967262a' }, index.h("kritzel-dialog", { key: 'f5d1c6fbf454d5a46e60a915a405ca0926e1b5e3', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '1348d2969058a5d4d2e992c9c2df5c7ec57591ed', class: "share-content" }, index.h("div", { key: '7c7c349c0af3b125eff301d229731b64c4a51d0a', class: "share-section" }, index.h("div", { key: 'c1498b2b2ac6717925ce806bc3fea6af3e611709', class: "share-row" }, index.h("div", { key: '44c268fa61994cff17d6a0082347c18374d92243', class: "share-label-group" }, index.h("label", { key: '1a56501131c2dd0666d9755930d52cacc3b703c5', class: "share-label" }, "Link sharing"), index.h("p", { key: 'fd4fca65f5258e040eff95d1f27059240ed7aa6a', class: "share-description" }, this.internalIsPublic
+        return (index.h(index.Host, { key: 'f1d9bac1ed73b3c028d77bec2eb0882b08ec12c8' }, index.h("kritzel-dialog", { key: '952e6c6c8ed5b2260c7b540524044a8704796cd9', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, index.h("div", { key: '1834e98b32be60eebf499ff7d021b16f2d9ad018', class: "share-content" }, index.h("div", { key: 'bc19e19e35de1513a1b337ad96a5e58b1c987751', class: "share-section" }, index.h("div", { key: '0310309b3389827d94be755d926eeda87d434148', class: "share-row" }, index.h("div", { key: 'ed3171611a010df28ead03955f413083e615f908', class: "share-label-group" }, index.h("label", { key: '90cc0d814c973bd02e4fb8b871b20561804e08dc', class: "share-label" }, "Link sharing"), index.h("p", { key: '02ae9eb9aeaf7e1153873da7f6501bdf0fc27096', class: "share-description" }, this.internalIsPublic
             ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '69214469344850ac81dad9462e6a3547ebf6f48f', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: '9a26ca0ca3e447ae4cc0b4a20de666b97a90b20f', class: "share-section" }, index.h("div", { key: '753dbfd83f83ac81c6296cfc6bbf59ddf514897c', class: "share-url-container" }, index.h("input", { key: '2515209593b5c59792606f8915d62f83c7b35160', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: '1d62fb016514e8a16eb354aff139db43af7585f3', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: 'a9824261a6914aff927866409c02a42ca8faf44f', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), index.h("kritzel-slide-toggle", { key: '656ff6bff6dff3956b73072766b73642c13cf968', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (index.h("div", { key: 'dfc591b157b9ae5c268d77b7a7aab4168c80690d', class: "share-section" }, index.h("div", { key: '54f71d05705ddca92ccf1637e0ad7318127b6e72', class: "share-url-container" }, index.h("input", { key: 'fa1a9fad703a30e87daa8c3f83c782349103809a', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), index.h("button", { key: 'd879775f7df013855e748c48dda63470ee0f66c4', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, index.h("kritzel-icon", { key: '985ee904561df3bd182697f7b95bc0e64c7f70d5', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get watchers() { return {
         "isPublic": [{
@@ -28383,7 +28769,7 @@ const KritzelSlideToggle = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'd294d9becd13e8373bd029508ded3f47ee344184', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '3b5349c9b1f2126c9075f979c8b1a7b098060abb', class: "toggle-track" }, index.h("div", { key: '0bb5a44e73071d819611863e24af433ed56fb80d', class: "toggle-thumb" }))));
+        return (index.h(index.Host, { key: 'fa4a31e3978f5a7187c8e011d58278829f60f912', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, index.h("div", { key: '1ae5a58c6cedf19626cba1e04abe566669582081', class: "toggle-track" }, index.h("div", { key: 'e11d42017fd624837f9e44f2671b74d38e4d015f', class: "toggle-thumb" }))));
     }
 };
 KritzelSlideToggle.style = kritzelSlideToggleCss();
@@ -28483,7 +28869,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: '1e85f2b22cde41378d03710bd1332e2eb91ebe5a', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '56573ad5655b2f61e1ebf3c4d85b489375beb62e', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '335c2f5418e305f3e48e3caabc4c48001ddd5ec3', name: this.buttonIcon })), index.h("div", { key: '733e48020f3b21b22de3774323e5a2d024686c2c', class: "split-divider" }), index.h("button", { key: '650cd557b856b5527910cbdeb6d14fe7a88bc0ab', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '3aaacbcdd66583e3884fe44777794209753fe594', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'd0ca70c21dfbf1684ab84650a31aae77df5cb52e', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '9e38d4d6e1c82b6dca3c6d23fb5c0df12bfbefb4', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: 'dbb1a5f61cae17d47d3d31959172189d842a1e0c', class: { mobile: this.isTouchDevice } }, index.h("button", { key: '081650f6ee9f8f4c6c7d8d0d72b72d116162034b', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '870353d092212556316e5881cd817208f138dfff', name: this.buttonIcon })), index.h("div", { key: '2254a771e8b73a5e0037e48f45cbf3819f6d83a6', class: "split-divider" }), index.h("button", { key: '0c42a970441e6f3530f686b8825f7de9b8395a07', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: 'a958954d14c3f8f0e86d7d927f116c9a28a1fb43', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '98b72e3da54dadb51a51f591dbae47dab439ac8e', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '9f505415219b5741f483c659a00c1655c6652ca7', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss();
@@ -28503,7 +28889,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '2095245a9a1ae7781cf1030baaa93e6462b3c09e' }, index.h("div", { key: 'b83777024ef29d90f072a0ab002cf17a766825be', class: "size-grid" }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: 'd7b77c754e247879f94b05f9c7b282d2aec22035' }, index.h("div", { key: '1f1c95ccb4b8f5500d73e4eafa775aa1dd93d83c', class: "size-grid" }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
@@ -28847,14 +29233,14 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '788500c800ec72ed8fd1ac7972d503c0a60a35b1', style: {
+        return (index.h(index.Host, { key: '0f67bc5736d65b2dcb277bfea3a052e165213c01', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, index.h("div", { key: '7d0633d32290a5c0dc2cef32fac5cf78bb36619b', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: '512e9e39b890672e09542913783f7b16fae6f444' }))));
+            } }, index.h("div", { key: 'd193b1b6dd28022da87bcce832ae72d630fcd7e0', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, index.h("slot", { key: 'a06478f4a9c995bad3558287341003effa6fc834' }))));
     }
     static get watchers() { return {
         "triggerElement": [{
@@ -28893,7 +29279,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '02831a892fee80cc9300282eceb6ee8abcba017e' }, index.h("button", { key: 'a22749cc8772e23d1ed848be2f4173ca9e0023b6', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '52f08e9e950501151f2f9196d248caa493d46f14', name: "undo" })), index.h("button", { key: '5a858ce4415d29d50928b42c8b7e9bf5380ab08e', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '9d995aedbcedc5b55021c7bb9c10dddb90602ea0', name: "redo" })), index.h("div", { key: '248c5499808553b0ac587b0aedeaf9db82e21991', class: "utility-separator" }), index.h("button", { key: '901f30f009abc873d360118088886b6f20d672c5', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '82d4e1531360cc57038f161f13212cccd9df1285', name: "delete" }))));
+        return (index.h(index.Host, { key: '0277e775741c91fe53daea8b14f9fdec550bef45' }, index.h("button", { key: '7eff5491f732dc6871b382612cf64a4d661fa39b', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '4eff979e1b6158df5a1b17c702765432bd18f642', name: "undo" })), index.h("button", { key: '73d75b36bfbd9d4299aea16be54ed6e1687a47d1', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'd1556e8b7aa32b102aad9ea572d040e8863197c3', name: "redo" })), index.h("div", { key: 'eefbdb33bb73d5a48db79fe9621a91da77ddd46d', class: "utility-separator" }), index.h("button", { key: '15630243403ff4475123e209d0c3e7919718bc00', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit() }, index.h("kritzel-icon", { key: '7a423865d246a4752fc8fa3411133d0bd4f1c75d', name: "delete" }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss();
@@ -29043,6 +29429,7 @@ KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss();
 
 exports.kritzel_active_users = KritzelActiveUsers;
 exports.kritzel_avatar = KritzelAvatar;
+exports.kritzel_awareness_cursors = KritzelAwarenessCursors;
 exports.kritzel_back_to_content = KritzelBackToContent;
 exports.kritzel_button = KritzelButton;
 exports.kritzel_color = KritzelColorComponent;