dialkit 1.0.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"}