kritzel-stencil 0.1.72 → 0.1.74

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

@@ -430,6 +430,7 @@ export class KritzelEngine {
         this.core.store.state.isContextMenuVisible = false;
         this.core.store.state.objects.remove(o => o instanceof 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();
@@ -1362,6 +1363,7 @@ export class KritzelEngine {
             this.core.clearSelection();
             this.core.store.state.objects.remove(o => o instanceof 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;
@@ -1538,114 +1540,153 @@ export class KritzelEngine {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) && (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) && (h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-group-borders" }, 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',
-                } }), 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',
-                } }), 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',
-                } }), 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 && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, 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',
-                } }), 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',
-                } }), 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',
-                } }), 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',
-                } }), 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',
-                } }), 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',
-                } }), 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',
-                } }), 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',
-                } }), 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})`,
-                } }), 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',
-                } }), 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) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, 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 && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), h("circle", { class: "selection-line-handle-overlay start", "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',
-                } }), 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',
-                } }), 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',
-                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
-                    fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                    strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
-                    paintOrder: 'fill',
-                } }), h("circle", { class: "selection-line-handle-overlay end", "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',
-                } })))))))));
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                (() => {
+                    const isRemoteSelection = 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
+                        ?? (KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
+                    const selectionHandleStrokeColor = remoteUserColor
+                        ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    return (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) && (h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, (() => {
+                        const remoteLineObject = isRemoteSelection &&
+                            KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+                            object.objects.length === 1 &&
+                            KritzelClassHelper.isInstanceOf(object.objects[0], 'KritzelLine')
+                            ? object.objects[0]
+                            : null;
+                        if (remoteLineObject) {
+                            return (h("g", { class: "selection-line-borders" }, 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 (h("g", { class: "selection-group-borders" }, 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',
+                            } }), 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',
+                            } }), 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',
+                            } }), 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 && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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})`,
+                        } }), 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',
+                        } }), 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) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, 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 && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / this.core.store.state?.scale}`, style: {
+                            fill: 'var(--kritzel-selection-handle-color, #000000)',
+                            stroke: selectionHandleStrokeColor,
+                            strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
+                            paintOrder: 'fill',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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',
+                        } }), 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)
@@ -1730,7 +1771,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '9f2756b21f5cf12c770ecae3917b889e651180fd', style: containerStyles, class: {
+        return (h(Host, { key: '67c0c1f944b9c835d1685d2b743114a1b5a1f061', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '4d73aed6c3cb4832a661163e780b4950beb33ff3', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (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 && (h("span", { key: '9e71b25b721d18e213da38ceead31ed5cf861bd8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'f330747bda5862d9e2d19d9dda331bced2bdc6de', class: "avatar-default" }, h("svg", { key: '4eefdc2e502669c193fbe54a20c57701f0ecc0ae', viewBox: "0 0 24 24", fill: "currentColor" }, 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 && (h("span", { key: '818ad4a24d6489565dffc8c64b3d4e76b701444c', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '87af93fd968f3bf5b1f86295de6bd4b71c94120c', class: "avatar-default" }, h("svg", { key: '3267317fe99fb8d90432e207516bb48f603c08ed', viewBox: "0 0 24 24", fill: "currentColor" }, 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 is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js

@@ -14,7 +14,7 @@ export class KritzelBrushStyle {
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
+        return (h(Host, { key: '66ecc7850e816be6f0c38e2a53d96493e8141a7c' }, h("kritzel-dropdown", { key: '792caa0c4ff4c8ee3c5dfd404ba5456e6a4c16e4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '7c82f747c86846c19635be47c797371300855f5e', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '59d4863c0660d0c6281031321e11518c57d8ae71', name: this.type, size: 16 })))));
     }
     static get is() { return "kritzel-brush-style"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-button/kritzel-button.js

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: '3efc2197a7f10b5da36eba52e03b48e6aa2500dc' }, h("button", { key: '0d506f62756b3cd60ebdd78c52c903dddcd1d6ff', type: this.type, class: {
+        return (h(Host, { key: '3a285bfdc1b336fb450304856aa81c1bd9c4e5e3' }, h("button", { key: 'f3119bfe9cf8ca1b6e031cdcc8bee9549c18e620', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '76ab315100ff334ad47dad974cd83f117f73e844' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '5a26eee0781c5fafc7a41260364b2a2c11f192a6' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-color/kritzel-color.js

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'a95e6bc89330b9a5baecf53b5fa3e54316ad153d' }, h("div", { key: 'e19d5fc8f59dce48f815a382c358a2068b05f8c3', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '7e36e97c383cff73b3146279e971526dd5c7f0f7' }, h("div", { key: 'e8ad3ca5e9771c51a96a846627ea20c75212ceeb', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '61678e783b6ea5890fc0eb74f37592b94b09f59e', class: {
+            } }, h("div", { key: '9269087c7694604d70d50d846cedb6ce022373cd', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '8dd3fe8327b3d5ce4f420cbff752b523e66b8356' }, h("div", { key: '554f867b63450fa0f423b71cdfa5b1d6de3e12a9', class: {
+        return (h(Host, { key: '22b6f0362933848cd40ad44c73a48fd4d8330884' }, h("div", { key: '38adb9abc39d78ae9528341212acf2de425b4eb8', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {

package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.js

@@ -231,7 +231,7 @@ export class KritzelDropdown {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: 'cc92e22245b066a6fdaa821d97f00b94d7bd6232' }, h("div", { key: '281288744c360fba3437394bb0a0270986f49de8', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '5fc4058de36acd05f2ab356ac50aa23a526809e1', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '317fa76695aad0fad9951def45ee3517e5de316d', class: "dropdown-container", style: { width: this.width } }, 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) }, h("span", { key: 'd485070f35bddd9af068a361ce3d94407d011af0', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '5d617070fb91996b9af3056b294484794953bfcb', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, 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" }, h("polyline", { key: '762c57ae655bcf7b3d3f7e29100400c82728f177', points: "6 9 12 15 18 9" }))))), h("slot", { key: '8ed792a632ac9b0e91b4b75ce89c4b024ee9b1b9', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '7cb57ef569aa447198f98714eb0ed41d9e198d75', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: 'b753a3cf28a0f21625c213c9ec5337b922023206' }, h("div", { key: 'dffe30b1d6968ad612c94718eea72f118c43f378', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '0a08fa5aa5a2040e85ac80643d11ec778ed89b31', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '8a8b4519787863d53fa7c72928e7632de6daa848', class: "dropdown-container", style: { width: this.width } }, 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) }, h("span", { key: '05d9dfe94e62134c91316f33cf64f2a9efb57fbb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '332d5206a67ae8ef4ce0982d62c108210bca6252', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, 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" }, h("polyline", { key: '7b45a14ab898233a68845a40363ee37c9922098c', points: "6 9 12 15 18 9" }))))), h("slot", { key: '8936739a53b5dca8debdce27c4bead487a5bf803', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f20417649f8988e46db5992100d93fd7bd827b96', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index === this.focusedIndex;
             const optionClasses = {

package/dist/collection/components/shared/kritzel-font/kritzel-font.js

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '70bc1c26fc43bffbd3df59c60453e3229725c8d1' }, h("div", { key: 'd7ed7c78581f8ce760dd6c143a311ee540a4df94', class: "font-preview", style: {
+        return (h(Host, { key: '3d5fd9aecf7abc96c438b890f5831281d6194922' }, h("div", { key: '2b3df82e475177e803f172f440ffcee97dbe5aa5', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js

@@ -16,7 +16,7 @@ export class KritzelFontSize {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (h(Host, { key: 'ceea18a28a3b292ee89839a7a183da2000eaf156' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '32615ac4756efd047219b93642f7b5cc7d80669b' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));

package/dist/collection/components/shared/kritzel-input/kritzel-input.js

@@ -28,7 +28,7 @@ export class KritzelInput {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: '1b151bb26c9398c5c29e3d3367cb6ba21e6864fe' }, h("div", { key: 'd2ba0fa75ad80e357d6684928bd48aeaa102a706', class: "input-container" }, this.label && h("label", { key: '47ed17ec74d26b29fc7857780d070d6cfac157f1', class: "input-label" }, this.label), h("div", { key: 'bfcbe25bf4b876e7f5466a2f48dd63309fb310a5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'ef58442a0bd2fee845a9d35ddc9d04b357d93940', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '8b6f73557fa2c44cf0ba7720685306e29df44179', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: '5cfc93853afd27dd24ff9709dcd277571ae4d0a1' }, h("div", { key: 'fa0a43610b98ffbc30bf9485a4f8730b80f74ab7', class: "input-container" }, this.label && h("label", { key: '151346732ef4a00a1ea78bbc19ac56a94488dfc4', class: "input-label" }, this.label), h("div", { key: '79b28f6f45cdacf7d122988bb4c844c929544cce', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'e22abd0e10ee231b2e66f50085693769584a1254', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '5c96287d24dc28f4ac321f108a356527194f4e81', class: "input-suffix" }, this.suffix)))));
     }
     static get is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js

@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: 'fbdbf1151992c991945de48b593a8c9d0b6ed788' }, h("div", { key: 'e46113c8f3f0aa7ca376a288f5bccc8d25789880', class: {
+        return (h(Host, { key: '25913464ef131f1332146a5372c0caf9f7050f24' }, h("div", { key: '206346f9bee671f1b283ebfaca4c4401706a074f', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: '7c125b758e71eb9082d2c0583ba6aad95123776d', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: 'f4cf41f060d1d25887d2b11a264de040e878d25c', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === 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), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '1ead5122c67ba7ea40065240d921deaf0c3ca76f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'a31f779aa0a70ce76dadb7028d2cee46e0e8be05', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '355c38dfe879ef89a431d0c674304b32cbb2022b', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), 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), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'efb20b2c1c6dfcf03bee2c1ef06c2c7a6de27e7a', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '13b97670c0c0b7f8fe493438d26179cd5039cd9c', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '6a52e00dd7fc61bcacce71127bf78637bbff7e30', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '99bd31682d0e8accc6c2eacfcbaf6778f3b92d05' })))));
     }
     static get is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js

@@ -51,7 +51,7 @@ export class KritzelMenu {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '9c5cf77bd92351cac399076343ca35d26c9d2230', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b7df3b9b683c51093701abd789290ccfcfbdc3cf', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (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 (h(Host, { key: '9a14983012bb0c286a17811d3e3c41743799c560', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '0540a587c117a09857e9d87b65e019c8fa85c694', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (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 })))));
     }
     static get is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -90,12 +90,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: 'f81a52f2536c759530b0b069ff02e0a71c363b0a', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(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 }, h("div", { key: '212dbdbfc7a1cac000c8b25f9f51ad3de5420219', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '02415ff1e0abf326ae284ed5b31b2a0241d4c7e2', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js

@@ -86,7 +86,7 @@ export class KritzelNumericInput {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '8f8984a3b29bad180be48c0d0cfdb269cbfb4c68' }, h("div", { key: '94e161c3dd1a8d05270f4611a5ba19323f8d9657', class: "input-container" }, this.label && h("label", { key: '53d8ba3d7fd0fcc888aaa167754854cc3ab9c98b', class: "input-label" }, this.label), h("div", { key: '4b0d15134fbdacf2a64213e73265adfb1e468525', class: "input-wrapper" }, 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 }), h("div", { key: '2fe741f055b0a05e1605096287bda58a84760363', class: "spinner-buttons" }, h("button", { key: '0777d4483dc2ec8835a232d5da3f8fb8ce7acce2', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '37b962d0fcae37f6e8cf552e7a36d015b377f3ff', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'd2916bc1cc40476418b9ee2e8c5c16172be90c2b', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'c3f8c27fef2f95787d3a6e1a1d46c92f4bf20a8e', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '35658bd8d44502509b3b6bda3490962e180fb692', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '67672b3a12f4973570698a8bd0a8cb856c0d0f82', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '9f5b165e9c4db1cc6724020e12d18beb0a70ad11' }, h("div", { key: 'e5e3d790f9d9bd7bb2d25367bb7d7d86c731091f', class: "input-container" }, this.label && h("label", { key: '0ee62b45cbfe34405a888d0d61af472936b0a453', class: "input-label" }, this.label), h("div", { key: '49bbdca156346c1e0dd7b08d6790ae5829fa6d1f', class: "input-wrapper" }, 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 }), h("div", { key: '4c468fdca0018390bdc57f1b2fd7fa2e68b09f98', class: "spinner-buttons" }, h("button", { key: '7b433424c6817049b6229e249d715ebd43dfe350', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '666b0c184d00d000a1fa97d4bdda3a9a6b0d299d', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '223f829a0b808e9fdde656294729121e2c8ae0d3', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '40f72b01e59b98c7bca4952c94eeb631fe3d17a1', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '5f304877010fc9fa1c7559270b5105659b2f4863', viewBox: "0 0 10 6", class: "spinner-icon" }, 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 is() { return "kritzel-numeric-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '01ab026ae319eaf7bebdd74f5d06e79be4871630' }, h("div", { key: '67a5dec5570d7f16162fb5d43f18e020f642df68', class: "opacity-container" }, h("div", { key: '87362a95645b164331c58c46add78e1497e27ba1', class: "slider-wrapper" }, 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 (h(Host, { key: 'a0307b2fc97221881f0e2a21035427fcf0c5fdb3' }, h("div", { key: 'a77c6e973f92671daa3a8299b51d70b2d2fd98db', class: "opacity-container" }, h("div", { key: 'c5df7c6fe6db3aa9a8430ea7580d6cc7a23666b8', class: "slider-wrapper" }, 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}%`,
             } })))));
     }

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -261,7 +261,7 @@ export class KritzelPortal {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: '14116403d3ecb83928b66999da1561f233fd23e9', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '1f5d5789b30699de4d332b89e51356fa06b34bf3' })));
+        return (h(Host, { key: '70a29385ee7f1bef37f903e1e6821b46fc9a147f', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '8f50bce48c3aa82abbfc34331f8e80f205a45f03' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js

@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
         }
     };
     render() {
-        return (h(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 }, h("div", { key: '3b5349c9b1f2126c9075f979c8b1a7b098060abb', class: "toggle-track" }, h("div", { key: '0bb5a44e73071d819611863e24af433ed56fb80d', class: "toggle-thumb" }))));
+        return (h(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 }, h("div", { key: '1ae5a58c6cedf19626cba1e04abe566669582081', class: "toggle-track" }, h("div", { key: 'e11d42017fd624837f9e44f2671b74d38e4d015f', class: "toggle-thumb" }))));
     }
     static get is() { return "kritzel-slide-toggle"; }
     static get encapsulation() { return "shadow"; }