dialkit 1.2.1 → 1.3.0

package/dist/index.js

@@ -1,10 +1,93 @@
 "use client";
 
 // src/hooks/useDialKit.ts
-import { useEffect, useId, useSyncExternalStore, useRef } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useSyncExternalStore } from "react";
 
 // src/store/DialStore.ts
 var EMPTY_VALUES = Object.freeze({});
+function resolveDialValues(config, flatValues) {
+  return resolveConfigValues(config, flatValues, "");
+}
+function flattenDialValueUpdates(config, updates) {
+  const values = {};
+  if (typeof updates === "object" && updates !== null) {
+    flattenConfigUpdates(config, updates, "", values);
+  }
+  return values;
+}
+function resolveConfigValues(config, flatValues, prefix) {
+  const result = {};
+  for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed") continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
+      result[key] = flatValues[path] ?? configValue[0];
+    } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isSpringConfigValue(configValue) || isEasingConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isActionConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isSelectConfigValue(configValue)) {
+      const defaultValue = configValue.default ?? getFirstOptionValue(configValue.options);
+      result[key] = flatValues[path] ?? defaultValue;
+    } else if (isColorConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue.default ?? "#000000";
+    } else if (isTextConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue.default ?? "";
+    } else if (typeof configValue === "object" && configValue !== null) {
+      result[key] = resolveConfigValues(configValue, flatValues, path);
+    }
+  }
+  return result;
+}
+function flattenConfigUpdates(config, updates, prefix, values) {
+  for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed" || !(key in updates)) continue;
+    const nextValue = updates[key];
+    if (nextValue === void 0) continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (isActionConfigValue(configValue)) {
+      continue;
+    }
+    if (isLeafConfigValue(configValue)) {
+      values[path] = nextValue;
+      continue;
+    }
+    if (typeof configValue === "object" && configValue !== null && typeof nextValue === "object" && nextValue !== null && !Array.isArray(nextValue)) {
+      flattenConfigUpdates(configValue, nextValue, path, values);
+    }
+  }
+}
+function isLeafConfigValue(value) {
+  return Array.isArray(value) && value.length <= 4 && typeof value[0] === "number" || typeof value === "number" || typeof value === "boolean" || typeof value === "string" || isSpringConfigValue(value) || isEasingConfigValue(value) || isActionConfigValue(value) || isSelectConfigValue(value) || isColorConfigValue(value) || isTextConfigValue(value);
+}
+function hasType(value, type) {
+  return typeof value === "object" && value !== null && "type" in value && value.type === type;
+}
+function isSpringConfigValue(value) {
+  return hasType(value, "spring");
+}
+function isEasingConfigValue(value) {
+  return hasType(value, "easing");
+}
+function isActionConfigValue(value) {
+  return hasType(value, "action");
+}
+function isSelectConfigValue(value) {
+  return hasType(value, "select") && "options" in value && Array.isArray(value.options);
+}
+function isColorConfigValue(value) {
+  return hasType(value, "color");
+}
+function isTextConfigValue(value) {
+  return hasType(value, "text");
+}
+function getFirstOptionValue(options) {
+  const first = options[0];
+  if (first === void 0) return "";
+  return typeof first === "string" ? first : first.value;
+}
 var DialStoreClass = class {
   constructor() {
     this.panels = /* @__PURE__ */ new Map();
@@ -15,87 +98,138 @@ var DialStoreClass = class {
     this.presets = /* @__PURE__ */ new Map();
     this.activePreset = /* @__PURE__ */ new Map();
     this.baseValues = /* @__PURE__ */ new Map();
+    this.defaultValues = /* @__PURE__ */ new Map();
+    this.registrationCounts = /* @__PURE__ */ new Map();
+    this.retainedPanels = /* @__PURE__ */ new Set();
+    this.persistConfigs = /* @__PURE__ */ new Map();
   }
-  registerPanel(id, name, config, shortcuts) {
+  registerPanel(id, name, config, shortcuts, options = {}) {
+    this.configurePanelRetention(id, options);
+    this.registrationCounts.set(id, (this.registrationCounts.get(id) ?? 0) + 1);
     const controls = this.parseConfig(config, "", shortcuts);
-    const values = this.flattenValues(config, "");
-    this.initTransitionModes(config, "", values);
+    const controlsByPath = this.mapControlsByPath(controls);
+    const defaultValues = this.flattenValues(config, "");
+    this.initTransitionModes(config, "", defaultValues);
+    const persisted = this.loadPersistedPanel(id);
+    const previousValues = this.panels.get(id)?.values ?? this.snapshots.get(id) ?? persisted?.values ?? {};
+    const values = this.reconcileValues(defaultValues, previousValues, controlsByPath);
+    const previousBaseValues = this.baseValues.get(id) ?? persisted?.baseValues ?? persisted?.values ?? {};
+    const baseValues = this.reconcileValues(defaultValues, previousBaseValues, controlsByPath);
     this.panels.set(id, { id, name, controls, values, shortcuts: shortcuts ?? {} });
     this.snapshots.set(id, { ...values });
-    this.baseValues.set(id, { ...values });
+    this.baseValues.set(id, baseValues);
+    this.defaultValues.set(id, { ...defaultValues });
+    const existingPresets = this.presets.get(id) ?? persisted?.presets;
+    if (existingPresets) {
+      this.presets.set(id, this.reconcilePresets(existingPresets, defaultValues, controlsByPath));
+    }
+    if (!this.activePreset.has(id) && persisted?.activePresetId !== void 0) {
+      this.activePreset.set(id, persisted.activePresetId);
+    }
+    this.persistPanel(id);
+    this.notify(id);
     this.notifyGlobal();
   }
-  updatePanel(id, name, config, shortcuts) {
+  updatePanel(id, name, config, shortcuts, options = {}) {
+    this.configurePanelRetention(id, options);
     const existing = this.panels.get(id);
     if (!existing) {
-      this.registerPanel(id, name, config, shortcuts);
+      this.registerPanel(id, name, config, shortcuts, options);
       return;
     }
     const controls = this.parseConfig(config, "", shortcuts);
     const controlsByPath = this.mapControlsByPath(controls);
     const defaultValues = this.flattenValues(config, "");
-    const nextValues = {};
-    for (const [path, defaultValue] of Object.entries(defaultValues)) {
-      nextValues[path] = this.normalizePreservedValue(
-        existing.values[path],
-        defaultValue,
-        controlsByPath.get(path)
-      );
-    }
-    this.initTransitionModes(config, "", nextValues);
-    for (const [path, mode] of Object.entries(existing.values)) {
-      if (!path.endsWith(".__mode")) {
-        continue;
-      }
-      const transitionPath = path.slice(0, -"__mode".length - 1);
-      const transitionControl = controlsByPath.get(transitionPath);
-      if (transitionControl?.type === "transition") {
-        nextValues[path] = mode;
-      }
-    }
+    this.initTransitionModes(config, "", defaultValues);
+    const nextValues = this.reconcileValues(defaultValues, existing.values, controlsByPath);
     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) ?? {};
-    const nextBaseValues = {};
-    for (const [path, defaultValue] of Object.entries(defaultValues)) {
-      nextBaseValues[path] = this.normalizePreservedValue(
-        previousBaseValues[path],
-        defaultValue,
-        controlsByPath.get(path)
-      );
-    }
+    const nextBaseValues = this.reconcileValues(defaultValues, previousBaseValues, controlsByPath);
     for (const [path, value] of Object.entries(nextValues)) {
       if (path.endsWith(".__mode")) {
         nextBaseValues[path] = value;
       }
     }
     this.baseValues.set(id, nextBaseValues);
+    this.defaultValues.set(id, { ...defaultValues });
+    this.presets.set(id, this.reconcilePresets(this.presets.get(id) ?? [], defaultValues, controlsByPath));
+    this.persistPanel(id);
     this.notify(id);
     this.notifyGlobal();
   }
   unregisterPanel(id) {
+    const nextCount = (this.registrationCounts.get(id) ?? 1) - 1;
+    if (nextCount > 0) {
+      this.registrationCounts.set(id, nextCount);
+      return;
+    }
+    this.registrationCounts.delete(id);
     this.panels.delete(id);
     this.listeners.delete(id);
-    this.snapshots.delete(id);
     this.actionListeners.delete(id);
-    this.baseValues.delete(id);
+    if (!this.retainedPanels.has(id)) {
+      this.snapshots.delete(id);
+      this.baseValues.delete(id);
+      this.defaultValues.delete(id);
+      this.presets.delete(id);
+      this.activePreset.delete(id);
+      this.persistConfigs.delete(id);
+    }
     this.notifyGlobal();
   }
   updateValue(panelId, path, value) {
+    this.updateValues(panelId, { [path]: value });
+  }
+  updateValues(panelId, updates) {
     const panel = this.panels.get(panelId);
     if (!panel) return;
-    panel.values[path] = value;
+    const validUpdates = {};
+    for (const [path, value] of Object.entries(updates)) {
+      if (!Object.prototype.hasOwnProperty.call(panel.values, path)) {
+        continue;
+      }
+      const control = this.findControlByPath(panel.controls, path);
+      if (control?.type === "action") {
+        continue;
+      }
+      panel.values[path] = value;
+      validUpdates[path] = value;
+    }
+    if (Object.keys(validUpdates).length === 0) {
+      return;
+    }
     const activeId = this.activePreset.get(panelId);
     if (activeId) {
       const presets = this.presets.get(panelId) ?? [];
       const preset = presets.find((p) => p.id === activeId);
-      if (preset) preset.values[path] = value;
+      if (preset) {
+        for (const [path, value] of Object.entries(validUpdates)) {
+          preset.values[path] = value;
+        }
+      }
     } else {
       const base = this.baseValues.get(panelId);
-      if (base) base[path] = value;
+      if (base) {
+        for (const [path, value] of Object.entries(validUpdates)) {
+          base[path] = value;
+        }
+      }
     }
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
+    this.notify(panelId);
+  }
+  resetValues(panelId) {
+    const panel = this.panels.get(panelId);
+    const defaults = this.defaultValues.get(panelId);
+    if (!panel || !defaults) return;
+    panel.values = { ...defaults };
+    this.snapshots.set(panelId, { ...panel.values });
+    this.baseValues.set(panelId, { ...defaults });
+    this.activePreset.set(panelId, null);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   updateSpringMode(panelId, path, mode) {
@@ -111,6 +245,7 @@ var DialStoreClass = class {
     if (!panel) return;
     panel.values[`${path}.__mode`] = mode;
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   getTransitionMode(panelId, path) {
@@ -169,6 +304,7 @@ var DialStoreClass = class {
     this.presets.set(panelId, [...existing, preset]);
     this.activePreset.set(panelId, id);
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
     this.notify(panelId);
     return id;
   }
@@ -181,6 +317,7 @@ var DialStoreClass = class {
     panel.values = { ...preset.values };
     this.snapshots.set(panelId, { ...panel.values });
     this.activePreset.set(panelId, presetId);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   deletePreset(panelId, presetId) {
@@ -193,6 +330,7 @@ var DialStoreClass = class {
     if (panel) {
       this.snapshots.set(panelId, { ...panel.values });
     }
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   getPresets(panelId) {
@@ -209,6 +347,7 @@ var DialStoreClass = class {
       this.snapshots.set(panelId, { ...panel.values });
     }
     this.activePreset.set(panelId, null);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   resolveShortcutTarget(key, modifier) {
@@ -239,6 +378,94 @@ var DialStoreClass = class {
     }
     return results;
   }
+  configurePanelRetention(id, options) {
+    if (options.retainOnUnmount) {
+      this.retainedPanels.add(id);
+    }
+    const persistConfig = this.normalizePersistConfig(id, options.persist);
+    if (persistConfig) {
+      this.persistConfigs.set(id, persistConfig);
+      this.retainedPanels.add(id);
+    }
+  }
+  reconcileValues(defaultValues, previousValues, controlsByPath) {
+    const nextValues = {};
+    for (const [path, defaultValue] of Object.entries(defaultValues)) {
+      if (path.endsWith(".__mode")) {
+        const transitionPath = path.slice(0, -".__mode".length);
+        const transitionControl = controlsByPath.get(transitionPath);
+        nextValues[path] = transitionControl?.type === "transition" && previousValues[path] !== void 0 ? previousValues[path] : defaultValue;
+        continue;
+      }
+      nextValues[path] = this.normalizePreservedValue(
+        previousValues[path],
+        defaultValue,
+        controlsByPath.get(path)
+      );
+    }
+    return nextValues;
+  }
+  reconcilePresets(presets, defaultValues, controlsByPath) {
+    return presets.map((preset) => ({
+      ...preset,
+      values: this.reconcileValues(defaultValues, preset.values, controlsByPath)
+    }));
+  }
+  normalizePersistConfig(id, persist) {
+    if (!persist) return null;
+    const options = typeof persist === "object" ? persist : {};
+    return {
+      key: options.key ?? `dialkit:${id}`,
+      storage: options.storage ?? "localStorage",
+      presets: options.presets ?? true
+    };
+  }
+  loadPersistedPanel(id) {
+    const config = this.persistConfigs.get(id);
+    if (!config) return null;
+    const storage = this.getStorage(config.storage);
+    if (!storage) return null;
+    try {
+      const raw = storage.getItem(config.key);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      if (parsed?.version !== 1 || typeof parsed !== "object") return null;
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  persistPanel(id) {
+    const config = this.persistConfigs.get(id);
+    if (!config) return;
+    const storage = this.getStorage(config.storage);
+    if (!storage) return;
+    const values = this.snapshots.get(id) ?? this.panels.get(id)?.values;
+    if (!values) return;
+    const state = {
+      version: 1,
+      values,
+      baseValues: this.baseValues.get(id) ?? values,
+      activePresetId: this.activePreset.get(id) ?? null
+    };
+    if (config.presets) {
+      state.presets = this.presets.get(id) ?? [];
+    }
+    try {
+      storage.setItem(config.key, JSON.stringify(state));
+    } catch {
+    }
+  }
+  getStorage(kind) {
+    if (typeof globalThis === "undefined" || !("window" in globalThis)) {
+      return null;
+    }
+    try {
+      return kind === "sessionStorage" ? globalThis.window?.sessionStorage ?? null : globalThis.window?.localStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
   findControlByPath(controls, path) {
     for (const control of controls) {
       if (control.path === path) return control;
@@ -467,8 +694,12 @@ var DialStore = new DialStoreClass();
 
 // src/hooks/useDialKit.ts
 function useDialKit(name, config, options) {
+  return useDialKitController(name, config, options).values;
+}
+function useDialKitController(name, config, options) {
   const instanceId = useId();
-  const panelId = `${name}-${instanceId}`;
+  const hasStableId = options?.id !== void 0;
+  const panelId = options?.id ?? `${name}-${instanceId}`;
   const configRef = useRef(config);
   const serializedConfig = JSON.stringify(config);
   configRef.current = config;
@@ -476,93 +707,236 @@ function useDialKit(name, config, options) {
   onActionRef.current = options?.onAction;
   const shortcutsRef = useRef(options?.shortcuts);
   shortcutsRef.current = options?.shortcuts;
+  const persistRef = useRef(options?.persist);
+  persistRef.current = options?.persist;
   const serializedShortcuts = JSON.stringify(options?.shortcuts);
+  const serializedPersist = JSON.stringify(options?.persist);
   useEffect(() => {
-    DialStore.registerPanel(panelId, name, configRef.current, shortcutsRef.current);
+    DialStore.registerPanel(panelId, name, configRef.current, shortcutsRef.current, {
+      retainOnUnmount: hasStableId,
+      persist: persistRef.current
+    });
     return () => DialStore.unregisterPanel(panelId);
-  }, [panelId, name]);
+  }, [hasStableId, panelId, name]);
   const mountedRef = useRef(false);
   useEffect(() => {
     if (!mountedRef.current) {
       mountedRef.current = true;
       return;
     }
-    DialStore.updatePanel(panelId, name, configRef.current, shortcutsRef.current);
-  }, [panelId, name, serializedConfig, serializedShortcuts]);
+    DialStore.updatePanel(panelId, name, configRef.current, shortcutsRef.current, {
+      retainOnUnmount: hasStableId,
+      persist: persistRef.current
+    });
+  }, [hasStableId, panelId, name, serializedConfig, serializedShortcuts, serializedPersist]);
   useEffect(() => {
     return DialStore.subscribeActions(panelId, (action) => {
       onActionRef.current?.(action);
     });
   }, [panelId]);
-  const values = useSyncExternalStore(
+  const subscribe = useCallback(
     (callback) => DialStore.subscribe(panelId, callback),
+    [panelId]
+  );
+  const getSnapshot = useCallback(
     () => DialStore.getValues(panelId),
-    () => DialStore.getValues(panelId)
+    [panelId]
+  );
+  const flatValues = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const values = useMemo(
+    () => resolveDialValues(configRef.current, flatValues),
+    [flatValues, serializedConfig]
+  );
+  const setValue = useCallback(
+    (path, value) => {
+      DialStore.updateValue(panelId, path, value);
+    },
+    [panelId]
+  );
+  const setValues = useCallback(
+    (nextValues) => {
+      DialStore.updateValues(panelId, flattenDialValueUpdates(configRef.current, nextValues));
+    },
+    [panelId]
+  );
+  const resetValues = useCallback(() => {
+    DialStore.resetValues(panelId);
+  }, [panelId]);
+  const getValues = useCallback(
+    () => resolveDialValues(configRef.current, DialStore.getValues(panelId)),
+    [panelId]
+  );
+  return useMemo(
+    () => ({
+      values,
+      setValue,
+      setValues,
+      resetValues,
+      getValues
+    }),
+    [getValues, resetValues, setValue, setValues, values]
   );
-  return buildResolvedValues(config, values, "");
-}
-function buildResolvedValues(config, flatValues, prefix) {
-  const result = {};
-  for (const [key, configValue] of Object.entries(config)) {
-    if (key === "_collapsed") continue;
-    const path = prefix ? `${prefix}.${key}` : key;
-    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
-      result[key] = flatValues[path] ?? configValue[0];
-    } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isSpringConfig(configValue) || isEasingConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isActionConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isSelectConfig(configValue)) {
-      const defaultValue = configValue.default ?? getFirstOptionValue(configValue.options);
-      result[key] = flatValues[path] ?? defaultValue;
-    } else if (isColorConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue.default ?? "#000000";
-    } else if (isTextConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue.default ?? "";
-    } else if (typeof configValue === "object" && configValue !== null) {
-      result[key] = buildResolvedValues(configValue, flatValues, path);
-    }
-  }
-  return result;
-}
-function hasType(value, type) {
-  return typeof value === "object" && value !== null && "type" in value && value.type === type;
-}
-function isSpringConfig(value) {
-  return hasType(value, "spring");
-}
-function isEasingConfig(value) {
-  return hasType(value, "easing");
-}
-function isActionConfig(value) {
-  return hasType(value, "action");
-}
-function isSelectConfig(value) {
-  return hasType(value, "select") && "options" in value && Array.isArray(value.options);
-}
-function isColorConfig(value) {
-  return hasType(value, "color");
-}
-function isTextConfig(value) {
-  return hasType(value, "text");
-}
-function getFirstOptionValue(options) {
-  const first = options[0];
-  return typeof first === "string" ? first : first.value;
 }
 
 // src/components/DialRoot.tsx
-import { useEffect as useEffect8, useState as useState10, useRef as useRef11, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect8, useState as useState10, useRef as useRef11, useCallback as useCallback10 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
+// src/components/Folder.tsx
+import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+// 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
+import { jsx, jsxs } from "react/jsx-runtime";
+function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar, panelHeightOffset = 10 }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);
+  const contentRef = useRef2(null);
+  const [contentHeight, setContentHeight] = useState(void 0);
+  const [windowHeight, setWindowHeight] = useState(typeof window !== "undefined" ? window.innerHeight : 800);
+  useEffect2(() => {
+    if (!isRoot) return;
+    const onResize = () => setWindowHeight(window.innerHeight);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [isRoot]);
+  useEffect2(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      if (isOpen) {
+        const h = el.offsetHeight;
+        setContentHeight((prev) => prev === h ? prev : h);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isOpen]);
+  const handleToggle = () => {
+    if (inline && isRoot) return;
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next) {
+      setIsCollapsed(false);
+    } else {
+      setIsCollapsed(true);
+    }
+    onOpenChange?.(next);
+  };
+  const folderContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: isRoot ? contentRef : void 0,
+      className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`,
+      "data-open": String(isOpen),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
+          /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-header-top", children: [
+            isRoot ? isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ jsx("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx("span", { className: "dialkit-folder-title", children: title }) }),
+            isRoot && !inline && /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: "dialkit-panel-icon",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                children: [
+                  /* @__PURE__ */ jsx("path", { opacity: "0.5", d: ICON_PANEL.path, fill: "currentColor" }),
+                  ICON_PANEL.circles.map((c, i) => /* @__PURE__ */ jsx("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }, i))
+                ]
+              }
+            ),
+            !isRoot && /* @__PURE__ */ jsx(
+              motion.svg,
+              {
+                className: "dialkit-folder-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                initial: false,
+                animate: { rotate: isOpen ? 0 : 180 },
+                transition: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
+                children: /* @__PURE__ */ jsx("path", { d: ICON_CHEVRON })
+              }
+            )
+          ] }),
+          isRoot && toolbar && isOpen && /* @__PURE__ */ jsx("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
+        ] }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "dialkit-folder-content",
+            initial: isRoot ? void 0 : { height: 0, opacity: 0 },
+            animate: isRoot ? void 0 : { height: "auto", opacity: 1 },
+            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__ */ jsx("div", { className: "dialkit-folder-inner", children })
+          }
+        ) })
+      ]
+    }
+  );
+  if (isRoot) {
+    if (inline) {
+      return /* @__PURE__ */ jsx("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
+    }
+    const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? Math.min(contentHeight + panelHeightOffset, 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__ */ jsx(
+      motion.div,
+      {
+        className: "dialkit-panel-inner",
+        style: panelStyle,
+        onClick: !isOpen ? handleToggle : void 0,
+        "data-collapsed": isCollapsed,
+        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+        children: folderContent
+      }
+    );
+  }
+  return folderContent;
+}
+
 // src/components/Panel.tsx
-import { useState as useState9, useContext, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback9, useContext, useState as useState9, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { motion as motion5, AnimatePresence as AnimatePresence4 } from "motion/react";
 
 // src/components/ShortcutListener.tsx
-import { createContext, useEffect as useEffect2, useRef as useRef2, useState, useCallback } from "react";
+import { createContext, useEffect as useEffect3, useRef as useRef3, useState as useState2, useCallback as useCallback2 } from "react";
 
 // src/shortcut-utils.ts
 function decimalsForStep(step) {
@@ -650,15 +1024,15 @@ function formatModifier(modifier) {
 }
 
 // src/components/ShortcutListener.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ShortcutContext = createContext({ activePanelId: null, activePath: null });
 function ShortcutListener({ children }) {
-  const [activeShortcut, setActiveShortcut] = useState({ activePanelId: null, activePath: null });
-  const activeKeysRef = useRef2(/* @__PURE__ */ new Set());
-  const isDraggingRef = useRef2(false);
-  const lastMouseXRef = useRef2(null);
-  const dragAccumulatorRef = useRef2(0);
-  const resolveActiveTarget = useCallback((interaction) => {
+  const [activeShortcut, setActiveShortcut] = useState2({ activePanelId: null, activePath: null });
+  const activeKeysRef = useRef3(/* @__PURE__ */ new Set());
+  const isDraggingRef = useRef3(false);
+  const lastMouseXRef = useRef3(null);
+  const dragAccumulatorRef = useRef3(0);
+  const resolveActiveTarget = useCallback2((interaction) => {
     for (const key of activeKeysRef.current) {
       const panels = DialStore.getPanels();
       for (const panel of panels) {
@@ -675,7 +1049,7 @@ function ShortcutListener({ children }) {
     }
     return null;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeyDown = (e) => {
       if (isInputFocused()) return;
       const key = e.key.toLowerCase();
@@ -833,150 +1207,11 @@ function ShortcutListener({ children }) {
       window.removeEventListener("blur", handleWindowBlur);
     };
   }, [resolveActiveTarget]);
-  return /* @__PURE__ */ 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
-import { useState as useState2, useRef as useRef3, useEffect as useEffect3 } from "react";
-import { motion, AnimatePresence } from "motion/react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar }) {
-  const [isOpen, setIsOpen] = useState2(defaultOpen);
-  const [isCollapsed, setIsCollapsed] = useState2(!defaultOpen);
-  const contentRef = useRef3(null);
-  const [contentHeight, setContentHeight] = useState2(void 0);
-  const [windowHeight, setWindowHeight] = useState2(typeof window !== "undefined" ? window.innerHeight : 800);
-  useEffect3(() => {
-    if (!isRoot) return;
-    const onResize = () => setWindowHeight(window.innerHeight);
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [isRoot]);
-  useEffect3(() => {
-    const el = contentRef.current;
-    if (!el) return;
-    const ro = new ResizeObserver(() => {
-      if (isOpen) {
-        const h = el.offsetHeight;
-        setContentHeight((prev) => prev === h ? prev : h);
-      }
-    });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [isOpen]);
-  const handleToggle = () => {
-    if (inline && isRoot) return;
-    const next = !isOpen;
-    setIsOpen(next);
-    if (next) {
-      setIsCollapsed(false);
-    } else {
-      setIsCollapsed(true);
-    }
-    onOpenChange?.(next);
-  };
-  const folderContent = /* @__PURE__ */ jsxs("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
-      /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-header-top", children: [
-        isRoot ? isOpen && /* @__PURE__ */ jsx2("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx2("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ jsx2("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ jsx2("span", { className: "dialkit-folder-title", children: title }) }),
-        isRoot && !inline && /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            className: "dialkit-panel-icon",
-            viewBox: "0 0 16 16",
-            fill: "none",
-            children: [
-              /* @__PURE__ */ jsx2("path", { opacity: "0.5", d: ICON_PANEL.path, fill: "currentColor" }),
-              ICON_PANEL.circles.map((c, i) => /* @__PURE__ */ jsx2("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }, i))
-            ]
-          }
-        ),
-        !isRoot && /* @__PURE__ */ jsx2(
-          motion.svg,
-          {
-            className: "dialkit-folder-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            initial: false,
-            animate: { rotate: isOpen ? 0 : 180 },
-            transition: { type: "spring", visualDuration: 0.35, bounce: 0.15 },
-            children: /* @__PURE__ */ jsx2("path", { d: ICON_CHEVRON })
-          }
-        )
-      ] }),
-      isRoot && toolbar && isOpen && /* @__PURE__ */ jsx2("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
-    ] }),
-    /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx2(
-      motion.div,
-      {
-        className: "dialkit-folder-content",
-        initial: isRoot ? void 0 : { height: 0, opacity: 0 },
-        animate: isRoot ? void 0 : { height: "auto", opacity: 1 },
-        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__ */ jsx2("div", { className: "dialkit-folder-inner", children })
-      }
-    ) })
-  ] });
-  if (isRoot) {
-    if (inline) {
-      return /* @__PURE__ */ jsx2("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
-    }
-    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__ */ jsx2(
-      motion.div,
-      {
-        className: "dialkit-panel-inner",
-        style: panelStyle,
-        onClick: !isOpen ? handleToggle : void 0,
-        "data-collapsed": isCollapsed,
-        whileTap: !isOpen ? { scale: 0.9 } : void 0,
-        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: folderContent
-      }
-    );
-  }
-  return folderContent;
+  return /* @__PURE__ */ jsx2(ShortcutContext.Provider, { value: activeShortcut, children });
 }
 
 // src/components/Slider.tsx
-import { useRef as useRef4, useState as useState3, useCallback as useCallback2, useEffect as useEffect4 } from "react";
+import { useRef as useRef4, useState as useState3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
 import { motion as motion2, useMotionValue, useTransform, animate } from "motion/react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var CLICK_THRESHOLD = 3;
@@ -1034,7 +1269,7 @@ function Slider({
       fillPercent.jump(percentage);
     }
   }, [percentage, isInteracting, fillPercent]);
-  const positionToValue = useCallback2(
+  const positionToValue = useCallback3(
     (clientX) => {
       const rect = wrapperRectRef.current;
       if (!rect) return value;
@@ -1047,11 +1282,11 @@ function Slider({
     },
     [min, max, value]
   );
-  const percentFromValue = useCallback2(
+  const percentFromValue = useCallback3(
     (v) => (v - min) / (max - min) * 100,
     [min, max]
   );
-  const computeRubberStretch = useCallback2(
+  const computeRubberStretch = useCallback3(
     (clientX, sign) => {
       const rect = wrapperRectRef.current;
       if (!rect) return 0;
@@ -1061,7 +1296,7 @@ function Slider({
     },
     []
   );
-  const handlePointerDown = useCallback2(
+  const handlePointerDown = useCallback3(
     (e) => {
       if (showInput) return;
       e.preventDefault();
@@ -1077,7 +1312,7 @@ function Slider({
     },
     [showInput]
   );
-  const handlePointerMove = useCallback2(
+  const handlePointerMove = useCallback3(
     (e) => {
       if (!isInteracting || !pointerDownPos.current) return;
       const dx = e.clientX - pointerDownPos.current.x;
@@ -1118,7 +1353,7 @@ function Slider({
       computeRubberStretch
     ]
   );
-  const handlePointerUp = useCallback2(
+  const handlePointerUp = useCallback3(
     (e) => {
       if (!isInteracting) return;
       if (isClickRef.current) {
@@ -1335,7 +1570,7 @@ function Slider({
 }
 
 // src/components/SegmentedControl.tsx
-import { useRef as useRef5, useState as useState4, useLayoutEffect, useCallback as useCallback3 } from "react";
+import { useRef as useRef5, useState as useState4, useLayoutEffect, useCallback as useCallback4 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
@@ -1345,7 +1580,7 @@ function SegmentedControl({
   const containerRef = useRef5(null);
   const hasAnimated = useRef5(false);
   const [pillStyle, setPillStyle] = useState4(null);
-  const measure = useCallback3(() => {
+  const measure = useCallback4(() => {
     const container = containerRef.current;
     if (!container) return;
     const activeButton = container.querySelector('[data-active="true"]');
@@ -1499,14 +1734,18 @@ function SpringVisualization({ spring, isSimpleMode }) {
 }
 
 // src/components/SpringControl.tsx
-import { useSyncExternalStore as useSyncExternalStore2, useRef as useRef6 } from "react";
+import { useCallback as useCallback5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function SpringControl({ panelId, path, label, spring, onChange }) {
-  const mode = useSyncExternalStore2(
-    (cb) => DialStore.subscribe(panelId, cb),
+  const subscribe = useCallback5(
+    (callback) => DialStore.subscribe(panelId, callback),
+    [panelId]
+  );
+  const getSnapshot = useCallback5(
     () => DialStore.getSpringMode(panelId, path),
-    () => DialStore.getSpringMode(panelId, path)
+    [panelId, path]
   );
+  const mode = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
   const isSimpleMode = mode === "simple";
   const cache = useRef6({
     simple: spring.visualDuration !== void 0 ? spring : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
@@ -1655,14 +1894,18 @@ function EasingVisualization({ easing }) {
 }
 
 // src/components/TransitionControl.tsx
-import { useSyncExternalStore as useSyncExternalStore3, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback6, useRef as useRef7, useState as useState5, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TransitionControl({ panelId, path, label, value, onChange }) {
-  const mode = useSyncExternalStore3(
-    (cb) => DialStore.subscribe(panelId, cb),
+  const subscribe = useCallback6(
+    (callback) => DialStore.subscribe(panelId, callback),
+    [panelId]
+  );
+  const getSnapshot = useCallback6(
     () => DialStore.getTransitionMode(panelId, path),
-    () => DialStore.getTransitionMode(panelId, path)
+    [panelId, path]
   );
+  const mode = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const isEasing = mode === "easing";
   const isSimpleSpring = mode === "simple";
   const cache = useRef7({
@@ -1801,9 +2044,29 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-import { useState as useState6, useRef as useRef8, useEffect as useEffect5, useCallback as useCallback4 } from "react";
+import { useState as useState6, useRef as useRef8, useEffect as useEffect5, useCallback as useCallback7 } from "react";
 import { createPortal } from "react-dom";
 import { motion as motion3, AnimatePresence as AnimatePresence2 } from "motion/react";
+
+// src/dropdown-position.ts
+function getDropdownPosition(trigger, portalRoot, options = {}) {
+  const { dropdownHeight = 0, gap = 4, allowAbove = true } = options;
+  const triggerRect = trigger.getBoundingClientRect();
+  const rootRect = portalRoot.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - triggerRect.bottom - gap;
+  const above = allowAbove && spaceBelow < dropdownHeight && triggerRect.top > spaceBelow;
+  return {
+    top: above ? triggerRect.top - rootRect.top - dropdownHeight - gap : triggerRect.bottom - rootRect.top + gap,
+    left: triggerRect.left - rootRect.left,
+    width: triggerRect.width,
+    above
+  };
+}
+function getDialKitPortalRoot(trigger) {
+  return trigger?.closest(".dialkit-root") ?? null;
+}
+
+// src/components/SelectControl.tsx
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function toTitleCase(s) {
   return s.replace(/\b\w/g, (c) => c.toUpperCase());
@@ -1821,23 +2084,14 @@ function SelectControl({ label, value, options, onChange }) {
   const [pos, setPos] = useState6(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
-  const updatePos = useCallback4(() => {
+  const updatePos = useCallback7(() => {
     const el = triggerRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
+    if (!el || !portalTarget) return;
     const dropdownHeight = 8 + normalized.length * 36;
-    const spaceBelow = window.innerHeight - rect.bottom - 4;
-    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
-    setPos({
-      top: above ? rect.top - 4 : rect.bottom + 4,
-      left: rect.left,
-      width: rect.width,
-      above
-    });
-  }, [normalized.length]);
+    setPos(getDropdownPosition(el, portalTarget, { dropdownHeight }));
+  }, [normalized.length, portalTarget]);
   useEffect5(() => {
-    const root = triggerRef.current?.closest(".dialkit-root");
-    setPortalTarget(root ?? document.body);
+    setPortalTarget(getDialKitPortalRoot(triggerRef.current) ?? document.body);
   }, []);
   useEffect5(() => {
     if (!isOpen) return;
@@ -1896,10 +2150,11 @@ function SelectControl({ label, value, options, onChange }) {
           exit: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
           transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
           style: {
-            position: "fixed",
+            position: "absolute",
             left: pos.left,
+            top: pos.top,
             width: pos.width,
-            ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
+            transformOrigin: pos.above ? "bottom" : "top"
           },
           children: normalized.map((option) => /* @__PURE__ */ jsx11(
             "button",
@@ -2000,7 +2255,7 @@ function expandShorthandHex(hex) {
 }
 
 // src/components/PresetManager.tsx
-import { useState as useState8, useRef as useRef10, useEffect as useEffect7, useCallback as useCallback5 } from "react";
+import { useState as useState8, useRef as useRef10, useEffect as useEffect7, useCallback as useCallback8 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { motion as motion4, AnimatePresence as AnimatePresence3 } from "motion/react";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2011,7 +2266,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
   const [pos, setPos] = useState8({ top: 0, left: 0, width: 0 });
   const hasPresets = presets.length > 0;
   const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = useCallback5(() => {
+  const open = useCallback8(() => {
     if (!hasPresets) return;
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
@@ -2019,8 +2274,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     }
     setIsOpen(true);
   }, [hasPresets]);
-  const close = useCallback5(() => setIsOpen(false), []);
-  const toggle = useCallback5(() => {
+  const close = useCallback8(() => setIsOpen(false), []);
+  const toggle = useCallback8(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
@@ -2128,16 +2383,20 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
 
 // src/components/Panel.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function Panel({ panel, defaultOpen = true, inline = false }) {
+function Panel({ panel, defaultOpen = true, inline = false, onOpenChange, variant = "root" }) {
   const [copied, setCopied] = useState9(false);
   const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
   const shortcutCtx = useContext(ShortcutContext);
   const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
-  const values = useSyncExternalStore4(
-    (cb) => DialStore.subscribe(panel.id, cb),
+  const subscribe = useCallback9(
+    (callback) => DialStore.subscribe(panel.id, callback),
+    [panel.id]
+  );
+  const getSnapshot = useCallback9(
     () => DialStore.getValues(panel.id),
-    () => DialStore.getValues(panel.id)
+    [panel.id]
   );
+  const values = useSyncExternalStore4(subscribe, getSnapshot, getSnapshot);
   const presets = DialStore.getPresets(panel.id);
   const activePresetId = DialStore.getActivePresetId(panel.id);
   const handleAddPreset = () => {
@@ -2157,6 +2416,10 @@ Apply these values as the new defaults in the useDialKit call.`;
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   };
+  const handleOpenChange = useCallback9((open) => {
+    setIsPanelOpen(open);
+    onOpenChange?.(open);
+  }, [onOpenChange]);
   const renderControl = (control) => {
     const value = values[control.path];
     switch (control.type) {
@@ -2330,13 +2593,83 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     )
   ] });
-  return /* @__PURE__ */ jsx14("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx14(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
+  if (variant === "section") {
+    return /* @__PURE__ */ jsxs13(Folder, { title: panel.name, defaultOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx14("div", { className: "dialkit-panel-section-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar }),
+      renderControls()
+    ] });
+  }
+  return /* @__PURE__ */ jsx14("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx14(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: handleOpenChange, toolbar, children: renderControls() }) });
+}
+
+// src/panel-drag.ts
+var PANEL_DRAG_THRESHOLD = 8;
+var COLLAPSED_PANEL_SIZE = 42;
+var DRAG_EXCLUSION_SELECTOR = [
+  ".dialkit-panel-icon",
+  ".dialkit-panel-toolbar",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "a",
+  '[role="button"]',
+  '[contenteditable="true"]'
+].join(",");
+function getPanelDragHandle(target, panel) {
+  if (!(target instanceof Element) || !panel) return null;
+  const inner = target.closest(".dialkit-panel-inner");
+  if (!inner || !panel.contains(inner)) return null;
+  if (inner.getAttribute("data-collapsed") === "true") {
+    return inner;
+  }
+  const header = target.closest(".dialkit-panel-header");
+  if (!header || !inner.contains(header)) return null;
+  if (target.closest(DRAG_EXCLUSION_SELECTOR)) return null;
+  return header;
+}
+function getPanelDragStart(pointerX, pointerY, panel) {
+  const rect = panel.getBoundingClientRect();
+  return {
+    pointerX,
+    pointerY,
+    elX: rect.left,
+    elY: rect.top
+  };
+}
+function getPanelDragOffset(start, pointerX, pointerY) {
+  return {
+    x: start.elX + pointerX - start.pointerX,
+    y: start.elY + pointerY - start.pointerY
+  };
+}
+function hasPanelDragMoved(start, pointerX, pointerY) {
+  const dx = pointerX - start.pointerX;
+  const dy = pointerY - start.pointerY;
+  return Math.hypot(dx, dy) >= PANEL_DRAG_THRESHOLD;
+}
+function getPanelOriginX(position, offset, viewportWidth = typeof window !== "undefined" ? window.innerWidth : void 0) {
+  if (offset && viewportWidth) {
+    return offset.x + COLLAPSED_PANEL_SIZE / 2 < viewportWidth / 2 ? "left" : "right";
+  }
+  return position.endsWith("left") ? "left" : "right";
+}
+function blockPanelDragClick(handle) {
+  const blocker = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+  };
+  handle.addEventListener("click", blocker, { capture: true, once: true });
+  window.setTimeout(() => {
+    handle.removeEventListener("click", blocker, true);
+  }, 0);
 }
 
 // src/components/DialRoot.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 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 }) {
+function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover", theme = "system", productionEnabled = isDevDefault, onOpenChange }) {
   if (!productionEnabled) return null;
   const [panels, setPanels] = useState10([]);
   const [mounted, setMounted] = useState10(false);
@@ -2348,6 +2681,9 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
   const draggingRef = useRef11(false);
   const dragStartRef = useRef11(null);
   const didDragRef = useRef11(false);
+  const dragTargetRef = useRef11(null);
+  const panelOpenStatesRef = useRef11(/* @__PURE__ */ new Map());
+  const rootOpenRef = useRef11(null);
   useEffect8(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2356,22 +2692,36 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     });
     return unsubscribe;
   }, []);
+  useEffect8(() => {
+    const fallbackOpen = inline || defaultOpen;
+    const nextStates = /* @__PURE__ */ new Map();
+    for (const panel of panels) {
+      nextStates.set(panel.id, panelOpenStatesRef.current.get(panel.id) ?? fallbackOpen);
+    }
+    panelOpenStatesRef.current = nextStates;
+    rootOpenRef.current = Array.from(nextStates.values()).some(Boolean);
+  }, [defaultOpen, inline, panels]);
   useEffect8(() => {
     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";
+      const inners = panelRef.current?.querySelectorAll(".dialkit-panel-inner");
+      if (!inners || inners.length === 0) return;
+      const collapsed = Array.from(inners).every(
+        (el) => el.getAttribute("data-collapsed") === "true"
+      );
+      const currentDragOffset = dragOffset;
       if (!collapsed) {
-        if (dragOffset) {
-          lastDragOffset.current = dragOffset;
-          const bubbleCenterX = dragOffset.x + 21;
+        if (currentDragOffset) {
+          lastDragOffset.current = currentDragOffset;
+          const bubbleCenterX = currentDragOffset.x + 21;
           const midX = window.innerWidth / 2;
           setActivePosition(bubbleCenterX < midX ? "top-left" : "top-right");
         } else {
           setActivePosition(position);
         }
         setDragOffset(null);
+      } else if (currentDragOffset) {
+        lastDragOffset.current = currentDragOffset;
       } else if (lastDragOffset.current) {
         setDragOffset(lastDragOffset.current);
       }
@@ -2379,46 +2729,51 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     observer.observe(panelRef.current, { subtree: true, attributes: true, attributeFilter: ["data-collapsed"] });
     return () => observer.disconnect();
   }, [inline, dragOffset, position]);
-  const handlePointerDown = useCallback6((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
-    };
+  const handlePointerDown = useCallback10((e) => {
+    const panel = panelRef.current;
+    const handle = getPanelDragHandle(e.target, panel);
+    if (!panel || !handle) return;
+    dragTargetRef.current = handle;
+    dragStartRef.current = getPanelDragStart(e.clientX, e.clientY, panel);
     didDragRef.current = false;
     draggingRef.current = true;
-    e.target.setPointerCapture(e.pointerId);
+    handle.setPointerCapture(e.pointerId);
   }, []);
-  const handlePointerMove = useCallback6((e) => {
+  const handlePointerMove = useCallback10((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;
+    if (!didDragRef.current && !hasPanelDragMoved(dragStartRef.current, e.clientX, e.clientY)) return;
     didDragRef.current = true;
-    setDragOffset({
-      x: dragStartRef.current.elX + dx,
-      y: dragStartRef.current.elY + dy
-    });
+    setDragOffset(getPanelDragOffset(dragStartRef.current, e.clientX, e.clientY));
   }, []);
-  const handlePointerUp = useCallback6((e) => {
+  const handlePointerUp = useCallback10((e) => {
     if (!draggingRef.current) return;
     draggingRef.current = false;
     dragStartRef.current = null;
+    const dragTarget = dragTargetRef.current;
+    if (dragTarget?.hasPointerCapture(e.pointerId)) {
+      dragTarget.releasePointerCapture(e.pointerId);
+    }
     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 (dragTarget) {
+        blockPanelDragClick(dragTarget);
       }
     }
+    dragTargetRef.current = null;
   }, []);
+  const handlePanelOpenChange = useCallback10((panelId, open) => {
+    panelOpenStatesRef.current.set(panelId, open);
+    const fallbackOpen = inline || defaultOpen;
+    const nextRootOpen = panels.some((panel) => panelOpenStatesRef.current.get(panel.id) ?? fallbackOpen);
+    if (rootOpenRef.current === nextRootOpen) return;
+    rootOpenRef.current = nextRootOpen;
+    onOpenChange?.(nextRootOpen);
+  }, [defaultOpen, inline, onOpenChange, panels]);
+  const handleRootOpenChange = useCallback10((open) => {
+    if (rootOpenRef.current === open) return;
+    rootOpenRef.current = open;
+    onOpenChange?.(open);
+  }, [onOpenChange]);
   if (!mounted || typeof window === "undefined") {
     return null;
   }
@@ -2431,18 +2786,51 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     right: "auto",
     bottom: "auto"
   } : void 0;
+  const originX = getPanelOriginX(activePosition, dragOffset);
+  const hasMultiplePanels = panels.length > 1;
   const content = /* @__PURE__ */ jsx15(ShortcutListener, { children: /* @__PURE__ */ jsx15("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx15(
     "div",
     {
       ref: panelRef,
       className: "dialkit-panel",
       "data-position": inline ? void 0 : dragOffset ? void 0 : activePosition,
+      "data-origin-x": inline ? void 0 : originX,
       "data-mode": mode,
+      "data-multiple": hasMultiplePanels ? "true" : void 0,
       style: dragStyle,
       onPointerDown: !inline ? handlePointerDown : void 0,
       onPointerMove: !inline ? handlePointerMove : void 0,
       onPointerUp: !inline ? handlePointerUp : void 0,
-      children: panels.map((panel) => /* @__PURE__ */ jsx15(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id))
+      onPointerCancel: !inline ? handlePointerUp : void 0,
+      children: hasMultiplePanels ? /* @__PURE__ */ jsx15("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx15(
+        Folder,
+        {
+          title: "DialKit",
+          defaultOpen: inline || defaultOpen,
+          isRoot: true,
+          inline,
+          onOpenChange: handleRootOpenChange,
+          panelHeightOffset: 2,
+          children: panels.map((panel) => /* @__PURE__ */ jsx15(
+            Panel,
+            {
+              panel,
+              defaultOpen: true,
+              variant: "section"
+            },
+            panel.id
+          ))
+        }
+      ) }) : panels.map((panel) => /* @__PURE__ */ jsx15(
+        Panel,
+        {
+          panel,
+          defaultOpen: inline || defaultOpen,
+          inline,
+          onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
+        },
+        panel.id
+      ))
     }
   ) }) });
   if (inline) {
@@ -2466,7 +2854,7 @@ function ButtonGroup({ buttons }) {
 }
 
 // src/components/ShortcutsMenu.tsx
-import { useState as useState11, useRef as useRef12, useEffect as useEffect9, useCallback as useCallback7 } from "react";
+import { useState as useState11, useRef as useRef12, useEffect as useEffect9, useCallback as useCallback11 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { motion as motion6, AnimatePresence as AnimatePresence5 } from "motion/react";
 import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2493,15 +2881,15 @@ function ShortcutsMenu({ panelId }) {
   const triggerRef = useRef12(null);
   const dropdownRef = useRef12(null);
   const [pos, setPos] = useState11({ top: 0, right: 0 });
-  const open = useCallback7(() => {
+  const open = useCallback11(() => {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
       setPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
     }
     setIsOpen(true);
   }, []);
-  const close = useCallback7(() => setIsOpen(false), []);
-  const toggle = useCallback7(() => {
+  const close = useCallback11(() => setIsOpen(false), []);
+  const toggle = useCallback11(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
@@ -2598,6 +2986,7 @@ export {
   TextControl,
   Toggle,
   TransitionControl,
-  useDialKit
+  useDialKit,
+  useDialKitController
 };
 //# sourceMappingURL=index.js.map