@easemate/web-kit 0.2.0 → 0.3.1

package/build/components/curve/styles.cjs

@@ -1,493 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toolbarStyles = exports.canvasControlsStyles = exports.containerStyles = exports.outputStyles = exports.controlsStyles = exports.canvasStyles = void 0;
-exports.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;
-  }
-`;
-exports.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;
-  }
-`;
-exports.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));
-  }
-`;
-exports.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;
-  }
-`;
-exports.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);
-  }
-`;
-exports.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/styles.d.cts

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

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

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