@easemate/web-kit 0.1.5 → 0.3.0

package/build/components/code/utils/syntax-highlighter-theme.cjs

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateHighlightStyles = exports.DEFAULT_THEME = void 0;
-exports.DEFAULT_THEME = {
-    keyword: 'var(--ease-syntax-keyword, #e47ab4)',
-    string: 'var(--ease-syntax-string, #6ad09d)',
-    comment: 'var(--ease-syntax-comment, var(--color-gray-700))',
-    number: 'var(--ease-syntax-number, #f2c24b)',
-    operator: 'var(--ease-syntax-operator, var(--color-gray-500))',
-    tag: 'var(--ease-syntax-tag, #c36571)',
-    attribute: 'var(--ease-syntax-attribute, #ff6600)',
-    property: 'var(--ease-syntax-property, #61bf90)',
-    type: 'var(--ease-syntax-type, #FFAB77)',
-    variable: 'var(--ease-syntax-variable, #ea7987)',
-    selector: 'var(--ease-syntax-selector, #4F9CED)',
-    function: 'var(--ease-syntax-function, #71a4f4)'
-};
-const generateHighlightStyles = (instanceId, theme = exports.DEFAULT_THEME) => {
-    let styles = '';
-    for (const [type, color] of Object.entries(theme)) {
-        const highlightName = `syntax-${type}-${instanceId}`;
-        const italic = type === 'comment' ? 'font-style: italic;' : '';
-        styles += `::highlight(${highlightName}) { color: ${color}; ${italic} }`;
-    }
-    return styles;
-};
-exports.generateHighlightStyles = generateHighlightStyles;

package/build/components/code/utils/syntax-highlighter-theme.d.cts

@@ -1,3 +0,0 @@
-import type { TokenType } from "./syntax-highlighter-types.cjs";
-export declare const DEFAULT_THEME: Record<TokenType, string>;
-export declare const generateHighlightStyles: (instanceId: string, theme?: Record<TokenType, string>) => string;

package/build/components/code/utils/syntax-highlighter-theme.d.ts

@@ -1,3 +0,0 @@
-import type { TokenType } from "./syntax-highlighter-types.js";
-export declare const DEFAULT_THEME: Record<TokenType, string>;
-export declare const generateHighlightStyles: (instanceId: string, theme?: Record<TokenType, string>) => string;

package/build/components/code/utils/syntax-highlighter-theme.js

@@ -1,23 +0,0 @@
-export const DEFAULT_THEME = {
-    keyword: 'var(--ease-syntax-keyword, #e47ab4)',
-    string: 'var(--ease-syntax-string, #6ad09d)',
-    comment: 'var(--ease-syntax-comment, var(--color-gray-700))',
-    number: 'var(--ease-syntax-number, #f2c24b)',
-    operator: 'var(--ease-syntax-operator, var(--color-gray-500))',
-    tag: 'var(--ease-syntax-tag, #c36571)',
-    attribute: 'var(--ease-syntax-attribute, #ff6600)',
-    property: 'var(--ease-syntax-property, #61bf90)',
-    type: 'var(--ease-syntax-type, #FFAB77)',
-    variable: 'var(--ease-syntax-variable, #ea7987)',
-    selector: 'var(--ease-syntax-selector, #4F9CED)',
-    function: 'var(--ease-syntax-function, #71a4f4)'
-};
-export const generateHighlightStyles = (instanceId, theme = DEFAULT_THEME) => {
-    let styles = '';
-    for (const [type, color] of Object.entries(theme)) {
-        const highlightName = `syntax-${type}-${instanceId}`;
-        const italic = type === 'comment' ? 'font-style: italic;' : '';
-        styles += `::highlight(${highlightName}) { color: ${color}; ${italic} }`;
-    }
-    return styles;
-};

package/build/components/code/utils/syntax-highlighter-types.cjs

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/build/components/code/utils/syntax-highlighter-types.d.cts

@@ -1,12 +0,0 @@
-export type TokenType = 'comment' | 'string' | 'number' | 'keyword' | 'operator' | 'function' | 'type' | 'tag' | 'attribute' | 'property' | 'selector' | 'variable';
-export interface Token {
-    type: TokenType;
-    start: number;
-    end: number;
-}
-export type GrammarRule = [TokenType, RegExp];
-export type Grammar = GrammarRule[];
-export interface SyntaxHighlighterOptions {
-    language?: string;
-    theme?: Record<TokenType, string>;
-}

