dialkit 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   Folder: () => Folder,
   PresetManager: () => PresetManager,
   SelectControl: () => SelectControl,
+  ShortcutsMenu: () => ShortcutsMenu,
   Slider: () => Slider,
   SpringControl: () => SpringControl,
   SpringVisualization: () => SpringVisualization,
@@ -55,22 +56,22 @@ var DialStoreClass = class {
     this.activePreset = /* @__PURE__ */ new Map();
     this.baseValues = /* @__PURE__ */ new Map();
   }
-  registerPanel(id, name, config) {
-    const controls = this.parseConfig(config, "");
+  registerPanel(id, name, config, shortcuts) {
+    const controls = this.parseConfig(config, "", shortcuts);
     const values = this.flattenValues(config, "");
     this.initTransitionModes(config, "", values);
-    this.panels.set(id, { id, name, controls, values });
+    this.panels.set(id, { id, name, controls, values, shortcuts: shortcuts ?? {} });
     this.snapshots.set(id, { ...values });
     this.baseValues.set(id, { ...values });
     this.notifyGlobal();
   }
-  updatePanel(id, name, config) {
+  updatePanel(id, name, config, shortcuts) {
     const existing = this.panels.get(id);
     if (!existing) {
-      this.registerPanel(id, name, config);
+      this.registerPanel(id, name, config, shortcuts);
       return;
     }
-    const controls = this.parseConfig(config, "");
+    const controls = this.parseConfig(config, "", shortcuts);
     const controlsByPath = this.mapControlsByPath(controls);
     const defaultValues = this.flattenValues(config, "");
     const nextValues = {};
@@ -92,7 +93,7 @@ var DialStoreClass = class {
         nextValues[path] = mode;
       }
     }
-    const nextPanel = { id, name, controls, values: nextValues };
+    const nextPanel = { id, name, controls, values: nextValues, shortcuts: shortcuts ?? existing.shortcuts };
     this.panels.set(id, nextPanel);
     this.snapshots.set(id, { ...nextValues });
     const previousBaseValues = this.baseValues.get(id) ?? {};
@@ -250,6 +251,44 @@ var DialStoreClass = class {
     this.activePreset.set(panelId, null);
     this.notify(panelId);
   }
+  resolveShortcutTarget(key, modifier) {
+    for (const panel of this.panels.values()) {
+      for (const [path, shortcut] of Object.entries(panel.shortcuts)) {
+        if (!shortcut.key) continue;
+        if (shortcut.key.toLowerCase() !== key.toLowerCase()) continue;
+        const scMod = shortcut.modifier ?? void 0;
+        if (scMod !== modifier) continue;
+        const control = this.findControlByPath(panel.controls, path);
+        if (control) {
+          return { panelId: panel.id, path, control };
+        }
+      }
+    }
+    return null;
+  }
+  resolveScrollOnlyTargets() {
+    const results = [];
+    for (const panel of this.panels.values()) {
+      for (const [path, shortcut] of Object.entries(panel.shortcuts)) {
+        if ((shortcut.interaction ?? "scroll") !== "scroll-only") continue;
+        const control = this.findControlByPath(panel.controls, path);
+        if (control) {
+          results.push({ panelId: panel.id, path, control, shortcut });
+        }
+      }
+    }
+    return results;
+  }
+  findControlByPath(controls, path) {
+    for (const control of controls) {
+      if (control.path === path) return control;
+      if (control.type === "folder" && control.children) {
+        const found = this.findControlByPath(control.children, path);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
   notify(panelId) {
     this.listeners.get(panelId)?.forEach((fn) => fn());
   }
@@ -271,12 +310,13 @@ var DialStoreClass = class {
       }
     }
   }
-  parseConfig(config, prefix) {
+  parseConfig(config, prefix, shortcuts) {
     const controls = [];
     for (const [key, value] of Object.entries(config)) {
       if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
       const label = this.formatLabel(key);
+      const shortcut = shortcuts?.[path];
       if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         controls.push({
           type: "slider",
@@ -284,13 +324,14 @@ var DialStoreClass = class {
           label,
           min: value[1],
           max: value[2],
-          step: value[3] ?? this.inferStep(value[1], value[2])
+          step: value[3] ?? this.inferStep(value[1], value[2]),
+          shortcut
         });
       } else if (typeof value === "number") {
         const { min, max, step } = this.inferRange(value);
-        controls.push({ type: "slider", path, label, min, max, step });
+        controls.push({ type: "slider", path, label, min, max, step, shortcut });
       } else if (typeof value === "boolean") {
-        controls.push({ type: "toggle", path, label });
+        controls.push({ type: "toggle", path, label, shortcut });
       } else if (this.isSpringConfig(value) || this.isEasingConfig(value)) {
         controls.push({ type: "transition", path, label });
       } else if (this.isActionConfig(value)) {
@@ -315,7 +356,7 @@ var DialStoreClass = class {
           path,
           label,
           defaultOpen,
-          children: this.parseConfig(folderConfig, path)
+          children: this.parseConfig(folderConfig, path, shortcuts)
         });
       }
     }
@@ -473,8 +514,11 @@ function useDialKit(name, config, options) {
   configRef.current = config;
   const onActionRef = (0, import_react.useRef)(options?.onAction);
   onActionRef.current = options?.onAction;
+  const shortcutsRef = (0, import_react.useRef)(options?.shortcuts);
+  shortcutsRef.current = options?.shortcuts;
+  const serializedShortcuts = JSON.stringify(options?.shortcuts);
   (0, import_react.useEffect)(() => {
-    DialStore.registerPanel(panelId, name, configRef.current);
+    DialStore.registerPanel(panelId, name, configRef.current, shortcutsRef.current);
     return () => DialStore.unregisterPanel(panelId);
   }, [panelId, name]);
   const mountedRef = (0, import_react.useRef)(false);
@@ -483,8 +527,8 @@ function useDialKit(name, config, options) {
       mountedRef.current = true;
       return;
     }
-    DialStore.updatePanel(panelId, name, configRef.current);
-  }, [panelId, name, serializedConfig]);
+    DialStore.updatePanel(panelId, name, configRef.current, shortcutsRef.current);
+  }, [panelId, name, serializedConfig, serializedShortcuts]);
   (0, import_react.useEffect)(() => {
     return DialStore.subscribeActions(panelId, (action) => {
       onActionRef.current?.(action);
@@ -557,16 +601,329 @@ var import_react_dom3 = require("react-dom");
 var import_react15 = require("react");
 var import_react16 = require("motion/react");
 
-// src/components/Folder.tsx
+// src/components/ShortcutListener.tsx
 var import_react2 = require("react");
-var import_react3 = require("motion/react");
+
+// src/shortcut-utils.ts
+function decimalsForStep(step) {
+  const s = step.toString();
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
+function roundValue(val, step) {
+  const raw = Math.round(val / step) * step;
+  return parseFloat(raw.toFixed(decimalsForStep(step)));
+}
+function getEffectiveStep(control, shortcut) {
+  const min = control.min ?? 0;
+  const max = control.max ?? 1;
+  const range = max - min;
+  const mode = shortcut.mode ?? "normal";
+  return mode === "fine" ? range * 0.01 : mode === "coarse" ? range * 0.1 : control.step ?? 1;
+}
+function applySliderDelta(panelId, path, control, effectiveStep, direction) {
+  const currentValue = DialStore.getValue(panelId, path);
+  const min = control.min ?? 0;
+  const max = control.max ?? 1;
+  const newValue = Math.max(min, Math.min(max, currentValue + direction * effectiveStep));
+  DialStore.updateValue(panelId, path, roundValue(newValue, effectiveStep));
+}
+function snapToDecile(rawValue, min, max) {
+  const normalized = (rawValue - min) / (max - min);
+  const nearest = Math.round(normalized * 10) / 10;
+  if (Math.abs(normalized - nearest) <= 0.03125) {
+    return min + nearest * (max - min);
+  }
+  return rawValue;
+}
+function isInputFocused() {
+  const el = document.activeElement;
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA") return true;
+  if (el.contentEditable === "true") return true;
+  return false;
+}
+function getActiveModifier(e) {
+  if (e.altKey) return "alt";
+  if (e.shiftKey) return "shift";
+  if (e.metaKey) return "meta";
+  return void 0;
+}
+function findControl(controls, path) {
+  for (const control of controls) {
+    if (control.path === path) return control;
+    if (control.type === "folder" && control.children) {
+      const found = findControl(control.children, path);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+var DRAG_SENSITIVITY = 4;
+function formatInteractionLabel(interaction) {
+  switch (interaction) {
+    case "drag":
+      return "Drag";
+    case "move":
+      return "Move";
+    case "scroll-only":
+      return "Scroll";
+    default:
+      return "Scroll";
+  }
+}
+function formatSliderShortcut(sc) {
+  const interaction = sc.interaction ?? "scroll";
+  const actionLabel = formatInteractionLabel(interaction);
+  if (!sc.key) return actionLabel;
+  const mod = formatModifier(sc.modifier);
+  return `${mod}${sc.key.toUpperCase()}+${actionLabel}`;
+}
+function formatToggleShortcut(sc) {
+  if (!sc.key) return "Press";
+  const mod = formatModifier(sc.modifier);
+  return `${mod}${sc.key.toUpperCase()}`;
+}
+function formatModifier(modifier) {
+  return modifier === "alt" ? "\u2325" : modifier === "shift" ? "\u21E7" : modifier === "meta" ? "\u2318" : "";
+}
+
+// src/components/ShortcutListener.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultOpen);
-  const [isCollapsed, setIsCollapsed] = (0, import_react2.useState)(!defaultOpen);
-  const contentRef = (0, import_react2.useRef)(null);
-  const [contentHeight, setContentHeight] = (0, import_react2.useState)(void 0);
+var ShortcutContext = (0, import_react2.createContext)({ activePanelId: null, activePath: null });
+function ShortcutListener({ children }) {
+  const [activeShortcut, setActiveShortcut] = (0, import_react2.useState)({ activePanelId: null, activePath: null });
+  const activeKeysRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const isDraggingRef = (0, import_react2.useRef)(false);
+  const lastMouseXRef = (0, import_react2.useRef)(null);
+  const dragAccumulatorRef = (0, import_react2.useRef)(0);
+  const resolveActiveTarget = (0, import_react2.useCallback)((interaction) => {
+    for (const key of activeKeysRef.current) {
+      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 = findControl(panel.controls, path);
+          if (control && control.type === "slider") {
+            return { panelId: panel.id, path, control, shortcut };
+          }
+        }
+      }
+    }
+    return null;
+  }, []);
   (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (isInputFocused()) return;
+      const key = e.key.toLowerCase();
+      if (key === "arrowleft" || key === "arrowright" || key === "arrowup" || key === "arrowdown") {
+        if (activeKeysRef.current.size > 0) {
+          const target2 = resolveActiveTarget("scroll") || resolveActiveTarget("drag") || resolveActiveTarget("move");
+          if (target2 && target2.control.type === "slider") {
+            e.preventDefault();
+            const direction = key === "arrowright" || key === "arrowup" ? 1 : -1;
+            const effectiveStep = getEffectiveStep(target2.control, target2.shortcut);
+            applySliderDelta(target2.panelId, target2.path, target2.control, effectiveStep, direction);
+            return;
+          }
+        }
+      }
+      const wasAlreadyHeld = activeKeysRef.current.has(key);
+      activeKeysRef.current.add(key);
+      const modifier = getActiveModifier(e);
+      const target = DialStore.resolveShortcutTarget(key, modifier);
+      if (target) {
+        setActiveShortcut({ activePanelId: target.panelId, activePath: target.path });
+        if (!wasAlreadyHeld && target.control.type === "toggle") {
+          const currentValue = DialStore.getValue(target.panelId, target.path);
+          DialStore.updateValue(target.panelId, target.path, !currentValue);
+        }
+      }
+      if (!wasAlreadyHeld) {
+        lastMouseXRef.current = null;
+        dragAccumulatorRef.current = 0;
+      }
+    };
+    const handleKeyUp = (e) => {
+      const key = e.key.toLowerCase();
+      activeKeysRef.current.delete(key);
+      isDraggingRef.current = false;
+      lastMouseXRef.current = null;
+      dragAccumulatorRef.current = 0;
+      if (activeKeysRef.current.size === 0) {
+        setActiveShortcut({ activePanelId: null, activePath: null });
+      } else {
+        let found = false;
+        for (const remainingKey of activeKeysRef.current) {
+          const modifier = getActiveModifier(e);
+          const target = DialStore.resolveShortcutTarget(remainingKey, modifier);
+          if (target) {
+            setActiveShortcut({ activePanelId: target.panelId, activePath: target.path });
+            found = true;
+            break;
+          }
+        }
+        if (!found) {
+          setActiveShortcut({ activePanelId: null, activePath: null });
+        }
+      }
+    };
+    const handleWheel = (e) => {
+      if (isInputFocused()) return;
+      const modifier = getActiveModifier(e);
+      if (activeKeysRef.current.size > 0) {
+        for (const key of activeKeysRef.current) {
+          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;
+        }
+      }
+      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;
+      }
+    };
+    const handleMouseDown = (e) => {
+      if (isInputFocused()) return;
+      if (activeKeysRef.current.size === 0) return;
+      const target = resolveActiveTarget("drag");
+      if (target) {
+        isDraggingRef.current = true;
+        lastMouseXRef.current = e.clientX;
+        dragAccumulatorRef.current = 0;
+        e.preventDefault();
+      }
+    };
+    const handleMouseUp = () => {
+      isDraggingRef.current = false;
+      lastMouseXRef.current = null;
+      dragAccumulatorRef.current = 0;
+    };
+    const handleMouseMove = (e) => {
+      if (isInputFocused()) return;
+      if (activeKeysRef.current.size === 0) return;
+      if (isDraggingRef.current) {
+        const target = resolveActiveTarget("drag");
+        if (target && lastMouseXRef.current !== null) {
+          const deltaX = e.clientX - lastMouseXRef.current;
+          lastMouseXRef.current = e.clientX;
+          dragAccumulatorRef.current += deltaX;
+          const effectiveStep = getEffectiveStep(target.control, target.shortcut);
+          const steps = Math.trunc(dragAccumulatorRef.current / DRAG_SENSITIVITY);
+          if (steps !== 0) {
+            dragAccumulatorRef.current -= steps * DRAG_SENSITIVITY;
+            applySliderDelta(target.panelId, target.path, target.control, effectiveStep, steps);
+          }
+        }
+        return;
+      }
+      const moveTarget = resolveActiveTarget("move");
+      if (moveTarget) {
+        if (lastMouseXRef.current === null) {
+          lastMouseXRef.current = e.clientX;
+          return;
+        }
+        const deltaX = e.clientX - lastMouseXRef.current;
+        lastMouseXRef.current = e.clientX;
+        dragAccumulatorRef.current += deltaX;
+        const effectiveStep = getEffectiveStep(moveTarget.control, moveTarget.shortcut);
+        const steps = Math.trunc(dragAccumulatorRef.current / DRAG_SENSITIVITY);
+        if (steps !== 0) {
+          dragAccumulatorRef.current -= steps * DRAG_SENSITIVITY;
+          applySliderDelta(moveTarget.panelId, moveTarget.path, moveTarget.control, effectiveStep, steps);
+        }
+      }
+    };
+    const handleWindowBlur = () => {
+      activeKeysRef.current.clear();
+      isDraggingRef.current = false;
+      lastMouseXRef.current = null;
+      dragAccumulatorRef.current = 0;
+      setActiveShortcut({ activePanelId: null, activePath: null });
+    };
+    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);
+    };
+  }, [resolveActiveTarget]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShortcutContext.Provider, { value: activeShortcut, children });
+}
+
+// src/icons.ts
+var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
+var ICON_CHECK = "M5 12.75L10 19L19 5";
+var ICON_CLIPBOARD = {
+  board: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z",
+  sparkle: "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",
+  body: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12"
+};
+var ICON_ADD_PRESET = [
+  "M4 6H20",
+  "M4 12H10",
+  "M15 15L21 15",
+  "M18 12V18",
+  "M4 18H10"
+];
+var ICON_TRASH = [
+  "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",
+  "M10 11V16",
+  "M14 11V16",
+  "M3.5 6H20.5",
+  "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"
+];
+var ICON_PANEL = {
+  path: "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",
+  circles: [
+    { cx: "6", cy: "8", r: "0.998596" },
+    { cx: "10.4999", cy: "3.5", r: "0.998657" },
+    { cx: "9.75015", cy: "12.5", r: "0.997986" }
+  ]
+};
+
+// src/components/Folder.tsx
+var import_react3 = require("react");
+var import_react4 = require("motion/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar }) {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(defaultOpen);
+  const [isCollapsed, setIsCollapsed] = (0, import_react3.useState)(!defaultOpen);
+  const contentRef = (0, import_react3.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react3.useState)(void 0);
+  const [windowHeight, setWindowHeight] = (0, import_react3.useState)(typeof window !== "undefined" ? window.innerHeight : 800);
+  (0, import_react3.useEffect)(() => {
+    if (!isRoot) return;
+    const onResize = () => setWindowHeight(window.innerHeight);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [isRoot]);
+  (0, import_react3.useEffect)(() => {
     const el = contentRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => {
@@ -589,26 +946,24 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
     }
     onOpenChange?.(next);
   };
-  const folderContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header-top", children: [
-        isRoot ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
-        isRoot && !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const folderContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "dialkit-folder-header-top", children: [
+        isRoot ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
+        isRoot && !inline && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "svg",
           {
             className: "dialkit-panel-icon",
             viewBox: "0 0 16 16",
             fill: "none",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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", fill: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { opacity: "0.5", d: ICON_PANEL.path, fill: "currentColor" }),
+              ICON_PANEL.circles.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }, i))
             ]
           }
         ),
-        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react3.motion.svg,
+        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react4.motion.svg,
           {
             className: "dialkit-folder-icon",
             viewBox: "0 0 24 24",
@@ -620,14 +975,14 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
             initial: false,
             animate: { rotate: isOpen ? 0 : 180 },
             transition: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: ICON_CHEVRON })
           }
         )
       ] }),
