@easemate/web-kit 0.2.0 → 0.3.1

package/build/components/curve/index.js

@@ -1,330 +0,0 @@
-import { html } from 'lit-html';
-import { cubicBezierToLinearPoints } from "./bezier-conversion.js";
-import { containerStyles } from "./styles.js";
-import { EasingType, MIN_LINEAR_POINTS } from "./types.js";
-import { MIN_LINEAR_DELTA, normalizeLinearPoints } from "./utils.js";
-import { Component } from '../../decorators/Component';
-import { Listen } from '../../decorators/Listen';
-import { Prop } from '../../decorators/Prop';
-@Component({
-    tag: 'ease-curve',
-    styles: containerStyles,
-    template() {
-        return html `
-      <div class="curve-container">
-        <div class="curve-header">
-          <ease-curve-controls
-            .easingType=${this.easingType}
-            .points=${this.points}
-            .showGrid=${this.showGrid}
-            .snapToGrid=${this.snapToGrid}
-            .gridSize=${this.gridSize}
-            .focusedLinearIndex=${this.focusedLinearIndex}
-          ></ease-curve-controls>
-        </div>
-
-        <div class="curve-canvas-wrapper">
-          <div class="curve-canvas">
-            <ease-curve-canvas
-              .easingType=${this.easingType}
-              .points=${this.points}
-              .showGrid=${this.showGrid}
-              .snapToGrid=${this.snapToGrid}
-              .gridSize=${this.gridSize}
-              .focusedLinearIndex=${this.focusedLinearIndex}
-              .simplify=${this.simplify}
-              .round=${this.round}
-            ></ease-curve-canvas>
-          </div>
-          <ease-curve-canvas-controls
-            .easingType=${this.easingType}
-            .points=${this.points}
-            .focusedLinearIndex=${this.focusedLinearIndex}
-          ></ease-curve-canvas-controls>
-        </div>
-
-        <div class="curve-toolbar">
-          <ease-curve-toolbar
-            .easingType=${this.easingType}
-            .points=${this.points}
-            .showGrid=${this.showGrid}
-            .snapToGrid=${this.snapToGrid}
-            .gridSize=${this.gridSize}
-            .simplify=${this.simplify}
-            .round=${this.round}
-          ></ease-curve-toolbar>
-        </div>
-
-        <!-- <div class="curve-footer">
-          <ease-curve-output
-            .easingType=${this.easingType}
-            .points=${this.points}
-            .name=${this.name}
-            .simplify=${this.simplify}
-            .round=${this.round}
-          ></ease-curve-output>
-        </div> -->
-      </div>
-    `;
-    }
-})
-export class Curve extends HTMLElement {
-    @Prop({ reflect: true, defaultValue: 'ease-custom' })
-    accessor name;
-    @Prop({
-        reflect: true,
-        defaultValue: EasingType.CUBIC_BEZIER,
-        onChange(next, previous) {
-            if (next !== previous) {
-                this.points = this.getDefaultPointsForType(next);
-                this.focusedLinearIndex = null;
-            }
-        }
-    })
-    accessor easingType;
-    @Prop({
-        type: Object,
-        reflect: false,
-        defaultValue: () => {
-            return { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } };
-        }
-    })
-    accessor points;
-    @Prop({ type: Boolean, reflect: true, defaultValue: true })
-    accessor showGrid;
-    @Prop({ type: Boolean, reflect: true, defaultValue: false })
-    accessor snapToGrid;
-    @Prop({ type: Number, reflect: true, defaultValue: 8 })
-    accessor gridSize;
-    @Prop({ type: Number, reflect: true, defaultValue: 0 })
-    accessor simplify;
-    @Prop({ type: Number, reflect: true, defaultValue: 5 })
-    accessor round;
-    @Prop({ type: Number, reflect: false, defaultValue: null })
-    accessor focusedLinearIndex = null;
-    getDefaultPointsForType(type) {
-        return type === EasingType.CUBIC_BEZIER
-            ? { p1: { x: 0.25, y: 0.1 }, p2: { x: 0.25, y: 1 } }
-            : [
-                { x: 0, y: 0 },
-                { x: 1, y: 1 }
-            ];
-    }
-    @Listen('easing-type-change', { target: 'light' })
-    handleEasingTypeChange(event) {
-        const { value } = event.detail;
-        if (this.easingType === value) {
-            return;
-        }
-        const previousType = this.easingType;
-        const previousPoints = this.points;
-        this.easingType = value;
-        this.focusedLinearIndex = null;
-        if (previousType === EasingType.CUBIC_BEZIER && value === EasingType.LINEAR) {
-            if (previousPoints && !Array.isArray(previousPoints)) {
-                const bezierPoints = previousPoints;
-                const linearPoints = cubicBezierToLinearPoints(bezierPoints);
-                this.points = linearPoints;
-                this.emitPointsChange(linearPoints, event.detail.event);
-                return;
-            }
-            else {
-                this.points = this.getDefaultPointsForType(value);
-                this.emitPointsChange(this.points, event.detail.event);
-                return;
-            }
-        }
-        else if (previousType === EasingType.LINEAR && value === EasingType.CUBIC_BEZIER) {
-            this.points = this.getDefaultPointsForType(value);
-            this.emitPointsChange(this.points, event.detail.event);
-            return;
-        }
-        else {
-            this.points = this.getDefaultPointsForType(value);
-            this.emitPointsChange(this.points, event.detail.event);
-            return;
-        }
-    }
-    @Listen('grid-toggle', { target: 'light' })
-    handleGridToggle(event) {
-        const { value } = event.detail;
-        if (this.showGrid === value) {
-            return;
-        }
-        this.showGrid = value;
-    }
-    @Listen('snap-toggle', { target: 'light' })
-    handleSnapToggle(event) {
-        const { value } = event.detail;
-        if (this.snapToGrid === value) {
-            return;
-        }
-        this.snapToGrid = value;
-    }
-    @Listen('grid-size-change', { target: 'light' })
-    handleGridSizeChange(event) {
-        let { value } = event.detail;
-        value = Math.max(1, Math.min(24, value));
-        if (this.gridSize === value) {
-            return;
-        }
-        this.gridSize = value;
-        this.requestRender();
-    }
-    @Listen('simplify-change', { target: 'light' })
-    handleSimplifyChange(event) {
-        const { value } = event.detail;
-        if (this.simplify === value) {
-            return;
-        }
-        this.simplify = value;
-        this.requestRender();
-    }
-    @Listen('round-change', { target: 'light' })
-    handleRoundChange(event) {
-        const { value } = event.detail;
-        if (this.round === value) {
-            return;
-        }
-        this.round = value;
-        this.requestRender();
-    }
-    @Listen('points-change', {
-        target: 'light'
-    })
-    handlePointsChange(event) {
-        const { value } = event.detail;
-        this.points = value;
-        if (Array.isArray(value)) {
-            if (this.focusedLinearIndex !== null) {
-                if (this.focusedLinearIndex >= value.length) {
-                    this.focusedLinearIndex = value.length - 1;
-                }
-            }
-        }
-        else {
-            this.focusedLinearIndex = null;
-        }
-    }
-    @Listen('keydown', { target: 'window', passive: false })
-    handleKeyboardShortcuts(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        const activeElement = event.target;
-        if (activeElement instanceof HTMLInputElement ||
-            activeElement instanceof HTMLTextAreaElement ||
-            (activeElement instanceof HTMLElement && activeElement.isContentEditable)) {
-            return;
-        }
-        if (this.easingType !== EasingType.LINEAR || !Array.isArray(this.points)) {
-            return;
-        }
-        const index = this.focusedLinearIndex;
-        if (index === null) {
-            return;
-        }
-        const lastIndex = this.points.length - 1;
-        const clonedPoints = this.points.map((point) => {
-            return { ...point };
-        });
-        const point = clonedPoints[index];
-        if (!point) {
-            return;
-        }
-        const step = event.shiftKey ? 0.05 : 0.01;
-        let handled = false;
-        switch (event.key) {
-            case 'ArrowLeft': {
-                if (index <= 0 || index >= lastIndex) {
-                    break;
-                }
-                const previous = clonedPoints[index - 1];
-                const next = clonedPoints[index + 1];
-                if (!previous || !next) {
-                    break;
-                }
-                const minX = previous.x + MIN_LINEAR_DELTA;
-                const maxX = next.x - MIN_LINEAR_DELTA;
-                point.x = Math.min(Math.max(point.x - step, minX), maxX);
-                handled = true;
-                break;
-            }
-            case 'ArrowRight': {
-                if (index <= 0 || index >= lastIndex) {
-                    break;
-                }
-                const previous = clonedPoints[index - 1];
-                const next = clonedPoints[index + 1];
-                if (!previous || !next) {
-                    break;
-                }
-                const minX = previous.x + MIN_LINEAR_DELTA;
-                const maxX = next.x - MIN_LINEAR_DELTA;
-                point.x = Math.min(Math.max(point.x + step, minX), maxX);
-                handled = true;
-                break;
-            }
-            case 'ArrowUp': {
-                point.y = Math.min(Math.max(point.y + step, 0), 1);
-                handled = true;
-                break;
-            }
-            case 'ArrowDown': {
-                point.y = Math.min(Math.max(point.y - step, 0), 1);
-                handled = true;
-                break;
-            }
-            case 'Delete':
-            case 'Backspace': {
-                if (clonedPoints.length <= MIN_LINEAR_POINTS || index <= 0 || index >= lastIndex) {
-                    break;
-                }
-                clonedPoints.splice(index, 1);
-                const normalized = normalizeLinearPoints(clonedPoints);
-                this.points = normalized;
-                this.emitPointsChange(normalized, event);
-                const nextFocus = index - 1;
-                this.focusedLinearIndex = nextFocus;
-                handled = true;
-                break;
-            }
-            default:
-                break;
-        }
-        if (handled && event.key !== 'Delete' && event.key !== 'Backspace') {
-            const normalized = normalizeLinearPoints(clonedPoints);
-            this.points = normalized;
-            this.emitPointsChange(normalized, event);
-            this.focusedLinearIndex = index;
-        }
-        if (handled) {
-            event.preventDefault();
-        }
-    }
-    @Listen('linear-point-focus', { target: 'light' })
-    handleLinearPointFocus(event) {
-        const { value } = event.detail;
-        if (this.focusedLinearIndex === value) {
-            return;
-        }
-        this.focusedLinearIndex = value ?? null;
-    }
-    emitPointsChange(value, sourceEvent) {
-        const detail = {
-            value,
-            event: sourceEvent ?? new Event('points-change')
-        };
-        this.dispatchEvent(new CustomEvent('points-change', {
-            detail,
-            bubbles: true,
-            composed: true
-        }));
-    }
-}
-import "./canvas.js";
-import "./canvas-controls.js";
-import "./controls.js";
-import "./output.js";
-import "./toolbar.js";
-export { EasingType } from "./types.js";

