@intechstudio/grid-uikit 1.20260922.1001 → 1.20260922.1146

package/dist/ContextMenu.svelte

@@ -93,7 +93,7 @@
     flex-direction: column;
     align-items: flex-start;
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     position: absolute;
     z-index: 40;
     color: var(--foreground-muted);

package/dist/IconButton.svelte

@@ -112,7 +112,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius);
+    border-radius: var(--radius-medium);
     cursor: pointer;
     pointer-events: auto;
     padding: 0.5rem;

package/dist/MeltCombo.svelte

@@ -375,7 +375,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     z-index: 40;
     max-height: 8em;
     display: flex;

package/dist/MeltSelect.svelte

@@ -133,7 +133,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     z-index: 40;
     overflow: hidden;
   }

package/dist/MeltSlider.svelte

@@ -10,6 +10,13 @@
   export let max: number;
   export let step: number;
   export let disabled = false;
+  // Optional custom track background (e.g. a color gradient). When set, the
+  // track shows this background and the selected-range fill is hidden so the
+  // full background stays visible.
+  export let trackBackground: string | undefined = undefined;
+  // Optional custom thumb background (e.g. the color at the thumb's value on a
+  // color slider). When unset the thumb uses the default theme color.
+  export let thumbBackground: string | undefined = undefined;
 
   const {
     elements: { root, range, thumbs },
@@ -55,8 +62,19 @@
 </script>
 
 <span {...$root} use:root class="container" class:disabled>
-  <span class="range-full" class:disabled>
-    <span {...$range} use:range class="range-selected" class:disabled />
+  <span
+    class="range-full"
+    class:disabled
+    class:has-background={trackBackground}
+    style:background={trackBackground}
+  >
+    <span
+      {...$range}
+      use:range
+      class="range-selected"
+      class:disabled
+      class:hidden={trackBackground}
+    />
   </span>
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <span
@@ -64,6 +82,8 @@
     use:thumbs
     class="thumb"
     class:disabled
+    class:has-color={thumbBackground}
+    style:background={disabled ? undefined : thumbBackground}
     on:blur={handleThumbBlur}
   />
 </span>
@@ -91,11 +111,17 @@
     height: 8px;
     border-radius: var(--radius);
   }
+  span.range-full.has-background {
+    background-color: transparent;
+  }
   span.range-selected {
     height: 8px;
     background-color: var(--foreground-disabled);
     border-radius: var(--radius);
   }
+  span.range-selected.hidden {
+    background-color: transparent;
+  }
   span.thumb {
     display: block;
     height: var(--thumb-size);
@@ -103,6 +129,10 @@
     background-color: var(--foreground-muted);
     border-radius: var(--radius);
   }
+  span.thumb.has-color {
+    width: var(--thumb-size);
+    border-radius: var(--radius-full);
+  }
   span.thumb:focus {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);

package/dist/MeltSlider.svelte.d.ts

@@ -17,6 +17,8 @@ declare const MeltSlider: $$__sveltets_2_IsomorphicComponent<{
     max: number;
     step: number;
     disabled?: boolean;
+    trackBackground?: string | undefined;
+    thumbBackground?: string | undefined;
 }, {
     change: CustomEvent<any>;
     blur: CustomEvent<any>;

package/dist/MoltenPushButtonGroup.svelte

@@ -206,7 +206,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     overflow: hidden;
   }
 

package/dist/MoltenTooltip.svelte

@@ -355,7 +355,7 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     overflow: hidden;
     z-index: 99;
     padding: 0.5rem;

package/dist/SliderColorPicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { Color } from "./color";
-  import ColorSlider from "./ColorSlider.svelte";
+  import MeltSlider from "./MeltSlider.svelte";
 
   function getRandom(a: number, b: number) {
     return 0;
@@ -42,37 +42,38 @@
     dispatch("change", { color: color });
   }
 