-      isRoot && toolbar && isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
+      isRoot && toolbar && isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react3.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react4.motion.div,
       {
         className: "dialkit-folder-content",
         initial: isRoot ? void 0 : { height: 0, opacity: 0 },
@@ -635,17 +990,17 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
         exit: isRoot ? void 0 : { height: 0, opacity: 0 },
         transition: isRoot ? void 0 : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
         style: isRoot ? void 0 : { clipPath: "inset(0 -20px)" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-inner", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-folder-inner", children })
       }
     ) })
   ] });
   if (isRoot) {
     if (inline) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
     }
-    const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? contentHeight + 24 : "auto", borderRadius: 14, boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)", cursor: void 0 } : { width: 42, height: 42, borderRadius: 21, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.25)", overflow: "hidden", cursor: "pointer" };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react3.motion.div,
+    const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? Math.min(contentHeight + 10, windowHeight - 32) : "auto", borderRadius: 14, boxShadow: "var(--dial-shadow)", cursor: void 0, overflowY: "auto" } : { width: 42, height: 42, borderRadius: "50%", boxSizing: "border-box", boxShadow: "var(--dial-shadow-collapsed)", overflow: "hidden", cursor: "pointer" };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_react4.motion.div,
       {
         className: "dialkit-panel-inner",
         style: panelStyle,
@@ -661,30 +1016,13 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
 }
 
 // src/components/Slider.tsx