package/build/components/curve/output.cjs

@@ -1,141 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurveOutput = void 0;
-const lit_html_1 = require("lit-html");
-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");
-require("../../components/code");
-@(0, Component_1.Component)({
-    tag: 'ease-curve-output',
-    styles: styles_1.outputStyles,
-    template() {
-        return (0, lit_html_1.html) `
-      <div class="output-container">
-        <div class="output-group">
-          <h4 class="output-label">CSS Easing Function</h4>
-          <ease-code language="css">${this.generatedCSS.code}</ease-code>
-          <button class="copy-button" @click=${this.handleCopyClick}>
-            ${this.copyStatus}
-          </button>
-        </div>
-      </div>
-    `;
-    }
-})
-class CurveOutput extends HTMLElement {
-    @(0, Prop_1.Prop)({ type: String, reflect: true })
-    accessor easingType;
-    @(0, Prop_1.Prop)({ type: Object, reflect: false })
-    accessor points;
-    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'ease-custom' })
-    accessor name;
-    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'animation' })
-    accessor variant;
-    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 0 })
-    accessor simplify;
-    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 5 })
-    accessor round;
-    #copyTimeout = null;
-    #animationTimeout = null;
-    #isAnimating = false;
-    get timingFunction() {
-        const { timingFunction } = this.generatedCSS;
-        return timingFunction;
-    }
-    get generatedCSS() {
-        if (this.easingType === types_1.EasingType.CUBIC_BEZIER) {
-            if (!this.points || Array.isArray(this.points)) {
-                const timingFunction = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
-                const code = `
-          .${this.name} {
-            ${this.variant}-timing-function: ${timingFunction};
-          }
-        `;
-                return { code, timingFunction };
-            }
-            return (0, utils_1.generateCubicBezierCSS)(this.points, this.name, this.variant);
-        }
-        if (this.easingType === types_1.EasingType.LINEAR) {
-            if (Array.isArray(this.points)) {
-                return (0, utils_1.generateLinearCSS)(this.points, this.name, this.variant, {
-                    simplify: this.simplify,
-                    round: this.round
-                });
-            }
-            const timingFunction = 'linear(0, 1)';
-            const code = `
-        .${this.name} {
-          ${this.variant}-timing-function: ${timingFunction};
-        }
-      `;
-            return { code, timingFunction };
-        }
-        const timingFunction = 'ease';
-        const code = `
-      .${this.name} {
-        ${this.variant}-timing-function: ${timingFunction};
-      }
-    `;
-        return { code, timingFunction };
-    }
-    get copyStatus() {
-        return this.#copyTimeout ? 'Copied!' : 'Copy CSS';
-    }
-    get isAnimating() {
-        return this.#isAnimating;
-    }
-    #copyToClipboard = async (event) => {
-        event.preventDefault();
-        try {
-            await navigator.clipboard.writeText(this.timingFunction);
-            if (this.#copyTimeout) {
-                clearTimeout(this.#copyTimeout);
-            }
-            this.#copyTimeout = window.setTimeout(() => {
-                this.#copyTimeout = null;
-                this.requestRender();
-            }, 2000);
-            this.requestRender();
-        }
-        catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-        }
-    };
-    #playPreview = (event) => {
-        event.preventDefault();
-        if (this.#isAnimating) {
-            this.#isAnimating = false;
-            this.requestRender();
-            void this.offsetHeight;
-        }
-        if (this.#animationTimeout) {
-            clearTimeout(this.#animationTimeout);
-        }
-        this.#isAnimating = true;
-        this.requestRender();
-        this.#animationTimeout = window.setTimeout(() => {
-            this.#isAnimating = false;
-            this.requestRender();
-        }, 2000);
-    };
-    handleCopyClick = (event) => {
-        void this.#copyToClipboard(event);
-    };
-    handlePreviewClick(event) {
-        this.#playPreview(event);
-    }
-    disconnectedCallback() {
-        if (this.#copyTimeout) {
-            clearTimeout(this.#copyTimeout);
-            this.#copyTimeout = null;
-        }
-        if (this.#animationTimeout) {
-            clearTimeout(this.#animationTimeout);
-            this.#animationTimeout = null;
-        }
-    }
-}
-exports.CurveOutput = CurveOutput;

package/build/components/curve/output.d.cts

@@ -1,19 +0,0 @@
-import { type CSSCode, type CubicBezierPoints, EasingType, type LinearPoints } from "./types.cjs";
-import '../../components/code';
-export declare class CurveOutput extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    accessor easingType: EasingType;
-    accessor points: CubicBezierPoints | LinearPoints;
-    accessor name: string;
-    accessor variant: 'animation' | 'transition';
-    accessor simplify: number;
-    accessor round: number;
-    get timingFunction(): string;
-    get generatedCSS(): CSSCode;
-    get copyStatus(): string;
-    get isAnimating(): boolean;
-    readonly handleCopyClick: (event: Event) => void;
-    handlePreviewClick(event: Event): void;
-    disconnectedCallback(): void;
-}

