kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/helpers/geometry.helper.js

@@ -0,0 +1,149 @@
+export class KritzelGeometryHelper {
+    static doPolygonsIntersect(polygon1, polygon2) {
+        // 1. Convert polygons to array of points for easier processing
+        const points1 = [polygon1.bottomLeft, polygon1.bottomRight, polygon1.topRight, polygon1.topLeft];
+        const points2 = [polygon2.bottomLeft, polygon2.bottomRight, polygon2.topRight, polygon2.topLeft];
+        // 2. Check if any point of polygon1 is inside polygon2
+        for (const point of points1) {
+            if (this.isPointInPolygon(point, points2)) {
+                return true;
+            }
+        }
+        // 3. Check if any point of polygon2 is inside polygon1
+        for (const point of points2) {
+            if (this.isPointInPolygon(point, points1)) {
+                return true;
+            }
+        }
+        // 4. Check for edge intersections (more complex)
+        for (let i = 0; i < points1.length; i++) {
+            const p1a = points1[i];
+            const p1b = points1[(i + 1) % points1.length]; // Wrap around to the first point
+            for (let j = 0; j < points2.length; j++) {
+                const p2a = points2[j];
+                const p2b = points2[(j + 1) % points2.length];
+                if (this.intersectLines(p1a, p1b, p2a, p2b)) {
+                    return true;
+                }
+            }
+        }
+        return false; // No intersection found
+    }
+    static isPointInPolygon(point, polygon) {
+        let inside = false;
+        for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+            const xi = polygon[i].x, yi = polygon[i].y;
+            const xj = polygon[j].x, yj = polygon[j].y;
+            const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+            if (intersect)
+                inside = !inside;
+        }
+        return inside;
+    }
+    static intersectLines(p1a, p1b, p2a, p2b) {
+        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
+        if (det === 0) {
+            return false; // Lines are parallel
+        }
+        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
+        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
+        return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+    }
+    /**
+     * Finds the intersection point between a line segment and a line segment.
+     * Returns the intersection point or null if no intersection.
+     */
+    static getLineIntersectionPoint(p1a, p1b, p2a, p2b) {
+        const det = (p1b.x - p1a.x) * (p2b.y - p2a.y) - (p1b.y - p1a.y) * (p2b.x - p2a.x);
+        if (det === 0) {
+            return null; // Lines are parallel
+        }
+        const t = ((p2a.x - p1a.x) * (p2b.y - p2a.y) - (p2a.y - p1a.y) * (p2b.x - p2a.x)) / det;
+        const u = -((p1a.x - p2a.x) * (p1b.y - p1a.y) - (p1a.y - p2a.y) * (p1b.x - p1a.x)) / det;
+        if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
+            return {
+                x: p1a.x + t * (p1b.x - p1a.x),
+                y: p1a.y + t * (p1b.y - p1a.y)
+            };
+        }
+        return null;
+    }
+    /**
+     * Finds the closest intersection point between a line segment (from lineStart to lineEnd)
+     * and a polygon. Returns the intersection point closest to lineStart, or null if no intersection.
+     */
+    static getLinePolygonIntersection(lineStart, lineEnd, polygon) {
+        const points = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+        let closestIntersection = null;
+        let closestDistance = Infinity;
+        for (let i = 0; i < points.length; i++) {
+            const edgeStart = points[i];
+            const edgeEnd = points[(i + 1) % points.length];
+            const intersection = this.getLineIntersectionPoint(lineStart, lineEnd, edgeStart, edgeEnd);
+            if (intersection) {
+                const distance = Math.sqrt(Math.pow(intersection.x - lineStart.x, 2) +
+                    Math.pow(intersection.y - lineStart.y, 2));
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIntersection = intersection;
+                }
+            }
+        }
+        return closestIntersection;
+    }
+    /**
+     * Generates a polygon approximation of an ellipse.
+     * @param centerX - X coordinate of ellipse center
+     * @param centerY - Y coordinate of ellipse center
+     * @param rx - Horizontal radius
+     * @param ry - Vertical radius
+     * @param segments - Number of segments (more = smoother approximation)
+     * @param rotation - Optional rotation angle in radians
+     */
+    static getEllipsePolygonApproximation(centerX, centerY, rx, ry, segments = 32, rotation = 0) {
+        const points = [];
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        for (let i = 0; i < segments; i++) {
+            const angle = (2 * Math.PI * i) / segments;
+            // Point on unrotated ellipse
+            const px = rx * Math.cos(angle);
+            const py = ry * Math.sin(angle);
+            // Apply rotation around center
+            const rotatedX = centerX + px * cos - py * sin;
+            const rotatedY = centerY + px * sin + py * cos;
+            points.push({ x: rotatedX, y: rotatedY });
+        }
+        return points;
+    }
+    /**
+     * Finds the closest intersection point between a line segment and a polygon
+     * defined as an array of points. Returns the intersection closest to lineStart,
+     * or null if no intersection.
+     */
+    static getLinePointsArrayIntersection(lineStart, lineEnd, polygonPoints) {
+        let closestIntersection = null;
+        let closestDistance = Infinity;
+        for (let i = 0; i < polygonPoints.length; i++) {
+            const edgeStart = polygonPoints[i];
+            const edgeEnd = polygonPoints[(i + 1) % polygonPoints.length];
+            const intersection = this.getLineIntersectionPoint(lineStart, lineEnd, edgeStart, edgeEnd);
+            if (intersection) {
+                const distance = Math.sqrt(Math.pow(intersection.x - lineStart.x, 2) +
+                    Math.pow(intersection.y - lineStart.y, 2));
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIntersection = intersection;
+                }
+            }
+        }
+        return closestIntersection;
+    }
+    /**
+     * Checks if a point is inside a polygon defined as an array of points.
+     * This is a convenience wrapper that works with arbitrary polygon point arrays.
+     */
+    static isPointInPolygonPoints(point, polygonPoints) {
+        return this.isPointInPolygon(point, polygonPoints);
+    }
+}