package/build/components/code/utils/syntax-highlighter-types.d.ts

@@ -1,12 +0,0 @@
-export type TokenType = 'comment' | 'string' | 'number' | 'keyword' | 'operator' | 'function' | 'type' | 'tag' | 'attribute' | 'property' | 'selector' | 'variable';
-export interface Token {
-    type: TokenType;
-    start: number;
-    end: number;
-}
-export type GrammarRule = [TokenType, RegExp];
-export type Grammar = GrammarRule[];
-export interface SyntaxHighlighterOptions {
-    language?: string;
-    theme?: Record<TokenType, string>;
-}

package/build/components/code/utils/syntax-highlighter-types.js

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

package/build/components/code/utils/syntax-tokenizer.cjs

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.normalizeIndent = exports.tokenize = void 0;
-const syntax_grammars_1 = require("./syntax-grammars.cjs");
-const tokenize = (code, language) => {
-    const grammar = syntax_grammars_1.GRAMMARS[language.toLowerCase()];
-    if (!grammar) {
-        return [];
-    }
-    const regexParts = [];
-    const groupMap = new Map();
-    let groupIndex = 0;
-    grammar.forEach(([type, pattern]) => {
-        const groupName = `G${groupIndex++}`;
-        groupMap.set(groupName, type);
-        regexParts.push(`(?<${groupName}>${pattern.source})`);
-    });
-    const masterRegex = new RegExp(regexParts.join('|'), 'gm');
-    const tokens = [];
-    let match;
-    while (true) {
-        match = masterRegex.exec(code);
-        if (match === null) {
-            break;
-        }
-        if (match.index === masterRegex.lastIndex) {
-            masterRegex.lastIndex++;
-        }
-        if (match.groups) {
-            for (const groupName in match.groups) {
-                if (match.groups[groupName] !== undefined) {
-                    const type = groupMap.get(groupName);
-                    if (type) {
-                        const start = match.index;
-                        const end = start + match[0].length;
-                        if ((language === 'html' || language === 'tsx' || language === 'jsx') && type === 'tag') {
-                            const tagNameMatch = match[0].match(/[a-zA-Z0-9-]+/);
-                            if (tagNameMatch && tagNameMatch.index !== undefined) {
-                                const tagNameStart = start + tagNameMatch.index;
-                                const tagNameEnd = tagNameStart + tagNameMatch[0].length;
-                                tokens.push({ type, start: tagNameStart, end: tagNameEnd });
-                                break;
-                            }
-                        }
-                        tokens.push({ type, start, end });
-                        break;
-                    }
-                }
-            }
-        }
-    }
-    return tokens;
-};
-exports.tokenize = tokenize;
-const normalizeIndent = (code) => {
-    const lines = code.split('\n').filter((line) => line.trim());
-    if (!lines.length) {
-        return '';
-    }
-    const minIndent = Math.min(...lines.map((line) => line.match(/^\s*/)?.[0].length || 0));
-    return lines.map((line) => line.substring(minIndent)).join('\n');
-};
-exports.normalizeIndent = normalizeIndent;

package/build/components/code/utils/syntax-tokenizer.d.cts

@@ -1,3 +0,0 @@
-import type { Token } from "./syntax-highlighter-types.cjs";
-export declare const tokenize: (code: string, language: string) => Token[];
-export declare const normalizeIndent: (code: string) => string;

package/build/components/code/utils/syntax-tokenizer.d.ts

@@ -1,3 +0,0 @@
-import type { Token } from "./syntax-highlighter-types.js";
-export declare const tokenize: (code: string, language: string) => Token[];
-export declare const normalizeIndent: (code: string) => string;

package/build/components/code/utils/syntax-tokenizer.js