package/build/components/curve/output.d.ts

@@ -1,19 +0,0 @@
-import { type CSSCode, type CubicBezierPoints, EasingType, type LinearPoints } from "./types.js";
-import '../../components/code';
-export declare class CurveOutput extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    accessor easingType: EasingType;
-    accessor points: CubicBezierPoints | LinearPoints;
-    accessor name: string;
-    accessor variant: 'animation' | 'transition';
-    accessor simplify: number;
-    accessor round: number;
-    get timingFunction(): string;
-    get generatedCSS(): CSSCode;
-    get copyStatus(): string;
-    get isAnimating(): boolean;
-    readonly handleCopyClick: (event: Event) => void;
-    handlePreviewClick(event: Event): void;
-    disconnectedCallback(): void;
-}

package/build/components/curve/output.js

@@ -1,137 +0,0 @@
-import { html } from 'lit-html';
-import { outputStyles } from "./styles.js";
-import { EasingType } from "./types.js";
-import { generateCubicBezierCSS, generateLinearCSS } from "./utils.js";
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-import '../../components/code';
-@Component({
-    tag: 'ease-curve-output',
-    styles: outputStyles,
-    template() {
-        return html `
-      <div class="output-container">
-        <div class="output-group">
-          <h4 class="output-label">CSS Easing Function</h4>
-          <ease-code language="css">${this.generatedCSS.code}</ease-code>
-          <button class="copy-button" @click=${this.handleCopyClick}>
-            ${this.copyStatus}
-          </button>
-        </div>
-      </div>
-    `;
-    }
-})
-export class CurveOutput extends HTMLElement {
-    @Prop({ type: String, reflect: true })
-    accessor easingType;
-    @Prop({ type: Object, reflect: false })
-    accessor points;
-    @Prop({ reflect: true, defaultValue: 'ease-custom' })
-    accessor name;
-    @Prop({ reflect: true, defaultValue: 'animation' })
-    accessor variant;
-    @Prop({ type: Number, reflect: true, defaultValue: 0 })
-    accessor simplify;
-    @Prop({ type: Number, reflect: true, defaultValue: 5 })
-    accessor round;
-    #copyTimeout = null;
-    #animationTimeout = null;
-    #isAnimating = false;
-    get timingFunction() {
-        const { timingFunction } = this.generatedCSS;
-        return timingFunction;
-    }
-    get generatedCSS() {
-        if (this.easingType === EasingType.CUBIC_BEZIER) {
-            if (!this.points || Array.isArray(this.points)) {
-                const timingFunction = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
-                const code = `
-          .${this.name} {
-            ${this.variant}-timing-function: ${timingFunction};
-          }
-        `;
-                return { code, timingFunction };
-            }
-            return generateCubicBezierCSS(this.points, this.name, this.variant);
-        }
-        if (this.easingType === EasingType.LINEAR) {
-            if (Array.isArray(this.points)) {
-                return generateLinearCSS(this.points, this.name, this.variant, {
-                    simplify: this.simplify,
-                    round: this.round
-                });
-            }
-            const timingFunction = 'linear(0, 1)';
-            const code = `
-        .${this.name} {
-          ${this.variant}-timing-function: ${timingFunction};
-        }
-      `;
-            return { code, timingFunction };
-        }
-        const timingFunction = 'ease';
-        const code = `
-      .${this.name} {
-        ${this.variant}-timing-function: ${timingFunction};
-      }
-    `;
-        return { code, timingFunction };
-    }
-    get copyStatus() {
-        return this.#copyTimeout ? 'Copied!' : 'Copy CSS';
-    }
-    get isAnimating() {
-        return this.#isAnimating;
-    }
-    #copyToClipboard = async (event) => {
-        event.preventDefault();
-        try {
-            await navigator.clipboard.writeText(this.timingFunction);
-            if (this.#copyTimeout) {
-                clearTimeout(this.#copyTimeout);
-            }
-            this.#copyTimeout = window.setTimeout(() => {
-                this.#copyTimeout = null;
-                this.requestRender();
-            }, 2000);
-            this.requestRender();
-        }
-        catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-        }
-    };
-    #playPreview = (event) => {
-        event.preventDefault();
-        if (this.#isAnimating) {
-            this.#isAnimating = false;
-            this.requestRender();
-            void this.offsetHeight;
-        }
-        if (this.#animationTimeout) {
-            clearTimeout(this.#animationTimeout);
-        }
-        this.#isAnimating = true;
-        this.requestRender();
-        this.#animationTimeout = window.setTimeout(() => {
-            this.#isAnimating = false;
-            this.requestRender();
-        }, 2000);
-    };
-    handleCopyClick = (event) => {
-        void this.#copyToClipboard(event);
-    };
-    handlePreviewClick(event) {
-        this.#playPreview(event);
-    }
-    disconnectedCallback() {
-        if (this.#copyTimeout) {
-            clearTimeout(this.#copyTimeout);
-            this.#copyTimeout = null;
-        }
-        if (this.#animationTimeout) {
-            clearTimeout(this.#animationTimeout);
-            this.#animationTimeout = null;
-        }
-    }
-}