@easemate/web-kit 0.1.0

package/build/components/curve/styles.js

@@ -0,0 +1,490 @@
+export const canvasStyles = `
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 500px;
+    position: relative;
+  }
+
+  svg {
+    width: 300px;
+    height: auto;
+    cursor: pointer;
+    touch-action: none;
+    user-select: none;
+    overflow: visible;
+    border-radius: 8px;
+  }
+
+  .grid-line {
+    stroke: var(--color-white-4);
+    stroke-width: .75;
+  }
+
+  .curve-path {
+    stroke: var(--color-blue-100);
+    stroke-width: 2.5;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: stroke-width 150ms ease;
+  }
+
+  .curve-path--preview {
+    stroke: var(--color-blue-800);
+    stroke-width: 2.5;
+    stroke-dasharray: 5, 5;
+    opacity: 0;
+    pointer-events: none;
+    animation: previewPathFade 180ms ease forwards;
+  }
+
+  .control-point {
+    fill: var(--color-blue-700);
+    stroke: var(--color-blue-900);
+    stroke-width: 1.5;
+    cursor: grab;
+  }
+
+  .control-point:active {
+    cursor: grabbing;
+  }
+
+  .control-point.selected {
+  }
+
+  .anchor-point-start {
+    fill: var(--color-blue-100);
+    pointer-events: none;
+    r: 5px;
+    transition: r .2s;
+  }
+
+  .anchor-point {
+    fill: var(--color-blue-900);
+    stroke: var(--color-blue-900);
+    stroke-width: 1;
+    pointer-events: none;
+    r: 5px;
+    transition: r .2s;
+  }
+
+  .anchor-point:hover {
+    r: 5.5px;
+  }
+
+  .control-line {
+    stroke: var(--color-blue-800);
+    stroke-width: 3;
+    pointer-events: none;
+    display: none;
+  }
+
+  .linear-point {
+    fill: var(--color-blue-100);
+    cursor: grab;
+    r: 3px;
+    transition: r .2s;
+  }
+
+  .hit-area-point:hover + .linear-point,
+  .linear-point:hover,
+  .linear-point:active,
+  .linear-point.selected {
+    r: 5px;
+  }
+
+  .linear-point.selected {
+    fill: var(--color-blue-300);
+    stroke-width: 1.5;
+  }
+
+  .linear-handle-line {
+    stroke: var(--color-blue-800);
+    stroke-width: 3;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+    display: none;
+  }
+
+  .linear-handle {
+    fill: var(--color-blue-700);
+    stroke: var(--color-blue-900);
+    stroke-width: 1;
+    cursor: grab;
+  }
+
+  .linear-handle.selected {
+  }
+
+  .linear-handle:active {
+    cursor: grabbing;
+  }
+
+  .hit-area-point,
+  .hit-area-handle {
+    fill: transparent;
+    stroke: transparent;
+    pointer-events: all;
+    cursor: inherit;
+    r: 10px;
+  }
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.6;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .curve-path.animating {
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  @keyframes previewPathFade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.6;
+    }
+  }
+
+  @keyframes previewElementFade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.85;
+    }
+  }
+
+  .linear-preview-group {
+    pointer-events: none;
+  }
+
+  .linear-point--preview,
+  .linear-handle--preview,
+  .linear-handle-line--preview {
+    animation: previewElementFade 180ms ease forwards;
+  }
+
+  .linear-point--preview {
+    fill: var(--color-blue-100);
+  }
+
+  .linear-handle--preview {
+    fill: var(--color-blue-700);
+    stroke: var(--color-blue-900);
+    stroke-width: 1.5;
+  }
+
+  .linear-handle-line--preview {
+    stroke: var(--color-blue-800);
+    stroke-width: 2.5;
+    stroke-dasharray: 4 4;
+    display: none;
+  }
+`;
+export const controlsStyles = `
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  [part="radio-group"] {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  [part="easing-type-dropdown"] {
+    --ease-dropdown-max-height: 212px;
+  }
+`;
+export const outputStyles = `
+  :host {
+    display: block;
+  }
+
+  .output-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .output-group {
+    position: relative;
+    display: block;
+  }
+
+  .output-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-gray-1000);
+    margin: 0;
+  }
+
+  .output-code {
+    font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    padding: 1rem;
+    background: var(--color-gray-1000);
+    color: var(--color-gray-700);
+    border-radius: 0.375rem;
+    border: 1px solid #334155;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: auto;
+    max-width: 100%;
+    tab-size: 2;
+  }
+
+  .copy-button {
+    align-self: flex-start;
+    padding: 0.425rem 0.875rem;
+    border: 1px solid var(--color-white-6);
+    border-radius: 0.375rem;
+    background: white;
+    color: var(--color-gray-1000);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 150ms ease;
+    user-select: none;
+  }
+
+  .copy-button:hover {
+    background: var(--color-gray-1000);
+    border-color: #9ca3af;
+    transform: translateY(-1px);
+  }
+
+  .copy-button:active {
+    transform: translateY(0);
+  }
+
+  .copy-button:focus-visible {
+    outline: 2px solid var(--color-blue-700);
+    outline-offset: 2px;
+  }
+
+  .copy-button.copied {
+    background: var(--color-blue-100);
+    border-color: var(--color-blue-100);
+    color: white;
+  }
+
+  .preview-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .preview-box {
+    width: 100%;
+    max-width: 300px;
+    height: 80px;
+    background: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-100) 100%);
+    border-radius: 0.5rem;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 150ms ease;
+  }
+
+  .preview-box:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .preview-animation {
+    width: 24px;
+    height: 24px;
+    background: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition-property: transform;
+    transition-duration: 2s;
+  }
+
+  .preview-animation.animate {
+    transform: translateY(-50%) translateX(calc(100% - 48px));
+  }
+`;
+export const containerStyles = `
+  :host {
+    display: block;
+  }
+
+  .curve-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .curve-header {
+  }
+
+  .curve-canvas-wrapper {
+    position: relative;
+    margin-top: 16px;
+  }
+
+  .curve-canvas {
+    background-color: var(--color-white-2);
+    box-shadow: 0 0 32px 0 var(--color-white-2) inset;
+    border-radius: 7px;
+  }
+
+  .curve-toolbar {
+    margin-top: 8px;
+  }
+`;
+export const canvasControlsStyles = `
+  :host {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    pointer-events: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .overlay-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    pointer-events: auto;
+  }
+
+  .overlay-button {
+    --ease-icon-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: var(--color-gray-600);
+    border-radius: var(--radii-md);
+    background-color: var(--color-gray-875);
+    box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
+    cursor: pointer;
+    transition: color 0.2s;
+    appearance: none;
+    border: none;
+    outline: none;
+    margin: 0;
+  }
+
+  .overlay-button:hover {
+    color: var(--color-gray-300);
+  }
+
+  .overlay-button:disabled {
+    color: var(--color-gray-700);
+    cursor: not-allowed;
+  }
+
+  .overlay-button.inactive {
+    color: var(--color-blue-100);
+  }
+`;
+export const toolbarStyles = `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .toolbar-container {
+    width: 100%;
+    display: grid;
+    gap: 8px;
+  }
+
+  .toolbar-group {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+    box-sizing: border-box;
+    align-items: center;
+    padding: 6px;
+    border-radius: var(--radii-md);
+    background-color: var(--color-gray-875);
+    box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
+  }
+
+  .toolbar-button {
+    --ease-icon-size: 16px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px;
+    color: var(--color-gray-600);
+    background-color: transparent;
+    border: none;
+    outline: none;
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+
+  .toolbar-button:hover {
+    color: var(--color-blue-100);
+  }
+
+  .toolbar-button:disabled {
+    color: var(--color-gray-700);
+    cursor: not-allowed;
+  }
+
+  .grid-size-controls {
+    display: grid;
+    grid-template-columns: 24px auto 24px;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+
+  .grid-size-controls ease-button {
+    --ease-icon-size: 14px;
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
+    display: flex;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .grid-size-value {
+    display: flex;
+    width: 20px;
+    justify-content: center;
+    align-items: center;
+    font-feature-settings: 'tnum' on;
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 14px;
+    text-align: center;
+  }
+`;