package/dist/kritzel-stencil/src/helpers/keyboard.helper.js

@@ -0,0 +1,51 @@
+import { KritzelDevicesHelper } from './devices.helper';
+export class KritzelKeyboardHelper {
+    static forceHideKeyboard() {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+    static enableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            if (!currentContent.includes('interactive-widget=resizes-content')) {
+                currentContent += ', interactive-widget=resizes-content';
+            }
+            meta.setAttribute('content', currentContent);
+        }
+    }
+    static disableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
+            newContent = newContent
+                .replace(/,(\s*,)+/g, ',')
+                .replace(/^,/, '')
+                .replace(/,$/, '')
+                .trim();
+            meta.setAttribute('content', newContent);
+        }
+    }
+    static onKeyboardVisibleChanged(callback) {
+        if ('visualViewport' in window) {
+            const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
+            const onResize = (event) => {
+                const target = event.target;
+                const isMobileDevice = KritzelDevicesHelper.isMobile();
+                const isViewportReduced = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
+                const isOpen = isMobileDevice && isViewportReduced;
+                callback(isOpen);
+            };
+            window.visualViewport.addEventListener('resize', onResize);
+            return () => window.visualViewport.removeEventListener('resize', onResize);
+        }
+        else {
+            // Fallback for older browsers does not provide a reliable event-based mechanism.
+            console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
+            // Return a no-op cleanup function.
+            return () => { };
+        }
+    }
+}

package/dist/kritzel-stencil/src/helpers/math.helper.js

@@ -0,0 +1,5 @@
+export class KritzelMathHelper {
+    static average(a, b) {
+        return (a + b) / 2;
+    }
+}

package/dist/kritzel-stencil/src/helpers/object.helper.js

@@ -0,0 +1,11 @@
+export class ObjectHelper {
+    static generateUUID() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static isEmpty(obj) {
+        if (obj === null || obj === undefined) {
+            return true;
+        }
+        return (Object === null || Object === void 0 ? void 0 : Object.keys(obj).length) === 0 && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+    }
+}

package/dist/kritzel-stencil/src/helpers/theme.helper.js

@@ -0,0 +1,69 @@
+export class ThemeHelper {
+    /**
+     * Converts a camelCase string to kebab-case.
+     * @example ThemeHelper.camelToKebab('controlHoverBackgroundColor') → 'control-hover-background-color'
+     * @example ThemeHelper.camelToKebab('backgroundColor') → 'background-color'
+     * @example ThemeHelper.camelToKebab('gap') → 'gap'
+     */
+    static camelToKebab(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    }
+    /**
+     * Recursively flattens a theme object into a map of CSS variable names to values.
+     * Skips the 'name' property at the root level since it's the theme identifier, not a CSS value.
+     *
+     * @param theme - The theme object to flatten
+     * @param prefix - The CSS variable prefix (default: '--kritzel')
+     * @returns A Map of CSS variable names to their values
+     *
+     * @example
+     * ThemeHelper.flattenThemeToVariables(lightTheme)
+     * // Returns Map {
+     * //   '--kritzel-global-pointer-cursor' => 'pointer',
+     * //   '--kritzel-controls-gap' => '8px',
+     * //   ...
+     * // }
+     */
+    static flattenThemeToVariables(theme, prefix = '--kritzel') {
+        const variables = new Map();
+        const recurse = (obj, currentPrefix, isRoot = false) => {
+            for (const [key, value] of Object.entries(obj)) {
+                // Skip the 'name' property at the root level
+                if (isRoot && key === 'name') {
+                    continue;
+                }
+                const kebabKey = ThemeHelper.camelToKebab(key);
+                const variableName = `${currentPrefix}-${kebabKey}`;
+                if (typeof value === 'object' && value !== null) {
+                    recurse(value, variableName);
+                }
+                else if (typeof value === 'string') {
+                    variables.set(variableName, value);
+                }
+            }
+        };
+        recurse(theme, prefix, true);
+        return variables;
+    }
+    /**
+     * Applies a map of CSS variables to an HTML element.
+     *
+     * @param element - The target HTML element
+     * @param variables - A Map of CSS variable names to values
+     */
+    static applyVariablesToElement(element, variables) {
+        for (const [name, value] of variables) {
+            element.style.setProperty(name, value);
+        }
+    }
+    /**
+     * Convenience method that flattens a theme and applies it to an element in one call.
+     *
+     * @param element - The target HTML element
+     * @param theme - The theme object to apply
+     */
+    static applyThemeToElement(element, theme) {
+        const variables = ThemeHelper.flattenThemeToVariables(theme);
+        ThemeHelper.applyVariablesToElement(element, variables);
+    }
+}

