@easemate/web-kit 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+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;
+}