package/build/components/curve/svg-renderer.cjs

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clientToSvgCoords = exports.getSvgBounds = exports.fromSvgCoords = exports.toSvgCoords = exports.renderLinearPoint = exports.renderBezierControlPoint = exports.generateGridLines = void 0;
+const lit_html_1 = require("lit-html");
+const constants_1 = require("./constants.cjs");
+const generateGridLines = (gridStep) => {
+    const lines = [];
+    const xSteps = Math.ceil(constants_1.SVG_WIDTH / gridStep);
+    const ySteps = Math.ceil(constants_1.SVG_HEIGHT / gridStep);
+    for (let i = 0; i <= xSteps; i++) {
+        const x = i * gridStep;
+        if (x > constants_1.SVG_WIDTH) {
+            break;
+        }
+        lines.push((0, lit_html_1.svg) `
+      <line
+        class="grid-line"
+        x1=${x}
+        y1="0"
+        x2=${x}
+        y2=${constants_1.SVG_HEIGHT}
+      />
+    `);
+    }
+    for (let i = 0; i <= ySteps; i++) {
+        const y = i * gridStep;
+        if (y > constants_1.SVG_HEIGHT) {
+            break;
+        }
+        lines.push((0, lit_html_1.svg) `
+      <line
+        class="grid-line"
+        x1="0"
+        y1=${y}
+        x2=${constants_1.SVG_WIDTH}
+        y2=${y}
+      />
+    `);
+    }
+    return lines;
+};
+exports.generateGridLines = generateGridLines;
+const renderBezierControlPoint = (point, anchor, isSelected, onPointerDown) => {
+    const x = point.x * constants_1.SVG_WIDTH;
+    const y = (1 - point.y) * constants_1.SVG_HEIGHT;
+    const anchorX = anchor.x * constants_1.SVG_WIDTH;
+    const anchorY = (1 - anchor.y) * constants_1.SVG_HEIGHT;
+    return (0, lit_html_1.svg) `
+    <g>
+      <line
+        class="control-line"
+        x1=${anchorX}
+        y1=${anchorY}
+        x2=${x}
+        y2=${y}
+      />
+      <circle
+        class="control-point ${isSelected ? 'selected' : ''}"
+        cx=${x}
+        cy=${y}
+        r=${constants_1.POINT_RADIUS}
+        @pointerdown=${onPointerDown}
+      />
+      <circle
+        class="hit-area-point"
+        cx=${x}
+        cy=${y}
+        r=${constants_1.HIT_AREA_RADIUS}
+        @pointerdown=${onPointerDown}
+      />
+    </g>
+  `;
+};
+exports.renderBezierControlPoint = renderBezierControlPoint;
+const renderLinearPoint = (point, index, isSelected, isFocused, onPointerDown, onHandlePointerDown) => {
+    const x = point.x * constants_1.SVG_WIDTH;
+    const y = (1 - point.y) * constants_1.SVG_HEIGHT;
+    const handles = [];
+    if (point.cpInX !== undefined && point.cpInY !== undefined) {
+        const handleX = x + point.cpInX * constants_1.SVG_WIDTH;
+        const handleY = y - point.cpInY * constants_1.SVG_HEIGHT;
+        handles.push((0, lit_html_1.svg) `
+      <g>
+        <line
+          class="linear-handle-line"
+          x1=${x}
+          y1=${y}
+          x2=${handleX}
+          y2=${handleY}
+        />
+        <circle
+          class="linear-handle ${isSelected ? 'selected' : ''}"
+          cx=${handleX}
+          cy=${handleY}
+          r=${constants_1.HANDLE_RADIUS}
+          @pointerdown=${(e) => onHandlePointerDown?.(e, 'in')}
+        />
+        <circle
+          class="hit-area-handle"
+          cx=${handleX}
+          cy=${handleY}
+          r=${constants_1.HIT_AREA_RADIUS}
+          @pointerdown=${(e) => onHandlePointerDown?.(e, 'in')}
+        />
+      </g>
+    `);
+    }
+    if (point.cpOutX !== undefined && point.cpOutY !== undefined) {
+        const handleX = x + point.cpOutX * constants_1.SVG_WIDTH;
+        const handleY = y - point.cpOutY * constants_1.SVG_HEIGHT;
+        handles.push((0, lit_html_1.svg) `
+      <g>
+        <line
+          class="linear-handle-line"
+          x1=${x}
+          y1=${y}
+          x2=${handleX}
+          y2=${handleY}
+        />
+        <circle
+          class="linear-handle ${isSelected ? 'selected' : ''}"
+          cx=${handleX}
+          cy=${handleY}
+          r=${constants_1.HANDLE_RADIUS}
+          @pointerdown=${(e) => onHandlePointerDown?.(e, 'out')}
+        />
+        <circle
+          class="hit-area-handle"
+          cx=${handleX}
+          cy=${handleY}
+          r=${constants_1.HIT_AREA_RADIUS}
+          @pointerdown=${(e) => onHandlePointerDown?.(e, 'out')}
+        />
+      </g>
+    `);
+    }
+    return (0, lit_html_1.svg) `
+    <g>
+      ${handles}
+      <circle
+        class="linear-point ${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''}"
+        cx=${x}
+        cy=${y}
+        r=${constants_1.POINT_RADIUS}
+        tabindex=${isFocused ? '0' : '-1'}
+        role="slider"
+        aria-label="Linear point ${index + 1}"
+        aria-valuenow=${point.x}
+        aria-valuemin="0"
+        aria-valuemax="1"
+        @pointerdown=${onPointerDown}
+      />
+      <circle
+        class="hit-area-point"
+        cx=${x}
+        cy=${y}
+        r=${constants_1.HIT_AREA_RADIUS}
+        @pointerdown=${onPointerDown}
+      />
+    </g>
+  `;
+};
+exports.renderLinearPoint = renderLinearPoint;
+const toSvgCoords = (point) => {
+    return {
+        x: point.x * constants_1.SVG_WIDTH,
+        y: (1 - point.y) * constants_1.SVG_HEIGHT
+    };
+};
+exports.toSvgCoords = toSvgCoords;
+const fromSvgCoords = (x, y) => {
+    return {
+        x: x / constants_1.SVG_WIDTH,
+        y: 1 - y / constants_1.SVG_HEIGHT
+    };
+};
+exports.fromSvgCoords = fromSvgCoords;
+const getSvgBounds = (svg) => svg.getBoundingClientRect();
+exports.getSvgBounds = getSvgBounds;
+const clientToSvgCoords = (clientX, clientY, svgBounds) => {
+    const x = ((clientX - svgBounds.left) / svgBounds.width) * constants_1.SVG_WIDTH;
+    const y = ((clientY - svgBounds.top) / svgBounds.height) * constants_1.SVG_HEIGHT;
+    return { x, y };
+};
+exports.clientToSvgCoords = clientToSvgCoords;