package/dist/kritzel-stencil/src/index.js

@@ -0,0 +1,41 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * 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/text.class';
+export * from './classes/objects/path.class';
+export * from './classes/objects/image.class';
+export * from './classes/objects/line.class';
+export * from './classes/objects/group.class';
+export * from './classes/tools/brush-tool.class';
+export * from './classes/tools/line-tool.class';
+export * from './classes/tools/eraser-tool.class';
+export * from './classes/tools/image-tool.class';
+export * from './classes/tools/text-tool.class';
+export * from './helpers/cursor.helper';
+export * from './classes/tools/selection-tool.class';
+export * from './classes/providers/broadcast-sync-provider.class';
+export * from './classes/providers/indexeddb-sync-provider.class';
+export * from './classes/providers/websocket-sync-provider.class';
+export * from './classes/providers/hocuspocus-sync-provider.class';
+export * from './classes/structures/app-state-map.structure';
+export * from './classes/core/workspace.class';
+export * from './classes/managers/anchor.manager';
+export * from './interfaces/toolbar-control.interface';
+export * from './interfaces/menu-item.interface';
+export * from './interfaces/sync-provider.interface';
+export * from './interfaces/sync-config.interface';
+export * from './interfaces/anchor.interface';
+export * from './configs/default-brush-tool.config';
+export * from './configs/default-text-tool.config';
+export * from './configs/default-line-tool.config';
+export * from './interfaces/theme.interface';
+export * from './interfaces/shortcut.interface';
+export * from './themes/light-theme';
+export * from './themes/dark-theme';
+export * from './classes/managers/theme.manager';

package/dist/kritzel-stencil/src/interfaces/anchor.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/arrow-head.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/bounding-box.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/clonable.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/context-menu-item.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/debug-info.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/dialog.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/displayable-shortcut.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/engine-state.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/line-options.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/master-detail.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/menu-item.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/object.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/path-options.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/point.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/polygon.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/serializable.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/settings.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/shortcut.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/sync-config.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/sync-provider.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/theme.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/tool-config.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/tool.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/toolbar-control.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/interfaces/undo-state.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/kritzel-stencil/src/themes/dark-theme.js