-  function getGradient(color: Color.HSL | undefined, channel: Channel) {
+  function getGradient(
+    color: Color.HSL | undefined,
+    channel: Channel,
+  ): string | undefined {
     if (typeof color === "undefined") {
-      return "background-color: white;";
+      return undefined;
     }
 
     const stops = {
-      h: [0, 60, 120, 180, 240, 360].map((h) =>
+      h: [0, 60, 120, 180, 240, 300, 360].map((h) =>
         new Color.HSL(h, color.s, color.l).toHEX(),
       ),
       s: [0, 100].map((s) => new Color.HSL(color.h, s, color.l).toHEX()),
       l: [0, 50, 100].map((l) => new Color.HSL(color.h, color.s, l).toHEX()),
     };
-    return `background: linear-gradient(to right, ${stops[channel].join(
-      ", ",
-    )});`;
+    return `linear-gradient(to right, ${stops[channel].join(", ")})`;
   }
 </script>
 
 <div class="slider-grid">
   {#each sliders as { label, key, max }}
     <span class="slider-label">{label}:</span>
-    <ColorSlider
-      value={color ? color[key] : undefined}
+    <MeltSlider
+      target={color ? color[key] : 0}
+      min={0}
       {max}
-      direction="horizontal"
-      round={true}
-      on:input={(e) => handleInput(key, e.detail.value)}
-      on:change={handleChange}
-    >
-      <div class="slider-gradient" style={getGradient(color, key)} />
-    </ColorSlider>
+      step={1}
+      trackBackground={getGradient(color, key)}
+      thumbBackground={color ? color.toHEX() : undefined}
+      on:change={(e) => handleInput(key, e.detail.value)}
+      on:commit={handleChange}
+    />
   {/each}
 </div>
 
@@ -86,12 +87,7 @@
   }
 
   .slider-label {
-    color: white;
+    color: var(--foreground);
     font-size: 0.875rem;
   }
-
-  .slider-gradient {
-    width: 100%;
-    height: 100%;
-  }
 </style>

package/dist/index.d.ts

@@ -19,7 +19,6 @@ export { default as MeltCombo, type MeltComboSuggestion, type MeltComboData, } f
 export { default as MarkdownContainer, type MarkdownContainerTypes, } from "./MarkdownContainer.svelte";
 export { default as Toggle } from "./Toggle.svelte";
 export { default as InfoBox } from "./InfoBox.svelte";
-export { default as ColorSlider } from "./ColorSlider.svelte";
 export { default as CircleColorPicker } from "./CircleColorPicker.svelte";
 export { default as SliderColorPicker } from "./SliderColorPicker.svelte";
 export { default as SquareColorPicker } from "./SquareColorPicker.svelte";

package/dist/index.js

@@ -19,7 +19,6 @@ export { default as MeltCombo, } from "./MeltCombo.svelte";
 export { default as MarkdownContainer, } from "./MarkdownContainer.svelte";
 export { default as Toggle } from "./Toggle.svelte";
 export { default as InfoBox } from "./InfoBox.svelte";
-export { default as ColorSlider } from "./ColorSlider.svelte";
 export { default as CircleColorPicker } from "./CircleColorPicker.svelte";
 export { default as SliderColorPicker } from "./SliderColorPicker.svelte";
 export { default as SquareColorPicker } from "./SquareColorPicker.svelte";

package/dist/theme.css

@@ -49,6 +49,9 @@
   --radius-small: min(var(--radius), 0.25em);
   --radius-medium: min(var(--radius), 0.5em);
   --radius-large: min(var(--radius), 1em);
+  /* Always fully rounded (pill/circle), independent of --radius — for elements
+     that are round by design, e.g. the color-preview slider knob. */
+  --radius-full: 9999px;
   --border-thickness: 1px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260922.1001",
+  "version": "1.20260922.1146",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"

package/src/lib/theme.css

@@ -49,6 +49,9 @@
   --radius-small: min(var(--radius), 0.25em);
   --radius-medium: min(var(--radius), 0.5em);
   --radius-large: min(var(--radius), 1em);
+  /* Always fully rounded (pill/circle), independent of --radius — for elements
+     that are round by design, e.g. the color-preview slider knob. */
+  --radius-full: 9999px;
   --border-thickness: 1px;
 }
 

package/dist/ColorSlider.svelte

@@ -1,174 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  export let max: number = 100;
-  export let direction: "horizontal" | "vertical";
-  export let round = false;
-  export let value: any;
-
-  let scaleElement: HTMLElement;
-  let cursorElement: HTMLElement;
-  let isDrag = false;
-
-  onMount(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      setCursorPosition(value);
-    });
-
-    setCursorPosition(value);
-    resizeObserver.observe(scaleElement);
-  });
-
-  $: setCursorPosition(value);
-
-  function handleCursorDrag(e: MouseEvent) {
-    const rect = scaleElement?.getBoundingClientRect();
-
-    if (!rect) {
-      return;
-    }
-
-    let normalized: number;
-    switch (direction) {
-      case "vertical": {
-        normalized =
-          1 - Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-        break;
-      }
-      case "horizontal": {
-        normalized = Math.max(
-          0,
-          Math.min(1, (e.clientX - rect.left) / rect.width),
-        );
-        break;
-      }
-    }
-
-    value =
-      Math.round(max * normalized * (round ? 1 : 100)) / (round ? 1 : 100);
-    setCursorPosition(value);
-    dispatch("input", { value: value });
-  }
-
-  function setCursorPosition(value: number | undefined) {
-    if (value == null || Number.isNaN(value)) {
-      return;
-    }
-
-    const scaleRect = scaleElement?.getBoundingClientRect();
-    const cursorRect = cursorElement?.getBoundingClientRect();
-
-    if (!scaleRect || !cursorRect) {
-      return;
-    }
-
-    const normValue = Math.max(0, Math.min(value / max, 1));
-
-    switch (direction) {
-      case "vertical": {
-        const position = (1 - normValue) * 100;
-        const maxPosition =
-          ((scaleRect.height - cursorRect.height) / scaleRect.height) * 100;
-        cursorElement.style.top = `${Math.min(position, maxPosition)}%`;
-        break;
-      }
-      case "horizontal": {
-        const position = normValue * 100;
-        const maxPosition =
-          ((scaleRect.width - cursorRect.width) / scaleRect.width) * 100;
-        cursorElement.style.left = `${Math.min(position, maxPosition)}%`;
-        break;
-      }
-    }
-  }
-</script>
-
-<svelte:window
-  on:mouseup={(e) => {
-    if (!isDrag) {
-      return;
-    }
-
-    isDrag = false;
-    document.removeEventListener("mousemove", handleCursorDrag);
-    dispatch("change", { value: value });
-  }}
-/>
-
-<div class="container {direction === 'vertical' ? 'vertical' : 'horizontal'}">
-  <canvas
-    bind:this={scaleElement}
-    class="scale-canvas"
-    on:mousedown={(e) => {
-      if (!(e.buttons & 1)) return;
-      isDrag = true;
-      document.addEventListener("mousemove", handleCursorDrag);
-      handleCursorDrag(e);
-    }}
-  />
-  <div class="overlay">
-    <slot />
-  </div>
-  <div
-    bind:this={cursorElement}
-    class="cursor {direction === 'vertical'
-      ? 'cursor-vertical'
-      : 'cursor-horizontal'}"
-    class:invisible={typeof value === "undefined" || isNaN(+value)}
-  />
-</div>
-
-<style>
-  .container {
-    position: relative;
-    display: flex;
-  }
-
-  .container.vertical {
-    height: 100%;
-    width: 1.25rem;
-  }
-
-  .container.horizontal {
-    width: 100%;
-    height: 1.25rem;
-  }
-
-  .scale-canvas {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border: 1px solid black;
-    pointer-events: none;
-    background-color: white;
-  }
-
-  .cursor {
-    position: absolute;
-    border: 1px solid black;
-    pointer-events: none;
-    background-color: rgba(255, 255, 255, 0.25);
-  }
-
-  .cursor-vertical {
-    height: 0.5rem;
-    width: 100%;
-  }
-
-  .cursor-horizontal {
-    width: 0.5rem;
-    height: 100%;
-  }
-
-  .invisible {
-    visibility: hidden;
-  }
-</style>

package/dist/ColorSlider.svelte.d.ts

@@ -1,35 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ColorSlider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    max?: number;
-    direction: "horizontal" | "vertical";
-    round?: boolean;
-    value: any;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-    input: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ColorSlider = InstanceType<typeof ColorSlider>;
-export default ColorSlider;