@@ -1,58 +0,0 @@
-import { GRAMMARS } from "./syntax-grammars.js";
-export const tokenize = (code, language) => {
-    const grammar = GRAMMARS[language.toLowerCase()];
-    if (!grammar) {
-        return [];
-    }
-    const regexParts = [];
-    const groupMap = new Map();
-    let groupIndex = 0;
-    grammar.forEach(([type, pattern]) => {
-        const groupName = `G${groupIndex++}`;
-        groupMap.set(groupName, type);
-        regexParts.push(`(?<${groupName}>${pattern.source})`);
-    });
-    const masterRegex = new RegExp(regexParts.join('|'), 'gm');
-    const tokens = [];
-    let match;
-    while (true) {
-        match = masterRegex.exec(code);
-        if (match === null) {
-            break;
-        }
-        if (match.index === masterRegex.lastIndex) {
-            masterRegex.lastIndex++;
-        }
-        if (match.groups) {
-            for (const groupName in match.groups) {
-                if (match.groups[groupName] !== undefined) {
-                    const type = groupMap.get(groupName);
-                    if (type) {
-                        const start = match.index;
-                        const end = start + match[0].length;
-                        if ((language === 'html' || language === 'tsx' || language === 'jsx') && type === 'tag') {
-                            const tagNameMatch = match[0].match(/[a-zA-Z0-9-]+/);
-                            if (tagNameMatch && tagNameMatch.index !== undefined) {
-                                const tagNameStart = start + tagNameMatch.index;
-                                const tagNameEnd = tagNameStart + tagNameMatch[0].length;
-                                tokens.push({ type, start: tagNameStart, end: tagNameEnd });
-                                break;
-                            }
-                        }
-                        tokens.push({ type, start, end });
-                        break;
-                    }
-                }
-            }
-        }
-    }
-    return tokens;
-};
-export const normalizeIndent = (code) => {
-    const lines = code.split('\n').filter((line) => line.trim());
-    if (!lines.length) {
-        return '';
-    }
-    const minIndent = Math.min(...lines.map((line) => line.match(/^\s*/)?.[0].length || 0));
-    return lines.map((line) => line.substring(minIndent)).join('\n');
-};

package/build/components/curve/bezier-conversion.cjs

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cubicBezierToLinearPoints = void 0;
-const cubicBezierToLinearPoints = (points) => {
-    const start = {
-        x: 0,
-        y: 0,
-        cpOutX: points.p1.x,
-        cpOutY: points.p1.y,
-        isLinked: true,
-        mirrorLength: true
-    };
-    const end = {
-        x: 1,
-        y: 1,
-        cpInX: points.p2.x - 1,
-        cpInY: points.p2.y - 1,
-        isLinked: true,
-        mirrorLength: true
-    };
-    return [start, end];
-};
-exports.cubicBezierToLinearPoints = cubicBezierToLinearPoints;

package/build/components/curve/bezier-conversion.d.cts

@@ -1,2 +0,0 @@
-import type { CubicBezierPoints, LinearPoints } from "./types.cjs";
-export declare const cubicBezierToLinearPoints: (points: CubicBezierPoints) => LinearPoints;

package/build/components/curve/bezier-conversion.d.ts

@@ -1,2 +0,0 @@
-import type { CubicBezierPoints, LinearPoints } from "./types.js";
-export declare const cubicBezierToLinearPoints: (points: CubicBezierPoints) => LinearPoints;

package/build/components/curve/bezier-conversion.js

@@ -1,19 +0,0 @@
-export const cubicBezierToLinearPoints = (points) => {
-    const start = {
-        x: 0,
-        y: 0,
-        cpOutX: points.p1.x,
-        cpOutY: points.p1.y,
-        isLinked: true,
-        mirrorLength: true
-    };
-    const end = {
-        x: 1,
-        y: 1,
-        cpInX: points.p2.x - 1,
-        cpInY: points.p2.y - 1,
-        isLinked: true,
-        mirrorLength: true
-    };
-    return [start, end];
-};

package/build/components/curve/canvas-controls.cjs

