dialkit 1.1.0 → 1.2.1

package/dist/svelte/components/ControlRenderer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { getContext } from 'svelte';
   import { DialStore } from 'dialkit/store';
   import type { ControlMeta, DialValue, SpringConfig, TransitionConfig } from 'dialkit/store';
   import Slider from './Slider.svelte';
@@ -10,6 +11,8 @@
   import SelectControl from './SelectControl.svelte';
   import ColorControl from './ColorControl.svelte';
   import ControlRenderer from './ControlRenderer.svelte';
+  import { SHORTCUT_CTX } from './ShortcutListener.svelte';
+  import type { ShortcutContextValue } from './ShortcutListener.svelte';
 
   let { panelId, control, values } = $props<{
     panelId: string;
@@ -17,7 +20,12 @@
     values: Record<string, DialValue>;
   }>();
 
+  const shortcutCtx = getContext<ShortcutContextValue | undefined>(SHORTCUT_CTX);
+
   const controlValue = $derived(values[control.path]);
+  const isShortcutActive = $derived(
+    shortcutCtx ? shortcutCtx.activePanelId === panelId && shortcutCtx.activePath === control.path : false
+  );
 </script>
 
 {#if control.type === 'slider'}
@@ -28,12 +36,16 @@
     min={control.min}
     max={control.max}
     step={control.step}
+    shortcut={control.shortcut}
+    shortcutActive={isShortcutActive}
   />
 {:else if control.type === 'toggle'}
   <Toggle
     label={control.label}
     checked={controlValue as boolean}
     onChange={(v) => DialStore.updateValue(panelId, control.path, v)}
+    shortcut={control.shortcut}
+    shortcutActive={isShortcutActive}
   />
 {:else if control.type === 'spring'}
   <SpringControl

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

@@ -1 +1 @@
-{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAEtD,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnC,CAAC;AA+CJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ControlRenderer.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ControlRenderer.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAkC,MAAM,eAAe,CAAC;AAS5F,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAItD,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnC,CAAC;AAuDJ,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/svelte/components/DialRoot.svelte

@@ -4,14 +4,26 @@
   import { themeCSS } from '../theme-css';
   import Portal from '../Portal.svelte';
   import Panel from './Panel.svelte';
+  import ShortcutListener from './ShortcutListener.svelte';
 
   export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
   export type DialMode = 'popover' | 'inline';
+  export type DialTheme = 'light' | 'dark' | 'system';
 
-  let { position = 'top-right', defaultOpen = true, mode = 'popover' } = $props<{
+  declare const process: { env?: { NODE_ENV?: string } } | undefined;
+
+  const isDevDefault = typeof process !== 'undefined' && process?.env?.NODE_ENV
+    ? process.env.NODE_ENV !== 'production'
+    : typeof import.meta !== 'undefined' && (import.meta as any).env?.MODE
+      ? (import.meta as any).env.MODE !== 'production'
+      : true;
+
+  let { position = 'top-right', defaultOpen = true, mode = 'popover', theme = 'system' as DialTheme, productionEnabled = isDevDefault } = $props<{
     position?: DialPosition;
     defaultOpen?: boolean;
     mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
   }>();
 
   const inline = $derived(mode === 'inline');
@@ -44,15 +56,17 @@
   });
 </script>
 
-{#if mounted && panels.length > 0}
+{#if productionEnabled && mounted && panels.length > 0}
   {#snippet content()}
-    <div class="dialkit-root" data-mode={mode}>
-      <div class="dialkit-panel" data-mode={mode} data-position={inline ? undefined : position}>
-        {#each panels as panel (panel.id)}
-          <Panel {panel} defaultOpen={inline || defaultOpen} {inline} />
-        {/each}
+    <ShortcutListener>
+      <div class="dialkit-root" data-mode={mode} data-theme={theme}>
+        <div class="dialkit-panel" data-mode={mode} data-position={inline ? undefined : position}>
+          {#each panels as panel (panel.id)}
+            <Panel {panel} defaultOpen={inline || defaultOpen} {inline} />
+          {/each}
+        </div>
       </div>
-    </div>
+    </ShortcutListener>
   {/snippet}
 
   {#if inline}

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

@@ -1,9 +1,12 @@
 export type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 export type DialMode = 'popover' | 'inline';
+export type DialTheme = 'light' | 'dark' | 'system';
 type $$ComponentProps = {
     position?: DialPosition;
     defaultOpen?: boolean;
     mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
 };
 declare const DialRoot: import("svelte").Component<$$ComponentProps, {}, "">;
 type DialRoot = ReturnType<typeof DialRoot>;

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

@@ -1 +1 @@
-{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAUE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7C,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAgEJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DialRoot.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/DialRoot.svelte.ts"],"names":[],"mappings":"AAWE,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AACrF,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC5C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACrD,KAAK,gBAAgB,GAAG;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AA4EJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/svelte/components/Folder.svelte

@@ -3,6 +3,7 @@
   import { slide } from 'svelte/transition';
 
   import type { Snippet } from 'svelte';
+  import { ICON_PANEL, ICON_CHEVRON } from '../../icons';
 
   let {
     title,
@@ -28,6 +29,14 @@
 
   let contentRef: HTMLDivElement | undefined;
   let panelRef: HTMLDivElement | undefined;
+  let windowHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 800);
+
+  $effect(() => {
+    if (!isRoot) return;
+    const onResize = () => { windowHeight = window.innerHeight; };
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  });
 
   const chevronRotation = new Spring(defaultOpen ? 0 : 180, { stiffness: 0.2, damping: 0.6 });
   const panelWidth = new Spring(defaultOpen ? 280 : 42, { stiffness: 0.2, damping: 0.62 });
@@ -65,7 +74,7 @@
     if (!isRoot) return;
 
     const measured = contentHeight ?? panelRef?.getBoundingClientRect().height ?? 42;
-    const nextHeight = isOpen ? measured + 24 : 42;
+    const nextHeight = isOpen ? Math.min(measured + 10, windowHeight - 32) : 42;
 
     panelWidth.set(isOpen ? 280 : 42);
     panelHeight.set(nextHeight);
@@ -93,8 +102,8 @@
 
   const panelStyle = $derived(
     `width:${panelWidth.current}px;height:${panelHeight.current}px;border-radius:${panelRadius.current}px;` +
-      `box-shadow:${isOpen ? '0 8px 32px rgba(0, 0, 0, 0.5)' : '0 4px 16px rgba(0, 0, 0, 0.25)'};` +
-      `cursor:${isOpen ? '' : 'pointer'};overflow:${isOpen ? '' : 'hidden'};` +
+      `box-shadow:${isOpen ? 'var(--dial-shadow)' : 'var(--dial-shadow-collapsed)'};` +
+      `cursor:${isOpen ? '' : 'pointer'};overflow:${isOpen ? 'hidden auto' : 'hidden'};` +
       `transform:scale(${panelScale.current});`
   );
 </script>
@@ -145,12 +154,12 @@
           <svg class="dialkit-panel-icon" viewBox="0 0 16 16" fill="none">
             <path
               opacity="0.5"
-              d="M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z"
+              d={ICON_PANEL.path}
               fill="currentColor"
             />
-            <circle cx="6" cy="8" r="0.998596" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
-            <circle cx="10.4999" cy="3.5" r="0.998657" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
-            <circle cx="9.75015" cy="12.5" r="0.997986" fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx={ICON_PANEL.circles[0].cx} cy={ICON_PANEL.circles[0].cy} r={ICON_PANEL.circles[0].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx={ICON_PANEL.circles[1].cx} cy={ICON_PANEL.circles[1].cy} r={ICON_PANEL.circles[1].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
+            <circle cx={ICON_PANEL.circles[2].cx} cy={ICON_PANEL.circles[2].cy} r={ICON_PANEL.circles[2].r} fill="currentColor" stroke="currentColor" stroke-width="1.25" />
           </svg>
         </div>
 
@@ -188,7 +197,7 @@
           stroke-linejoin="round"
           style:transform={`rotate(${chevronRotation.current}deg)`}
         >
-          <path d="M6 9.5L12 15.5L18 9.5" />
+          <path d={ICON_CHEVRON} />
         </svg>
       </div>
     </div>

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

@@ -1 +1 @@
-{"version":3,"file":"Folder.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Folder.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAErC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAiLJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Folder.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Folder.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA0LJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/svelte/components/Panel.svelte

@@ -5,9 +5,13 @@
   import Folder from './Folder.svelte';
   import PresetManager from './PresetManager.svelte';
   import ControlRenderer from './ControlRenderer.svelte';
+  import ShortcutsMenu from './ShortcutsMenu.svelte';
+  import { ICON_CLIPBOARD, ICON_CHECK, ICON_ADD_PRESET } from '../../icons';
 
   let { panel, defaultOpen = true, inline = false } = $props<{ panel: PanelConfig; defaultOpen?: boolean; inline?: boolean }>();
 
+  const hasShortcuts = $derived(Object.keys(panel.shortcuts).length > 0);
+
   let copied = $state(false);
   let isPanelOpen = $state(defaultOpen);
   let values = $state<Record<string, DialValue>>(DialStore.getValues(panel.id));
@@ -84,11 +88,11 @@
         style:transform={`scale(${addScale.current})`}
       >
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M4 6H20" />
-          <path d="M4 12H10" />
-          <path d="M15 15L21 15" />
-          <path d="M18 12V18" />
-          <path d="M4 18H10" />
+          <path d={ICON_ADD_PRESET[0]} />
+          <path d={ICON_ADD_PRESET[1]} />
+          <path d={ICON_ADD_PRESET[2]} />
+          <path d={ICON_ADD_PRESET[3]} />
+          <path d={ICON_ADD_PRESET[4]} />
         </svg>
       </button>
 
@@ -113,9 +117,9 @@
             style:transform={`scale(${clipboardScale.current})`}
             style:filter={`blur(${(1 - clipboardOpacity.current) * 4}px)`}
           >
-            <path d="M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
-            <path d="M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z" fill="currentColor"/>
-            <path d="M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d={ICON_CLIPBOARD.board} stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+            <path d={ICON_CLIPBOARD.sparkle} fill="currentColor"/>
+            <path d={ICON_CLIPBOARD.body} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
 
           <svg
@@ -130,11 +134,12 @@
             style:transform={`scale(${checkScale.current})`}
             style:filter={`blur(${(1 - checkOpacity.current) * 4}px)`}
           >
-            <path d="M5 12.75L10 19L19 5" />
+            <path d={ICON_CHECK} />
           </svg>
         </span>
         Copy
       </button>
+
     {/snippet}
 
     {#each panel.controls as control (control.path)}

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAKnE,KAAK,gBAAgB,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAgHzF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Panel.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAa,WAAW,EAAU,MAAM,eAAe,CAAC;AAOnE,KAAK,gBAAgB,GAAG;IAAE,KAAK,EAAE,WAAW,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqHzF,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/svelte/components/PresetManager.svelte

@@ -4,6 +4,7 @@
   import { DialStore } from 'dialkit/store';
   import type { Preset } from 'dialkit/store';
   import { dropdownTransition } from './transitions';
+  import { ICON_CHEVRON, ICON_TRASH } from '../../icons';
 
   let { panelId, presets, activePresetId } = $props<{
     panelId: string;
@@ -106,7 +107,7 @@
       style:transform={`rotate(${chevronRotation.current}deg)`}
       style:opacity={chevronOpacity.current}
     >
-      <path d="M6 9.5L12 15.5L18 9.5" />
+      <path d={ICON_CHEVRON} />
     </svg>
   </button>
 
@@ -140,11 +141,11 @@
                 title="Delete preset"
               >
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <path d="M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5" />
-                  <path d="M10 11V16" />
-                  <path d="M14 11V16" />
-                  <path d="M3.5 6H20.5" />
-                  <path d="M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621" />
+                  <path d={ICON_TRASH[0]} />
+                  <path d={ICON_TRASH[1]} />
+                  <path d={ICON_TRASH[2]} />
+                  <path d={ICON_TRASH[3]} />
+                  <path d={ICON_TRASH[4]} />
                 </svg>
               </button>
             </div>

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

@@ -1 +1 @@
-{"version":3,"file":"PresetManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PresetManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAG3C,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AA0HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PresetManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/PresetManager.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI3C,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AA2HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/SegmentedControl.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { Spring } from 'svelte/motion';
-
   export interface SegmentedControlOption<T extends string = string> {
     value: T;
     label: string;
@@ -12,90 +10,48 @@
     onChange: (value: string) => void;
   }>();
 
-  let containerRef: HTMLDivElement | undefined;
-  const buttonRefs = new Map<string, HTMLButtonElement>();
-  let pillReady = $state(false);
+  let containerRef = $state<HTMLDivElement | undefined>(undefined);
   let hasAnimated = false;
-
-  const pillLeft = new Spring(0, { stiffness: 0.2, damping: 0.6 });
-  const pillWidth = new Spring(0, { stiffness: 0.2, damping: 0.6 });
-
-  const buttonRef = (node: HTMLButtonElement, key: string) => {
-    buttonRefs.set(key, node);
-    return {
-      destroy() {
-        buttonRefs.delete(key);
-      },
-    };
-  };
-
-  const measurePill = () => {
-    const button = buttonRefs.get(value);
-    if (!button || !containerRef) return null;
-    const containerRect = containerRef.getBoundingClientRect();
-    const buttonRect = button.getBoundingClientRect();
-
-    return {
-      left: buttonRect.left - containerRect.left,
-      width: buttonRect.width,
-    };
-  };
-
-  const updatePill = (shouldAnimate: boolean) => {
-    const next = measurePill();
-    if (!next) return;
-
-    if (!pillReady) {
-      pillLeft.set(next.left, { instant: true });
-      pillWidth.set(next.width, { instant: true });
-      pillReady = true;
-      return;
-    }
-
-    if (!shouldAnimate || !hasAnimated) {
-      pillLeft.set(next.left, { instant: true });
-      pillWidth.set(next.width, { instant: true });
-      return;
-    }
-
-    pillLeft.set(next.left);
-    pillWidth.set(next.width);
-  };
+  let pillLeft = $state<number | null>(null);
+  let pillWidth = $state<number | null>(null);
+
+  function measure() {
+    if (!containerRef) return;
+    const activeButton = containerRef.querySelector('[data-active="true"]') as HTMLElement | null;
+    if (!activeButton) return;
+    pillLeft = activeButton.offsetLeft;
+    pillWidth = activeButton.offsetWidth;
+  }
 
   $effect(() => {
-    value;
-    if (!pillReady) return;
-    updatePill(true);
+    void value;
+    void options.length;
+    measure();
   });
 
-  $effect(() => {
-    if (!containerRef || typeof ResizeObserver === 'undefined') return;
-
-    requestAnimationFrame(() => {
-      updatePill(false);
+  let shouldAnimate = $derived.by(() => {
+    if (!hasAnimated) {
       hasAnimated = true;
-    });
-
-    const ro = new ResizeObserver(() => updatePill(false));
-    ro.observe(containerRef);
-
-    return () => {
-      ro.disconnect();
-    };
+      return false;
+    }
+    return true;
   });
 </script>
 
-<div bind:this={containerRef} class="dialkit-segmented">
-  <div
-    class="dialkit-segmented-pill"
-    style:left={`${pillLeft.current}px`}
-    style:width={`${pillWidth.current}px`}
-    style:visibility={pillReady ? 'visible' : 'hidden'}
-  />
+<div class="dialkit-segmented" bind:this={containerRef}>
+  {#if pillLeft !== null && pillWidth !== null}
+    <div
+      class="dialkit-segmented-pill"
+      style:left="{pillLeft}px"
+      style:width="{pillWidth}px"
+      style:transition={shouldAnimate
+        ? 'left 0.2s cubic-bezier(0.25, 1, 0.5, 1), width 0.2s cubic-bezier(0.25, 1, 0.5, 1)'
+        : 'none'}
+    ></div>
+  {/if}
 
   {#each options as option (option.value)}
     <button
-      use:buttonRef={option.value}
       onclick={() => onChange(option.value)}
       class="dialkit-segmented-button"
       data-active={String(value === option.value)}

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAME,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AACF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AA4FJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SegmentedControl.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AACF,KAAK,gBAAgB,GAAG;IACrB,OAAO,EAAE,sBAAsB,EAAE,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAkDJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/SelectControl.svelte

@@ -2,6 +2,7 @@
   import { Spring } from 'svelte/motion';
   import Portal from '../Portal.svelte';
   import { dropdownTransition } from './transitions';
+  import { ICON_CHEVRON } from '../../icons';
 
   type SelectOption = string | { value: string; label: string };
 
@@ -118,7 +119,7 @@
         stroke-linejoin="round"
         style:transform={`rotate(${chevronRotation.current}deg)`}
       >
-        <path d="M6 9.5L12 15.5L18 9.5" />
+        <path d={ICON_CHEVRON} />
       </svg>
     </div>
   </button>

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

@@ -1 +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"}
+{"version":3,"file":"SelectControl.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SelectControl.svelte.ts"],"names":[],"mappings":"AASE,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;AA+HJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}