feat: add validation to include_definition macro

packages/ui/src/lib/elements/Float.svelte

@@ -1,20 +1,172 @@
 <script lang="ts">
-  export let value: number = 0;
+  import { createEventDispatcher } from 'svelte';
+  import { getBoundingValue } from '../helpers/getBoundingValue';
+
+  export let value = 0.5;
+  export let step = 0.01;
   export let min = 0;
-  export let max = 10;
-  export let step = 0.1;
-  export let id: string;
+  export let max = 1;
+  export let id = "";
+
+  function strip(input: number) {
+    return +parseFloat(input + '').toPrecision(2);
+  }
+
+  const dispatch = createEventDispatcher();
+
+  let inputEl: HTMLInputElement;
+
+  $: if ((value || 0).toString().length > 5) {
+    value = strip(value || 0);
+  }
+  $: value !== undefined && handleChange();
+  let oldValue: number;
+  function handleChange() {
+    if (value === oldValue) return;
+    oldValue = value;
+    dispatch('change', parseFloat(value + ''));
+  }
+
+  $: width = Number.isFinite(value)
+    ? Math.max((value?.toString().length ?? 1) * 8, 50) + 'px'
+    : '20px';
+
+  let isMouseDown = false;
+  /* let downX = 0; */
+  /* let downY = 0; */
+  let downV = 0;
+  let vx = 0;
+  /* let vy = 0; */
+  let rect: DOMRect;
+
+  function handleMouseDown(ev: MouseEvent) {
+    ev.preventDefault();
+
+    isMouseDown = true;
+
+    downV = value;
+    /* downX = ev.clientX; */
+    /* downY = ev.clientY; */
+    rect = inputEl.getBoundingClientRect();
+
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    document.body.style.cursor = 'ew-resize';
+  }
+
+  function handleMouseUp() {
+    isMouseDown = false;
+
+    if (downV === value) {
+      inputEl.focus();
+    }
+
+    setTimeout(() => {
+      if (value >= 0) {
+        max = getBoundingValue(value);
+        min = 0;
+      } else {
+        min = getBoundingValue(value);
+        max = 0;
+      }
+    }, 500);
+
+    document.body.style.cursor = 'unset';
+    window.removeEventListener('mouseup', handleMouseUp);
+    window.removeEventListener('mousemove', handleMouseMove);
+  }
+
+  function handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === 'Escape' || ev.key === 'Enter') {
+      handleMouseUp();
+      inputEl.blur();
+    }
+  }
+
+  function handleMouseMove(ev: MouseEvent) {
+    vx = (ev.clientX - rect.left) / rect.width;
+    /* vy = ev.clientY - downY; */
+
+    if (ev.ctrlKey) {
+      let v = min + (max - min) * vx;
+      value = v;
+    } else {
+      value = Math.max(Math.min(min + (max - min) * vx, max), min);
+    }
+  }
 </script>
 
-<input {id} type="number" bind:value {min} {max} {step} />
+<div class="component-wrapper" class:is-down={isMouseDown}>
+  <span class="overlay" style={`width: ${((value - min) / (max - min)) * 100}%`} />
+  <input
+    bind:value
+    bind:this={inputEl}
+    {step}
+    {max}
+    {min}
+    on:keydown={handleKeyDown}
+    on:mousedown={handleMouseDown}
+    on:mouseup={handleMouseUp}
+    type="number"
+    style={`width:${width};`}
+  />
+</div>
 
 <style>
-  input {
-    background: var(--background-color-lighter);
-    color: var(--text-color);
+  .component-wrapper {
+    position: relative;
+    background-color: var(--background-color-lighter, #4b4b4b);
+    border-radius: 2px;
+    user-select: none;
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
+    outline: none !important;
+    overflow: hidden;
+    border-radius: var(--border-radius, 2px);
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+  }
+
+  input[type='number'] {
+    box-sizing: border-box;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
     font-family: var(--font-family);
-    padding: 0.8em 1em;
-    border-radius: 5px;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    color: var(--text-color);
+    background-color: transparent;
+    padding: var(--padding, 6px);
+    font-size: 1em;
+    padding-inline: 10px;
+    text-align: center;
     border: none;
+    border-style: none;
+    min-width: 100%;
+  }
+
+  .is-down > input {
+    cursor: ew-resize !important;
+  }
+
+  .overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    max-width: 100%;
+    background-color: var(--text-color);
+    opacity: 0.3;
+    pointer-events: none;
+    transition: width 0.3s ease;
+  }
+
+  .is-down > .overlay {
+    transition: none !important;
   }
 </style>

packages/ui/src/lib/elements/Slider.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  export let value: number = 0;
-  export let min = 0;
-  export let max = 10;
-  export let step = 0.1;
-  export let id: string;
-</script>
-
-<input type="range" {id} bind:value {min} {max} {step} />