-var import_react4 = require("react");
-var import_react5 = require("motion/react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_react6 = require("motion/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var CLICK_THRESHOLD = 3;
 var DEAD_ZONE = 32;
 var MAX_CURSOR_RANGE = 200;
 var MAX_STRETCH = 8;
-function decimalsForStep(step) {
-  const s = step.toString();
-  const dot = s.indexOf(".");
-  return dot === -1 ? 0 : s.length - dot - 1;
-}
-function roundValue(val, step) {
-  const raw = Math.round(val / step) * step;
-  return parseFloat(raw.toFixed(decimalsForStep(step)));
-}
-function snapToDecile(rawValue, min, max) {
-  const normalized = (rawValue - min) / (max - min);
-  const nearest = Math.round(normalized * 10) / 10;
-  if (Math.abs(normalized - nearest) <= 0.03125) {
-    return min + nearest * (max - min);
-  }
-  return rawValue;
-}
 function Slider({
   label,
   value,
@@ -692,49 +1030,51 @@ function Slider({
   min = 0,
   max = 1,
   step = 0.01,
-  unit
+  unit,
+  shortcut,
+  shortcutActive
 }) {
-  const wrapperRef = (0, import_react4.useRef)(null);
-  const trackRef = (0, import_react4.useRef)(null);
-  const inputRef = (0, import_react4.useRef)(null);
-  const labelRef = (0, import_react4.useRef)(null);
-  const valueSpanRef = (0, import_react4.useRef)(null);
-  const [isInteracting, setIsInteracting] = (0, import_react4.useState)(false);
-  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
-  const [isValueHovered, setIsValueHovered] = (0, import_react4.useState)(false);
-  const [isValueEditable, setIsValueEditable] = (0, import_react4.useState)(false);
-  const [showInput, setShowInput] = (0, import_react4.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react4.useState)("");
-  const hoverTimeoutRef = (0, import_react4.useRef)(null);
-  const pointerDownPos = (0, import_react4.useRef)(null);
-  const isClickRef = (0, import_react4.useRef)(true);
-  const animRef = (0, import_react4.useRef)(null);
-  const wrapperRectRef = (0, import_react4.useRef)(null);
-  const scaleRef = (0, import_react4.useRef)(1);
+  const wrapperRef = (0, import_react5.useRef)(null);
+  const trackRef = (0, import_react5.useRef)(null);
+  const inputRef = (0, import_react5.useRef)(null);
+  const labelRef = (0, import_react5.useRef)(null);
+  const valueSpanRef = (0, import_react5.useRef)(null);
+  const [isInteracting, setIsInteracting] = (0, import_react5.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
+  const [isValueHovered, setIsValueHovered] = (0, import_react5.useState)(false);
+  const [isValueEditable, setIsValueEditable] = (0, import_react5.useState)(false);
+  const [showInput, setShowInput] = (0, import_react5.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react5.useState)("");
+  const hoverTimeoutRef = (0, import_react5.useRef)(null);
+  const pointerDownPos = (0, import_react5.useRef)(null);
+  const isClickRef = (0, import_react5.useRef)(true);
+  const animRef = (0, import_react5.useRef)(null);
+  const wrapperRectRef = (0, import_react5.useRef)(null);
+  const scaleRef = (0, import_react5.useRef)(1);
   const percentage = (value - min) / (max - min) * 100;
   const isActive = isInteracting || isHovered;
-  const fillPercent = (0, import_react5.useMotionValue)(percentage);
-  const fillWidth = (0, import_react5.useTransform)(fillPercent, (pct) => `${pct}%`);
-  const handleLeft = (0, import_react5.useTransform)(
+  const fillPercent = (0, import_react6.useMotionValue)(percentage);
+  const fillWidth = (0, import_react6.useTransform)(fillPercent, (pct) => `${pct}%`);
+  const handleLeft = (0, import_react6.useTransform)(
     fillPercent,
     (pct) => `max(5px, calc(${pct}% - 9px))`
   );
-  const rubberStretchPx = (0, import_react5.useMotionValue)(0);
-  const rubberBandWidth = (0, import_react5.useTransform)(
+  const rubberStretchPx = (0, import_react6.useMotionValue)(0);
+  const rubberBandWidth = (0, import_react6.useTransform)(
     rubberStretchPx,
     (stretch) => `calc(100% + ${Math.abs(stretch)}px)`
   );
-  const rubberBandX = (0, import_react5.useTransform)(
+  const rubberBandX = (0, import_react6.useTransform)(
     rubberStretchPx,
     (stretch) => stretch < 0 ? stretch : 0
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isInteracting && !animRef.current) {
       fillPercent.jump(percentage);
     }
   }, [percentage, isInteracting, fillPercent]);
-  const positionToValue = (0, import_react4.useCallback)(
+  const positionToValue = (0, import_react5.useCallback)(
     (clientX) => {
       const rect = wrapperRectRef.current;
       if (!rect) return value;
@@ -747,11 +1087,11 @@ function Slider({
     },
     [min, max, value]
   );
-  const percentFromValue = (0, import_react4.useCallback)(
+  const percentFromValue = (0, import_react5.useCallback)(
     (v) => (v - min) / (max - min) * 100,
     [min, max]
   );
-  const computeRubberStretch = (0, import_react4.useCallback)(
+  const computeRubberStretch = (0, import_react5.useCallback)(
     (clientX, sign) => {
       const rect = wrapperRectRef.current;
       if (!rect) return 0;
@@ -761,7 +1101,7 @@ function Slider({
     },
     []
   );
-  const handlePointerDown = (0, import_react4.useCallback)(
+  const handlePointerDown = (0, import_react5.useCallback)(
     (e) => {
       if (showInput) return;
       e.preventDefault();
@@ -777,7 +1117,7 @@ function Slider({
     },
     [showInput]
   );
-  const handlePointerMove = (0, import_react4.useCallback)(
+  const handlePointerMove = (0, import_react5.useCallback)(
     (e) => {
       if (!isInteracting || !pointerDownPos.current) return;
       const dx = e.clientX - pointerDownPos.current.x;
@@ -818,7 +1158,7 @@ function Slider({
       computeRubberStretch
     ]
   );
-  const handlePointerUp = (0, import_react4.useCallback)(
+  const handlePointerUp = (0, import_react5.useCallback)(
     (e) => {
       if (!isInteracting) return;
       if (isClickRef.current) {
@@ -829,7 +1169,7 @@ function Slider({
         if (animRef.current) {
           animRef.current.stop();
         }
-        animRef.current = (0, import_react5.animate)(fillPercent, newPct, {
+        animRef.current = (0, import_react6.animate)(fillPercent, newPct, {
           type: "spring",
           stiffness: 300,
           damping: 25,
@@ -841,7 +1181,7 @@ function Slider({
         onChange(roundValue(snappedValue, step));
       }
       if (rubberStretchPx.get() !== 0) {
-        (0, import_react5.animate)(rubberStretchPx, 0, {
+        (0, import_react6.animate)(rubberStretchPx, 0, {
           type: "spring",
           visualDuration: 0.35,
           bounce: 0.15
@@ -862,7 +1202,7 @@ function Slider({
       rubberStretchPx
     ]
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isValueHovered && !showInput && !isValueEditable) {
       hoverTimeoutRef.current = setTimeout(() => {
         setIsValueEditable(true);
@@ -880,7 +1220,7 @@ function Slider({
       }
     };
   }, [isValueHovered, showInput, isValueEditable]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (showInput && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -935,11 +1275,10 @@ function Slider({
   }
   const valueDodge = percentage < leftThreshold || percentage > rightThreshold;
   const handleOpacity = !isActive ? 0 : valueDodge ? 0.1 : isDragging ? 0.9 : 0.5;
-  const fillBackground = isActive ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.11)";
   const discreteSteps = (max - min) / step;
   const hashMarks = discreteSteps <= 10 ? Array.from({ length: discreteSteps - 1 }, (_, i) => {
     const pct = (i + 1) * step / (max - min) * 100;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "dialkit-slider-hashmark",
@@ -949,7 +1288,7 @@ function Slider({
     );
   }) : Array.from({ length: 9 }, (_, i) => {
     const pct = (i + 1) * 10;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         className: "dialkit-slider-hashmark",
@@ -958,8 +1297,8 @@ function Slider({
       i
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: wrapperRef, className: "dialkit-slider-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    import_react5.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: wrapperRef, className: "dialkit-slider-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_react6.motion.div,
     {
       ref: trackRef,
       className: `dialkit-slider ${isActive ? "dialkit-slider-active" : ""}`,
@@ -970,26 +1309,23 @@ function Slider({
       onMouseLeave: () => setIsHovered(false),
       style: { width: rubberBandWidth, x: rubberBandX },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-slider-hashmarks", children: hashMarks }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react5.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dialkit-slider-hashmarks", children: hashMarks }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react6.motion.div,
           {
             className: "dialkit-slider-fill",
             style: {
-              background: fillBackground,
-              width: fillWidth,
-              transition: "background 0.15s"
+              width: fillWidth
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react5.motion.div,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_react6.motion.div,
           {
             className: "dialkit-slider-handle",
             style: {
               left: handleLeft,
-              y: "-50%",
-              background: "rgba(255, 255, 255, 0.9)"
+              y: "-50%"
             },
             animate: {
               opacity: handleOpacity,
@@ -1003,8 +1339,11 @@ function Slider({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: labelRef, className: "dialkit-slider-label", children: label }),
-        showInput ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { ref: labelRef, className: "dialkit-slider-label", children: [
+          label,
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `dialkit-shortcut-pill${shortcutActive ? " dialkit-shortcut-pill-active" : ""}`, children: formatSliderShortcut(shortcut) })
+        ] }),
+        showInput ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "input",
           {
             ref: inputRef,
@@ -1017,7 +1356,7 @@ function Slider({
             onClick: (e) => e.stopPropagation(),
             onMouseDown: (e) => e.stopPropagation()
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "span",
           {
             ref: valueSpanRef,
@@ -1036,51 +1375,48 @@ function Slider({
 }
 
 // src/components/SegmentedControl.tsx
-var import_react6 = require("react");
-var import_react7 = require("motion/react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function SegmentedControl({
   options,
   value,
   onChange
 }) {
-  const containerRef = (0, import_react6.useRef)(null);
-  const buttonRefs = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
-  const [pillStyle, setPillStyle] = (0, import_react6.useState)(null);
-  const hasAnimated = (0, import_react6.useRef)(false);
-  (0, import_react6.useLayoutEffect)(() => {
-    const button = buttonRefs.current.get(value);
+  const containerRef = (0, import_react7.useRef)(null);
+  const hasAnimated = (0, import_react7.useRef)(false);
+  const [pillStyle, setPillStyle] = (0, import_react7.useState)(null);
+  const measure = (0, import_react7.useCallback)(() => {
     const container = containerRef.current;
-    if (button && container) {
-      const containerRect = container.getBoundingClientRect();
-      const buttonRect = button.getBoundingClientRect();
-      setPillStyle({
-        left: buttonRect.left - containerRect.left,
-        width: buttonRect.width
-      });
-    }
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: containerRef, className: "dialkit-segmented", children: [
-    pillStyle && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react7.motion.div,
+    if (!container) return;
+    const activeButton = container.querySelector('[data-active="true"]');
+    if (!activeButton) return;
+    setPillStyle({
+      left: activeButton.offsetLeft,
+      width: activeButton.offsetWidth
+    });
+  }, []);
+  (0, import_react7.useLayoutEffect)(() => {
+    measure();
+  }, [value, options.length, measure]);
+  const shouldAnimate = hasAnimated.current;
+  hasAnimated.current = true;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dialkit-segmented", ref: containerRef, children: [
+    pillStyle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
       {
         className: "dialkit-segmented-pill",
-        style: { left: pillStyle.left, width: pillStyle.width },
-        animate: { left: pillStyle.left, width: pillStyle.width },
-        transition: hasAnimated.current ? { type: "spring", visualDuration: 0.2, bounce: 0.15 } : { duration: 0 },
-        onAnimationComplete: () => {
-          hasAnimated.current = true;
+        style: {
+          left: pillStyle.left,
+          width: pillStyle.width,
+          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"
         }
       }
     ),
     options.map((option) => {
       const isActive = value === option.value;
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
-          ref: (el) => {
-            if (el) buttonRefs.current.set(option.value, el);
-          },
           onClick: () => onChange(option.value),
           className: "dialkit-segmented-button",
           "data-active": String(isActive),
@@ -1093,11 +1429,14 @@ function SegmentedControl({
 }
 
 // src/components/Toggle.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Toggle({ label, checked, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "dialkit-labeled-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "dialkit-labeled-control-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Toggle({ label, checked, onChange, shortcut, shortcutActive }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dialkit-labeled-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "dialkit-labeled-control-label", children: [
+      label,
+      shortcut && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `dialkit-shortcut-pill${shortcutActive ? " dialkit-shortcut-pill-active" : ""}`, children: formatToggleShortcut(shortcut) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SegmentedControl,
       {
         options: [
@@ -1112,7 +1451,7 @@ function Toggle({ label, checked, onChange }) {
 }
 
 // src/components/SpringVisualization.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function generateSpringCurve(stiffness, damping, mass, duration) {
   const points = [];
   const steps = 100;
@@ -1167,13 +1506,13 @@ function SpringVisualization({ spring, isSimpleMode }) {
     const x = width / 4 * i;
     const y = height / 4 * i;
     gridLines.push(
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: x, y1: 0, x2: x, y2: height, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `v-${i}`),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: y, x2: width, y2: y, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `h-${i}`)
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: x, y1: 0, x2: x, y2: height, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `v-${i}`),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: y, x2: width, y2: y, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `h-${i}`)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "dialkit-spring-viz", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "dialkit-spring-viz", children: [
     gridLines,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "line",
       {
         x1: 0,
@@ -1185,7 +1524,7 @@ function SpringVisualization({ spring, isSimpleMode }) {
         strokeDasharray: "4,4"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "path",
       {
         d: pathData,
@@ -1201,7 +1540,7 @@ function SpringVisualization({ spring, isSimpleMode }) {
 
 // src/components/SpringControl.tsx
 var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SpringControl({ panelId, path, label, spring, onChange }) {
   const mode = (0, import_react8.useSyncExternalStore)(
     (cb) => DialStore.subscribe(panelId, cb),
@@ -1209,25 +1548,21 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
     () => DialStore.getSpringMode(panelId, path)
   );
   const isSimpleMode = mode === "simple";
+  const cache = (0, import_react8.useRef)({
+    simple: spring.visualDuration !== void 0 ? spring : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
+    advanced: spring.stiffness !== void 0 ? spring : { type: "spring", stiffness: 200, damping: 25, mass: 1 }
+  });
+  if (isSimpleMode) {
+    cache.current.simple = spring;
+  } else {
+    cache.current.advanced = spring;
+  }
   const handleModeChange = (newMode) => {
     DialStore.updateSpringMode(panelId, path, newMode);
     if (newMode === "simple") {
-      const { stiffness, damping, mass, ...rest } = spring;
-      onChange({
-        ...rest,
-        type: "spring",
-        visualDuration: spring.visualDuration ?? 0.3,
-        bounce: spring.bounce ?? 0.2
-      });
+      onChange(cache.current.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.current.advanced);
     }
   };
   const handleUpdate = (key, value) => {
@@ -1239,11 +1574,11 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
       onChange({ ...rest, [key]: value });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpringVisualization, { spring, isSimpleMode }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "dialkit-labeled-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "dialkit-labeled-control-label", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SpringVisualization, { spring, isSimpleMode }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dialkit-labeled-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dialkit-labeled-control-label", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         SegmentedControl,
         {
           options: [
@@ -1255,8 +1590,8 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
         }
       )
     ] }),
-    isSimpleMode ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    isSimpleMode ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Slider,
         {
           label: "Duration",
@@ -1268,7 +1603,7 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
           unit: "s"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Slider,
         {
           label: "Bounce",
@@ -1279,8 +1614,8 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
           step: 0.05
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Slider,
         {
           label: "Stiffness",
@@ -1291,7 +1626,7 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
           step: 10
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Slider,
         {
           label: "Damping",
@@ -1302,7 +1637,7 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
           step: 1
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         Slider,
         {
           label: "Mass",
@@ -1318,7 +1653,7 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
 }
 
 // src/components/EasingVisualization.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function EasingVisualization({ easing }) {
   const ease = easing.ease;
   const s = 200;
@@ -1334,14 +1669,14 @@ function EasingVisualization({ easing }) {
   const p1 = toSvg(ease[0], ease[1]);
   const p2 = toSvg(ease[2], ease[3]);
   const curvePath = `M ${start.x} ${start.y} C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${end.x} ${end.y}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       viewBox: `0 0 ${s} ${s}`,
       preserveAspectRatio: "xMidYMid slice",
       className: "dialkit-spring-viz dialkit-easing-viz",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "line",
           {
             x1: start.x,
@@ -1353,7 +1688,7 @@ function EasingVisualization({ easing }) {
             strokeDasharray: "4,4"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: curvePath, fill: "none", stroke: "rgba(255, 255, 255, 0.6)", strokeWidth: "2", strokeLinecap: "round" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: curvePath, fill: "none", stroke: "rgba(255, 255, 255, 0.6)", strokeWidth: "2", strokeLinecap: "round" })
       ]
     }
   );
@@ -1361,7 +1696,7 @@ function EasingVisualization({ easing }) {
 
 // src/components/TransitionControl.tsx
 var import_react9 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TransitionControl({ panelId, path, label, value, onChange }) {
   const mode = (0, import_react9.useSyncExternalStore)(
     (cb) => DialStore.subscribe(panelId, cb),
@@ -1370,26 +1705,28 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
   );
   const isEasing = mode === "easing";
   const isSimpleSpring = mode === "simple";
-  const spring = value.type === "spring" ? value : { type: "spring", visualDuration: 0.3, bounce: 0.2 };
-  const easing = value.type === "easing" ? value : { type: "easing", duration: 0.3, ease: [1, -0.4, 0.5, 1] };
+  const cache = (0, import_react9.useRef)({
+    easing: value.type === "easing" ? value : { type: "easing", duration: 0.3, ease: [1, -0.4, 0.5, 1] },
+    simple: value.type === "spring" && value.visualDuration !== void 0 ? value : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
+    advanced: value.type === "spring" && value.stiffness !== void 0 ? value : { type: "spring", stiffness: 200, damping: 25, mass: 1 }
+  });
+  if (isEasing && value.type === "easing") {
+    cache.current.easing = value;
+  } else if (isSimpleSpring && value.type === "spring") {
+    cache.current.simple = value;
+  } else if (mode === "advanced" && value.type === "spring") {
+    cache.current.advanced = value;
+  }
+  const spring = value.type === "spring" ? value : cache.current.simple;
+  const easing = value.type === "easing" ? value : cache.current.easing;
   const handleModeChange = (newMode) => {
     DialStore.updateTransitionMode(panelId, path, newMode);
     if (newMode === "easing") {
-      const duration = value.type === "spring" ? value.visualDuration ?? 0.3 : value.duration;
-      onChange({ type: "easing", duration, ease: easing.ease });
+      onChange(cache.current.easing);
     } else if (newMode === "simple") {
-      onChange({
-        type: "spring",
-        visualDuration: spring.visualDuration ?? (value.type === "easing" ? value.duration : 0.3),
-        bounce: spring.bounce ?? 0.2
-      });
+      onChange(cache.current.simple);
     } else {
-      onChange({
-        type: "spring",
-        stiffness: spring.stiffness ?? 200,
-        damping: spring.damping ?? 25,
-        mass: spring.mass ?? 1
-      });
+      onChange(cache.current.advanced);
     }
   };
   const handleSpringUpdate = (key, val) => {
@@ -1406,11 +1743,11 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
     newEase[index] = val;
     onChange({ ...easing, ease: newEase });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EasingVisualization, { easing }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpringVisualization, { spring, isSimpleMode: isSimpleSpring }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-labeled-control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-labeled-control-label", children: "Type" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EasingVisualization, { easing }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpringVisualization, { spring, isSimpleMode: isSimpleSpring }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-labeled-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dialkit-labeled-control-label", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         SegmentedControl,
         {
           options: [
@@ -1423,20 +1760,20 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
         }
       )
     ] }),
-    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "x1", value: easing.ease[0], onChange: (v) => updateEase(0, v), min: 0, max: 1, step: 0.01 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "y1", value: easing.ease[1], onChange: (v) => updateEase(1, v), min: -1, max: 2, step: 0.01 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "x2", value: easing.ease[2], onChange: (v) => updateEase(2, v), min: 0, max: 1, step: 0.01 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "y2", value: easing.ease[3], onChange: (v) => updateEase(3, v), min: -1, max: 2, step: 0.01 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Duration", value: easing.duration, onChange: (v) => onChange({ ...easing, duration: v }), min: 0.1, max: 2, step: 0.05, unit: "s" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EaseTextInput, { ease: easing.ease, onChange: (newEase) => onChange({ ...easing, ease: newEase }) })
-    ] }) : isSimpleSpring ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Duration", value: spring.visualDuration ?? 0.3, onChange: (v) => handleSpringUpdate("visualDuration", v), min: 0.1, max: 1, step: 0.05, unit: "s" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Stiffness", value: spring.stiffness ?? 400, onChange: (v) => handleSpringUpdate("stiffness", v), min: 1, max: 1e3, step: 10 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Damping", value: spring.damping ?? 17, onChange: (v) => handleSpringUpdate("damping", v), min: 1, max: 100, step: 1 }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Mass", value: spring.mass ?? 1, onChange: (v) => handleSpringUpdate("mass", v), min: 0.1, max: 10, step: 0.1 })
+    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "x1", value: easing.ease[0], onChange: (v) => updateEase(0, v), min: 0, max: 1, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "y1", value: easing.ease[1], onChange: (v) => updateEase(1, v), min: -1, max: 2, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "x2", value: easing.ease[2], onChange: (v) => updateEase(2, v), min: 0, max: 1, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "y2", value: easing.ease[3], onChange: (v) => updateEase(3, v), min: -1, max: 2, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Duration", value: easing.duration, onChange: (v) => onChange({ ...easing, duration: v }), min: 0.1, max: 2, step: 0.05, unit: "s" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EaseTextInput, { ease: easing.ease, onChange: (newEase) => onChange({ ...easing, ease: newEase }) })
+    ] }) : isSimpleSpring ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Duration", value: spring.visualDuration ?? 0.3, onChange: (v) => handleSpringUpdate("visualDuration", v), min: 0.1, max: 1, step: 0.05, unit: "s" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Stiffness", value: spring.stiffness ?? 400, onChange: (v) => handleSpringUpdate("stiffness", v), min: 1, max: 1e3, step: 10 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Damping", value: spring.damping ?? 17, onChange: (v) => handleSpringUpdate("damping", v), min: 1, max: 100, step: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Mass", value: spring.mass ?? 1, onChange: (v) => handleSpringUpdate("mass", v), min: 0.1, max: 10, step: 0.1 })
     ] })
   ] }) });
 }
@@ -1467,9 +1804,9 @@ function EaseTextInput({ ease, onChange }) {
       e.target.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-labeled-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-labeled-control-label", children: "Ease" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-labeled-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dialkit-labeled-control-label", children: "Ease" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       {
         type: "text",
@@ -1486,11 +1823,11 @@ function EaseTextInput({ ease, onChange }) {
 }
 
 // src/components/TextControl.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function TextControl({ label, value, onChange, placeholder }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-text-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "dialkit-text-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-text-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { className: "dialkit-text-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       {
         type: "text",
@@ -1507,7 +1844,7 @@ function TextControl({ label, value, onChange, placeholder }) {
 var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 var import_react11 = require("motion/react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function toTitleCase(s) {
   return s.replace(/\b\w/g, (c) => c.toUpperCase());
 }
@@ -1557,8 +1894,8 @@ function SelectControl({ label, value, options, onChange }) {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-select-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-select-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1566,10 +1903,10 @@ function SelectControl({ label, value, options, onChange }) {
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-select-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-select-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-select-value", children: selectedOption?.label ?? value }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-select-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-select-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-select-value", children: selectedOption?.label ?? value }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               import_react11.motion.svg,
               {
                 className: "dialkit-select-chevron",
@@ -1581,7 +1918,7 @@ function SelectControl({ label, value, options, onChange }) {
                 strokeLinejoin: "round",
                 animate: { rotate: isOpen ? 180 : 0 },
                 transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: ICON_CHEVRON })
               }
             )
           ] })
@@ -1589,7 +1926,7 @@ function SelectControl({ label, value, options, onChange }) {
       }
     ),
     portalTarget && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_react11.motion.div,
         {
           ref: dropdownRef,
@@ -1604,7 +1941,7 @@ function SelectControl({ label, value, options, onChange }) {
             width: pos.width,
             ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
           },
-          children: normalized.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          children: normalized.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               className: "dialkit-select-option",
@@ -1626,7 +1963,7 @@ function SelectControl({ label, value, options, onChange }) {
 
 // src/components/ColorControl.tsx
 var import_react12 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
 function ColorControl({ label, value, onChange }) {
   const [isEditing, setIsEditing] = (0, import_react12.useState)(false);
@@ -1653,10 +1990,10 @@ function ColorControl({ label, value, onChange }) {
       setEditValue(value);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-color-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-color-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-color-inputs", children: [
-      isEditing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dialkit-color-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-color-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dialkit-color-inputs", children: [
+      isEditing ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "input",
         {
           type: "text",
@@ -1667,7 +2004,7 @@ function ColorControl({ label, value, onChange }) {
           onKeyDown: handleKeyDown,
           autoFocus: true
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "span",
         {
           className: "dialkit-color-hex",
@@ -1675,7 +2012,7 @@ function ColorControl({ label, value, onChange }) {
           children: (value ?? "").toUpperCase()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           className: "dialkit-color-swatch",
@@ -1684,7 +2021,7 @@ function ColorControl({ label, value, onChange }) {
           title: "Pick color"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "input",
         {
           ref: colorInputRef,
@@ -1706,7 +2043,7 @@ function expandShorthandHex(hex) {
 var import_react13 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_react14 = require("motion/react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
   const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
   const triggerRef = (0, import_react13.useRef)(null);
@@ -1749,8 +2086,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     e.stopPropagation();
     DialStore.deletePreset(panelId, presetId);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dialkit-preset-manager", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "dialkit-preset-manager", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1760,8 +2097,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         "data-has-preset": String(!!activePreset),
         "data-disabled": String(!hasPresets),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             import_react14.motion.svg,
             {
               className: "dialkit-select-chevron",
@@ -1773,14 +2110,14 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
               strokeLinejoin: "round",
               animate: { rotate: isOpen ? 180 : 0, opacity: hasPresets ? 0.6 : 0.25 },
               transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: ICON_CHEVRON })
             }
           )
         ]
       }
     ),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         import_react14.motion.div,
         {
           ref: dropdownRef,
@@ -1791,36 +2128,30 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
           exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
           transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 className: "dialkit-preset-item",
                 "data-active": String(!activePresetId),
                 onClick: () => handleSelect(null),
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
               }
             ),
-            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "div",
               {
                 className: "dialkit-preset-item",
                 "data-active": String(preset.id === activePresetId),
                 onClick: () => handleSelect(preset.id),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "button",
                     {
                       className: "dialkit-preset-delete",
                       onClick: (e) => handleDelete(e, preset.id),
                       title: "Delete preset",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 11V16" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M14 11V16" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3.5 6H20.5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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" })
-                      ] })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_TRASH.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d }, i)) })
                     }
                   )
                 ]
@@ -1836,10 +2167,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
 }
 
 // src/components/Panel.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Panel({ panel, defaultOpen = true, inline = false }) {
   const [copied, setCopied] = (0, import_react15.useState)(false);
   const [isPanelOpen, setIsPanelOpen] = (0, import_react15.useState)(defaultOpen);
+  const shortcutCtx = (0, import_react15.useContext)(ShortcutContext);
+  const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
   const values = (0, import_react15.useSyncExternalStore)(
     (cb) => DialStore.subscribe(panel.id, cb),
     () => DialStore.getValues(panel.id),
@@ -1868,7 +2201,7 @@ Apply these values as the new defaults in the useDialKit call.`;
     const value = values[control.path];
     switch (control.type) {
       case "slider":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Slider,
           {
             label: control.label,
@@ -1876,22 +2209,26 @@ Apply these values as the new defaults in the useDialKit call.`;
             onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
             min: control.min,
             max: control.max,
-            step: control.step
+            step: control.step,
+            shortcut: control.shortcut,
+            shortcutActive: shortcutCtx.activePanelId === panel.id && shortcutCtx.activePath === control.path
           },
           control.path
         );
       case "toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           Toggle,
           {
             label: control.label,
             checked: value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            shortcut: control.shortcut,
+            shortcutActive: shortcutCtx.activePanelId === panel.id && shortcutCtx.activePath === control.path
           },
           control.path
         );
       case "spring":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           SpringControl,
           {
             panelId: panel.id,
@@ -1903,7 +2240,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "transition":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TransitionControl,
           {
             panelId: panel.id,
@@ -1915,9 +2252,9 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TextControl,
           {
             label: control.label,
@@ -1928,7 +2265,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           SelectControl,
           {
             label: control.label,
@@ -1939,7 +2276,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ColorControl,
           {
             label: control.label,
@@ -1949,7 +2286,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "action":
-        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "button",
           {
             className: "dialkit-button",
@@ -1966,8 +2303,8 @@ Apply these values as the new defaults in the useDialKit call.`;
     return panel.controls.map(renderControl);
   };
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react16.motion.button,
       {
         className: "dialkit-toolbar-add",
@@ -1975,16 +2312,10 @@ Apply these values as the new defaults in the useDialKit call.`;
         title: "Add preset",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 6H20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 12H10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M15 15L21 15" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M18 12V18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 18H10" })
-        ] })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_ADD_PRESET.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d }, i)) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       PresetManager,
       {
         panelId: panel.id,
@@ -1993,64 +2324,71 @@ Apply these values as the new defaults in the useDialKit call.`;
         onAdd: handleAddPreset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react16.motion.button,
       {
-        className: "dialkit-toolbar-copy",
+        className: "dialkit-toolbar-add",
         onClick: handleCopy,
         title: "Copy parameters",
-        whileTap: { scale: 0.95 },
+        whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react16.AnimatePresence, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react16.motion.svg,
-            {
-              className: "dialkit-toolbar-copy-icon",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              initial: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
-              animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
-              exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
-              transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5 12.75L10 19L19 5" })
-            },
-            "check"
-          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            import_react16.motion.svg,
-            {
-              className: "dialkit-toolbar-copy-icon",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              initial: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
-              animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
-              exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
-              transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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" }),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-              ]
-            },
-            "clipboard"
-          ) }) }),
-          "Copy"
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.AnimatePresence, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_react16.motion.svg,
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0.8, opacity: 0 },
+            transition: { duration: 0.08 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CHECK })
+          },
+          "check"
+        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          import_react16.motion.svg,
+          {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0.8, opacity: 0 },
+            transition: { duration: 0.08 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+            ]
+          },
+          "clipboard"
+        ) }) })
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
 }
 
 // src/components/DialRoot.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover" }) {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_meta = {};
+var isDevDefault = typeof process !== "undefined" && process?.env?.NODE_ENV ? process.env.NODE_ENV !== "production" : typeof import_meta !== "undefined" && import_meta.env?.MODE ? import_meta.env.MODE !== "production" : true;
+function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover", theme = "system", productionEnabled = isDevDefault }) {
+  if (!productionEnabled) return null;
   const [panels, setPanels] = (0, import_react17.useState)([]);
   const [mounted, setMounted] = (0, import_react17.useState)(false);
   const inline = mode === "inline";
+  const panelRef = (0, import_react17.useRef)(null);
+  const [dragOffset, setDragOffset] = (0, import_react17.useState)(null);
+  const [activePosition, setActivePosition] = (0, import_react17.useState)(position);
+  const lastDragOffset = (0, import_react17.useRef)(null);
+  const draggingRef = (0, import_react17.useRef)(false);
+  const dragStartRef = (0, import_react17.useRef)(null);
+  const didDragRef = (0, import_react17.useRef)(false);
   (0, import_react17.useEffect)(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2059,13 +2397,95 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     });
     return unsubscribe;
   }, []);
+  (0, import_react17.useEffect)(() => {
+    if (!panelRef.current || inline) return;
+    const observer = new MutationObserver(() => {
+      const inner = panelRef.current?.querySelector(".dialkit-panel-inner");
+      if (!inner) return;
+      const collapsed = inner.getAttribute("data-collapsed") === "true";
+      if (!collapsed) {
+        if (dragOffset) {
+          lastDragOffset.current = dragOffset;
+          const bubbleCenterX = dragOffset.x + 21;
+          const midX = window.innerWidth / 2;
+          setActivePosition(bubbleCenterX < midX ? "top-left" : "top-right");
+        } else {
+          setActivePosition(position);
+        }
+        setDragOffset(null);
+      } else if (lastDragOffset.current) {
+        setDragOffset(lastDragOffset.current);
+      }
+    });
+    observer.observe(panelRef.current, { subtree: true, attributes: true, attributeFilter: ["data-collapsed"] });
+    return () => observer.disconnect();
+  }, [inline, dragOffset, position]);
+  const handlePointerDown = (0, import_react17.useCallback)((e) => {
+    const inner = panelRef.current?.querySelector(".dialkit-panel-inner");
+    if (!inner || inner.getAttribute("data-collapsed") !== "true") return;
+    const rect = panelRef.current.getBoundingClientRect();
+    dragStartRef.current = {
+      pointerX: e.clientX,
+      pointerY: e.clientY,
+      elX: rect.left,
+      elY: rect.top
+    };
+    didDragRef.current = false;
+    draggingRef.current = true;
+    e.target.setPointerCapture(e.pointerId);
+  }, []);
+  const handlePointerMove = (0, import_react17.useCallback)((e) => {
+    if (!draggingRef.current || !dragStartRef.current) return;
+    const dx = e.clientX - dragStartRef.current.pointerX;
+    const dy = e.clientY - dragStartRef.current.pointerY;
+    if (!didDragRef.current && Math.abs(dx) + Math.abs(dy) < 4) return;
+    didDragRef.current = true;
+    setDragOffset({
+      x: dragStartRef.current.elX + dx,
+      y: dragStartRef.current.elY + dy
+    });
+  }, []);
+  const handlePointerUp = (0, import_react17.useCallback)((e) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    dragStartRef.current = null;
+    if (didDragRef.current) {
+      e.stopPropagation();
+      const inner = panelRef.current?.querySelector(".dialkit-panel-inner");
+      if (inner) {
+        const blocker = (ev) => {
+          ev.stopPropagation();
+        };
+        inner.addEventListener("click", blocker, { capture: true, once: true });
+      }
+    }
+  }, []);
   if (!mounted || typeof window === "undefined") {
     return null;
   }
   if (panels.length === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-root", "data-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel", "data-position": inline ? void 0 : position, "data-mode": mode, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id)) }) });
+  const dragStyle = dragOffset ? {
+    top: dragOffset.y,
+    left: dragOffset.x,
+    right: "auto",
+    bottom: "auto"
+  } : void 0;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ShortcutListener, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      ref: panelRef,
+      className: "dialkit-panel",
+      "data-position": inline ? void 0 : dragOffset ? void 0 : activePosition,
+      "data-mode": mode,
+      style: dragStyle,
+      onPointerDown: !inline ? handlePointerDown : void 0,
+      onPointerMove: !inline ? handlePointerMove : void 0,
+      onPointerUp: !inline ? handlePointerUp : void 0,
+      children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id))
+    }
+  ) }) });
   if (inline) {
     return content;
   }
@@ -2073,9 +2493,9 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
 }
 
 // src/components/ButtonGroup.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function ButtonGroup({ buttons }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "button",
     {
       className: "dialkit-button",
@@ -2085,6 +2505,124 @@ function ButtonGroup({ buttons }) {
     index
   )) });
 }
+
+// src/components/ShortcutsMenu.tsx
+var import_react18 = require("react");
+var import_react_dom4 = require("react-dom");
+var import_react19 = require("motion/react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function formatShortcutKey(sc) {
+  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) {
+  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 ShortcutsMenu({ panelId }) {
+  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
+  const triggerRef = (0, import_react18.useRef)(null);
+  const dropdownRef = (0, import_react18.useRef)(null);
+  const [pos, setPos] = (0, import_react18.useState)({ top: 0, right: 0 });
+  const open = (0, import_react18.useCallback)(() => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (rect) {
+      setPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
+    }
+    setIsOpen(true);
+  }, []);
+  const close = (0, import_react18.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react18.useCallback)(() => {
+    if (isOpen) close();
+    else open();
+  }, [isOpen, open, close]);
+  (0, import_react18.useEffect)(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen, close]);
+  const panel = DialStore.getPanel(panelId);
+  if (!panel) return null;
+  const shortcuts = Object.entries(panel.shortcuts);
+  if (shortcuts.length === 0) return null;
+  const rows = shortcuts.map(([path, shortcut]) => {
+    const findLabel = (controls) => {
+      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)
+    };
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react19.motion.button,
+      {
+        ref: triggerRef,
+        className: "dialkit-shortcuts-trigger",
+        onClick: toggle,
+        title: "Keyboard shortcuts",
+        whileTap: { scale: 0.9 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 10H6.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 10H10.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M14 10H14.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 10H18.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 14H16" })
+        ] })
+      }
+    ),
+    (0, import_react_dom4.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        import_react19.motion.div,
+        {
+          ref: dropdownRef,
+          className: "dialkit-root dialkit-shortcuts-dropdown",
+          style: { position: "fixed", top: pos.top, right: pos.right },
+          initial: { opacity: 0, y: 4, scale: 0.97 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-title", children: "Keyboard Shortcuts" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-list", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "dialkit-shortcuts-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-key", children: formatShortcutKey(row.shortcut) }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-label", children: row.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-mode", children: formatInteraction(row.shortcut) })
+            ] }, row.path)) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-hint", children: "See pill badges on controls for keys" })
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonGroup,
@@ -2095,6 +2633,7 @@ function ButtonGroup({ buttons }) {
   Folder,
   PresetManager,
   SelectControl,
+  ShortcutsMenu,
   Slider,
   SpringControl,
   SpringVisualization,