dialkit 1.2.1 → 1.3.0

package/dist/vue/index.js

@@ -3,6 +3,89 @@ import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 
 // 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();
@@ -13,87 +96,138 @@ var DialStoreClass = class {
     this.presets = /* @__PURE__ */ new Map();
     this.activePreset = /* @__PURE__ */ new Map();
     this.baseValues = /* @__PURE__ */ new Map();
-  }
-  registerPanel(id, name, config, shortcuts) {
+    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, 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) {
@@ -109,6 +243,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) {
@@ -167,6 +302,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;
   }
@@ -179,6 +315,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) {
@@ -191,6 +328,7 @@ var DialStoreClass = class {
     if (panel) {
       this.snapshots.set(panelId, { ...panel.values });
     }
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   getPresets(panelId) {
@@ -207,6 +345,7 @@ var DialStoreClass = class {
       this.snapshots.set(panelId, { ...panel.values });
     }
     this.activePreset.set(panelId, null);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   resolveShortcutTarget(key, modifier) {
@@ -237,6 +376,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;
@@ -466,21 +693,30 @@ var DialStore = new DialStoreClass();
 // src/vue/useDialKit.ts
 var dialKitInstance = 0;
 function useDialKit(name, config, options) {
-  const panelId = `${name}-${++dialKitInstance}`;
+  return useDialKitController(name, config, options).values;
+}
+function useDialKitController(name, config, options) {
+  const hasStableId = options?.id !== void 0;
+  const panelId = options?.id ?? `${name}-${++dialKitInstance}`;
   const configRef = shallowRef(config);
   const onActionRef = ref(options?.onAction);
   const shortcutsRef = shallowRef(options?.shortcuts);
-  const values = ref(DialStore.getValues(panelId));
+  const persistRef = shallowRef(options?.persist);
+  const flatValues = ref(DialStore.getValues(panelId));
   const mounted = ref(false);
   const serializedConfig = computed(() => JSON.stringify(config));
   const serializedShortcuts = computed(() => JSON.stringify(options?.shortcuts));
+  const serializedPersist = computed(() => JSON.stringify(options?.persist));
   let unsubscribeValues;
   let unsubscribeActions;
   const register = () => {
-    DialStore.registerPanel(panelId, name, configRef.value, shortcutsRef.value);
-    values.value = DialStore.getValues(panelId);
+    DialStore.registerPanel(panelId, name, configRef.value, shortcutsRef.value, {
+      retainOnUnmount: hasStableId,
+      persist: persistRef.value
+    });
+    flatValues.value = DialStore.getValues(panelId);
     unsubscribeValues = DialStore.subscribe(panelId, () => {
-      values.value = DialStore.getValues(panelId);
+      flatValues.value = DialStore.getValues(panelId);
     });
     unsubscribeActions = DialStore.subscribeActions(panelId, (action) => {
       onActionRef.value?.(action);
@@ -492,12 +728,19 @@ function useDialKit(name, config, options) {
   watch(() => options?.shortcuts, (next) => {
     shortcutsRef.value = next;
   });
-  watch([serializedConfig, serializedShortcuts], () => {
+  watch(() => options?.persist, (next) => {
+    persistRef.value = next;
+  });
+  watch([serializedConfig, serializedShortcuts, serializedPersist], () => {
     configRef.value = config;
     shortcutsRef.value = options?.shortcuts;
+    persistRef.value = options?.persist;
     if (mounted.value) {
-      DialStore.updatePanel(panelId, name, configRef.value, shortcutsRef.value);
-      values.value = DialStore.getValues(panelId);
+      DialStore.updatePanel(panelId, name, configRef.value, shortcutsRef.value, {
+        retainOnUnmount: hasStableId,
+        persist: persistRef.value
+      });
+      flatValues.value = DialStore.getValues(panelId);
     }
   });
   onMounted(register);
@@ -509,58 +752,22 @@ function useDialKit(name, config, options) {
     unsubscribeActions?.();
     DialStore.unregisterPanel(panelId);
   });
-  return computed(() => buildResolvedValues(configRef.value, values.value, ""));
-}
-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);
+  const values = computed(() => resolveDialValues(configRef.value, flatValues.value));
+  return {
+    values,
+    setValue(path, value) {
+      DialStore.updateValue(panelId, path, value);
+    },
+    setValues(nextValues) {
+      DialStore.updateValues(panelId, flattenDialValueUpdates(configRef.value, nextValues));
+    },
+    resetValues() {
+      DialStore.resetValues(panelId);
+    },
+    getValues() {
+      return resolveDialValues(configRef.value, DialStore.getValues(panelId));
     }
-  }
-  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/vue/directives/dialkit.ts
@@ -572,11 +779,11 @@ import {
 } from "vue";
 
 // src/vue/components/DialRoot.ts
-import { defineComponent as defineComponent15, h as h15, onMounted as onMounted10, onUnmounted as onUnmounted9, ref as ref13, Teleport as Teleport3 } from "vue";
+import { computed as computed5, defineComponent as defineComponent15, h as h15, nextTick as nextTick3, onMounted as onMounted10, onUnmounted as onUnmounted9, ref as ref13, Teleport as Teleport3 } from "vue";
 
-// src/vue/components/Panel.ts
-import { Fragment, defineComponent as defineComponent14, h as h14, onMounted as onMounted9, onUnmounted as onUnmounted8, ref as ref12 } from "vue";
-import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion-v";
+// src/vue/components/Folder.ts
+import { defineComponent, h, onMounted as onMounted2, onUnmounted as onUnmounted2, ref as ref2 } from "vue";
+import { AnimatePresence, motion } from "motion-v";
 
 // src/icons.ts
 var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
@@ -610,8 +817,6 @@ var ICON_PANEL = {
 };
 
 // src/vue/components/Folder.ts
-import { defineComponent, h, onMounted as onMounted2, onUnmounted as onUnmounted2, ref as ref2 } from "vue";
-import { AnimatePresence, motion } from "motion-v";
 var Folder = defineComponent({
   name: "DialKitFolder",
   props: {
@@ -623,6 +828,10 @@ var Folder = defineComponent({
       type: null,
       required: false,
       default: null
+    },
+    panelHeightOffset: {
+      type: Number,
+      default: 10
     }
   },
   emits: ["openChange"],
@@ -722,7 +931,8 @@ var Folder = defineComponent({
     };
     const folderContent = () => h("div", {
       ref: props.isRoot ? contentRef : void 0,
-      class: `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`
+      class: `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`,
+      "data-open": String(isOpen.value)
     }, [
       renderHeader(),
       renderContent()
@@ -734,7 +944,7 @@ var Folder = defineComponent({
         }
         const panelStyle = isOpen.value ? {
           width: 280,
-          height: contentHeight.value !== void 0 ? Math.min(contentHeight.value + 10, windowHeight.value - 32) : "auto",
+          height: contentHeight.value !== void 0 ? Math.min(contentHeight.value + props.panelHeightOffset, windowHeight.value - 32) : "auto",
           borderRadius: 14,
           boxShadow: "var(--dial-shadow)",
           cursor: void 0,
@@ -761,6 +971,10 @@ var Folder = defineComponent({
   }
 });
 
+// src/vue/components/Panel.ts
+import { Fragment, defineComponent as defineComponent14, h as h14, onMounted as onMounted9, onUnmounted as onUnmounted8, ref as ref12 } from "vue";
+import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion-v";
+
 // src/vue/components/Slider.ts
 import { defineComponent as defineComponent2, h as h2, computed as computed2, nextTick, onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref3, watch as watch2 } from "vue";
 import { animate, motionValue } from "motion-v";
@@ -1893,6 +2107,26 @@ var TextControl = defineComponent9({
 // src/vue/components/SelectControl.ts
 import { Teleport, defineComponent as defineComponent10, h as h10, onMounted as onMounted7, ref as ref8, watch as watch4 } from "vue";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion-v";
+
+// 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/vue/components/SelectControl.ts
 function toTitleCase(value) {
   return value.replace(/\b\w/g, (char) => char.toUpperCase());
 }
@@ -1921,17 +2155,9 @@ var SelectControl = defineComponent10({
     const normalizedOptions = () => normalizeOptions(props.options);
     const selectedLabel = () => normalizedOptions().find((option) => option.value === props.value)?.label ?? props.value;
     const updatePos = () => {
-      if (!triggerRef.value) return;
-      const rect = triggerRef.value.getBoundingClientRect();
+      if (!triggerRef.value || !portalTarget.value) return;
       const dropdownHeight = 8 + normalizedOptions().length * 36;
-      const spaceBelow = window.innerHeight - rect.bottom - 4;
-      const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
-      pos.value = {
-        top: above ? rect.top - 4 : rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-        above
-      };
+      pos.value = getDropdownPosition(triggerRef.value, portalTarget.value, { dropdownHeight });
     };
     const openDropdown = () => {
       updatePos();
@@ -1975,8 +2201,7 @@ var SelectControl = defineComponent10({
       });
     });
     onMounted7(() => {
-      const root = triggerRef.value?.closest(".dialkit-root");
-      portalTarget.value = root ?? document.body;
+      portalTarget.value = getDialKitPortalRoot(triggerRef.value) ?? document.body;
     });
     return () => h10("div", { class: "dialkit-select-row" }, [
       h10("button", {
@@ -2012,16 +2237,11 @@ var SelectControl = defineComponent10({
             exit: { opacity: 0, y: pos.value.above ? 8 : -8, scale: 0.95 },
             transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
             style: {
-              position: "fixed",
+              position: "absolute",
               left: `${pos.value.left}px`,
+              top: `${pos.value.top}px`,
               width: `${pos.value.width}px`,
-              ...pos.value.above ? {
-                bottom: `${window.innerHeight - pos.value.top}px`,
-                transformOrigin: "bottom"
-              } : {
-                top: `${pos.value.top}px`,
-                transformOrigin: "top"
-              }
+              transformOrigin: pos.value.above ? "bottom" : "top"
             }
           }, normalizedOptions().map((option) => h10("button", {
             key: option.value,
@@ -2478,9 +2698,14 @@ var Panel = defineComponent14({
     inline: {
       type: Boolean,
       default: false
+    },
+    variant: {
+      type: String,
+      default: "root"
     }
   },
-  setup(props) {
+  emits: ["openChange"],
+  setup(props, { emit }) {
     const shortcutCtx = useShortcutContext();
     const values = ref12(DialStore.getValues(props.panel.id));
     const presets = ref12(DialStore.getPresets(props.panel.id));
@@ -2529,6 +2754,9 @@ Apply these values as the new defaults in the useDialKit call.`;
         copied.value = false;
       }, 1500);
     };
+    const handleOpenChange = (open) => {
+      emit("openChange", open);
+    };
     const renderControl = (control) => {
       const value = values.value[control.path];
       switch (control.type) {
@@ -2697,13 +2925,29 @@ Apply these values as the new defaults in the useDialKit call.`;
           "Copy"
         ])
       ]);
+      if (props.variant === "section") {
+        return h14(Folder, {
+          title: props.panel.name,
+          defaultOpen: props.defaultOpen,
+          onOpenChange: handleOpenChange
+        }, {
+          default: () => [
+            h14("div", {
+              class: "dialkit-panel-section-toolbar",
+              onClick: (event) => event.stopPropagation()
+            }, [toolbarNode]),
+            ...props.panel.controls.map(renderControl)
+          ]
+        });
+      }
       return h14("div", { class: "dialkit-panel-wrapper" }, [
         h14(Folder, {
           title: props.panel.name,
           defaultOpen: props.defaultOpen,
           isRoot: true,
           inline: props.inline,
-          toolbar: () => toolbarNode
+          toolbar: () => toolbarNode,
+          onOpenChange: handleOpenChange
         }, {
           default: () => props.panel.controls.map(renderControl)
         })
@@ -2712,6 +2956,70 @@ Apply these values as the new defaults in the useDialKit call.`;
   }
 });
 
+// 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/vue/components/DialRoot.ts
 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;
 var DialRoot = defineComponent15({
@@ -2738,31 +3046,162 @@ var DialRoot = defineComponent15({
       default: isDevDefault
     }
   },
-  setup(props) {
+  emits: ["openChange"],
+  setup(props, { emit }) {
     const panels = ref13([]);
     const mounted = ref13(false);
+    const panelRef = ref13(null);
+    const dragOffset = ref13(null);
+    const activePosition = ref13(props.position);
     let unsubscribe;
+    let observer;
+    let lastDragOffset = null;
+    let dragging = false;
+    let dragStart = null;
+    let didDrag = false;
+    let dragTarget = null;
+    let panelOpenStates = /* @__PURE__ */ new Map();
+    let rootOpen;
+    const syncPanelOpenStates = () => {
+      const fallbackOpen = props.mode === "inline" || props.defaultOpen;
+      const nextStates = /* @__PURE__ */ new Map();
+      for (const panel of panels.value) {
+        nextStates.set(panel.id, panelOpenStates.get(panel.id) ?? fallbackOpen);
+      }
+      panelOpenStates = nextStates;
+      rootOpen = Array.from(nextStates.values()).some(Boolean);
+    };
+    const connectObserver = () => {
+      if (observer || props.mode === "inline" || !panelRef.value) return;
+      observer = new MutationObserver(() => {
+        const inners = panelRef.value?.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.value;
+        if (!collapsed) {
+          if (currentDragOffset) {
+            lastDragOffset = currentDragOffset;
+            const bubbleCenterX = currentDragOffset.x + 21;
+            activePosition.value = bubbleCenterX < window.innerWidth / 2 ? "top-left" : "top-right";
+          } else {
+            activePosition.value = props.position;
+          }
+          dragOffset.value = null;
+        } else if (currentDragOffset) {
+          lastDragOffset = currentDragOffset;
+        } else if (lastDragOffset) {
+          dragOffset.value = lastDragOffset;
+        }
+      });
+      observer.observe(panelRef.value, { subtree: true, attributes: true, attributeFilter: ["data-collapsed"] });
+    };
+    const handlePointerDown = (event) => {
+      const panel = panelRef.value;
+      const handle = getPanelDragHandle(event.target, panel);
+      if (!panel || !handle) return;
+      dragTarget = handle;
+      dragStart = getPanelDragStart(event.clientX, event.clientY, panel);
+      didDrag = false;
+      dragging = true;
+      handle.setPointerCapture(event.pointerId);
+    };
+    const handlePointerMove = (event) => {
+      if (!dragging || !dragStart) return;
+      if (!didDrag && !hasPanelDragMoved(dragStart, event.clientX, event.clientY)) return;
+      didDrag = true;
+      dragOffset.value = getPanelDragOffset(dragStart, event.clientX, event.clientY);
+    };
+    const handlePointerUp = (event) => {
+      if (!dragging) return;
+      dragging = false;
+      dragStart = null;
+      const handle = dragTarget;
+      if (handle?.hasPointerCapture(event.pointerId)) {
+        handle.releasePointerCapture(event.pointerId);
+      }
+      if (didDrag) {
+        event.stopPropagation();
+        if (handle) {
+          blockPanelDragClick(handle);
+        }
+      }
+      dragTarget = null;
+    };
+    const handlePanelOpenChange = (panelId, open) => {
+      panelOpenStates.set(panelId, open);
+      const fallbackOpen = props.mode === "inline" || props.defaultOpen;
+      const nextRootOpen = panels.value.some((panel) => panelOpenStates.get(panel.id) ?? fallbackOpen);
+      if (rootOpen === nextRootOpen) return;
+      rootOpen = nextRootOpen;
+      emit("openChange", nextRootOpen);
+    };
+    const handleRootOpenChange = (open) => {
+      if (rootOpen === open) return;
+      rootOpen = open;
+      emit("openChange", open);
+    };
+    const getDragStyle = () => dragOffset.value ? {
+      top: `${dragOffset.value.y}px`,
+      left: `${dragOffset.value.x}px`,
+      right: "auto",
+      bottom: "auto"
+    } : void 0;
+    const originX = computed5(() => props.mode === "inline" ? void 0 : getPanelOriginX(activePosition.value, dragOffset.value));
     onMounted10(() => {
       mounted.value = true;
       panels.value = DialStore.getPanels();
+      syncPanelOpenStates();
       unsubscribe = DialStore.subscribeGlobal(() => {
         panels.value = DialStore.getPanels();
+        syncPanelOpenStates();
       });
+      nextTick3(connectObserver);
     });
     onUnmounted9(() => {
       unsubscribe?.();
+      observer?.disconnect();
     });
     const renderContent = () => h15(ShortcutListener, null, {
       default: () => h15("div", { class: "dialkit-root", "data-mode": props.mode, "data-theme": props.theme }, [
         h15("div", {
+          ref: (el) => {
+            panelRef.value = el;
+            connectObserver();
+          },
           class: "dialkit-panel",
-          "data-position": props.mode === "inline" ? void 0 : props.position,
-          "data-mode": props.mode
-        }, panels.value.map((panel) => h15(Panel, {
+          "data-position": props.mode === "inline" ? void 0 : dragOffset.value ? void 0 : activePosition.value,
+          "data-origin-x": originX.value,
+          "data-mode": props.mode,
+          "data-multiple": panels.value.length > 1 ? "true" : void 0,
+          style: getDragStyle(),
+          onPointerdown: props.mode === "inline" ? void 0 : handlePointerDown,
+          onPointermove: props.mode === "inline" ? void 0 : handlePointerMove,
+          onPointerup: props.mode === "inline" ? void 0 : handlePointerUp,
+          onPointercancel: props.mode === "inline" ? void 0 : handlePointerUp
+        }, panels.value.length > 1 ? [
+          h15("div", { class: "dialkit-panel-wrapper" }, [
+            h15(Folder, {
+              title: "DialKit",
+              defaultOpen: props.mode === "inline" || props.defaultOpen,
+              isRoot: true,
+              inline: props.mode === "inline",
+              onOpenChange: handleRootOpenChange,
+              panelHeightOffset: 2
+            }, {
+              default: () => panels.value.map((panel) => h15(Panel, {
+                key: panel.id,
+                panel,
+                defaultOpen: true,
+                variant: "section"
+              }))
+            })
+          ])
+        ] : panels.value.map((panel) => h15(Panel, {
           key: panel.id,
           panel,
           defaultOpen: props.mode === "inline" || props.defaultOpen,
-          inline: props.mode === "inline"
+          inline: props.mode === "inline",
+          onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
         })))
       ])
     });
@@ -3008,6 +3447,7 @@ export {
   Toggle,
   TransitionControl,
   useDialKit,
+  useDialKitController,
   useShortcutContext,
   vDialKit
 };