kritzel-stencil 0.3.23 → 0.3.25

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var schema_constants = require('./schema.constants-Lr_zNkox.js');
+var schema_constants = require('./schema.constants-Np7j2Gz4.js');
 var Y = require('yjs');
 var yIndexeddb = require('y-indexeddb');
 var yWebsocket = require('y-websocket');

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-Xav9JFHg.js');
-var schema_constants = require('./schema.constants-Lr_zNkox.js');
+var schema_constants = require('./schema.constants-Np7j2Gz4.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -24157,6 +24157,7 @@ class KritzelClipboardManager {
      */
     regenerateIdsAndRemapAnchors(topLevel) {
         const all = [];
+        const hasOnlyTopLevelLines = topLevel.length > 0 && topLevel.every(object => schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine'));
         const collect = (objects) => {
             for (const object of objects) {
                 all.push(object);
@@ -24181,9 +24182,15 @@ class KritzelClipboardManager {
                 if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
                     object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.startAnchor = undefined;
+                }
                 if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
                     object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.endAnchor = undefined;
+                }
             }
         }
     }
@@ -29412,7 +29419,11 @@ const KritzelEngine = class {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    zIndex: object.zIndex.toString(),
+                    // The object wrapper establishes its own stacking context (transform + z-index),
+                    // so the selection-line handles inside it cannot escape above the snap/anchor
+                    // layers (z-index 9999/9998) rendered later at the origin level. Lift the
+                    // selected line's wrapper above those layers so its handles always paint on top.
+                    zIndex: this.core.displaySelectionLineUI(object) ? '10001' : object.zIndex.toString(),
                     pointerEvents: getObjectWrapperPointerEvents(object),
                 } }, schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
@@ -29616,10 +29627,19 @@ const KritzelEngine = class {
                     }
                     const selectionBorderColor = remoteUserColor ?? (schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
                     const selectionHandleStrokeColor = remoteUserColor ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const lineObject = object;
+                    const activeSnapCandidate = this.core.store.state.snapCandidate;
+                    const isStartHandleSnapped = lineObject.startAnchor != null;
+                    const isEndHandleSnapped = lineObject.endAnchor != null;
+                    const isStartHandleSnapPreview = activeSnapCandidate?.endpoint === 'start';
+                    const isEndHandleSnapPreview = activeSnapCandidate?.endpoint === 'end';
+                    const isStartHandleHighlighted = isStartHandleSnapped || isStartHandleSnapPreview;
+                    const isEndHandleHighlighted = isEndHandleSnapped || isEndHandleSnapPreview;
+                    const selectionOverlayZIndex = this.core.displaySelectionLineUI(object) ? '10000' : (object.zIndex + 1).toString();
                     const handleScale = object.scale ?? 1;
                     const { canRenderResizeHandles, canRenderRotationHandle } = this.getSelectionHandleCapabilities(object);
                     return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                            zIndex: (object.zIndex + 1).toString(),
+                            zIndex: selectionOverlayZIndex,
                             height: object?.totalHeight.toString(),
                             width: object?.totalWidth.toString(),
                             left: '0',
@@ -29710,7 +29730,7 @@ const KritzelEngine = class {
                             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)',
+                            fill: isStartHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -29734,7 +29754,7 @@ const KritzelEngine = class {
                             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)',
+                            fill: isEndHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -29744,6 +29764,34 @@ const KritzelEngine = class {
                         } })))))));
                 })()));
         }), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData();
+            if (!data)
+                return null;
+            return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, index.h("g", null, data.snapLinePath ? (index.h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined &&
+                data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), index.h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })(), (() => {
             const data = this.core.anchorManager.getAnchorLinesRenderData();
             if (!data)
                 return null;
@@ -29768,7 +29816,7 @@ const KritzelEngine = class {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } })), index.h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))), data.endAnchorViz && (index.h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (index.h("path", { d: data.endAnchorViz.pathD, style: {
@@ -29787,35 +29835,6 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } })))));
-        })(), (() => {
-            const data = this.core.anchorManager.getSnapIndicatorRenderData();
-            if (!data)
-                return null;
-            return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
-                    position: 'absolute',
-                    left: '0',
-                    top: '0',
-                    width: '1px',
-                    height: '1px',
-                    pointerEvents: 'none',
-                    zIndex: '9999',
-                    overflow: 'visible',
-                } }, index.h("g", null, data.snapLinePath ? (index.h("path", { d: data.snapLinePath, fill: "none", style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } })) : (data.edgeX !== undefined &&
-                data.edgeY !== undefined && (index.h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } }))), index.h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                    strokeWidth: data.indicatorStrokeWidth,
-                } }))));
         })()), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'absolute',
                 left: `${this.core.store.state.contextMenuX}px`,
