@easemate/web-kit 0.1.0

package/build/components/curve/styles.cjs

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

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

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