package/build/components/curve/svg-renderer.d.cts

@@ -0,0 +1,9 @@
+import type { LinearPoint, Point } from "./types.cjs";
+import { type SVGTemplateResult } from 'lit-html';
+export declare const generateGridLines: (gridStep: number) => SVGTemplateResult[];
+export declare const renderBezierControlPoint: (point: Point, anchor: Point, isSelected: boolean, onPointerDown: (event: PointerEvent) => void) => SVGTemplateResult;
+export declare const renderLinearPoint: (point: LinearPoint, index: number, isSelected: boolean, isFocused: boolean, onPointerDown: (event: PointerEvent) => void, onHandlePointerDown?: (event: PointerEvent, handleType: "in" | "out") => void) => SVGTemplateResult;
+export declare const toSvgCoords: (point: Point) => Point;
+export declare const fromSvgCoords: (x: number, y: number) => Point;
+export declare const getSvgBounds: (svg: SVGSVGElement) => DOMRect;
+export declare const clientToSvgCoords: (clientX: number, clientY: number, svgBounds: DOMRect) => Point;

package/build/components/curve/svg-renderer.d.ts

@@ -0,0 +1,9 @@
+import type { LinearPoint, Point } from "./types.js";
+import { type SVGTemplateResult } from 'lit-html';
+export declare const generateGridLines: (gridStep: number) => SVGTemplateResult[];
+export declare const renderBezierControlPoint: (point: Point, anchor: Point, isSelected: boolean, onPointerDown: (event: PointerEvent) => void) => SVGTemplateResult;
+export declare const renderLinearPoint: (point: LinearPoint, index: number, isSelected: boolean, isFocused: boolean, onPointerDown: (event: PointerEvent) => void, onHandlePointerDown?: (event: PointerEvent, handleType: "in" | "out") => void) => SVGTemplateResult;
+export declare const toSvgCoords: (point: Point) => Point;
+export declare const fromSvgCoords: (x: number, y: number) => Point;
+export declare const getSvgBounds: (svg: SVGSVGElement) => DOMRect;
+export declare const clientToSvgCoords: (clientX: number, clientY: number, svgBounds: DOMRect) => Point;