kritzel-react 0.1.32 → 0.1.34

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

@@ -1,149 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/**
- * @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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,198 +0,0 @@
-/**
- * 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%)',
-    },
-};