dialkit 0.2.2 → 1.1.0

package/dist/svelte/components/SelectControl.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { Spring } from 'svelte/motion';
+  import Portal from '../Portal.svelte';
+  import { dropdownTransition } from './transitions';
+
+  type SelectOption = string | { value: string; label: string };
+
+  let { label, value, options, onChange } = $props<{
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+  }>();
+
+  let isOpen = $state(false);
+  let pos = $state<{ top: number; left: number; width: number; above: boolean } | null>(null);
+  let portalTarget = $state<HTMLElement | null>(null);
+  let triggerRef: HTMLButtonElement | undefined;
+  let dropdownRef: HTMLDivElement | undefined;
+
+  const chevronRotation = new Spring(0, { stiffness: 0.2, damping: 0.6 });
+
+  const toTitleCase = (s: string) => s.replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const normalized = $derived(
+    options.map((opt: SelectOption) =>
+      typeof opt === 'string' ? { value: opt, label: toTitleCase(opt) } : opt
+    )
+  );
+
+  const selectedOption = $derived(normalized.find((o: { value: string; label: string }) => o.value === value));
+
+  const updatePos = () => {
+    if (!triggerRef || typeof window === 'undefined') return;
+    const rect = triggerRef.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+
+    pos = {
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above,
+    };
+  };
+
+  const openDropdown = () => {
+    updatePos();
+    isOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isOpen = false;
+  };
+
+  const dropdownStyle = $derived.by(() => {
+    if (!pos || typeof window === 'undefined') return '';
+
+    if (pos.above) {
+      return `position:fixed;left:${pos.left}px;width:${pos.width}px;bottom:${window.innerHeight - pos.top}px;transform-origin:bottom;`;
+    }
+
+    return `position:fixed;left:${pos.left}px;width:${pos.width}px;top:${pos.top}px;transform-origin:top;`;
+  });
+
+  $effect(() => {
+    if (typeof document === 'undefined' || !triggerRef) return;
+
+    portalTarget = (triggerRef.closest('.dialkit-root') as HTMLElement | null) ?? document.body;
+  });
+
+  $effect(() => {
+    chevronRotation.set(isOpen ? 180 : 0);
+  });
+
+  $effect(() => {
+    if (!isOpen || typeof window === 'undefined') return;
+
+    const handleViewportChange = () => updatePos();
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerRef?.contains(target) || dropdownRef?.contains(target)) return;
+      closeDropdown();
+    };
+
+    updatePos();
+    document.addEventListener('mousedown', handleClick);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      window.removeEventListener('resize', handleViewportChange);
+      window.removeEventListener('scroll', handleViewportChange, true);
+    };
+  });
+</script>
+
+<div class="dialkit-select-row">
+  <button
+    bind:this={triggerRef}
+    class="dialkit-select-trigger"
+    onclick={() => (isOpen ? closeDropdown() : openDropdown())}
+    data-open={String(isOpen)}
+  >
+    <span class="dialkit-select-label">{label}</span>
+    <div class="dialkit-select-right">
+      <span class="dialkit-select-value">{selectedOption?.label ?? value}</span>
+      <svg
+        class="dialkit-select-chevron"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        style:transform={`rotate(${chevronRotation.current}deg)`}
+      >
+        <path d="M6 9.5L12 15.5L18 9.5" />
+      </svg>
+    </div>
+  </button>
+
+  {#if portalTarget}
+    <Portal target={portalTarget}>
+      {#if isOpen && pos}
+        <div
+          bind:this={dropdownRef}
+          class="dialkit-select-dropdown"
+          style={dropdownStyle}
+          transition:dropdownTransition={{ above: pos.above }}
+        >
+          {#each normalized as option (option.value)}
+            <button
+              class="dialkit-select-option"
+              data-selected={String(option.value === value)}
+              onclick={() => {
+                onChange(option.value);
+                closeDropdown();
+              }}
+            >
+              {option.label}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </Portal>
+  {/if}
+</div>

package/dist/svelte/components/SelectControl.svelte.d.ts

@@ -0,0 +1,14 @@
+type SelectOption = string | {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = {
+    label: string;
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+};
+declare const SelectControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectControl = ReturnType<typeof SelectControl>;
+export default SelectControl;
+//# sourceMappingURL=SelectControl.svelte.d.ts.map

package/dist/svelte/components/SelectControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AAQE,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/D,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA8HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/Slider.svelte

@@ -0,0 +1,345 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { Spring } from 'svelte/motion';
+
+  let {
+    label,
+    value,
+    onChange,
+    min = 0,
+    max = 1,
+    step = 0.01,
+  } = $props<{
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+  }>();
+
+  const CLICK_THRESHOLD = 3;
+  const DEAD_ZONE = 32;
+  const MAX_CURSOR_RANGE = 200;
+  const MAX_STRETCH = 8;
+  const HANDLE_BUFFER = 8;
+  const LABEL_CSS_LEFT = 10;
+  const VALUE_CSS_RIGHT = 10;
+
+  let wrapperRef: HTMLDivElement | undefined;
+  let labelRef: HTMLSpanElement | undefined;
+  let valueSpanRef: HTMLSpanElement | undefined;
+  let inputRef: HTMLInputElement | undefined;
+
+  let isInteracting = $state(false);
+  let isDragging = $state(false);
+  let isHovered = $state(false);
+  let isValueHovered = $state(false);
+  let isValueEditable = $state(false);
+  let showInput = $state(false);
+  let inputValue = $state('');
+
+  const fillPercent = new Spring(((value - min) / (max - min)) * 100, { stiffness: 0.25, damping: 0.7 });
+  const rubberStretchPx = new Spring(0, { stiffness: 0.2, damping: 0.65 });
+  const handleOpacityMv = new Spring(0, { stiffness: 0.3, damping: 0.75 });
+  const handleScaleXMv = new Spring(0.25, { stiffness: 0.2, damping: 0.6 });
+  const handleScaleYMv = new Spring(1, { stiffness: 0.2, damping: 0.6 });
+
+  let pointerDownPos: { x: number; y: number } | null = null;
+  let isClickFlag = true;
+  let wrapperRect: DOMRect | null = null;
+  let scaleVal = 1;
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const decimalsForStep = (s: number) => {
+    const text = s.toString();
+    const dot = text.indexOf('.');
+    return dot === -1 ? 0 : text.length - dot - 1;
+  };
+
+  const roundValue = (val: number, s: number) => {
+    const raw = Math.round(val / s) * s;
+    return Number.parseFloat(raw.toFixed(decimalsForStep(s)));
+  };
+
+  const snapToDecile = (rawValue: number, minValue: number, maxValue: number) => {
+    const normalized = (rawValue - minValue) / (maxValue - minValue);
+    const nearest = Math.round(normalized * 10) / 10;
+
+    if (Math.abs(normalized - nearest) <= 0.03125) {
+      return minValue + nearest * (maxValue - minValue);
+    }
+
+    return rawValue;
+  };
+
+  const percentFromValue = (nextValue: number) => ((nextValue - min) / (max - min)) * 100;
+
+  const positionToValue = (clientX: number) => {
+    if (!wrapperRect || !wrapperRef) return value;
+    const screenX = clientX - wrapperRect.left;
+    const sceneX = screenX / scaleVal;
+    const nativeWidth = wrapperRef.offsetWidth || wrapperRect.width;
+    const percent = Math.max(0, Math.min(1, sceneX / nativeWidth));
+    const rawValue = min + percent * (max - min);
+    return Math.max(min, Math.min(max, rawValue));
+  };
+
+  const computeRubberStretch = (clientX: number, sign: number) => {
+    if (!wrapperRect) return 0;
+    const distancePast = sign < 0 ? wrapperRect.left - clientX : clientX - wrapperRect.right;
+    const overflow = Math.max(0, distancePast - DEAD_ZONE);
+    return sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1));
+  };
+
+  $effect(() => {
+    value;
+    if (!isInteracting) {
+      fillPercent.set(((value - min) / (max - min)) * 100, { instant: true });
+    }
+  });
+
+  $effect(() => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+
+    if (isValueHovered && !showInput && !isValueEditable) {
+      hoverTimeout = setTimeout(() => {
+        isValueEditable = true;
+      }, 800);
+    } else if (!isValueHovered && !showInput) {
+      isValueEditable = false;
+    }
+
+    return () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = null;
+      }
+    };
+  });
+
+  $effect(() => {
+    if (showInput) {
+      tick().then(() => {
+        inputRef?.focus();
+        inputRef?.select();
+      });
+    }
+  });
+
+  const percentage = $derived(((value - min) / (max - min)) * 100);
+  const isActive = $derived(isInteracting || isHovered);
+
+  const leftThreshold = $derived.by(() => {
+    const trackWidth = wrapperRef?.offsetWidth;
+    if (trackWidth && labelRef) {
+      return ((LABEL_CSS_LEFT + labelRef.offsetWidth + HANDLE_BUFFER) / trackWidth) * 100;
+    }
+    return 30;
+  });
+
+  const rightThreshold = $derived.by(() => {
+    const trackWidth = wrapperRef?.offsetWidth;
+    if (trackWidth && valueSpanRef) {
+      return ((trackWidth - VALUE_CSS_RIGHT - valueSpanRef.offsetWidth - HANDLE_BUFFER) / trackWidth) * 100;
+    }
+    return 78;
+  });
+
+  const valueDodge = $derived(percentage < leftThreshold || percentage > rightThreshold);
+
+  const handleOpacity = $derived.by(() => {
+    if (!isActive) return 0;
+    if (valueDodge) return 0.1;
+    if (isDragging) return 0.9;
+    return 0.5;
+  });
+
+  $effect(() => {
+    handleOpacityMv.set(handleOpacity);
+    handleScaleXMv.set(isActive ? 1 : 0.25);
+    handleScaleYMv.set(isActive && valueDodge ? 0.75 : 1);
+  });
+
+  const fillBackground = $derived(
+    isActive ? 'rgba(255, 255, 255, 0.15)' : 'rgba(255, 255, 255, 0.11)'
+  );
+
+  const discreteSteps = $derived((max - min) / step);
+
+  const hashMarks = $derived.by(() => {
+    if (discreteSteps <= 10) {
+      return Array.from({ length: Math.max(discreteSteps - 1, 0) }, (_, i) => ({
+        key: `d-${i + 1}`,
+        left: (((i + 1) * step) / (max - min)) * 100,
+      }));
+    }
+
+    return Array.from({ length: 9 }, (_, i) => ({
+      key: `t-${i + 1}`,
+      left: (i + 1) * 10,
+    }));
+  });
+
+  const handlePointerDown = (e: PointerEvent) => {
+    if (showInput) return;
+    e.preventDefault();
+
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    pointerDownPos = { x: e.clientX, y: e.clientY };
+    isClickFlag = true;
+    isInteracting = true;
+
+    if (wrapperRef) {
+      wrapperRect = wrapperRef.getBoundingClientRect();
+      scaleVal = wrapperRect.width / wrapperRef.offsetWidth;
+    }
+  };
+
+  const handlePointerMove = (e: PointerEvent) => {
+    if (!isInteracting || !pointerDownPos) return;
+
+    const dx = e.clientX - pointerDownPos.x;
+    const dy = e.clientY - pointerDownPos.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    if (isClickFlag && distance > CLICK_THRESHOLD) {
+      isClickFlag = false;
+      isDragging = true;
+    }
+
+    if (!isClickFlag) {
+      if (wrapperRect) {
+        if (e.clientX < wrapperRect.left) {
+          rubberStretchPx.set(computeRubberStretch(e.clientX, -1), { instant: true });
+        } else if (e.clientX > wrapperRect.right) {
+          rubberStretchPx.set(computeRubberStretch(e.clientX, 1), { instant: true });
+        } else {
+          rubberStretchPx.set(0, { instant: true });
+        }
+      }
+
+      const newValue = positionToValue(e.clientX);
+      fillPercent.set(percentFromValue(newValue), { instant: true });
+      onChange(roundValue(newValue, step));
+    }
+  };
+
+  const handlePointerUp = (e: PointerEvent) => {
+    if (!isInteracting) return;
+
+    if (isClickFlag) {
+      const rawValue = positionToValue(e.clientX);
+      const steps = (max - min) / step;
+      const snappedValue = steps <= 10
+        ? Math.max(min, Math.min(max, min + Math.round((rawValue - min) / step) * step))
+        : snapToDecile(rawValue, min, max);
+
+      fillPercent.set(percentFromValue(snappedValue));
+      onChange(roundValue(snappedValue, step));
+    }
+
+    if (rubberStretchPx.current !== 0) {
+      rubberStretchPx.set(0);
+    }
+
+    isInteracting = false;
+    isDragging = false;
+    pointerDownPos = null;
+  };
+
+  const handlePointerCancel = () => {
+    if (!isInteracting) return;
+    isInteracting = false;
+    isDragging = false;
+    rubberStretchPx.set(0, { instant: true });
+    pointerDownPos = null;
+  };
+
+  const handleInputSubmit = () => {
+    const parsed = Number.parseFloat(inputValue);
+    if (!Number.isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onChange(roundValue(clamped, step));
+    }
+
+    showInput = false;
+    isValueHovered = false;
+    isValueEditable = false;
+  };
+
+  const handleValueClick = (e: MouseEvent) => {
+    if (!isValueEditable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    showInput = true;
+    inputValue = value.toFixed(decimalsForStep(step));
+  };
+
+  const displayValue = $derived(value.toFixed(decimalsForStep(step)));
+
+  const trackStyle = $derived(`width:calc(100% + ${Math.abs(rubberStretchPx.current)}px);transform:translateX(${rubberStretchPx.current < 0 ? rubberStretchPx.current : 0}px);`);
+  const fillStyle = $derived(`background:${fillBackground};width:${fillPercent.current}%;transition:background 0.15s;`);
+  const handleStyle = $derived(`left:max(5px, calc(${fillPercent.current}% - 9px));opacity:${handleOpacityMv.current};transform:translateY(-50%) scaleX(${handleScaleXMv.current}) scaleY(${handleScaleYMv.current});background:rgba(255, 255, 255, 0.9);`);
+</script>
+
+<div bind:this={wrapperRef} class="dialkit-slider-wrapper">
+  <div
+    class={`dialkit-slider ${isActive ? 'dialkit-slider-active' : ''}`}
+    style={trackStyle}
+    onpointerdown={handlePointerDown}
+    onpointermove={handlePointerMove}
+    onpointerup={handlePointerUp}
+    onpointercancel={handlePointerCancel}
+    onmouseenter={() => (isHovered = true)}
+    onmouseleave={() => (isHovered = false)}
+  >
+    <div class="dialkit-slider-hashmarks">
+      {#each hashMarks as mark (mark.key)}
+        <div class="dialkit-slider-hashmark" style:left={`${mark.left}%`} />
+      {/each}
+    </div>
+
+    <div class="dialkit-slider-fill" style={fillStyle} />
+
+    <div class="dialkit-slider-handle" style={handleStyle} />
+
+    <span bind:this={labelRef} class="dialkit-slider-label">{label}</span>
+
+    {#if showInput}
+      <input
+        bind:this={inputRef}
+        type="text"
+        class="dialkit-slider-input"
+        value={inputValue}
+        oninput={(e) => (inputValue = (e.currentTarget as HTMLInputElement).value)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter') handleInputSubmit();
+          else if (e.key === 'Escape') {
+            showInput = false;
+            isValueHovered = false;
+          }
+        }}
+        onblur={handleInputSubmit}
+        onclick={(e) => e.stopPropagation()}
+        onmousedown={(e) => e.stopPropagation()}
+      />
+    {:else}
+      <span
+        bind:this={valueSpanRef}
+        class={`dialkit-slider-value ${isValueEditable ? 'dialkit-slider-value-editable' : ''}`}
+        onmouseenter={() => (isValueHovered = true)}
+        onmouseleave={() => (isValueHovered = false)}
+        onclick={handleValueClick}
+        onmousedown={(e) => isValueEditable && e.stopPropagation()}
+        style:cursor={isValueEditable ? 'text' : 'default'}
+      >
+        {displayValue}
+      </span>
+    {/if}
+  </div>
+</div>

package/dist/svelte/components/Slider.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;
+//# sourceMappingURL=Slider.svelte.d.ts.map

package/dist/svelte/components/Slider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Slider.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA0TJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/SpringControl.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { SpringConfig } from 'dialkit/store';
+  import Folder from './Folder.svelte';
+  import Slider from './Slider.svelte';
+  import SegmentedControl from './SegmentedControl.svelte';
+  import SpringVisualization from './SpringVisualization.svelte';
+
+  let { panelId, path, label, spring, onChange } = $props<{
+    panelId: string;
+    path: string;
+    label: string;
+    spring: SpringConfig;
+    onChange: (spring: SpringConfig) => void;
+  }>();
+
+  let mode = $state<'simple' | 'advanced'>(DialStore.getSpringMode(panelId, path));
+
+  $effect(() => {
+    const unsub = DialStore.subscribe(panelId, () => {
+      mode = DialStore.getSpringMode(panelId, path);
+    });
+    return unsub;
+  });
+
+  const isSimpleMode = $derived(mode === 'simple');
+
+  const handleModeChange = (newMode: string) => {
+    const typedMode = newMode as 'simple' | 'advanced';
+    DialStore.updateSpringMode(panelId, path, typedMode);
+
+    if (typedMode === 'simple') {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({
+        ...rest,
+        type: 'spring',
+        visualDuration: spring.visualDuration ?? 0.3,
+        bounce: spring.bounce ?? 0.2,
+      });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({
+        ...rest,
+        type: 'spring',
+        stiffness: spring.stiffness ?? 200,
+        damping: spring.damping ?? 25,
+        mass: spring.mass ?? 1,
+      });
+    }
+  };
+
+  const handleUpdate = (key: keyof SpringConfig, value: number) => {
+    if (isSimpleMode) {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    }
+  };
+</script>
+
+<Folder title={label} defaultOpen={true}>
+  <div style="display: flex; flex-direction: column; gap: 6px;">
+    <SpringVisualization {spring} isSimpleMode={isSimpleMode} />
+
+    <div class="dialkit-labeled-control">
+      <span class="dialkit-labeled-control-label">Type</span>
+      <SegmentedControl
+        options={[
+          { value: 'simple', label: 'Time' },
+          { value: 'advanced', label: 'Physics' },
+        ]}
+        value={mode}
+        onChange={handleModeChange}
+      />
+    </div>
+
+    {#if isSimpleMode}
+      <Slider
+        label="Duration"
+        value={spring.visualDuration ?? 0.3}
+        onChange={(v) => handleUpdate('visualDuration', v)}
+        min={0.1}
+        max={1}
+        step={0.05}
+        unit="s"
+      />
+      <Slider
+        label="Bounce"
+        value={spring.bounce ?? 0.2}
+        onChange={(v) => handleUpdate('bounce', v)}
+        min={0}
+        max={1}
+        step={0.05}
+      />
+    {:else}
+      <Slider
+        label="Stiffness"
+        value={spring.stiffness ?? 400}
+        onChange={(v) => handleUpdate('stiffness', v)}
+        min={1}
+        max={1000}
+        step={10}
+      />
+      <Slider
+        label="Damping"
+        value={spring.damping ?? 17}
+        onChange={(v) => handleUpdate('damping', v)}
+        min={1}
+        max={100}
+        step={1}
+      />
+      <Slider
+        label="Mass"
+        value={spring.mass ?? 1}
+        onChange={(v) => handleUpdate('mass', v)}
+        min={0.1}
+        max={10}
+        step={0.1}
+      />
+    {/if}
+  </div>
+</Folder>

package/dist/svelte/components/SpringControl.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SpringConfig } from 'dialkit/store';
+type $$ComponentProps = {
+    panelId: string;
+    path: string;
+    label: string;
+    spring: SpringConfig;
+    onChange: (spring: SpringConfig) => void;
+};
+declare const SpringControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SpringControl = ReturnType<typeof SpringControl>;
+export default SpringControl;
+//# sourceMappingURL=SpringControl.svelte.d.ts.map

package/dist/svelte/components/SpringControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpringControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SpringControl.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAMjD,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC1C,CAAC;AAkFJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}