@@ -31227,7 +31246,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.23';
+const KRITZEL_VERSION = '0.3.25';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 

package/dist/cjs/{schema.constants-Lr_zNkox.js → schema.constants-Np7j2Gz4.js}

@@ -20863,11 +20863,27 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Sets the isSelected flag to false for all objects in the selection group.
      * Used when clearing or changing the selection state.
+     *
+     * For KritzelGroup members, also clears the isSelected flag on all nested
+     * descendants. A descendant can retain a lingering isSelected from the marquee
+     * preview before it was resolved to its parent group during selection, which
+     * would otherwise leave that object selected after the group is deselected and
+     * cause the whole group to be re-selected on the next interaction.
      */
     deselectAllChildren() {
         const children = this.objects;
+        const descendantIds = new Set();
         for (const obj of children) {
             obj.isSelected = false;
+            if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                KritzelGroup.collectDescendantIds(obj, descendantIds);
+            }
+        }
+        if (descendantIds.size > 0) {
+            const descendants = this._core.store.objects.filter(o => descendantIds.has(o.id));
+            for (const descendant of descendants) {
+                descendant.isSelected = false;
+            }
         }
     }
     /**
@@ -23640,6 +23656,11 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         // Resolve child objects to their parent groups
         const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
         const objectToSelect = parentGroup || object;
+        // When the click resolves to a parent group, clear the child's own flag so
+        // it does not linger as selected and re-select the group on the next interaction.
+        if (parentGroup) {
+            object.isSelected = false;
+        }
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
@@ -23684,8 +23705,16 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         const resolvedObjects = new Map();
         for (const obj of selectedObjects) {
             const parentGroup = childToParentMap.get(obj.id);
-            const toSelect = parentGroup || obj;
-            resolvedObjects.set(toSelect.id, toSelect);
+            if (parentGroup) {
+                // The child was selected (e.g. via marquee preview) but selection is
+                // represented by its parent group. Clear the child's flag so it does
+                // not linger as selected and re-select the group on the next interaction.
+                obj.isSelected = false;
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                resolvedObjects.set(obj.id, obj);
+            }
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
         const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);
@@ -27939,7 +27968,10 @@ class KritzelAnchorManager {
     // Snap Detection
     // ============================================
     /**
-     * Finds the nearest object that can be snapped to within the snap threshold.
+     * Finds an object that can be snapped to when the cursor is sufficiently close to its center.
+     * Snap is only triggered when the cursor is inside the object's bounds AND within 1/5 of the
+     * shorter side from the center, so snapping activates only as the user approaches the center
+     * and releases quickly as they move away.
      * Returns null if no suitable snap target is found.
      *
      * @param worldX - X coordinate in world space
@@ -27968,7 +28000,15 @@ class KritzelAnchorManager {
             const polygon = object.rotatedPolygon;
             const points = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
             if (KritzelGeometryHelper.isPointInPolygon({ x: worldX, y: worldY }, points)) {
-                // If inside, check if this object is "above" the current best target
+                // Only snap when the cursor is near the object's center (within 1/5 of the shorter side)
+                const snapRadius = Math.min(object.width, object.height) / 5;
+                const dx = worldX - object.centerX;
+                const dy = worldY - object.centerY;
+                const distanceToCenter = Math.sqrt(dx * dx + dy * dy);
+                if (distanceToCenter > snapRadius) {
+                    continue;
+                }
+                // If inside and close enough to center, check if this object is "above" the current best target
                 if (object.zIndex > highestZIndex) {
                     highestZIndex = object.zIndex;
                     bestTarget = {

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

@@ -404,6 +404,11 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         // Resolve child objects to their parent groups
         const parentGroup = KritzelGroup.findParentGroup(this._core, object.id);
         const objectToSelect = parentGroup || object;
+        // When the click resolves to a parent group, clear the child's own flag so
+        // it does not linger as selected and re-select the group on the next interaction.
+        if (parentGroup) {
+            object.isSelected = false;
+        }
         const existingGroup = this._core.store.selectionGroup;
         if (shiftKey && existingGroup) {
             existingGroup.addOrRemove(objectToSelect);
@@ -448,8 +453,16 @@ export class KritzelSelectionHandler extends KritzelBaseHandler {
         const resolvedObjects = new Map();
         for (const obj of selectedObjects) {
             const parentGroup = childToParentMap.get(obj.id);
-            const toSelect = parentGroup || obj;
-            resolvedObjects.set(toSelect.id, toSelect);
+            if (parentGroup) {
+                // The child was selected (e.g. via marquee preview) but selection is
+                // represented by its parent group. Clear the child's flag so it does
+                // not linger as selected and re-select the group on the next interaction.
+                obj.isSelected = false;
+                resolvedObjects.set(parentGroup.id, parentGroup);
+            }
+            else {
+                resolvedObjects.set(obj.id, obj);
+            }
         }
         const unrolledObjects = Array.from(resolvedObjects.values());
         const filteredObjects = this.filterDescendantsOfSelectedGroups(unrolledObjects);

package/dist/collection/classes/managers/anchor.manager.js

@@ -199,7 +199,10 @@ export class KritzelAnchorManager {
     // Snap Detection
     // ============================================
     /**
-     * Finds the nearest object that can be snapped to within the snap threshold.
+     * Finds an object that can be snapped to when the cursor is sufficiently close to its center.
+     * Snap is only triggered when the cursor is inside the object's bounds AND within 1/5 of the
+     * shorter side from the center, so snapping activates only as the user approaches the center
+     * and releases quickly as they move away.
      * Returns null if no suitable snap target is found.
      *
      * @param worldX - X coordinate in world space
@@ -228,7 +231,15 @@ export class KritzelAnchorManager {
             const polygon = object.rotatedPolygon;
             const points = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
             if (KritzelGeometryHelper.isPointInPolygon({ x: worldX, y: worldY }, points)) {
-                // If inside, check if this object is "above" the current best target
+                // Only snap when the cursor is near the object's center (within 1/5 of the shorter side)
+                const snapRadius = Math.min(object.width, object.height) / 5;
+                const dx = worldX - object.centerX;
+                const dy = worldY - object.centerY;
+                const distanceToCenter = Math.sqrt(dx * dx + dy * dy);
+                if (distanceToCenter > snapRadius) {
+                    continue;
+                }
+                // If inside and close enough to center, check if this object is "above" the current best target
                 if (object.zIndex > highestZIndex) {
                     highestZIndex = object.zIndex;
                     bestTarget = {

package/dist/collection/classes/managers/clipboard.manager.js

@@ -103,6 +103,7 @@ export class KritzelClipboardManager {
      */
     regenerateIdsAndRemapAnchors(topLevel) {
         const all = [];
+        const hasOnlyTopLevelLines = topLevel.length > 0 && topLevel.every(object => KritzelClassHelper.isInstanceOf(object, 'KritzelLine'));
         const collect = (objects) => {
             for (const object of objects) {
                 all.push(object);
@@ -127,9 +128,15 @@ export class KritzelClipboardManager {
                 if (object.startAnchor && idMap.has(object.startAnchor.objectId)) {
                     object.startAnchor = { objectId: idMap.get(object.startAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.startAnchor = undefined;
+                }
                 if (object.endAnchor && idMap.has(object.endAnchor.objectId)) {
                     object.endAnchor = { objectId: idMap.get(object.endAnchor.objectId) };
                 }
+                else if (hasOnlyTopLevelLines) {
+                    object.endAnchor = undefined;
+                }
             }
         }
     }

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

@@ -1,5 +1,6 @@
 import { KritzelGeometryHelper } from "../../helpers/geometry.helper";
 import { KritzelBaseObject } from "./base-object.class";
+import { KritzelGroup } from "./group.class";
 import { KritzelClassHelper } from "../../helpers/class.helper";
 import { KritzelMathHelper } from "../../helpers/math.helper";
 /**
@@ -197,11 +198,27 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
     /**
      * Sets the isSelected flag to false for all objects in the selection group.
      * Used when clearing or changing the selection state.
+     *
+     * For KritzelGroup members, also clears the isSelected flag on all nested
+     * descendants. A descendant can retain a lingering isSelected from the marquee
+     * preview before it was resolved to its parent group during selection, which
+     * would otherwise leave that object selected after the group is deselected and
+     * cause the whole group to be re-selected on the next interaction.
      */
     deselectAllChildren() {
         const children = this.objects;
+        const descendantIds = new Set();
         for (const obj of children) {
             obj.isSelected = false;
+            if (KritzelClassHelper.isInstanceOf(obj, 'KritzelGroup')) {
+                KritzelGroup.collectDescendantIds(obj, descendantIds);
+            }
+        }
+        if (descendantIds.size > 0) {
+            const descendants = this._core.store.objects.filter(o => descendantIds.has(o.id));
+            for (const descendant of descendants) {
+                descendant.isSelected = false;
+            }
         }
     }
     /**

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

@@ -2155,7 +2155,11 @@ export class KritzelEngine {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
-                    zIndex: object.zIndex.toString(),
+                    // The object wrapper establishes its own stacking context (transform + z-index),
+                    // so the selection-line handles inside it cannot escape above the snap/anchor
+                    // layers (z-index 9999/9998) rendered later at the origin level. Lift the
+                    // selected line's wrapper above those layers so its handles always paint on top.
+                    zIndex: this.core.displaySelectionLineUI(object) ? '10001' : object.zIndex.toString(),
                     pointerEvents: getObjectWrapperPointerEvents(object),
                 } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
@@ -2359,10 +2363,19 @@ export class KritzelEngine {
                     }
                     const selectionBorderColor = remoteUserColor ?? (KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme) || 'var(--kritzel-selection-border-color, #007AFF)');
                     const selectionHandleStrokeColor = remoteUserColor ?? 'var(--kritzel-selection-handle-stroke-color, #007AFF)';
+                    const lineObject = object;
+                    const activeSnapCandidate = this.core.store.state.snapCandidate;
+                    const isStartHandleSnapped = lineObject.startAnchor != null;
+                    const isEndHandleSnapped = lineObject.endAnchor != null;
+                    const isStartHandleSnapPreview = activeSnapCandidate?.endpoint === 'start';
+                    const isEndHandleSnapPreview = activeSnapCandidate?.endpoint === 'end';
+                    const isStartHandleHighlighted = isStartHandleSnapped || isStartHandleSnapPreview;
+                    const isEndHandleHighlighted = isEndHandleSnapped || isEndHandleSnapPreview;
+                    const selectionOverlayZIndex = this.core.displaySelectionLineUI(object) ? '10000' : (object.zIndex + 1).toString();
                     const handleScale = object.scale ?? 1;
                     const { canRenderResizeHandles, canRenderRotationHandle } = this.getSelectionHandleCapabilities(object);
                     return (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                            zIndex: (object.zIndex + 1).toString(),
+                            zIndex: selectionOverlayZIndex,
                             height: object?.totalHeight.toString(),
                             width: object?.totalWidth.toString(),
                             left: '0',
@@ -2453,7 +2466,7 @@ export class KritzelEngine {
                             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)',
+                            fill: isStartHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -2477,7 +2490,7 @@ export class KritzelEngine {
                             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)',
+                            fill: isEndHandleHighlighted ? selectionHandleStrokeColor : 'var(--kritzel-selection-handle-color, #000000)',
                             stroke: selectionHandleStrokeColor,
                             strokeWidth: `calc(2px * ${object.scale} / ${this.core.store.state?.scale})`,
                             paintOrder: 'fill',
@@ -2487,6 +2500,34 @@ export class KritzelEngine {
                         } })))))));
                 })()));
         }), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, h("g", null, data.snapLinePath ? (h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined &&
+                data.edgeY !== undefined && (h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })(), (() => {
             const data = this.core.anchorManager.getAnchorLinesRenderData();
             if (!data)
                 return null;
@@ -2511,7 +2552,7 @@ export class KritzelEngine {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } })), h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))), data.endAnchorViz && (h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (h("path", { d: data.endAnchorViz.pathD, style: {
@@ -2530,35 +2571,6 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } })))));
-        })(), (() => {
-            const data = this.core.anchorManager.getSnapIndicatorRenderData();
-            if (!data)
-                return null;
-            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
-                    position: 'absolute',
-                    left: '0',
-                    top: '0',
-                    width: '1px',
-                    height: '1px',
-                    pointerEvents: 'none',
-                    zIndex: '9999',
-                    overflow: 'visible',
-                } }, h("g", null, data.snapLinePath ? (h("path", { d: data.snapLinePath, fill: "none", style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } })) : (data.edgeX !== undefined &&
-                data.edgeY !== undefined && (h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
-                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                    strokeWidth: data.lineStrokeWidth,
-                    strokeDasharray: data.dashArray,
-                    strokeLinecap: 'round',
-                } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                    strokeWidth: data.indicatorStrokeWidth,
-                } }))));
         })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'absolute',
                 left: `${this.core.store.state.contextMenuX}px`,

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.3.23';
+export const KRITZEL_VERSION = '0.3.25';