kritzel-stencil 0.3.8 → 0.3.10

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -12,8 +12,9 @@ export class KritzelContextMenu {
     actionSelected;
     close;
     processedItems = [];
-    openSubmenuIndex = null;
-    submenuPosition = 'right';
+    /** Current open submenu path (e.g. '0.2.1'). Empty if none. */
+    openSubmenuPath = '';
+    submenuPositions = {};
     submenuTimer = null;
     submenuRefs = new Map();
     menuItemWrapperRefs = new Map();
@@ -31,7 +32,8 @@ export class KritzelContextMenu {
     }
     componentDidUpdate() {
         this.adjustPositionToViewport();
-        this.adjustSubmenuPosition();
+        this.adjustSubmenuPositions();
+        this.pruneStaleRefs();
     }
     disconnectedCallback() {
         if (this.submenuTimer) {
@@ -68,60 +70,102 @@ export class KritzelContextMenu {
             this.host.style.top = `${newTop}px`;
         }
     }
-    adjustSubmenuPosition() {
-        if (this.openSubmenuIndex === null)
+    adjustSubmenuPositions() {
+        if (!this.openSubmenuPath)
             return;
-        const submenuEl = this.submenuRefs.get(this.openSubmenuIndex);
-        if (!submenuEl)
-            return;
-        const submenuRect = submenuEl.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
-        // Adjust vertical position if needed (horizontal is pre-calculated)
-        if (submenuRect.bottom > viewportHeight - VIEWPORT_PADDING) {
-            const overflow = submenuRect.bottom - (viewportHeight - VIEWPORT_PADDING);
-            submenuEl.style.top = `${-overflow}px`;
+        // Adjust every open submenu in the chain (every prefix of openSubmenuPath).
+        for (const path of this.getOpenSubmenuPaths()) {
+            const submenuEl = this.submenuRefs.get(path);
+            const wrapperEl = this.menuItemWrapperRefs.get(path);
+            if (!submenuEl || !wrapperEl)
+                continue;
+            const wrapperRect = wrapperEl.getBoundingClientRect();
+            const submenuHeight = submenuEl.offsetHeight; // Constant regardless of current top shift
+            const naturalBottom = wrapperRect.top + submenuHeight;
+            if (naturalBottom > viewportHeight - VIEWPORT_PADDING) {
+                let overflow = naturalBottom - (viewportHeight - VIEWPORT_PADDING);
+                // Don't shift up so far that the top goes above the viewport
+                if (wrapperRect.top - overflow < VIEWPORT_PADDING) {
+                    overflow = wrapperRect.top - VIEWPORT_PADDING;
+                }
+                submenuEl.style.top = `${-overflow}px`;
+            }
+            else {
+                submenuEl.style.top = '0px';
+            }
         }
-        else {
-            submenuEl.style.top = '0px';
+    }
+    getOpenSubmenuPaths() {
+        if (!this.openSubmenuPath)
+            return [];
+        const parts = this.openSubmenuPath.split('.');
+        const paths = [];
+        for (let i = 1; i <= parts.length; i++) {
+            paths.push(parts.slice(0, i).join('.'));
+        }
+        return paths;
+    }
+    isSubmenuOpen(path) {
+        return this.openSubmenuPath === path || this.openSubmenuPath.startsWith(path + '.');
+    }
+    getParentPath(path) {
+        const idx = path.lastIndexOf('.');
+        return idx === -1 ? '' : path.substring(0, idx);
+    }
+    pruneStaleRefs() {
+        const openPaths = new Set(this.getOpenSubmenuPaths());
+        for (const key of Array.from(this.submenuRefs.keys())) {
+            if (!openPaths.has(key)) {
+                this.submenuRefs.delete(key);
+            }
+        }
+        // Keep root-level wrapper refs (single-segment paths) always rendered; prune deeper
+        // wrappers whose parent submenu is no longer open.
+        for (const key of Array.from(this.menuItemWrapperRefs.keys())) {
+            const parent = this.getParentPath(key);
+            if (parent !== '' && !openPaths.has(parent)) {
+                this.menuItemWrapperRefs.delete(key);
+            }
         }
     }
     handleItemClick(item, isDisabled, hasChildren) {
         if (isDisabled)
             return;
         if (hasChildren) {
-            // Toggle submenu on click for touch devices
+            // Hover handles open/close; click on a parent is a no-op.
             return;
         }
         if (item.action) {
             this.actionSelected.emit(item);
         }
     }
-    handleItemMouseEnter(index, hasChildren) {
+    handleItemMouseEnter(path, hasChildren) {
         if (this.submenuTimer) {
             clearTimeout(this.submenuTimer);
             this.submenuTimer = null;
         }
+        const parentPath = this.getParentPath(path);
         if (hasChildren) {
             this.submenuTimer = setTimeout(() => {
-                // Pre-calculate position before opening to avoid flicker
-                const wrapperEl = this.menuItemWrapperRefs.get(index);
+                // Pre-calculate horizontal position before opening to avoid flicker.
+                const wrapperEl = this.menuItemWrapperRefs.get(path);
+                let position = 'right';
                 if (wrapperEl) {
                     const rect = wrapperEl.getBoundingClientRect();
                     const viewportWidth = window.innerWidth;
-                    // Check if opening to the right would overflow
                     const wouldOverflowRight = rect.right + ESTIMATED_SUBMENU_WIDTH > viewportWidth - VIEWPORT_PADDING;
-                    this.submenuPosition = wouldOverflowRight ? 'left' : 'right';
+                    position = wouldOverflowRight ? 'left' : 'right';
                 }
-                else {
-                    this.submenuPosition = 'right';
-                }
-                this.openSubmenuIndex = index;
+                this.submenuPositions = { ...this.submenuPositions, [path]: position };
+                this.openSubmenuPath = path;
             }, SUBMENU_DELAY);
         }
         else {
-            // Close any open submenu when hovering a non-parent item
+            // Hovering a sibling without children: collapse to the parent chain so any
+            // sibling-rooted submenu closes, but the ancestor chain stays open.
             this.submenuTimer = setTimeout(() => {
-                this.openSubmenuIndex = null;
+                this.openSubmenuPath = parentPath;
             }, SUBMENU_DELAY);
         }
     }
@@ -131,9 +175,11 @@ export class KritzelContextMenu {
             this.submenuTimer = null;
         }
     }
-    handleSubmenuMouseLeave() {
+    handleSubmenuMouseLeave(path) {
+        // Close this submenu (and any deeper levels) but keep the ancestor chain open.
+        const parentPath = this.getParentPath(path);
         this.submenuTimer = setTimeout(() => {
-            this.openSubmenuIndex = null;
+            this.openSubmenuPath = parentPath;
         }, SUBMENU_DELAY);
     }
     async updateMenuItems() {
@@ -163,28 +209,28 @@ export class KritzelContextMenu {
         }
         return defaultValue;
     }
-    renderSubmenu(processedChildren, parentIndex) {
-        return (h("div", { class: { 'submenu-container': true, 'position-left': this.submenuPosition === 'left' }, ref: el => el && this.submenuRefs.set(parentIndex, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave() }, processedChildren.map(({ item, isDisabled, processedChildren: nestedChildren }, index) => {
-            const prevItem = index > 0 ? processedChildren[index - 1].item : null;
+    renderItems(items, parentPath) {
+        return items.map(({ item, isDisabled, processedChildren }, index) => {
+            const path = parentPath === '' ? String(index) : `${parentPath}.${index}`;
+            const prevItem = index > 0 ? items[index - 1].item : null;
             const showDivider = prevItem && prevItem.group !== item.group;
-            const hasChildren = nestedChildren && nestedChildren.length > 0;
+            const hasChildren = !!processedChildren && processedChildren.length > 0;
+            const submenuOpen = hasChildren && this.isSubmenuOpen(path);
             return [
-                showDivider && h("div", { class: "menu-divider", key: `submenu-divider-${index}` }),
-                h("button", { key: `submenu-${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" }))
+                showDivider && h("div", { class: "menu-divider", key: `divider-${path}` }),
+                h("div", { class: "menu-item-wrapper", key: `wrapper-${path}`, ref: el => el && this.menuItemWrapperRefs.set(path, el), onMouseEnter: () => this.handleItemMouseEnter(path, hasChildren) }, h("button", { key: `${item.label}-${path}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': submenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" })), hasChildren && submenuOpen && this.renderSubmenu(processedChildren, path)),
             ];
-        })));
+        });
+    }
+    renderSubmenu(processedChildren, path) {
+        const position = this.submenuPositions[path] === 'left' ? 'left' : 'right';
+        return (h("div", { class: { 'submenu-container': true, 'position-left': position === 'left' }, key: `submenu-${path}`, ref: el => el && this.submenuRefs.set(path, el), onMouseEnter: () => this.handleSubmenuMouseEnter(), onMouseLeave: () => this.handleSubmenuMouseLeave(path) }, this.renderItems(processedChildren, path)));
     }
     render() {
-        return (h(Host, { key: '100ec82feefbc285f8e50fca3f23f853c33aa215' }, h("div", { key: '9305a0190bdcf7a9e4b5ae7473651a0261dbfd7c', class: "menu-container" }, this.processedItems.map(({ item, isDisabled, processedChildren }, index) => {
-            const prevItem = index > 0 ? this.processedItems[index - 1].item : null;
-            const showDivider = prevItem && prevItem.group !== item.group;
-            const hasChildren = processedChildren && processedChildren.length > 0;
-            const isSubmenuOpen = this.openSubmenuIndex === index;
-            return [
-                showDivider && h("div", { class: "menu-divider", key: `divider-${index}` }),
-                h("div", { class: "menu-item-wrapper", ref: el => el && this.menuItemWrapperRefs.set(index, el), onMouseEnter: () => this.handleItemMouseEnter(index, hasChildren) }, h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled, 'has-children': hasChildren, 'submenu-open': isSubmenuOpen }, onClick: () => this.handleItemClick(item, isDisabled, hasChildren), disabled: isDisabled && !hasChildren }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label), hasChildren && h("kritzel-icon", { name: "chevron-right", size: 12, class: "submenu-arrow" })), hasChildren && isSubmenuOpen && this.renderSubmenu(processedChildren, index))
-            ];
-        }))));
+        if (!this.processedItems || this.processedItems.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "menu-container" }, this.renderItems(this.processedItems, ''))));
     }
     static get is() { return "kritzel-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -253,8 +299,8 @@ export class KritzelContextMenu {
     static get states() {
         return {
             "processedItems": {},
-            "openSubmenuIndex": {},
-            "submenuPosition": {}
+            "openSubmenuPath": {},
+            "submenuPositions": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -118,7 +118,7 @@
 .kritzel-control-separator {
   width: 1px;
   height: 24px;
-  background-color: var(--kritzel-controls-border, #ebebeb);
+  background-color: var(--kritzel-controls-separator-color, #ebebeb);
   margin: 0 4px;
 }
 

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.js

@@ -10,7 +10,7 @@ export class KritzelControls {
     activeControl = null;
     isUtilityPanelVisible = true;
     undoState = null;
-    theme;
+    theme = 'light';
     isControlsReady;
     firstConfig = null;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
@@ -230,13 +230,13 @@ export class KritzelControls {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '7f2a5fed45ac89b34a86b87552ffaa1b94f44d8b', class: {
+        return (h(Host, { key: 'b567aac7bca12cc5ffb0ee1eb9e6978636aa3c31', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '2dcbbe498bce0b59fbd225d103f2e322d3b7ff85', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '88e8ae9ae7429987724df70895b02a3f59216364', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '6431079040502a78f021c612a7e953b1349f319a', class: "kritzel-controls" }, h("div", { key: '6e0d6dce107cf6b54fb904809fd525ce3b2ae4f0', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '2686304ad10deac2d022e1deba19195587659d64', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '658e3d7b94e49a002d5057c1fb4fc199a371c48d', class: "kritzel-controls" }, h("div", { key: 'b54bb52a43e4a94ae1148cd4e75528bcaad681ef', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '36ce760357d3228141281a45c0ac7b0024b04795', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -266,10 +266,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: 'f4bcbc856f6e027cdb579356faf54288b43aa080', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: 'f0b1e0f74fe197f4d39e307e7dd8dd4819c4b183', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: '0646c98b32047f51841f75dd5fb57813ebb153f5', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '0816b8d7ca55add3c6a81de788be3c61a8a814f2', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '8f299593454e7855d83ad5d79b528940b2dcb202', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '8b2dc1dcc61df93a92cea8ba2aeb776e57965ab3', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '51cc3ebf13092e710048441ff64856edd4f53dfc', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'dcace186ae3ece1d7e943f51b48ed5094d847284', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '9b16ac90f335fec3c043545fa0c5b363ab99924e', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '2425507968e27a01b66c1d7be79a40ebe77cd27d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -278,7 +278,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '1074fc05048aed92ec9d62e347822df0a57a80e4', class: "color-container" }, h("kritzel-color", { key: '222efa6883ccbc6c97d10360039a1315de7d6273', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'd2499df3c0a90c101957f55664452739e0f1692b', class: "color-container" }, h("kritzel-color", { key: 'b7cfcd3a8579c63f508c2786eecace1223e88974', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -397,14 +397,14 @@ export class KritzelControls {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ThemeMode",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
-                        "ThemeMode": {
+                        "ThemeName": {
                             "location": "import",
-                            "path": "../../../constants/color-palette.constants",
-                            "id": "src/constants/color-palette.constants.ts::ThemeMode",
-                            "referenceLocation": "ThemeMode"
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
                         }
                     }
                 },
@@ -417,7 +417,8 @@ export class KritzelControls {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "theme"
+                "attribute": "theme",
+                "defaultValue": "'light'"
             }
         };
     }

package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.js

@@ -15,7 +15,7 @@ export class KritzelCurrentUser {
         this.dialogRef?.open();
     };
     render() {
-        return (h(Host, { key: 'c392caf731f8352fd8e2a95918fe48a2f00dd9e5' }, h("kritzel-avatar", { key: 'b3bdce0efa0c0610aa028303386c643d53bc8300', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '5e7af1aea468028e091ad8f461e4352cb9f9636b', ref: el => (this.dialogRef = el), user: this.user })));
+        return (h(Host, { key: 'a735cb9f16f4898fde0b52573affa2d270a8f1de' }, h("kritzel-avatar", { key: 'd449a515182718ab4ef3b26b2277696bbc7ab46f', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '3542f6df43c9924218e344f70bdc398c74a8eae6', ref: el => (this.dialogRef = el), user: this.user })));
     }
     static get is() { return "kritzel-current-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -21,7 +21,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: 'cd3daa7abd53c10852d63a2fe53d919414cd8904', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '94d0a691ede73135e6cf4ef144c13e52e410ffbe', class: "user-info" }, h("kritzel-avatar", { key: 'e57592d2f3663b593534055be5aae1b224fa8906', user: this.user, size: 80 }), displayName && h("div", { key: '237db2d0608ee49ea70e5282b61a59077f0f4595', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'd821e8171530b92ce6f1781c1145b611d3c533d0', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: '40c1a1bed0ddf02f9835199b5f7d2363e4d1902b' }, h("kritzel-dialog", { key: 'a83c09eac66ddf51155591a32245e3f15e34943e', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '14f7100a881ee3c5ba6b672d509bf3a9161ccd62', class: "user-info" }, h("kritzel-avatar", { key: 'e3552a80db81db4c26f81c6cc699363afa6153ea', user: this.user, size: 80 }), displayName && h("div", { key: 'c54164be605ac2bd2fc8bac6bb4481f820119028', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'e6af7c44e45443eb24be0777768de96b0e3d249e', class: "user-email" }, this.user.email)))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-export/kritzel-export.js

@@ -65,7 +65,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: 'f80cbe3fa709ed7e046303034b7345ca1f94bc48', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e7968807c2b67ebfc800cb1694b4e34af245ffba', class: "export-content" }, h("kritzel-pill-tabs", { key: 'eac62225c4c42431296f330791a1fb2212f579f5', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '3489affca39a901c2ef05a0698cdf51c0a7f6d1a', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (h(Host, { key: 'efeea781325e672e3f4c1579a50da1c928dc88b5' }, h("kritzel-dialog", { key: '60e27233f484e70fd12bcc0f8a72b89d2f72d596', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e58e1d9804fdc8cb3d4c053ead641e2301b99ea5', class: "export-content" }, h("kritzel-pill-tabs", { key: '409f4c2d64f5477dc57c72a8e32ae0a12dfb7eda', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '7166aee26e0dbbdf6e7348428f7a740614948e5e', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '54844ffa772a211515c1ef3e6834ec45f7f3d035', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd9b981b6904c58bc39173ae37ee5c4c0ee329005', class: "login-content" }, this.subtitle && (h("p", { key: 'd4d200060507d2b8b755796d8313acdfc7e2f587', class: "login-subtitle" }, this.subtitle)), h("div", { key: '3dc1e3c070e62d026eb16ceb48eb63c94bc2bed0', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '8cac83db48fef2531f1669c3f601526b1e5cdefa' }, h("kritzel-dialog", { key: '34e7208c8c34550292c2b7503759bf103cfb49a6', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'b0a0d8e0f38adc8d9b9545a02c5fc879f64a24de', class: "login-content" }, this.subtitle && (h("p", { key: 'a51b5f0a8b402aaf979d4bf47c6f9c3ba7e14bfe', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'b6d8f8748eadf1462dd4161f089130b7ded31b59', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/ui/kritzel-more-menu/kritzel-more-menu.js

@@ -55,7 +55,7 @@ export class KritzelMoreMenu {
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '33d85e3b5ad51effdf2f61c8742dbe829ef43f15', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '917ca25a14294f44a0428431a3ec08a84db2aff0', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '61e145de48ac7aced1fcc03dde5d5d14f4448167', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": "More options" }, h("kritzel-icon", { key: 'ba13d2117b28658c518c9721f348329d677683f9', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '48d757891102ec2925366e0ca0542a6e75f2621f', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: 'f04040f7122507642652839be4f75fbb157de20d', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: '93bee9fc14d532a74f1b077098fb0a470655d2fe', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '1783013acb533de9580698f29a7c8ae212b583fc', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '8dc2f098377e78db0bf6efc05daaf02496cef527', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": "More options" }, h("kritzel-icon", { key: '876a229226b0f79f1d5ef5d0b7793f362b884923', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '57f7a69408b00c1bb9e5a08d22e224c6e6bcdea4', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '73a2aacd1b7c0ec79d7fa1695fbc02b1a0bde1b5', items: this.visibleItems, onItemSelect: this.handleMenuItemSelect })))));
     }
     static get is() { return "kritzel-more-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js

@@ -24,6 +24,7 @@ const SETTINGS_CATEGORIES = [
 export class KritzelSettings {
     host;
     /** Keyboard shortcuts to display in the settings dialog */
+    availableThemes = ['light', 'dark'];
     shortcuts = [];
     /** Current settings values. Used to initialize and sync the component's internal state. */
     settings;
@@ -37,7 +38,7 @@ export class KritzelSettings {
     scaleMin = DEFAULT_SCALE_MIN;
     scaleMax = DEFAULT_SCALE_MAX;
     lockDrawingScale = DEFAULT_LOCK_DRAWING_SCALE;
-    currentTheme = 'light';
+    theme = 'light';
     viewportBoundaryLeft = DEFAULT_VIEWPORT_BOUNDARY_LEFT;
     viewportBoundaryRight = DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
     viewportBoundaryTop = DEFAULT_VIEWPORT_BOUNDARY_TOP;
@@ -60,8 +61,8 @@ export class KritzelSettings {
         if (typeof settings.lockDrawingScale === 'boolean') {
             this.lockDrawingScale = settings.lockDrawingScale;
         }
-        if (settings.theme === 'light' || settings.theme === 'dark') {
-            this.currentTheme = settings.theme;
+        if (typeof settings.theme === 'string') {
+            this.theme = settings.theme;
         }
         if (typeof settings.viewportBoundaryLeft === 'number') {
             this.viewportBoundaryLeft = settings.viewportBoundaryLeft;
@@ -84,7 +85,7 @@ export class KritzelSettings {
             scaleMin: this.scaleMin,
             scaleMax: this.scaleMax,
             lockDrawingScale: this.lockDrawingScale,
-            theme: this.currentTheme,
+            theme: this.theme,
             viewportBoundaryLeft: this.viewportBoundaryLeft,
             viewportBoundaryRight: this.viewportBoundaryRight,
             viewportBoundaryTop: this.viewportBoundaryTop,
@@ -106,7 +107,7 @@ export class KritzelSettings {
         this.emitSettings();
     };
     handleThemeChange = (event) => {
-        this.currentTheme = event.detail ? 'dark' : 'light';
+        this.theme = event.detail;
         this.emitSettings();
     };
     handleViewportBoundaryLeftChange = (event) => {
@@ -167,7 +168,7 @@ export class KritzelSettings {
     renderCategoryContent() {
         switch (this.selectedCategoryId) {
             case 'general':
-                return (h("div", { class: "settings-content" }, h("h3", null, "General Settings"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Dark Mode"), h("p", { class: "settings-description" }, "Toggle between light and dark color themes for the editor interface."), h("kritzel-slide-toggle", { checked: this.currentTheme === 'dark', label: "Dark Mode", onCheckedChange: this.handleThemeChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Lock Drawing Scale"), h("p", { class: "settings-description" }, "When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: "Lock Drawing Scale", onCheckedChange: this.handleLockDrawingScaleChange })))));
+                return (h("div", { class: "settings-content" }, h("h3", null, "General Settings"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Theme"), h("p", { class: "settings-description" }, "Select a registered color theme for the editor interface."), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Lock Drawing Scale"), h("p", { class: "settings-description" }, "When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: "Lock Drawing Scale", onCheckedChange: this.handleLockDrawingScaleChange })))));
             case 'viewport':
                 return (h("div", { class: "settings-content" }, h("h3", null, "Viewport Settings"), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Minimum Zoom Level"), h("p", { class: "settings-description" }, "Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Maximum Zoom Level"), h("p", { class: "settings-description" }, "Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Left"), h("p", { class: "settings-description" }, "Left boundary in world coordinates. Set to limit how far left the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Right"), h("p", { class: "settings-description" }, "Right boundary in world coordinates. Set to limit how far right the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Top"), h("p", { class: "settings-description" }, "Top boundary in world coordinates. Set to limit how far up the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, "Viewport Boundary Bottom"), h("p", { class: "settings-description" }, "Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: "Infinite", onValueChange: this.handleViewportBoundaryBottomChange })))));
             case 'shortcuts':
@@ -181,7 +182,7 @@ export class KritzelSettings {
         }
     }
     render() {
-        return (h(Host, { key: 'e86192a8ca49f8618d58ede4d04d321ea238d7d4' }, h("kritzel-dialog", { key: '23a47a8cd9281794bfd2aec7edd6a4ef4b931550', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '007c8a1c04bd0d692b55d88988b0f8874f9242a4', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '46c6792ae9cdd932d3dc71526862c9281c0cefc1' }, h("kritzel-dialog", { key: '1cd288cdf8b26bea378665c54bfc14577597fe49', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '4d07e94ebb09035807356bab4bc7eaca57c36c6c', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -197,6 +198,24 @@ export class KritzelSettings {
     }
     static get properties() {
         return {
+            "availableThemes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keyboard shortcuts to display in the settings dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['light', 'dark']"
+            },
             "shortcuts": {
                 "type": "unknown",
                 "mutable": false,
@@ -220,7 +239,7 @@ export class KritzelSettings {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Keyboard shortcuts to display in the settings dialog"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -263,7 +282,7 @@ export class KritzelSettings {
             "scaleMin": {},
             "scaleMax": {},
             "lockDrawingScale": {},
-            "currentTheme": {},
+            "theme": {},
             "viewportBoundaryLeft": {},
             "viewportBoundaryRight": {},
             "viewportBoundaryTop": {},

package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js

@@ -84,9 +84,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: '0575ac82e19d07cf909556cae2ec433e0057fd5b', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'c51d207e31255f45724103bfecbe858f13a721e6', class: "share-content" }, h("div", { key: 'ca6cb7721b9ba834c133b2cb953b208475e34fb5', class: "share-section" }, h("div", { key: '2c76845c903cc1c18cc26b9111d608e732ed12a5', class: "share-row" }, h("div", { key: '7700533f54372bc81d8d795414318a6bf0e93c47', class: "share-label-group" }, h("label", { key: 'a1d80009cb09cfe35bce35ce1151bf0754b052c1', class: "share-label" }, "Link sharing"), h("p", { key: '10c1963e95e658c7fb86174f1dba7565ce40d5a6', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'a104c14b2492d97f3ada98c9eaaa845d63074063' }, h("kritzel-dialog", { key: '1b12b27504153e54aeb0cb4e6b1030a0d43b9735', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: '652f23e37876be356beb6f93abf5930e91d82cea', class: "share-content" }, h("div", { key: 'aaf336f2ac86fe23cac79cef920a9d67681046e2', class: "share-section" }, h("div", { key: '8075a7b3fff47c4b924d3b2d92b1377641920939', class: "share-row" }, h("div", { key: '41e98a74a5d4aede50fd75a7de62cbef9b5a5a31', class: "share-label-group" }, h("label", { key: '8a4f53e13d5a81497dd31316a49971c7245d82a2', class: "share-label" }, "Link sharing"), h("p", { key: '907a59d50e595734f03067f70830cf96defdf8d8', class: "share-description" }, this.internalIsPublic
             ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: 'ec62a5ece12be0cea18a16c5d41db0a992309174', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '5e826d4c8c37792ba3a74a0189ad313a8ab482e2', class: "share-section" }, h("div", { key: 'f8e35cda32cb34ab21f56335aa27503fd6fe98c4', class: "share-url-container" }, h("input", { key: '47feb20a1843e1d3d8f7d146d71574b187002e8d', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '052f56f35d057430cbc8fd03da5bef574b173791', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: '4e1de478f837a352185be2a06e15796dc1fb2f5e', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: '0d75cfeeb63c33d20380ffe9a7e4c27148548ef9', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: 'a8a10c74fd326c5097e4a5f0ee165602c3606ade', class: "share-section" }, h("div", { key: '6261a9fc6cb2be2a50856fb8a990b9da3fee84bf', class: "share-url-container" }, h("input", { key: '26ee72eebfee88d06a50c338cccc9af296c8ba4c', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '4b1ec06fa27c95d9d0bb93f8cbb851a02fdd52cc', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: 'd9eea56b3523fcc3557d9868f3da7f28449a9447', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get is() { return "kritzel-share-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.js

@@ -280,14 +280,14 @@ export class KritzelToolConfig {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ThemeMode",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
-                        "ThemeMode": {
+                        "ThemeName": {
                             "location": "import",
-                            "path": "../../../constants/color-palette.constants",
-                            "id": "src/constants/color-palette.constants.ts::ThemeMode",
-                            "referenceLocation": "ThemeMode"
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
                         }
                     }
                 },

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -17,7 +17,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'f800ea5843cf73ae132b56396ad05d664043f789' }, h("button", { key: '8f2c35b9b774ba5662ad584ebaa3e98a21e2d4e5', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": "Undo" }, h("kritzel-icon", { key: 'ffba256fea2b2ba7c767601a2051c940e5865fd5', name: "undo" })), h("button", { key: '261a7759ec1e25000ed76d2cf5aaef908cea886c', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": "Redo" }, h("kritzel-icon", { key: '7483a8c23a1dcd77dc0bfdb3cc39c4998e48b193', name: "redo" })), h("div", { key: '7450540c285a6cf746d52b31eb2e7f88ec30c1ec', class: "utility-separator" }), h("button", { key: '62fa097474ede7de6018a76ec492a9d72bb0cb11', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": "Delete selected items" }, h("kritzel-icon", { key: 'a1cea0b8a5524fe5877ae2ce7939bcb5a66b4dcd', name: "delete" }))));
+        return (h(Host, { key: 'b49f6db6c0e574dc8a5a733c749ecda6f24f9d25' }, h("button", { key: 'e6306e54c8f660c3e92d032527fad1ea45ca0cf8', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": "Undo" }, h("kritzel-icon", { key: '5bb1293049a1e3004504289d92ccc79958786f3f', name: "undo" })), h("button", { key: '8102b0403d7f328ce4bfeb79767d5bd99d879013', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": "Redo" }, h("kritzel-icon", { key: '5db3047bec5d8ab695a2dc67780a5dbecbae64d2', name: "redo" })), h("div", { key: 'e894d9f2aaa2cad7aa980d3b839eca05a8d9c9df', class: "utility-separator" }), h("button", { key: 'f0a7de5ab91f82a2e5e8df75cc1903ec647abdac', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": "Delete selected items" }, h("kritzel-icon", { key: '5b146375394299bae946a95545c3c42c2bf36766', name: "delete" }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/constants/color-palette.constants.js

@@ -2,7 +2,10 @@
  * Helper function to resolve a color value for a specific theme
  */
 export function resolveColor(color, theme) {
-    return color[theme];
+    if (theme in color && color[theme]) {
+        return color[theme];
+    }
+    return color[theme === 'dark' ? 'dark' : 'light'];
 }
 /**
  * Default color palette shared across all tool configurations.

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.8';
+export const KRITZEL_VERSION = '0.3.10';

package/dist/collection/index.js

@@ -7,6 +7,7 @@
  * DO NOT use this file to export your components. Instead, use the recommended approaches
  * to consume components of this package as outlined in the `README.md`.
  */
+export * from './classes/objects/base-object.class';
 export * from './classes/objects/text.class';
 export * from './classes/objects/path.class';
 export * from './classes/objects/image.class';
@@ -35,6 +36,7 @@ export * from './classes/managers/anchor.manager';
 export * from './classes/managers/theme.manager';
 export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
+export * from './interfaces/object-change-event.interface';
 export * from './interfaces/sync-provider.interface';
 export * from './interfaces/sync-config.interface';
 export * from './interfaces/asset.interface';

package/dist/collection/themes/dark-theme.js

@@ -37,7 +37,10 @@ export const darkTheme = {
     },
     selection: {
         borderColor: '#0A84FF',
+        boxBackgroundColor: 'rgba(10, 132, 255, 0.2)',
+        boxBorderColor: 'rgba(10, 132, 255, 0.5)',
         handleColor: '#1a1a1a',
+        handleStrokeColor: '#0A84FF'
     },
     checkerboard: {
         colorDark: '#4a4a4a',
@@ -75,6 +78,7 @@ export const darkTheme = {
         controlHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
         controlSelectedBackgroundColor: '#0A84FF',
         controlSelectedColor: '#ffffff',
+        separatorColor: '#3a3a3a',
     },
     currentUserDialog: {
         emailColor: '#999999',