@@ -1,300 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasControls = void 0;
-const lit_html_1 = require("lit-html");
-const constants_1 = require("./constants.cjs");
-const styles_1 = require("./styles.cjs");
-const types_1 = require("./types.cjs");
-const utils_1 = require("./utils.cjs");
-const Component_1 = require("../../decorators/Component");
-const Prop_1 = require("../../decorators/Prop");
-const shared_1 = require("../../elements/shared");
-const HOST_HANDLER_MAP = {
-    'points-change': 'handlePointsChange',
-    'linear-point-focus': 'handleLinearPointFocus'
-};
-@(0, Component_1.Component)({
-    tag: 'ease-curve-canvas-controls',
-    styles: styles_1.canvasControlsStyles,
-    template() {
-        if (this.easingType !== types_1.EasingType.LINEAR || !Array.isArray(this.points)) {
-            return null;
-        }
-        const focusedIndex = this.focusedLinearIndex;
-        if (focusedIndex === null) {
-            return null;
-        }
-        const points = this.points;
-        const selectedPoint = points[focusedIndex];
-        if (!selectedPoint) {
-            return null;
-        }
-        const isInnerPoint = focusedIndex > 0 && focusedIndex < points.length - 1;
-        if (!isInnerPoint) {
-            return null;
-        }
-        const hasInHandle = selectedPoint.cpInX !== undefined || selectedPoint.cpInY !== undefined;
-        const hasOutHandle = selectedPoint.cpOutX !== undefined || selectedPoint.cpOutY !== undefined;
-        const hasAnyHandle = hasInHandle || hasOutHandle;
-        return (0, lit_html_1.html) `
-      <div class="overlay-controls">
-        <button
-          type="button"
-          class="overlay-button ${selectedPoint.isLinked ? 'active' : 'inactive'}"
-          @click=${this.handleToggleMirrorAngle}
-        >
-          <ease-icon-bezier-angle></ease-icon-bezier-angle>
-        </button>
-        <button
-          type="button"
-          class="overlay-button ${selectedPoint.mirrorLength !== false && selectedPoint.isLinked ? 'active' : 'inactive'}"
-          @click=${this.handleToggleMirrorLength}
-          ?disabled=${!selectedPoint.isLinked}
-        >
-          <ease-icon-bezier-length></ease-icon-bezier-length>
-        </button>
-        ${hasAnyHandle
-            ? (0, lit_html_1.html) `
-            <button
-              type="button"
-              class="overlay-button"
-              @click=${this.handleRemoveSmoothing}
-            >
-              <ease-icon-bezier></ease-icon-bezier>
-            </button>
-          `
-            : (0, lit_html_1.html) `
-            <button
-              type="button"
-              class="overlay-button"
-              @click=${this.handleAddSmoothing}
-            >
-              <ease-icon-bezier-mirror></ease-icon-bezier-mirror>
-            </button>
-          `}
-      </div>
-    `;
-    }
-})
-class CanvasControls extends HTMLElement {
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor easingType;
-    @(0, Prop_1.Prop)({ type: Object, reflect: false })
-    accessor points;
-    @(0, Prop_1.Prop)({ type: Number, reflect: false, defaultValue: null })
-    accessor focusedLinearIndex = null;
-    #getEventTarget = () => {
-        const root = this.getRootNode();
-        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
-            return root.host;
-        }
-        return this;
-    };
-    #getLinearPoints = () => {
-        if (!Array.isArray(this.points)) {
-            return null;
-        }
-        return this.points;
-    };
-    #notifyHost = (type, value, event) => {
-        const target = this.#getEventTarget();
-        const detail = { value, event };
-        (0, shared_1.dispatchControlEvent)(target, type, detail);
-    };
-    #emitPoints = (points, event) => {
-        this.points = points;
-        this.#notifyHost('points-change', points, event);
-    };
-    handleToggleMirrorAngle = (event) => {
-        event.preventDefault();
-        const points = this.#getLinearPoints();
-        if (!points) {
-            return;
-        }
-        const index = this.focusedLinearIndex;
-        if (index === null) {
-            return;
-        }
-        const point = points[index];
-        if (!point) {
-            return;
-        }
-        const updatedPoints = [...points];
-        const updatedPoint = { ...point };
-        updatedPoints[index] = updatedPoint;
-        const nextState = !updatedPoint.isLinked;
-        if (nextState) {
-            this.#ensureSmoothHandles(updatedPoint, index, points);
-            updatedPoint.mirrorLength = true;
-            this.#alignMirrorLength(updatedPoint);
-        }
-        else {
-            updatedPoint.mirrorLength = false;
-        }
-        updatedPoint.isLinked = nextState;
-        const normalizedPoints = (0, utils_1.normalizeLinearPoints)(updatedPoints);
-        this.#emitPoints(normalizedPoints, event);
-        this.focusedLinearIndex = index;
-        this.#notifyHost('linear-point-focus', index, event);
-    };
-    handleToggleMirrorLength = (event) => {
-        event.preventDefault();
-        const points = this.#getLinearPoints();
-        if (!points) {
-            return;
-        }
-        const index = this.focusedLinearIndex;
-        if (index === null) {
-            return;
-        }
-        const point = points[index];
-        if (!point || !point.isLinked) {
-            return;
-        }
-        const updatedPoints = [...points];
-        const updatedPoint = { ...point };
-        updatedPoints[index] = updatedPoint;
-        const nextState = updatedPoint.mirrorLength === false;
-        updatedPoint.mirrorLength = nextState;
-        if (nextState) {
-            this.#ensureSmoothHandles(updatedPoint, index, points);
-            this.#alignMirrorLength(updatedPoint);
-        }
-        const normalizedPoints = (0, utils_1.normalizeLinearPoints)(updatedPoints);
-        this.#emitPoints(normalizedPoints, event);
-        this.focusedLinearIndex = index;
-        this.#notifyHost('linear-point-focus', index, event);
-    };
-    handleRemoveSmoothing = (event) => {
-        event.preventDefault();
-        const points = this.#getLinearPoints();
-        if (!points) {
-            return;
-        }
-        const index = this.focusedLinearIndex;
-        if (index === null) {
-            return;
-        }
-        const existingPoint = points[index];
-        if (!existingPoint) {
-            return;
-        }
-        const updatedPoints = [...points];
-        const updatedPoint = { ...existingPoint };
-        updatedPoints[index] = updatedPoint;
-        delete updatedPoint.cpInX;
-        delete updatedPoint.cpInY;
-        delete updatedPoint.cpOutX;
-        delete updatedPoint.cpOutY;
-        delete updatedPoint.isLinked;
-        delete updatedPoint.mirrorLength;
-        const normalizedPoints = (0, utils_1.normalizeLinearPoints)(updatedPoints);
-        this.#emitPoints(normalizedPoints, event);
-        this.focusedLinearIndex = index;
-        this.#notifyHost('linear-point-focus', index, event);
-    };
-    handleAddSmoothing = (event) => {
-        event.preventDefault();
-        const points = this.#getLinearPoints();
-        if (!points) {
-            return;
-        }
-        const index = this.focusedLinearIndex;
-        if (index === null) {
-            return;
-        }
-        const point = points[index];
-        if (!point) {
-            return;
-        }
-        const updatedPoints = [...points];
-        const updatedPoint = { ...point };
-        updatedPoints[index] = updatedPoint;
-        this.#ensureSmoothHandles(updatedPoint, index, points);
-        updatedPoint.isLinked = true;
-        updatedPoint.mirrorLength = true;
-        this.#alignMirrorLength(updatedPoint);
-        const normalizedPoints = (0, utils_1.normalizeLinearPoints)(updatedPoints);
-        this.#emitPoints(normalizedPoints, event);
-        this.focusedLinearIndex = index;
-        this.#notifyHost('linear-point-focus', index, event);
-    };
-    #ensureSmoothHandles(point, index, points) {
-        const prev = points[index - 1];
-        const next = points[index + 1];
-        let refDx = point.cpOutX ?? -(point.cpInX ?? 0);
-        let refDy = point.cpOutY ?? -(point.cpInY ?? 0);
-        if (refDx === 0 && refDy === 0) {
-            let dirX = 0;
-            let dirY = 0;
-            if (prev && next) {
-                dirX = next.x - prev.x;
-                dirY = next.y - prev.y;
-            }
-            else if (next) {
-                dirX = next.x - point.x;
-                dirY = next.y - point.y;
-            }
-            else if (prev) {
-                dirX = point.x - prev.x;
-                dirY = point.y - prev.y;
-            }
-            else {
-                dirX = 1;
-                dirY = 0;
-            }
-            const direction = (0, utils_1.normalizeVector)(dirX, dirY);
-            const length = constants_1.DEFAULT_HANDLE_LENGTH;
-            point.cpInX = -direction.dx * length;
-            point.cpInY = -direction.dy * length;
-            point.cpOutX = direction.dx * length;
-            point.cpOutY = direction.dy * length;
-            refDx = point.cpOutX;
-            refDy = point.cpOutY;
-        }
-        if (refDx === 0 && refDy === 0) {
-            return;
-        }
-        const normalized = (0, utils_1.normalizeVector)(refDx, refDy);
-        const referenceLength = (0, utils_1.vectorLength)(refDx, refDy);
-        const inLength = (0, utils_1.vectorLength)(point.cpInX ?? 0, point.cpInY ?? 0) || referenceLength;
-        point.cpInX = -normalized.dx * inLength;
-        point.cpInY = -normalized.dy * inLength;
-        const outLength = (0, utils_1.vectorLength)(point.cpOutX ?? 0, point.cpOutY ?? 0) || referenceLength;
-        point.cpOutX = normalized.dx * outLength;
-        point.cpOutY = normalized.dy * outLength;
-    }
-    #alignMirrorLength(point) {
-        if (!point.isLinked) {
-            point.mirrorLength = false;
-            return;
-        }
-        const outLength = (0, utils_1.vectorLength)(point.cpOutX ?? 0, point.cpOutY ?? 0);
-        const inLength = (0, utils_1.vectorLength)(point.cpInX ?? 0, point.cpInY ?? 0);
-        const targetLength = Math.max(outLength, inLength);
-        if (targetLength <= 0) {
-            return;
-        }
-        if (outLength > 0) {
-            const outDirection = (0, utils_1.normalizeVector)(point.cpOutX ?? 0, point.cpOutY ?? 0);
-            point.cpOutX = outDirection.dx * targetLength;
-            point.cpOutY = outDirection.dy * targetLength;
-        }
-        else if (inLength > 0) {
-            const inDirection = (0, utils_1.normalizeVector)(point.cpInX ?? 0, point.cpInY ?? 0);
-            point.cpOutX = -inDirection.dx * targetLength;
-            point.cpOutY = -inDirection.dy * targetLength;
-        }
-        if (inLength > 0) {
-            const inDirection = (0, utils_1.normalizeVector)(point.cpInX ?? 0, point.cpInY ?? 0);
-            point.cpInX = inDirection.dx * targetLength;
-            point.cpInY = inDirection.dy * targetLength;
-        }
-        else if (outLength > 0) {
-            const outDirection = (0, utils_1.normalizeVector)(point.cpOutX ?? 0, point.cpOutY ?? 0);
-            point.cpInX = -outDirection.dx * targetLength;
-            point.cpInY = -outDirection.dy * targetLength;
-        }
-    }
-}
-exports.CanvasControls = CanvasControls;

package/build/components/curve/canvas-controls.d.cts

@@ -1,12 +0,0 @@
-import { type CubicBezierPoints, EasingType, type LinearPoints } from "./types.cjs";
-export declare class CanvasControls extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    accessor easingType: EasingType;
-    accessor points: CubicBezierPoints | LinearPoints;
-    accessor focusedLinearIndex: number | null;
-    readonly handleToggleMirrorAngle: (event: Event) => void;
-    readonly handleToggleMirrorLength: (event: Event) => void;
-    readonly handleRemoveSmoothing: (event: Event) => void;
-    readonly handleAddSmoothing: (event: Event) => void;
-}

package/build/components/curve/canvas-controls.d.ts

@@ -1,12 +0,0 @@
-import { type CubicBezierPoints, EasingType, type LinearPoints } from "./types.js";
-export declare class CanvasControls extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    accessor easingType: EasingType;
-    accessor points: CubicBezierPoints | LinearPoints;
-    accessor focusedLinearIndex: number | null;
-    readonly handleToggleMirrorAngle: (event: Event) => void;
-    readonly handleToggleMirrorLength: (event: Event) => void;
-    readonly handleRemoveSmoothing: (event: Event) => void;
-    readonly handleAddSmoothing: (event: Event) => void;
-}