dialkit 1.2.1 → 1.3.0

package/dist/solid/index.js

@@ -3,6 +3,89 @@ import { createSignal, createMemo, onMount, onCleanup, createUniqueId } from "so
 
 // 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();
+    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) {
@@ -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;
@@ -465,16 +692,23 @@ var DialStore = new DialStoreClass();
 
 // src/solid/createDialKit.ts
 function createDialKit(name, config, options) {
+  return createDialKitController(name, config, options).values;
+}
+function createDialKitController(name, config, options) {
   const id = createUniqueId();
-  const panelId = `${name}-${id}`;
-  const [values, setValues] = createSignal(
+  const hasStableId = options?.id !== void 0;
+  const panelId = options?.id ?? `${name}-${id}`;
+  const [flatValues, setFlatValues] = createSignal(
     DialStore.getValues(panelId)
   );
   onMount(() => {
-    DialStore.registerPanel(panelId, name, config, options?.shortcuts);
-    setValues(DialStore.getValues(panelId));
+    DialStore.registerPanel(panelId, name, config, options?.shortcuts, {
+      retainOnUnmount: hasStableId,
+      persist: options?.persist
+    });
+    setFlatValues(DialStore.getValues(panelId));
     const unsubValues = DialStore.subscribe(panelId, () => {
-      setValues(DialStore.getValues(panelId));
+      setFlatValues(DialStore.getValues(panelId));
     });
     const unsubActions = options?.onAction ? DialStore.subscribeActions(panelId, options.onAction) : void 0;
     onCleanup(() => {
@@ -483,65 +717,36 @@ function createDialKit(name, config, options) {
       DialStore.unregisterPanel(panelId);
     });
   });
-  return createMemo(() => 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)) {
-      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 = createMemo(() => resolveDialValues(config, flatValues()));
+  return {
+    values,
+    setValue(path, value) {
+      DialStore.updateValue(panelId, path, value);
+    },
+    setValues(nextValues) {
+      DialStore.updateValues(panelId, flattenDialValueUpdates(config, nextValues));
+    },
+    resetValues() {
+      DialStore.resetValues(panelId);
+    },
+    getValues() {
+      return resolveDialValues(config, 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 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/solid/components/DialRoot.tsx
 import { template as _$template12 } from "solid-js/web";
-import { memo as _$memo8 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents9 } from "solid-js/web";
+import { style as _$style3 } from "solid-js/web";
 import { setAttribute as _$setAttribute9 } from "solid-js/web";
 import { effect as _$effect11 } from "solid-js/web";
 import { insert as _$insert12 } from "solid-js/web";
 import { createComponent as _$createComponent11 } from "solid-js/web";
-import { createSignal as createSignal11, onMount as onMount8, onCleanup as onCleanup9, Show as Show8, For as For5 } from "solid-js";
+import { memo as _$memo8 } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { use as _$use8 } from "solid-js/web";
+import { createEffect as createEffect8, createSignal as createSignal11, onCleanup as onCleanup9, onMount as onMount8, Show as Show8, For as For5 } from "solid-js";
 import { Portal as Portal3 } from "solid-js/web";
 
 // src/solid/components/ShortcutListener.tsx
@@ -862,17 +1067,19 @@ function ShortcutListener(props) {
   });
 }
 
-// src/solid/components/Panel.tsx
-import { template as _$template11 } from "solid-js/web";
-import { delegateEvents as _$delegateEvents8 } from "solid-js/web";
-import { setAttribute as _$setAttribute8 } from "solid-js/web";
-import { effect as _$effect10 } from "solid-js/web";
-import { use as _$use7 } from "solid-js/web";
-import { insert as _$insert11 } from "solid-js/web";
-import { createComponent as _$createComponent10 } from "solid-js/web";
-import { memo as _$memo7 } from "solid-js/web";
-import { createSignal as createSignal10, createEffect as createEffect7, onMount as onMount7, onCleanup as onCleanup8, For as For4 } from "solid-js";
-import { animate as animate5 } from "motion";
+// src/solid/components/Folder.tsx
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { createComponent as _$createComponent2 } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { createSignal as createSignal3, createEffect, onCleanup as onCleanup3, Show } from "solid-js";
+import { animate } from "motion";
 
 // src/icons.ts
 var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
@@ -906,18 +1113,6 @@ var ICON_PANEL = {
 };
 
 // src/solid/components/Folder.tsx
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-import { style as _$style } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { createComponent as _$createComponent2 } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-import { use as _$use } from "solid-js/web";
-import { createSignal as createSignal3, createEffect, onCleanup as onCleanup3, Show } from "solid-js";
-import { animate } from "motion";
 var _tmpl$ = /* @__PURE__ */ _$template(`<div class=dialkit-panel-toolbar>`);
 var _tmpl$2 = /* @__PURE__ */ _$template(`<div class=dialkit-folder-content><div class=dialkit-folder-inner>`);
 var _tmpl$3 = /* @__PURE__ */ _$template(`<div><div><div class=dialkit-folder-header-top>`);
@@ -1055,17 +1250,17 @@ function Folder(props) {
       return () => _c$2() && (() => {
         var _el$1 = _tmpl$6(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling;
         _$effect((_p$) => {
-          var _v$3 = ICON_PANEL.path, _v$4 = ICON_PANEL.circles[0].cx, _v$5 = ICON_PANEL.circles[0].cy, _v$6 = ICON_PANEL.circles[0].r, _v$7 = ICON_PANEL.circles[1].cx, _v$8 = ICON_PANEL.circles[1].cy, _v$9 = ICON_PANEL.circles[1].r, _v$0 = ICON_PANEL.circles[2].cx, _v$1 = ICON_PANEL.circles[2].cy, _v$10 = ICON_PANEL.circles[2].r;
-          _v$3 !== _p$.e && _$setAttribute(_el$10, "d", _p$.e = _v$3);
-          _v$4 !== _p$.t && _$setAttribute(_el$11, "cx", _p$.t = _v$4);
-          _v$5 !== _p$.a && _$setAttribute(_el$11, "cy", _p$.a = _v$5);
-          _v$6 !== _p$.o && _$setAttribute(_el$11, "r", _p$.o = _v$6);
-          _v$7 !== _p$.i && _$setAttribute(_el$12, "cx", _p$.i = _v$7);
-          _v$8 !== _p$.n && _$setAttribute(_el$12, "cy", _p$.n = _v$8);
-          _v$9 !== _p$.s && _$setAttribute(_el$12, "r", _p$.s = _v$9);
-          _v$0 !== _p$.h && _$setAttribute(_el$13, "cx", _p$.h = _v$0);
-          _v$1 !== _p$.r && _$setAttribute(_el$13, "cy", _p$.r = _v$1);
-          _v$10 !== _p$.d && _$setAttribute(_el$13, "r", _p$.d = _v$10);
+          var _v$4 = ICON_PANEL.path, _v$5 = ICON_PANEL.circles[0].cx, _v$6 = ICON_PANEL.circles[0].cy, _v$7 = ICON_PANEL.circles[0].r, _v$8 = ICON_PANEL.circles[1].cx, _v$9 = ICON_PANEL.circles[1].cy, _v$0 = ICON_PANEL.circles[1].r, _v$1 = ICON_PANEL.circles[2].cx, _v$10 = ICON_PANEL.circles[2].cy, _v$11 = ICON_PANEL.circles[2].r;
+          _v$4 !== _p$.e && _$setAttribute(_el$10, "d", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setAttribute(_el$11, "cx", _p$.t = _v$5);
+          _v$6 !== _p$.a && _$setAttribute(_el$11, "cy", _p$.a = _v$6);
+          _v$7 !== _p$.o && _$setAttribute(_el$11, "r", _p$.o = _v$7);
+          _v$8 !== _p$.i && _$setAttribute(_el$12, "cx", _p$.i = _v$8);
+          _v$9 !== _p$.n && _$setAttribute(_el$12, "cy", _p$.n = _v$9);
+          _v$0 !== _p$.s && _$setAttribute(_el$12, "r", _p$.s = _v$0);
+          _v$1 !== _p$.h && _$setAttribute(_el$13, "cx", _p$.h = _v$1);
+          _v$10 !== _p$.r && _$setAttribute(_el$13, "cy", _p$.r = _v$10);
+          _v$11 !== _p$.d && _$setAttribute(_el$13, "r", _p$.d = _v$11);
           return _p$;
         }, {
           e: void 0,
@@ -1139,13 +1334,15 @@ function Folder(props) {
       }
     }), null);
     _$effect((_p$) => {
-      var _v$ = `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`, _v$2 = `dialkit-folder-header ${props.isRoot ? "dialkit-panel-header" : ""}`;
+      var _v$ = `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`, _v$2 = String(isOpen()), _v$3 = `dialkit-folder-header ${props.isRoot ? "dialkit-panel-header" : ""}`;
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && _$className(_el$2, _p$.t = _v$2);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-open", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$className(_el$2, _p$.a = _v$3);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
     return _el$;
   })();
@@ -1173,7 +1370,7 @@ function Folder(props) {
     createEffect(() => {
       if (!panelRef) return;
       const open = isOpen();
-      const measuredOpenHeight = contentHeight() !== void 0 ? Math.min(contentHeight() + 10, windowHeight() - 32) : panelRef.getBoundingClientRect().height;
+      const measuredOpenHeight = contentHeight() !== void 0 ? Math.min(contentHeight() + (props.panelHeightOffset ?? 10), windowHeight() - 32) : panelRef.getBoundingClientRect().height;
       const target = {
         width: open ? 280 : 42,
         height: open ? measuredOpenHeight : 42,
@@ -1270,6 +1467,18 @@ function Folder(props) {
 }
 _$delegateEvents(["click", "pointerdown", "pointerup"]);
 
+// src/solid/components/Panel.tsx
+import { template as _$template11 } from "solid-js/web";
+import { delegateEvents as _$delegateEvents8 } from "solid-js/web";
+import { setAttribute as _$setAttribute8 } from "solid-js/web";
+import { effect as _$effect10 } from "solid-js/web";
+import { use as _$use7 } from "solid-js/web";
+import { insert as _$insert11 } from "solid-js/web";
+import { createComponent as _$createComponent10 } from "solid-js/web";
+import { memo as _$memo7 } from "solid-js/web";
+import { createSignal as createSignal10, createEffect as createEffect7, onMount as onMount7, onCleanup as onCleanup8, For as For4 } from "solid-js";
+import { animate as animate5 } from "motion";
+
 // src/solid/components/Slider.tsx
 import { template as _$template2 } from "solid-js/web";
 import { delegateEvents as _$delegateEvents2 } from "solid-js/web";
@@ -2067,6 +2276,26 @@ import { use as _$use4 } from "solid-js/web";
 import { createSignal as createSignal7, createEffect as createEffect4, onMount as onMount5, onCleanup as onCleanup6, Show as Show5, For as For2 } from "solid-js";
 import { Portal } from "solid-js/web";
 import { animate as animate3 } from "motion";
+
+// 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/solid/components/SelectControl.tsx
 var _tmpl$16 = /* @__PURE__ */ _$template8(`<div class=dialkit-select-dropdown>`);
 var _tmpl$26 = /* @__PURE__ */ _$template8(`<div class=dialkit-select-row><button class=dialkit-select-trigger><span class=dialkit-select-label></span><div class=dialkit-select-right><span class=dialkit-select-value></span><svg class=dialkit-select-chevron viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path>`);
 var _tmpl$35 = /* @__PURE__ */ _$template8(`<button class=dialkit-select-option>`);
@@ -2092,8 +2321,7 @@ function SelectControl(props) {
   const normalized = () => normalizeOptions(props.options);
   const selectedOption = () => normalized().find((o) => o.value === props.value);
   onMount5(() => {
-    const root = triggerRef?.closest(".dialkit-root");
-    setPortalTarget(root ?? document.body);
+    setPortalTarget(getDialKitPortalRoot(triggerRef) ?? document.body);
     if (chevronRef) {
       chevronRef.style.transform = `rotate(${isOpen() ? 180 : 0}deg)`;
     }
@@ -2115,17 +2343,12 @@ function SelectControl(props) {
     });
   });
   const updatePos = () => {
-    if (!triggerRef) return;
-    const rect = triggerRef.getBoundingClientRect();
+    const root = portalTarget();
+    if (!triggerRef || !root) 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
-    });
+    setPos(getDropdownPosition(triggerRef, root, {
+      dropdownHeight
+    }));
   };
   const openDropdown = () => {
     closeAnim?.stop();
@@ -2179,16 +2402,11 @@ function SelectControl(props) {
     const p = pos();
     if (!p) return {};
     return {
-      position: "fixed",
+      position: "absolute",
       left: `${p.left}px`,
+      top: `${p.top}px`,
       width: `${p.width}px`,
-      ...p.above ? {
-        bottom: `${window.innerHeight - p.top}px`,
-        "transform-origin": "bottom"
-      } : {
-        top: `${p.top}px`,
-        "transform-origin": "top"
-      }
+      "transform-origin": p.above ? "bottom" : "top"
     };
   };
   return (() => {
@@ -2362,7 +2580,7 @@ import { use as _$use6 } from "solid-js/web";
 import { createSignal as createSignal9, createEffect as createEffect6, onMount as onMount6, onCleanup as onCleanup7, Show as Show7, For as For3 } from "solid-js";
 import { Portal as Portal2 } from "solid-js/web";
 import { animate as animate4 } from "motion";
-var _tmpl$18 = /* @__PURE__ */ _$template10(`<div class="dialkit-root dialkit-preset-dropdown"style=position:fixed><div class=dialkit-preset-item><span class=dialkit-preset-name>Version 1`);
+var _tmpl$18 = /* @__PURE__ */ _$template10(`<div class="dialkit-root dialkit-preset-dropdown"style=position:absolute><div class=dialkit-preset-item><span class=dialkit-preset-name>Version 1`);
 var _tmpl$28 = /* @__PURE__ */ _$template10(`<div class=dialkit-preset-manager><button class=dialkit-preset-trigger><span class=dialkit-preset-label></span><svg class=dialkit-select-chevron viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path>`);
 var _tmpl$37 = /* @__PURE__ */ _$template10(`<div class=dialkit-preset-item><span class=dialkit-preset-name></span><button class=dialkit-preset-delete title="Delete preset"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path></path><path></path><path></path><path></path><path>`);
 function PresetManager(props) {
@@ -2382,8 +2600,7 @@ function PresetManager(props) {
   const hasPresets = () => props.presets.length > 0;
   const activePreset = () => props.presets.find((p) => p.id === props.activePresetId);
   onMount6(() => {
-    const root = triggerRef?.closest(".dialkit-root");
-    setPortalTarget(root ?? document.body);
+    setPortalTarget(getDialKitPortalRoot(triggerRef) ?? document.body);
     if (chevronRef) {
       chevronRef.style.transform = `rotate(${isOpen() ? 180 : 0}deg)`;
       chevronRef.style.opacity = String(hasPresets() ? 0.6 : 0.25);
@@ -2408,13 +2625,11 @@ function PresetManager(props) {
     });
   });
   const updatePos = () => {
-    const rect = triggerRef?.getBoundingClientRect();
-    if (!rect) return;
-    setPos({
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    });
+    const root = portalTarget();
+    if (!triggerRef || !root) return;
+    setPos(getDropdownPosition(triggerRef, root, {
+      allowAbove: false
+    }));
   };
   const openDropdown = () => {
     if (!hasPresets()) return;
@@ -2586,7 +2801,8 @@ _$delegateEvents7(["click"]);
 var _tmpl$19 = /* @__PURE__ */ _$template11(`<button class=dialkit-button>`);
 var _tmpl$29 = /* @__PURE__ */ _$template11(`<button class=dialkit-toolbar-add title="Add preset"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path></path><path></path><path></path><path></path><path>`);
 var _tmpl$38 = /* @__PURE__ */ _$template11(`<button class=dialkit-toolbar-copy title="Copy parameters"><span class=dialkit-toolbar-copy-icon-wrap><span class=dialkit-toolbar-copy-icon style=opacity:1;transform:scale(1);filter:blur(0px)><svg viewBox="0 0 24 24"fill=none width=16 height=16><path stroke=currentColor stroke-width=2 stroke-linejoin=round></path><path fill=currentColor></path><path stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg></span><span class=dialkit-toolbar-copy-icon style=opacity:0;transform:scale(0.5);filter:blur(4px)><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round width=16 height=16><path></path></svg></span></span>Copy`);
-var _tmpl$43 = /* @__PURE__ */ _$template11(`<div class=dialkit-panel-wrapper>`);
+var _tmpl$43 = /* @__PURE__ */ _$template11(`<div class=dialkit-panel-section-toolbar>`);
+var _tmpl$52 = /* @__PURE__ */ _$template11(`<div class=dialkit-panel-wrapper>`);
 function Panel(props) {
   const [copied, setCopied] = createSignal10(false);
   const [isPanelOpen, setIsPanelOpen] = createSignal10(props.defaultOpen ?? true);
@@ -2701,6 +2917,10 @@ Apply these values as the new defaults in the createDialKit call.`;
       scale: 1
     }, tapTransition);
   };
+  const handleOpenChange = (open) => {
+    setIsPanelOpen(open);
+    props.onOpenChange?.(open);
+  };
   const renderControl = (control) => {
     const value = () => values()[control.path];
     switch (control.type) {
@@ -2894,9 +3114,28 @@ Apply these values as the new defaults in the createDialKit call.`;
     });
     return _el$9;
   })()];
+  if (props.variant === "section") {
+    return _$createComponent10(Folder, {
+      get title() {
+        return props.panel.name;
+      },
+      get defaultOpen() {
+        return props.defaultOpen ?? true;
+      },
+      onOpenChange: handleOpenChange,
+      get children() {
+        return [(() => {
+          var _el$17 = _tmpl$43();
+          _el$17.$$click = (e) => e.stopPropagation();
+          _$insert11(_el$17, toolbar);
+          return _el$17;
+        })(), _$memo7(() => renderControls())];
+      }
+    });
+  }
   return (() => {
-    var _el$17 = _tmpl$43();
-    _$insert11(_el$17, _$createComponent10(Folder, {
+    var _el$18 = _tmpl$52();
+    _$insert11(_el$18, _$createComponent10(Folder, {
       get title() {
         return props.panel.name;
       },
@@ -2907,25 +3146,100 @@ Apply these values as the new defaults in the createDialKit call.`;
       get inline() {
         return props.inline ?? false;
       },
-      onOpenChange: setIsPanelOpen,
+      onOpenChange: handleOpenChange,
       toolbar,
       get children() {
         return renderControls();
       }
     }));
-    return _el$17;
+    return _el$18;
   })();
 }
 _$delegateEvents8(["click", "pointerdown", "pointerup"]);
 
+// 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/solid/components/DialRoot.tsx
-var _tmpl$20 = /* @__PURE__ */ _$template12(`<div class=dialkit-root><div class=dialkit-panel>`);
+var _tmpl$20 = /* @__PURE__ */ _$template12(`<div class=dialkit-panel-wrapper>`);
+var _tmpl$210 = /* @__PURE__ */ _$template12(`<div class=dialkit-root><div class=dialkit-panel>`);
 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(props) {
   if ((props.productionEnabled ?? isDevDefault) === false) return null;
   const [panels, setPanels] = createSignal11([]);
   const [mounted, setMounted] = createSignal11(false);
+  const [dragOffset, setDragOffset] = createSignal11(null);
+  const [activePosition, setActivePosition] = createSignal11(props.position ?? "top-right");
   const inline = () => (props.mode ?? "popover") === "inline";
+  let panelRef;
+  let lastDragOffset = null;
+  let dragging = false;
+  let dragStart = null;
+  let didDrag = false;
+  let dragTarget = null;
+  let panelOpenStates = /* @__PURE__ */ new Map();
+  let rootOpen;
   onMount8(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2934,35 +3248,175 @@ function DialRoot(props) {
     });
     onCleanup9(unsub);
   });
+  createEffect8(() => {
+    const fallbackOpen = inline() || (props.defaultOpen ?? true);
+    const nextStates = /* @__PURE__ */ new Map();
+    for (const panel of panels()) {
+      nextStates.set(panel.id, panelOpenStates.get(panel.id) ?? fallbackOpen);
+    }
+    panelOpenStates = nextStates;
+    rootOpen = Array.from(nextStates.values()).some(Boolean);
+  });
+  createEffect8(() => {
+    if (!mounted() || inline() || !panelRef) return;
+    const observer = new MutationObserver(() => {
+      const inners = panelRef?.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 (currentDragOffset) {
+          lastDragOffset = currentDragOffset;
+          const bubbleCenterX = currentDragOffset.x + 21;
+          setActivePosition(bubbleCenterX < window.innerWidth / 2 ? "top-left" : "top-right");
+        } else {
+          setActivePosition(props.position ?? "top-right");
+        }
+        setDragOffset(null);
+      } else if (currentDragOffset) {
+        lastDragOffset = currentDragOffset;
+      } else if (lastDragOffset) {
+        setDragOffset(lastDragOffset);
+      }
+    });
+    observer.observe(panelRef, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-collapsed"]
+    });
+    onCleanup9(() => observer.disconnect());
+  });
+  const handlePointerDown = (event) => {
+    const panel = panelRef ?? null;
+    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;
+    setDragOffset(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 = inline() || (props.defaultOpen ?? true);
+    const nextRootOpen = panels().some((panel) => panelOpenStates.get(panel.id) ?? fallbackOpen);
+    if (rootOpen === nextRootOpen) return;
+    rootOpen = nextRootOpen;
+    props.onOpenChange?.(nextRootOpen);
+  };
+  const handleRootOpenChange = (open) => {
+    if (rootOpen === open) return;
+    rootOpen = open;
+    props.onOpenChange?.(open);
+  };
+  const dragStyle = () => {
+    const offset = dragOffset();
+    return offset ? {
+      top: `${offset.y}px`,
+      left: `${offset.x}px`,
+      right: "auto",
+      bottom: "auto"
+    } : void 0;
+  };
   const content = () => _$createComponent11(ShortcutListener, {
     get children() {
-      var _el$ = _tmpl$20(), _el$2 = _el$.firstChild;
-      _$insert12(_el$2, _$createComponent11(For5, {
-        get each() {
-          return panels();
+      var _el$ = _tmpl$210(), _el$2 = _el$.firstChild;
+      _$addEventListener(_el$2, "pointercancel", !inline() ? handlePointerUp : void 0);
+      _$addEventListener(_el$2, "pointerup", !inline() ? handlePointerUp : void 0, true);
+      _$addEventListener(_el$2, "pointermove", !inline() ? handlePointerMove : void 0, true);
+      _$addEventListener(_el$2, "pointerdown", !inline() ? handlePointerDown : void 0, true);
+      var _ref$ = panelRef;
+      typeof _ref$ === "function" ? _$use8(_ref$, _el$2) : panelRef = _el$2;
+      _$insert12(_el$2, _$createComponent11(Show8, {
+        get when() {
+          return panels().length > 1;
         },
-        children: (panel) => _$createComponent11(Panel, {
-          panel,
-          get defaultOpen() {
-            return inline() || (props.defaultOpen ?? true);
-          },
-          get inline() {
-            return inline();
-          }
-        })
+        get fallback() {
+          return _$createComponent11(For5, {
+            get each() {
+              return panels();
+            },
+            children: (panel) => _$createComponent11(Panel, {
+              panel,
+              get defaultOpen() {
+                return inline() || (props.defaultOpen ?? true);
+              },
+              get inline() {
+                return inline();
+              },
+              onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
+            })
+          });
+        },
+        get children() {
+          var _el$3 = _tmpl$20();
+          _$insert12(_el$3, _$createComponent11(Folder, {
+            title: "DialKit",
+            get defaultOpen() {
+              return inline() || (props.defaultOpen ?? true);
+            },
+            isRoot: true,
+            get inline() {
+              return inline();
+            },
+            onOpenChange: handleRootOpenChange,
+            panelHeightOffset: 2,
+            get children() {
+              return _$createComponent11(For5, {
+                get each() {
+                  return panels();
+                },
+                children: (panel) => _$createComponent11(Panel, {
+                  panel,
+                  defaultOpen: true,
+                  variant: "section"
+                })
+              });
+            }
+          }));
+          return _el$3;
+        }
       }));
       _$effect11((_p$) => {
-        var _v$ = props.mode ?? "popover", _v$2 = props.theme ?? "system", _v$3 = inline() ? void 0 : props.position ?? "top-right", _v$4 = props.mode ?? "popover";
+        var _v$ = props.mode ?? "popover", _v$2 = props.theme ?? "system", _v$3 = inline() ? void 0 : dragOffset() ? void 0 : activePosition(), _v$4 = inline() ? void 0 : getPanelOriginX(activePosition(), dragOffset()), _v$5 = props.mode ?? "popover", _v$6 = panels().length > 1 ? "true" : void 0, _v$7 = dragStyle();
         _v$ !== _p$.e && _$setAttribute9(_el$, "data-mode", _p$.e = _v$);
         _v$2 !== _p$.t && _$setAttribute9(_el$, "data-theme", _p$.t = _v$2);
         _v$3 !== _p$.a && _$setAttribute9(_el$2, "data-position", _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute9(_el$2, "data-mode", _p$.o = _v$4);
+        _v$4 !== _p$.o && _$setAttribute9(_el$2, "data-origin-x", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute9(_el$2, "data-mode", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setAttribute9(_el$2, "data-multiple", _p$.n = _v$6);
+        _p$.s = _$style3(_el$2, _v$7, _p$.s);
         return _p$;
       }, {
         e: void 0,
         t: void 0,
         a: void 0,
-        o: void 0
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0
       });
       return _el$;
     }
@@ -2993,16 +3447,17 @@ function DialRoot(props) {
     }
   });
 }
+_$delegateEvents9(["pointerdown", "pointermove", "pointerup"]);
 
 // src/solid/components/ButtonGroup.tsx
 import { template as _$template13 } from "solid-js/web";
-import { delegateEvents as _$delegateEvents9 } from "solid-js/web";
-import { addEventListener as _$addEventListener } from "solid-js/web";
+import { delegateEvents as _$delegateEvents10 } from "solid-js/web";
+import { addEventListener as _$addEventListener2 } from "solid-js/web";
 import { insert as _$insert13 } from "solid-js/web";
 import { createComponent as _$createComponent12 } from "solid-js/web";
 import { For as For6 } from "solid-js";
 var _tmpl$21 = /* @__PURE__ */ _$template13(`<div class=dialkit-button-group>`);
-var _tmpl$210 = /* @__PURE__ */ _$template13(`<button class=dialkit-button>`);
+var _tmpl$211 = /* @__PURE__ */ _$template13(`<button class=dialkit-button>`);
 function ButtonGroup(props) {
   return (() => {
     var _el$ = _tmpl$21();
@@ -3011,8 +3466,8 @@ function ButtonGroup(props) {
         return props.buttons;
       },
       children: (button) => (() => {
-        var _el$2 = _tmpl$210();
-        _$addEventListener(_el$2, "click", button.onClick, true);
+        var _el$2 = _tmpl$211();
+        _$addEventListener2(_el$2, "click", button.onClick, true);
         _$insert13(_el$2, () => button.label);
         return _el$2;
       })()
@@ -3020,7 +3475,7 @@ function ButtonGroup(props) {
     return _el$;
   })();
 }
-_$delegateEvents9(["click"]);
+_$delegateEvents10(["click"]);
 export {
   ButtonGroup,
   ColorControl,
@@ -3034,6 +3489,7 @@ export {
   SpringVisualization,
   TextControl,
   Toggle,
-  createDialKit
+  createDialKit,
+  createDialKitController
 };
 //# sourceMappingURL=index.js.map