dialkit 1.1.0 → 1.2.0

package/dist/svelte/components/ShortcutListener.svelte

@@ -0,0 +1,265 @@
+<script lang="ts" module>
+  export const SHORTCUT_CTX = Symbol('dialkit-shortcut');
+
+  export interface ShortcutContextValue {
+    activePanelId: string | null;
+    activePath: string | null;
+  }
+</script>
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import { DialStore } from 'dialkit/store';
+  import type { Snippet } from 'svelte';
+  import {
+    getEffectiveStep,
+    applySliderDelta,
+    findControl,
+    DRAG_SENSITIVITY,
+    isInputFocused,
+    getActiveModifier,
+  } from '../../shortcut-utils';
+
+  let { children } = $props<{ children?: Snippet }>();
+
+  let activePanelId = $state<string | null>(null);
+  let activePath = $state<string | null>(null);
+
+  const ctx: ShortcutContextValue = {
+    get activePanelId() { return activePanelId; },
+    get activePath() { return activePath; },
+  };
+
+  setContext(SHORTCUT_CTX, ctx);
+
+  // --- mutable refs ---
+
+  let activeKeys = new Set<string>();
+  let isDragging = false;
+  let lastMouseX: number | null = null;
+  let dragAccumulator = 0;
+
+  function resolveActiveTarget(interaction: string) {
+    for (const key of activeKeys) {
+      const panels = DialStore.getPanels();
+      for (const panel of panels) {
+        for (const [path, shortcut] of Object.entries(panel.shortcuts)) {
+          if (!shortcut.key) continue;
+          if (shortcut.key.toLowerCase() !== key) continue;
+          if ((shortcut.interaction ?? 'scroll') !== interaction) continue;
+          const control = DialStore.getPanel(panel.id)?.controls
+            ? findControl(panel.controls, path)
+            : null;
+          if (control && control.type === 'slider') {
+            return { panelId: panel.id, path, control, shortcut };
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  // --- event handlers ---
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (isInputFocused()) return;
+
+    const key = e.key.toLowerCase();
+
+    // Arrow keys adjust the active shortcut's slider
+    if (key === 'arrowleft' || key === 'arrowright' || key === 'arrowup' || key === 'arrowdown') {
+      if (activeKeys.size > 0) {
+        const target = resolveActiveTarget('scroll') || resolveActiveTarget('drag') || resolveActiveTarget('move');
+        if (target && target.control.type === 'slider') {
+          e.preventDefault();
+          const direction = (key === 'arrowright' || key === 'arrowup') ? 1 : -1;
+          const effectiveStep = getEffectiveStep(target.control, target.shortcut);
+          applySliderDelta(target.panelId, target.path, target.control, effectiveStep, direction);
+          return;
+        }
+      }
+    }
+
+    const wasAlreadyHeld = activeKeys.has(key);
+    activeKeys.add(key);
+
+    const modifier = getActiveModifier(e);
+    const target = DialStore.resolveShortcutTarget(key, modifier);
+    if (target) {
+      activePanelId = target.panelId;
+      activePath = target.path;
+
+      // Toggle: flip on first keydown only (not on key repeat)
+      if (!wasAlreadyHeld && target.control.type === 'toggle') {
+        const currentValue = DialStore.getValue(target.panelId, target.path) as boolean;
+        DialStore.updateValue(target.panelId, target.path, !currentValue);
+      }
+    }
+
+    // Reset mouse tracking when a new key is pressed (for move/drag)
+    if (!wasAlreadyHeld) {
+      lastMouseX = null;
+      dragAccumulator = 0;
+    }
+  }
+
+  function handleKeyUp(e: KeyboardEvent) {
+    const key = e.key.toLowerCase();
+    activeKeys.delete(key);
+
+    // Reset drag state when key is released
+    isDragging = false;
+    lastMouseX = null;
+    dragAccumulator = 0;
+
+    if (activeKeys.size === 0) {
+      activePanelId = null;
+      activePath = null;
+    } else {
+      let found = false;
+      for (const remainingKey of activeKeys) {
+        const modifier = getActiveModifier(e);
+        const target = DialStore.resolveShortcutTarget(remainingKey, modifier);
+        if (target) {
+          activePanelId = target.panelId;
+          activePath = target.path;
+          found = true;
+          break;
+        }
+      }
+      if (!found) {
+        activePanelId = null;
+        activePath = null;
+      }
+    }
+  }
+
+  function handleWheel(e: WheelEvent) {
+    if (isInputFocused()) return;
+
+    const modifier = getActiveModifier(e);
+
+    // Key+scroll shortcuts
+    if (activeKeys.size > 0) {
+      for (const key of activeKeys) {
+        const target = DialStore.resolveShortcutTarget(key, modifier);
+        if (!target) continue;
+
+        const { panelId, path, control } = target;
+        const interaction = control.shortcut?.interaction ?? 'scroll';
+        if (interaction !== 'scroll' || control.type !== 'slider') continue;
+
+        e.preventDefault();
+        const effectiveStep = getEffectiveStep(control, control.shortcut!);
+        const direction = e.deltaY > 0 ? -1 : 1;
+        applySliderDelta(panelId, path, control, effectiveStep, direction);
+        return;
+      }
+    }
+
+    // Scroll-only shortcuts (no key needed)
+    const scrollOnlyTargets = DialStore.resolveScrollOnlyTargets();
+    for (const { panelId, path, control, shortcut } of scrollOnlyTargets) {
+      if (control.type !== 'slider') continue;
+
+      e.preventDefault();
+      const effectiveStep = getEffectiveStep(control, shortcut);
+      const direction = e.deltaY > 0 ? -1 : 1;
+      applySliderDelta(panelId, path, control, effectiveStep, direction);
+      return;
+    }
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (isInputFocused()) return;
+    if (activeKeys.size === 0) return;
+
+    const target = resolveActiveTarget('drag');
+    if (target) {
+      isDragging = true;
+      lastMouseX = e.clientX;
+      dragAccumulator = 0;
+      e.preventDefault();
+    }
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    lastMouseX = null;
+    dragAccumulator = 0;
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (isInputFocused()) return;
+    if (activeKeys.size === 0) return;
+
+    // Drag interaction (requires mousedown)
+    if (isDragging) {
+      const target = resolveActiveTarget('drag');
+      if (target && lastMouseX !== null) {
+        const deltaX = e.clientX - lastMouseX;
+        lastMouseX = e.clientX;
+        dragAccumulator += deltaX;
+
+        const effectiveStep = getEffectiveStep(target.control, target.shortcut);
+        const steps = Math.trunc(dragAccumulator / DRAG_SENSITIVITY);
+        if (steps !== 0) {
+          dragAccumulator -= steps * DRAG_SENSITIVITY;
+          applySliderDelta(target.panelId, target.path, target.control, effectiveStep, steps);
+        }
+      }
+      return;
+    }
+
+    // Move interaction (no click needed, just key held + mouse movement)
+    const moveTarget = resolveActiveTarget('move');
+    if (moveTarget) {
+      if (lastMouseX === null) {
+        lastMouseX = e.clientX;
+        return;
+      }
+
+      const deltaX = e.clientX - lastMouseX;
+      lastMouseX = e.clientX;
+      dragAccumulator += deltaX;
+
+      const effectiveStep = getEffectiveStep(moveTarget.control, moveTarget.shortcut);
+      const steps = Math.trunc(dragAccumulator / DRAG_SENSITIVITY);
+      if (steps !== 0) {
+        dragAccumulator -= steps * DRAG_SENSITIVITY;
+        applySliderDelta(moveTarget.panelId, moveTarget.path, moveTarget.control, effectiveStep, steps);
+      }
+    }
+  }
+
+  function handleWindowBlur() {
+    activeKeys.clear();
+    isDragging = false;
+    lastMouseX = null;
+    dragAccumulator = 0;
+    activePanelId = null;
+    activePath = null;
+  }
+
+  $effect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+    window.addEventListener('wheel', handleWheel, { passive: false });
+    window.addEventListener('mousedown', handleMouseDown);
+    window.addEventListener('mouseup', handleMouseUp);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('blur', handleWindowBlur);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+      window.removeEventListener('wheel', handleWheel);
+      window.removeEventListener('mousedown', handleMouseDown);
+      window.removeEventListener('mouseup', handleMouseUp);
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  });
+</script>
+
+{#if children}{@render children()}{/if}

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

@@ -0,0 +1,13 @@
+export declare const SHORTCUT_CTX: unique symbol;
+export interface ShortcutContextValue {
+    activePanelId: string | null;
+    activePath: string | null;
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+};
+declare const ShortcutListener: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShortcutListener = ReturnType<typeof ShortcutListener>;
+export default ShortcutListener;
+//# sourceMappingURL=ShortcutListener.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutListener.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ShortcutListener.svelte.ts"],"names":[],"mappings":"AAGE,eAAO,MAAM,YAAY,eAA6B,CAAC;AAEvD,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAKH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAUrC,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA+PhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/svelte/components/ShortcutsMenu.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { DialStore } from 'dialkit/store';
+  import type { ShortcutConfig } from 'dialkit/store';
+  import Portal from '../Portal.svelte';
+
+  let { panelId } = $props<{ panelId: string }>();
+
+  let isOpen = $state(false);
+  let triggerEl: HTMLButtonElement | undefined;
+  let dropdownEl: HTMLDivElement | undefined;
+  let pos = $state({ top: 0, right: 0 });
+
+  function formatShortcutKey(sc: ShortcutConfig): string {
+    if (!sc.key) return '\u2014';
+    const mod = sc.modifier === 'alt' ? '\u2325'
+      : sc.modifier === 'shift' ? '\u21E7'
+      : sc.modifier === 'meta' ? '\u2318'
+      : '';
+    return `${mod}${sc.key.toUpperCase()}`;
+  }
+
+  function formatInteraction(sc: ShortcutConfig): string {
+    const interaction = sc.interaction ?? 'scroll';
+    switch (interaction) {
+      case 'scroll': return sc.key ? 'key+scroll' : 'scroll';
+      case 'drag': return 'key+drag';
+      case 'move': return 'key+move';
+      case 'scroll-only': return 'scroll';
+    }
+  }
+
+  function open() {
+    const rect = triggerEl?.getBoundingClientRect();
+    if (rect) {
+      pos = { top: rect.bottom + 4, right: window.innerWidth - rect.right };
+    }
+    isOpen = true;
+  }
+
+  function close() {
+    isOpen = false;
+  }
+
+  function toggle() {
+    if (isOpen) close();
+    else open();
+  }
+
+  // Close on mousedown outside
+  $effect(() => {
+    if (!isOpen) return;
+
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (triggerEl?.contains(target) || dropdownEl?.contains(target)) return;
+      close();
+    };
+
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  });
+
+  const panel = $derived(DialStore.getPanel(panelId));
+
+  const rows = $derived.by(() => {
+    if (!panel) return [];
+    const shortcuts = Object.entries(panel.shortcuts);
+    if (shortcuts.length === 0) return [];
+
+    return shortcuts.map(([path, shortcut]) => {
+      const findLabel = (controls: typeof panel.controls): string => {
+        for (const c of controls) {
+          if (c.path === path) return c.label;
+          if (c.type === 'folder' && c.children) {
+            const found = findLabel(c.children);
+            if (found) return found;
+          }
+        }
+        return path;
+      };
+      return { path, shortcut, label: findLabel(panel.controls) };
+    });
+  });
+</script>
+
+{#if panel && rows.length > 0}
+  <button
+    bind:this={triggerEl}
+    class="dialkit-shortcuts-trigger"
+    onclick={toggle}
+    title="Keyboard shortcuts"
+  >
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="2" y="6" width="20" height="12" rx="2" />
+      <path d="M6 10H6.01" />
+      <path d="M10 10H10.01" />
+      <path d="M14 10H14.01" />
+      <path d="M18 10H18.01" />
+      <path d="M8 14H16" />
+    </svg>
+  </button>
+
+  <Portal target="body">
+    {#if isOpen}
+      <div
+        bind:this={dropdownEl}
+        class="dialkit-root dialkit-shortcuts-dropdown"
+        style:position="fixed"
+        style:top="{pos.top}px"
+        style:right="{pos.right}px"
+      >
+        <div class="dialkit-shortcuts-title">Keyboard Shortcuts</div>
+        <div class="dialkit-shortcuts-list">
+          {#each rows as row (row.path)}
+            <div class="dialkit-shortcuts-row">
+              <span class="dialkit-shortcuts-row-key">
+                {formatShortcutKey(row.shortcut)}
+              </span>
+              <span class="dialkit-shortcuts-row-label">{row.label}</span>
+              <span class="dialkit-shortcuts-row-mode">{formatInteraction(row.shortcut)}</span>
+            </div>
+          {/each}
+        </div>
+        <div class="dialkit-shortcuts-hint">See pill badges on controls for keys</div>
+      </div>
+    {/if}
+  </Portal>
+{/if}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    panelId: string;
+};
+declare const ShortcutsMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ShortcutsMenu = ReturnType<typeof ShortcutsMenu>;
+export default ShortcutsMenu;
+//# sourceMappingURL=ShortcutsMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsMenu.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ShortcutsMenu.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAyH7C,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

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import { Spring } from 'svelte/motion';
+  import type { ShortcutConfig } from 'dialkit/store';
+  import { decimalsForStep, roundValue, snapToDecile, formatSliderShortcut } from '../../shortcut-utils';
 
   let {
     label,
@@ -9,6 +11,8 @@
     min = 0,
     max = 1,
     step = 0.01,
+    shortcut,
+    shortcutActive = false,
   } = $props<{
     label: string;
     value: number;
@@ -17,6 +21,8 @@
     max?: number;
     step?: number;
     unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
   }>();
 
   const CLICK_THRESHOLD = 3;
@@ -52,28 +58,6 @@
   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) => {
@@ -165,10 +149,6 @@
     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(() => {
@@ -283,8 +263,8 @@
   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);`);
+  const fillStyle = $derived(`width:${fillPercent.current}%;`);
+  const handleStyle = $derived(`left:max(5px, calc(${fillPercent.current}% - 9px));opacity:${handleOpacityMv.current};transform:translateY(-50%) scaleX(${handleScaleXMv.current}) scaleY(${handleScaleYMv.current});`);
 </script>
 
 <div bind:this={wrapperRef} class="dialkit-slider-wrapper">
@@ -308,7 +288,14 @@
 
     <div class="dialkit-slider-handle" style={handleStyle} />
 
-    <span bind:this={labelRef} class="dialkit-slider-label">{label}</span>
+    <span bind:this={labelRef} class="dialkit-slider-label">
+      {label}
+      {#if shortcut}
+        <span class={`dialkit-shortcut-pill${shortcutActive ? ' dialkit-shortcut-pill-active' : ''}`}>
+          {formatSliderShortcut(shortcut)}
+        </span>
+      {/if}
+    </span>
 
     {#if showInput}
       <input

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

@@ -1,3 +1,4 @@
+import type { ShortcutConfig } from 'dialkit/store';
 type $$ComponentProps = {
     label: string;
     value: number;
@@ -6,6 +7,8 @@ type $$ComponentProps = {
     max?: number;
     step?: number;
     unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "">;
 type Slider = ReturnType<typeof Slider>;

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

@@ -1 +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"}
+{"version":3,"file":"Slider.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Slider.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGnD,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;IACd,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA2SJ,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

@@ -25,27 +25,29 @@
 
   const isSimpleMode = $derived(mode === 'simple');
 
+  const cache: {
+    simple: SpringConfig;
+    advanced: SpringConfig;
+  } = {
+    simple: spring.visualDuration !== undefined ? spring : { type: 'spring', visualDuration: 0.3, bounce: 0.2 },
+    advanced: spring.stiffness !== undefined ? spring : { type: 'spring', stiffness: 200, damping: 25, mass: 1 },
+  };
+
   const handleModeChange = (newMode: string) => {
     const typedMode = newMode as 'simple' | 'advanced';
+
+    if (isSimpleMode) {
+      cache.simple = spring;
+    } else {
+      cache.advanced = spring;
+    }
+
     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,
-      });
+      onChange(cache.simple);
     } else {
-      const { visualDuration, bounce, ...rest } = spring;
-      onChange({
-        ...rest,
-        type: 'spring',
-        stiffness: spring.stiffness ?? 200,
-        damping: spring.damping ?? 25,
-        mass: spring.mass ?? 1,
-      });
+      onChange(cache.advanced);
     }
   };
 

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

@@ -1 +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"}
+{"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;AAoFJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/Toggle.svelte

@@ -1,15 +1,26 @@
 <script lang="ts">
   import SegmentedControl from './SegmentedControl.svelte';
+  import type { ShortcutConfig } from 'dialkit/store';
+  import { formatToggleShortcut } from '../../shortcut-utils';
 
-  let { label, checked, onChange } = $props<{
+  let { label, checked, onChange, shortcut, shortcutActive = false } = $props<{
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
   }>();
 </script>
 
 <div class="dialkit-labeled-control">
-  <span class="dialkit-labeled-control-label">{label}</span>
+  <span class="dialkit-labeled-control-label">
+    {label}
+    {#if shortcut}
+      <span class={`dialkit-shortcut-pill${shortcutActive ? ' dialkit-shortcut-pill-active' : ''}`}>
+        {formatToggleShortcut(shortcut)}
+      </span>
+    {/if}
+  </span>
   <SegmentedControl
     options={[
       { value: 'off', label: 'Off' },

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

@@ -1,7 +1,10 @@
+import type { ShortcutConfig } from 'dialkit/store';
 type $$ComponentProps = {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toggle = ReturnType<typeof Toggle>;

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Toggle.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC,CAAC;AAiBJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/Toggle.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA0BJ,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}