@@ -0,0 +1,198 @@
+/**
+ * Dark theme preset
+ */
+export const darkTheme = {
+    name: 'dark',
+    global: {
+        borderColor: '#3a3a3a',
+        dividerColor: '#3a3a3a',
+        focusColor: '#ffffff',
+        focusRingColor: '#ffffff',
+        hoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        iconColor: 'currentColor',
+        scrollbarThumbColor: '#555555',
+        textPrimary: '#ffffff',
+        textSecondary: '#e0e0e0',
+    },
+    selection: {
+        borderColor: '#0A84FF',
+        handleColor: '#1a1a1a',
+    },
+    checkerboard: {
+        colorDark: '#4a4a4a',
+        colorLight: '#3a3a3a',
+    },
+    backToContent: {
+        activeBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        color: '#ffffff',
+        hoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+    },
+    colorPalette: {
+        circleBorderColor: '#4a4a4a',
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    contextMenu: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
+        itemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        itemColor: '#e0e0e0',
+        itemDisabledColor: '#666666',
+        itemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+    },
+    controls: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        controlActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        controlColor: '#ffffff',
+        controlHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        controlSelectedBackgroundColor: '#0A84FF',
+        controlSelectedColor: '#ffffff',
+    },
+    dialog: {
+        backdropColor: 'rgba(0, 0, 0, 0.6)',
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.5)',
+        closeButtonActiveBackground: 'hsl(0, 0%, 100%, 12%)',
+        closeButtonBackground: 'transparent',
+        closeButtonColor: '#e0e0e0',
+        closeButtonHoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        closeButtonHoverColor: '#ffffff',
+        footerBorder: '1px solid #3a3a3a',
+        headerBorder: '1px solid #3a3a3a',
+        titleColor: '#ffffff',
+    },
+    dropdown: {
+        accentColor: '#0A84FF',
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: 'rgba(10, 132, 255, 0.2)',
+        textColor: '#e0e0e0',
+    },
+    engine: {
+        backgroundColor: '#1a1a1a',
+    },
+    fontSize: {
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+        textColor: '#e0e0e0',
+    },
+    lineEndings: {
+        hoverBackgroundColor: '#3a3a3a',
+        labelColor: '#999999',
+        optionBackground: '#2a2a2a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    masterDetail: {
+        backButtonColor: '#e0e0e0',
+        backgroundColor: '#2a2a2a',
+        detailBackgroundColor: '#2a2a2a',
+        detailFocusOutline: '2px solid #ffffff',
+        menuBackgroundColor: '#2a2a2a',
+        menuBorderRight: '1px solid #3a3a3a',
+        menuItemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        menuItemBackgroundColor: 'transparent',
+        menuItemChevronColor: '#666666',
+        menuItemColor: '#e0e0e0',
+        menuItemDisabledColor: '#666666',
+        menuItemFocusOutline: '2px solid #ffffff',
+        menuItemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        menuItemSelectedBackgroundColor: '#0A84FF',
+        menuItemSelectedColor: '#ffffff',
+        menuItemSelectedHoverBackgroundColor: '#0A84FF',
+    },
+    menu: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        itemButtonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        itemChildOpenBackgroundColor: 'hsl(0, 0%, 100%, 6%)',
+        itemColor: '#e0e0e0',
+        itemEditingBackgroundColor: '#3a3a3a',
+        itemInputBorder: '1px solid #ffffff',
+        itemInputBorderColorOnSelected: '#ffffff',
+        itemInputCaretColor: '#e0e0e0',
+        itemInputCaretColorOnSelected: '#ffffff',
+        itemInputSelectionColor: '#b0b0b0',
+        itemInputSelectionColorOnSelected: 'rgba(255, 255, 255, 0.35)',
+        itemInputSelectionTextColor: '#ffffff',
+        itemInputSelectionTextColorOnSelected: '#ffffff',
+        itemOverlayBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        itemSelectedBackgroundColor: '#0A84FF',
+        itemSelectedColor: '#ffffff',
+    },
+    moreMenu: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        borderRadius: '12px',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        buttonActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
+        buttonColor: '#ffffff',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        innerBorderRadius: '12px',
+    },
+    numericInput: {
+        borderColor: '#3a3a3a',
+        focusBorderColor: '#ffffff',
+        hoverBorderColor: '#4a4a4a',
+        inputBackground: '#1a1a1a',
+        labelColor: '#999999',
+        spinnerActiveBackground: 'hsl(0, 0%, 100%, 12%)',
+        spinnerBackground: 'transparent',
+        spinnerColor: '#e0e0e0',
+        spinnerHoverBackground: 'hsl(0, 0%, 100%, 8%)',
+        textColor: '#e0e0e0',
+    },
+    opacitySlider: {
+        activeColor: '#0A84FF',
+        thumbBorderColor: '#0A84FF',
+        thumbColor: '#ffffff',
+        trackColor: '#4a4a4a',
+    },
+    settings: {
+        contentHeadingColor: '#ffffff',
+        contentTextColor: '#e0e0e0',
+        descriptionColor: '#999999',
+        labelColor: '#e0e0e0',
+    },
+    shapeFill: {
+        hoverBackgroundColor: '#3a3a3a',
+        optionBackground: '#2a2a2a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    slideToggle: {
+        thumbColor: '#ffffff',
+        trackCheckedColor: '#0A84FF',
+        trackColor: '#4a4a4a',
+        transitionDuration: '0.2s',
+    },
+    splitButton: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
+        color: '#ffffff',
+        dividerBackgroundColor: '#3a3a3a',
+        hoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+    },
+    strokeSize: {
+        hoverBackgroundColor: '#3a3a3a',
+        selectedBackgroundColor: '#3a3a3a',
+    },
+    tooltip: {
+        backgroundColor: '#2a2a2a',
+        border: '1px solid #3a3a3a',
+        boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
+        color: '#ffffff',
+    },
+    utilityPanel: {
+        backgroundColor: '#3a3a3a',
+        buttonColor: '#e0e0e0',
+        buttonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
+        separatorColor: 'hsl(0, 0%, 100%, 12%)',
+    },
+};