dialkit 0.2.2 → 1.1.0

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(index_exports, {
   ColorControl: () => ColorControl,
   DialRoot: () => DialRoot,
   DialStore: () => DialStore,
+  EasingVisualization: () => EasingVisualization,
   Folder: () => Folder,
   PresetManager: () => PresetManager,
   SelectControl: () => SelectControl,
@@ -33,6 +34,7 @@ __export(index_exports, {
   SpringVisualization: () => SpringVisualization,
   TextControl: () => TextControl,
   Toggle: () => Toggle,
+  TransitionControl: () => TransitionControl,
   useDialKit: () => useDialKit
 });
 module.exports = __toCommonJS(index_exports);
@@ -56,15 +58,67 @@ var DialStoreClass = class {
   registerPanel(id, name, config) {
     const controls = this.parseConfig(config, "");
     const values = this.flattenValues(config, "");
+    this.initTransitionModes(config, "", values);
     this.panels.set(id, { id, name, controls, values });
     this.snapshots.set(id, { ...values });
     this.baseValues.set(id, { ...values });
     this.notifyGlobal();
   }
+  updatePanel(id, name, config) {
+    const existing = this.panels.get(id);
+    if (!existing) {
+      this.registerPanel(id, name, config);
+      return;
+    }
+    const controls = this.parseConfig(config, "");
+    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;
+      }
+    }
+    const nextPanel = { id, name, controls, values: nextValues };
+    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)
+      );
+    }
+    for (const [path, value] of Object.entries(nextValues)) {
+      if (path.endsWith(".__mode")) {
+        nextBaseValues[path] = value;
+      }
+    }
+    this.baseValues.set(id, nextBaseValues);
+    this.notify(id);
+    this.notifyGlobal();
+  }
   unregisterPanel(id) {
     this.panels.delete(id);
     this.listeners.delete(id);
     this.snapshots.delete(id);
+    this.actionListeners.delete(id);
+    this.baseValues.delete(id);
     this.notifyGlobal();
   }
   updateValue(panelId, path, value) {
@@ -84,13 +138,21 @@ var DialStoreClass = class {
     this.notify(panelId);
   }
   updateSpringMode(panelId, path, mode) {
+    this.updateTransitionMode(panelId, path, mode);
+  }
+  getSpringMode(panelId, path) {
+    const mode = this.getTransitionMode(panelId, path);
+    if (mode === "easing") return "simple";
+    return mode;
+  }
+  updateTransitionMode(panelId, path, mode) {
     const panel = this.panels.get(panelId);
     if (!panel) return;
     panel.values[`${path}.__mode`] = mode;
     this.snapshots.set(panelId, { ...panel.values });
     this.notify(panelId);
   }
-  getSpringMode(panelId, path) {
+  getTransitionMode(panelId, path) {
     const panel = this.panels.get(panelId);
     if (!panel) return "simple";
     return panel.values[`${path}.__mode`] || "simple";
@@ -194,6 +256,21 @@ var DialStoreClass = class {
   notifyGlobal() {
     this.globalListeners.forEach((fn) => fn());
   }
+  initTransitionModes(config, prefix, values) {
+    for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
+      const path = prefix ? `${prefix}.${key}` : key;
+      if (this.isEasingConfig(value)) {
+        values[`${path}.__mode`] = "easing";
+      } else if (this.isSpringConfig(value)) {
+        const hasPhysics = value.stiffness !== void 0 || value.damping !== void 0 || value.mass !== void 0;
+        const hasTime = value.visualDuration !== void 0 || value.bounce !== void 0;
+        values[`${path}.__mode`] = hasPhysics && !hasTime ? "advanced" : "simple";
+      } else if (typeof value === "object" && value !== null && !Array.isArray(value) && !this.isActionConfig(value) && !this.isSelectConfig(value) && !this.isColorConfig(value) && !this.isTextConfig(value)) {
+        this.initTransitionModes(value, path, values);
+      }
+    }
+  }
   parseConfig(config, prefix) {
     const controls = [];
     for (const [key, value] of Object.entries(config)) {
@@ -214,8 +291,8 @@ var DialStoreClass = class {
         controls.push({ type: "slider", path, label, min, max, step });
       } else if (typeof value === "boolean") {
         controls.push({ type: "toggle", path, label });
-      } else if (this.isSpringConfig(value)) {
-        controls.push({ type: "spring", path, label });
+      } else if (this.isSpringConfig(value) || this.isEasingConfig(value)) {
+        controls.push({ type: "transition", path, label });
       } else if (this.isActionConfig(value)) {
         controls.push({ type: "action", path, label: value.label || label });
       } else if (this.isSelectConfig(value)) {
@@ -253,7 +330,7 @@ var DialStoreClass = class {
         values[path] = value[0];
       } else if (typeof value === "number" || typeof value === "boolean" || typeof value === "string") {
         values[path] = value;
-      } else if (this.isSpringConfig(value)) {
+      } else if (this.isSpringConfig(value) || this.isEasingConfig(value)) {
         values[path] = value;
       } else if (this.isActionConfig(value)) {
         values[path] = value;
@@ -274,6 +351,9 @@ var DialStoreClass = class {
   isSpringConfig(value) {
     return typeof value === "object" && value !== null && "type" in value && value.type === "spring";
   }
+  isEasingConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "easing";
+  }
   isActionConfig(value) {
     return typeof value === "object" && value !== null && "type" in value && value.type === "action";
   }
@@ -312,6 +392,75 @@ var DialStoreClass = class {
     if (range <= 100) return 1;
     return 10;
   }
+  normalizePreservedValue(existingValue, defaultValue, control) {
+    if (existingValue === void 0 || !control) {
+      return defaultValue;
+    }
+    switch (control.type) {
+      case "slider": {
+        if (typeof existingValue !== "number" || typeof defaultValue !== "number") {
+          return defaultValue;
+        }
+        const min = control.min ?? Number.NEGATIVE_INFINITY;
+        const max = control.max ?? Number.POSITIVE_INFINITY;
+        const clamped = Math.min(max, Math.max(min, existingValue));
+        if (typeof control.step !== "number" || control.step <= 0) {
+          return clamped;
+        }
+        return this.roundToStep(clamped, min, max, control.step);
+      }
+      case "toggle":
+        return typeof existingValue === "boolean" ? existingValue : defaultValue;
+      case "select": {
+        if (typeof existingValue !== "string") {
+          return defaultValue;
+        }
+        const options = control.options ?? [];
+        const validValues = new Set(options.map((option) => typeof option === "string" ? option : option.value));
+        return validValues.has(existingValue) ? existingValue : defaultValue;
+      }
+      case "color":
+      case "text":
+        return typeof existingValue === "string" ? existingValue : defaultValue;
+      case "transition":
+        if (this.isSpringConfig(defaultValue)) {
+          return this.isSpringConfig(existingValue) ? existingValue : defaultValue;
+        }
+        if (this.isEasingConfig(defaultValue)) {
+          return this.isEasingConfig(existingValue) ? existingValue : defaultValue;
+        }
+        return defaultValue;
+      case "action":
+        return defaultValue;
+      default:
+        return defaultValue;
+    }
+  }
+  roundToStep(value, min, max, step) {
+    const snapped = min + Math.round((value - min) / step) * step;
+    const clamped = Math.min(max, Math.max(min, snapped));
+    const precision = this.stepPrecision(step);
+    return Number(clamped.toFixed(precision));
+  }
+  stepPrecision(step) {
+    const text = String(step);
+    const decimalIndex = text.indexOf(".");
+    return decimalIndex === -1 ? 0 : text.length - decimalIndex - 1;
+  }
+  mapControlsByPath(controls) {
+    const map = /* @__PURE__ */ new Map();
+    const visit = (nodes) => {
+      for (const node of nodes) {
+        if (node.type === "folder" && node.children) {
+          visit(node.children);
+          continue;
+        }
+        map.set(node.path, node);
+      }
+    };
+    visit(controls);
+    return map;
+  }
 };
 var DialStore = new DialStoreClass();
 
@@ -320,12 +469,22 @@ function useDialKit(name, config, options) {
   const instanceId = (0, import_react.useId)();
   const panelId = `${name}-${instanceId}`;
   const configRef = (0, import_react.useRef)(config);
+  const serializedConfig = JSON.stringify(config);
+  configRef.current = config;
   const onActionRef = (0, import_react.useRef)(options?.onAction);
   onActionRef.current = options?.onAction;
   (0, import_react.useEffect)(() => {
     DialStore.registerPanel(panelId, name, configRef.current);
     return () => DialStore.unregisterPanel(panelId);
   }, [panelId, name]);
+  const mountedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    DialStore.updatePanel(panelId, name, configRef.current);
+  }, [panelId, name, serializedConfig]);
   (0, import_react.useEffect)(() => {
     return DialStore.subscribeActions(panelId, (action) => {
       onActionRef.current?.(action);
@@ -347,7 +506,7 @@ function buildResolvedValues(config, flatValues, prefix) {
       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)) {
+    } else if (isSpringConfig(configValue) || isEasingConfig(configValue)) {
       result[key] = flatValues[path] ?? configValue;
     } else if (isActionConfig(configValue)) {
       result[key] = flatValues[path] ?? configValue;
@@ -370,6 +529,9 @@ function hasType(value, type) {
 function isSpringConfig(value) {
   return hasType(value, "spring");
 }
+function isEasingConfig(value) {
+  return hasType(value, "easing");
+}
 function isActionConfig(value) {
   return hasType(value, "action");
 }
@@ -388,18 +550,18 @@ function getFirstOptionValue(options) {
 }
 
 // src/components/DialRoot.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/components/Panel.tsx
-var import_react14 = require("react");
-var import_react15 = require("motion/react");
+var import_react15 = require("react");
+var import_react16 = require("motion/react");
 
 // src/components/Folder.tsx
 var import_react2 = require("react");
 var import_react3 = require("motion/react");
 var import_jsx_runtime = require("react/jsx-runtime");
-function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenChange, toolbar }) {
+function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar }) {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultOpen);
   const [isCollapsed, setIsCollapsed] = (0, import_react2.useState)(!defaultOpen);
   const contentRef = (0, import_react2.useRef)(null);
@@ -417,6 +579,7 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     return () => ro.disconnect();
   }, [isOpen]);
   const handleToggle = () => {
+    if (inline && isRoot) return;
     const next = !isOpen;
     setIsOpen(next);
     if (next) {
@@ -430,40 +593,35 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header-top", children: [
         isRoot ? isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-title-row", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title", children: title }) }),
-        isRoot ? (
-          // Root panel icon — fixed position, container morphs around it
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "svg",
-            {
-              className: "dialkit-panel-icon",
-              viewBox: "0 0 16 16",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { opacity: "0.5", d: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z", fill: "currentColor" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
-              ]
-            }
-          )
-        ) : (
-          // Section folders use rotating chevron with gentle spring
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react3.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
-            }
-          )
+        isRoot && !inline && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            className: "dialkit-panel-icon",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { opacity: "0.5", d: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z", fill: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
+            ]
+          }
+        ),
+        !isRoot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react3.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+          }
         )
       ] }),
       isRoot && toolbar && isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
@@ -482,6 +640,9 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ) })
   ] });
   if (isRoot) {
+    if (inline) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-inner dialkit-panel-inline", children: folderContent });
+    }
     const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? contentHeight + 24 : "auto", borderRadius: 14, boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5)", cursor: void 0 } : { width: 42, height: 42, borderRadius: 21, boxShadow: "0 4px 16px rgba(0, 0, 0, 0.25)", overflow: "hidden", cursor: "pointer" };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react3.motion.div,
@@ -1156,12 +1317,180 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
   ] }) });
 }
 
-// src/components/TextControl.tsx
+// src/components/EasingVisualization.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function EasingVisualization({ easing }) {
+  const ease = easing.ease;
+  const s = 200;
+  const pad = 10;
+  const inner = s - pad * 2;
+  const unit = inner / 2;
+  const toSvg = (nx, ny) => ({
+    x: pad + (nx + 0.5) * unit,
+    y: pad + (1.5 - ny) * unit
+  });
+  const start = toSvg(0, 0);
+  const end = toSvg(1, 1);
+  const p1 = toSvg(ease[0], ease[1]);
+  const p2 = toSvg(ease[2], ease[3]);
+  const curvePath = `M ${start.x} ${start.y} C ${p1.x} ${p1.y}, ${p2.x} ${p2.y}, ${end.x} ${end.y}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      viewBox: `0 0 ${s} ${s}`,
+      preserveAspectRatio: "xMidYMid slice",
+      className: "dialkit-spring-viz dialkit-easing-viz",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "line",
+          {
+            x1: start.x,
+            y1: start.y,
+            x2: end.x,
+            y2: end.y,
+            stroke: "rgba(255, 255, 255, 0.15)",
+            strokeWidth: "1",
+            strokeDasharray: "4,4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: curvePath, fill: "none", stroke: "rgba(255, 255, 255, 0.6)", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+}
+
+// src/components/TransitionControl.tsx
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function TransitionControl({ panelId, path, label, value, onChange }) {
+  const mode = (0, import_react9.useSyncExternalStore)(
+    (cb) => DialStore.subscribe(panelId, cb),
+    () => DialStore.getTransitionMode(panelId, path),
+    () => DialStore.getTransitionMode(panelId, path)
+  );
+  const isEasing = mode === "easing";
+  const isSimpleSpring = mode === "simple";
+  const spring = value.type === "spring" ? value : { type: "spring", visualDuration: 0.3, bounce: 0.2 };
+  const easing = value.type === "easing" ? value : { type: "easing", duration: 0.3, ease: [1, -0.4, 0.5, 1] };
+  const handleModeChange = (newMode) => {
+    DialStore.updateTransitionMode(panelId, path, newMode);
+    if (newMode === "easing") {
+      const duration = value.type === "spring" ? value.visualDuration ?? 0.3 : value.duration;
+      onChange({ type: "easing", duration, ease: easing.ease });
+    } else if (newMode === "simple") {
+      onChange({
+        type: "spring",
+        visualDuration: spring.visualDuration ?? (value.type === "easing" ? value.duration : 0.3),
+        bounce: spring.bounce ?? 0.2
+      });
+    } else {
+      onChange({
+        type: "spring",
+        stiffness: spring.stiffness ?? 200,
+        damping: spring.damping ?? 25,
+        mass: spring.mass ?? 1
+      });
+    }
+  };
+  const handleSpringUpdate = (key, val) => {
+    if (isSimpleSpring) {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({ ...rest, [key]: val });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({ ...rest, [key]: val });
+    }
+  };
+  const updateEase = (index, val) => {
+    const newEase = [...easing.ease];
+    newEase[index] = val;
+    onChange({ ...easing, ease: newEase });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EasingVisualization, { easing }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpringVisualization, { spring, isSimpleMode: isSimpleSpring }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-labeled-control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-labeled-control-label", children: "Type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        SegmentedControl,
+        {
+          options: [
+            { value: "easing", label: "Easing" },
+            { value: "simple", label: "Time" },
+            { value: "advanced", label: "Physics" }
+          ],
+          value: mode,
+          onChange: handleModeChange
+        }
+      )
+    ] }),
+    isEasing ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "x1", value: easing.ease[0], onChange: (v) => updateEase(0, v), min: 0, max: 1, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "y1", value: easing.ease[1], onChange: (v) => updateEase(1, v), min: -1, max: 2, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "x2", value: easing.ease[2], onChange: (v) => updateEase(2, v), min: 0, max: 1, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "y2", value: easing.ease[3], onChange: (v) => updateEase(3, v), min: -1, max: 2, step: 0.01 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Duration", value: easing.duration, onChange: (v) => onChange({ ...easing, duration: v }), min: 0.1, max: 2, step: 0.05, unit: "s" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EaseTextInput, { ease: easing.ease, onChange: (newEase) => onChange({ ...easing, ease: newEase }) })
+    ] }) : isSimpleSpring ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Duration", value: spring.visualDuration ?? 0.3, onChange: (v) => handleSpringUpdate("visualDuration", v), min: 0.1, max: 1, step: 0.05, unit: "s" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Stiffness", value: spring.stiffness ?? 400, onChange: (v) => handleSpringUpdate("stiffness", v), min: 1, max: 1e3, step: 10 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Damping", value: spring.damping ?? 17, onChange: (v) => handleSpringUpdate("damping", v), min: 1, max: 100, step: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slider, { label: "Mass", value: spring.mass ?? 1, onChange: (v) => handleSpringUpdate("mass", v), min: 0.1, max: 10, step: 0.1 })
+    ] })
+  ] }) });
+}
+function formatEase(ease) {
+  return ease.map((v) => parseFloat(v.toFixed(2))).join(", ");
+}
+function parseEase(str) {
+  const parts = str.split(",").map((s) => parseFloat(s.trim()));
+  if (parts.length === 4 && parts.every((n) => !isNaN(n))) {
+    return parts;
+  }
+  return null;
+}
+function EaseTextInput({ ease, onChange }) {
+  const [editing, setEditing] = (0, import_react9.useState)(false);
+  const [draft, setDraft] = (0, import_react9.useState)("");
+  const handleFocus = () => {
+    setDraft(formatEase(ease));
+    setEditing(true);
+  };
+  const handleBlur = () => {
+    const parsed = parseEase(draft);
+    if (parsed) onChange(parsed);
+    setEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.target.blur();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-labeled-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-labeled-control-label", children: "Ease" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        type: "text",
+        className: "dialkit-text-input",
+        value: editing ? draft : formatEase(ease),
+        onChange: (e) => setDraft(e.target.value),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        spellCheck: false
+      }
+    )
+  ] });
+}
+
+// src/components/TextControl.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function TextControl({ label, value, onChange, placeholder }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dialkit-text-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "dialkit-text-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-text-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "dialkit-text-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       {
         type: "text",
@@ -1175,10 +1504,10 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
-var import_react10 = require("motion/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react11 = require("motion/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function toTitleCase(s) {
   return s.replace(/\b\w/g, (c) => c.toUpperCase());
 }
@@ -1188,14 +1517,14 @@ function normalizeOptions(options) {
   );
 }
 function SelectControl({ label, value, options, onChange }) {
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const triggerRef = (0, import_react9.useRef)(null);
-  const dropdownRef = (0, import_react9.useRef)(null);
-  const [portalTarget, setPortalTarget] = (0, import_react9.useState)(null);
-  const [pos, setPos] = (0, import_react9.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const triggerRef = (0, import_react10.useRef)(null);
+  const dropdownRef = (0, import_react10.useRef)(null);
+  const [portalTarget, setPortalTarget] = (0, import_react10.useState)(null);
+  const [pos, setPos] = (0, import_react10.useState)(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
-  const updatePos = (0, import_react9.useCallback)(() => {
+  const updatePos = (0, import_react10.useCallback)(() => {
     const el = triggerRef.current;
     if (!el) return;
     const rect = el.getBoundingClientRect();
@@ -1209,15 +1538,15 @@ function SelectControl({ label, value, options, onChange }) {
       above
     });
   }, [normalized.length]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const root = triggerRef.current?.closest(".dialkit-root");
     setPortalTarget(root ?? document.body);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isOpen) return;
     updatePos();
   }, [isOpen, updatePos]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -1228,8 +1557,8 @@ function SelectControl({ label, value, options, onChange }) {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-select-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-select-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1237,11 +1566,11 @@ function SelectControl({ label, value, options, onChange }) {
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-select-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-select-right", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "dialkit-select-value", children: selectedOption?.label ?? value }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              import_react10.motion.svg,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-select-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-select-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-select-value", children: selectedOption?.label ?? value }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              import_react11.motion.svg,
               {
                 className: "dialkit-select-chevron",
                 viewBox: "0 0 24 24",
@@ -1252,7 +1581,7 @@ function SelectControl({ label, value, options, onChange }) {
                 strokeLinejoin: "round",
                 animate: { rotate: isOpen ? 180 : 0 },
                 transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
               }
             )
           ] })
@@ -1260,8 +1589,8 @@ function SelectControl({ label, value, options, onChange }) {
       }
     ),
     portalTarget && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_react10.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_react11.motion.div,
         {
           ref: dropdownRef,
           className: "dialkit-select-dropdown",
@@ -1275,7 +1604,7 @@ function SelectControl({ label, value, options, onChange }) {
             width: pos.width,
             ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
           },
-          children: normalized.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          children: normalized.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               className: "dialkit-select-option",
@@ -1296,14 +1625,14 @@ function SelectControl({ label, value, options, onChange }) {
 }
 
 // src/components/ColorControl.tsx
-var import_react11 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
 function ColorControl({ label, value, onChange }) {
-  const [isEditing, setIsEditing] = (0, import_react11.useState)(false);
-  const [editValue, setEditValue] = (0, import_react11.useState)(value);
-  const colorInputRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react12.useState)(false);
+  const [editValue, setEditValue] = (0, import_react12.useState)(value);
+  const colorInputRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
     if (!isEditing) {
       setEditValue(value);
     }
@@ -1324,10 +1653,10 @@ function ColorControl({ label, value, onChange }) {
       setEditValue(value);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-color-control", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "dialkit-color-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-color-inputs", children: [
-      isEditing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-color-control", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-color-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-color-inputs", children: [
+      isEditing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
           type: "text",
@@ -1338,7 +1667,7 @@ function ColorControl({ label, value, onChange }) {
           onKeyDown: handleKeyDown,
           autoFocus: true
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "span",
         {
           className: "dialkit-color-hex",
@@ -1346,7 +1675,7 @@ function ColorControl({ label, value, onChange }) {
           children: (value ?? "").toUpperCase()
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           className: "dialkit-color-swatch",
@@ -1355,7 +1684,7 @@ function ColorControl({ label, value, onChange }) {
           title: "Pick color"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "input",
         {
           ref: colorInputRef,
@@ -1374,18 +1703,18 @@ function expandShorthandHex(hex) {
 }
 
 // src/components/PresetManager.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_react13 = require("motion/react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react14 = require("motion/react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
-  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
-  const triggerRef = (0, import_react12.useRef)(null);
-  const dropdownRef = (0, import_react12.useRef)(null);
-  const [pos, setPos] = (0, import_react12.useState)({ top: 0, left: 0, width: 0 });
+  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+  const triggerRef = (0, import_react13.useRef)(null);
+  const dropdownRef = (0, import_react13.useRef)(null);
+  const [pos, setPos] = (0, import_react13.useState)({ top: 0, left: 0, width: 0 });
   const hasPresets = presets.length > 0;
   const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = (0, import_react12.useCallback)(() => {
+  const open = (0, import_react13.useCallback)(() => {
     if (!hasPresets) return;
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
@@ -1393,12 +1722,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     }
     setIsOpen(true);
   }, [hasPresets]);
-  const close = (0, import_react12.useCallback)(() => setIsOpen(false), []);
-  const toggle = (0, import_react12.useCallback)(() => {
+  const close = (0, import_react13.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react13.useCallback)(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isOpen) return;
     const handler = (e) => {
       const target = e.target;
@@ -1420,8 +1749,8 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
     e.stopPropagation();
     DialStore.deletePreset(panelId, presetId);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "dialkit-preset-manager", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "dialkit-preset-manager", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
         ref: triggerRef,
@@ -1431,9 +1760,9 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         "data-has-preset": String(!!activePreset),
         "data-disabled": String(!hasPresets),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            import_react13.motion.svg,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_react14.motion.svg,
             {
               className: "dialkit-select-chevron",
               viewBox: "0 0 24 24",
@@ -1444,15 +1773,15 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
               strokeLinejoin: "round",
               animate: { rotate: isOpen ? 180 : 0, opacity: hasPresets ? 0.6 : 0.25 },
               transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
             }
           )
         ]
       }
     ),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react13.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-        import_react13.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_react14.motion.div,
         {
           ref: dropdownRef,
           className: "dialkit-root dialkit-preset-dropdown",
@@ -1462,35 +1791,35 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
           exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
           transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 className: "dialkit-preset-item",
                 "data-active": String(!activePresetId),
                 onClick: () => handleSelect(null),
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
               }
             ),
-            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "div",
               {
                 className: "dialkit-preset-item",
                 "data-active": String(preset.id === activePresetId),
                 onClick: () => handleSelect(preset.id),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "button",
                     {
                       className: "dialkit-preset-delete",
                       onClick: (e) => handleDelete(e, preset.id),
                       title: "Delete preset",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 11V16" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M14 11V16" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M3.5 6H20.5" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 11V16" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M14 11V16" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3.5 6H20.5" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621" })
                       ] })
                     }
                   )
@@ -1507,11 +1836,11 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
 }
 
 // src/components/Panel.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function Panel({ panel }) {
-  const [copied, setCopied] = (0, import_react14.useState)(false);
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react14.useState)(true);
-  const values = (0, import_react14.useSyncExternalStore)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Panel({ panel, defaultOpen = true, inline = false }) {
+  const [copied, setCopied] = (0, import_react15.useState)(false);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react15.useState)(defaultOpen);
+  const values = (0, import_react15.useSyncExternalStore)(
     (cb) => DialStore.subscribe(panel.id, cb),
     () => DialStore.getValues(panel.id),
     () => DialStore.getValues(panel.id)
@@ -1539,7 +1868,7 @@ Apply these values as the new defaults in the useDialKit call.`;
     const value = values[control.path];
     switch (control.type) {
       case "slider":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Slider,
           {
             label: control.label,
@@ -1552,7 +1881,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Toggle,
           {
             label: control.label,
@@ -1562,7 +1891,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "spring":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           SpringControl,
           {
             panelId: panel.id,
@@ -1573,10 +1902,22 @@ Apply these values as the new defaults in the useDialKit call.`;
           },
           control.path
         );
+      case "transition":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          TransitionControl,
+          {
+            panelId: panel.id,
+            path: control.path,
+            label: control.label,
+            value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+          },
+          control.path
+        );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TextControl,
           {
             label: control.label,
@@ -1587,7 +1928,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           SelectControl,
           {
             label: control.label,
@@ -1598,7 +1939,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ColorControl,
           {
             label: control.label,
@@ -1607,54 +1948,43 @@ Apply these values as the new defaults in the useDialKit call.`;
           },
           control.path
         );
+      case "action":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "dialkit-button",
+            onClick: () => DialStore.triggerAction(panel.id, control.path),
+            children: control.label
+          },
+          control.path
+        );
       default:
         return null;
     }
   };
   const renderControls = () => {
-    const result = [];
-    let i = 0;
-    while (i < panel.controls.length) {
-      const control = panel.controls[i];
-      if (control.type === "action") {
-        result.push(
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "button",
-            {
-              className: "dialkit-button",
-              onClick: () => DialStore.triggerAction(panel.id, control.path),
-              children: control.label
-            },
-            control.path
-          )
-        );
-      } else {
-        result.push(renderControl(control));
-      }
-      i++;
-    }
-    return result;
+    return panel.controls.map(renderControl);
   };
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react15.motion.button,
+  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react16.motion.button,
       {
         className: "dialkit-toolbar-add",
         onClick: handleAddPreset,
         title: "Add preset",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 6H20" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 12H10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M15 15L21 15" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M18 12V18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M4 18H10" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 6H20" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 12H10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M15 15L21 15" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M18 12V18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 18H10" })
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       PresetManager,
       {
         panelId: panel.id,
@@ -1663,8 +1993,8 @@ Apply these values as the new defaults in the useDialKit call.`;
         onAdd: handleAddPreset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_react15.motion.button,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_react16.motion.button,
       {
         className: "dialkit-toolbar-copy",
         onClick: handleCopy,
@@ -1672,8 +2002,8 @@ Apply these values as the new defaults in the useDialKit call.`;
         whileTap: { scale: 0.95 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react15.AnimatePresence, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_react15.motion.svg,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react16.AnimatePresence, { initial: false, mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react16.motion.svg,
             {
               className: "dialkit-toolbar-copy-icon",
               viewBox: "0 0 24 24",
@@ -1686,11 +2016,11 @@ Apply these values as the new defaults in the useDialKit call.`;
               animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
               exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
               transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M5 12.75L10 19L19 5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5 12.75L10 19L19 5" })
             },
             "check"
-          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-            import_react15.motion.svg,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            import_react16.motion.svg,
             {
               className: "dialkit-toolbar-copy-icon",
               viewBox: "0 0 24 24",
@@ -1700,9 +2030,9 @@ Apply these values as the new defaults in the useDialKit call.`;
               exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
               transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z", fill: "currentColor" }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z", fill: "currentColor" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
               ]
             },
             "clipboard"
@@ -1712,15 +2042,16 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: panel.name, defaultOpen: true, isRoot: true, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: setIsPanelOpen, toolbar, children: renderControls() }) });
 }
 
 // src/components/DialRoot.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function DialRoot({ position = "top-right" }) {
-  const [panels, setPanels] = (0, import_react16.useState)([]);
-  const [mounted, setMounted] = (0, import_react16.useState)(false);
-  (0, import_react16.useEffect)(() => {
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover" }) {
+  const [panels, setPanels] = (0, import_react17.useState)([]);
+  const [mounted, setMounted] = (0, import_react17.useState)(false);
+  const inline = mode === "inline";
+  (0, import_react17.useEffect)(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
     const unsubscribe = DialStore.subscribeGlobal(() => {
@@ -1734,14 +2065,17 @@ function DialRoot({ position = "top-right" }) {
   if (panels.length === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dialkit-root", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Panel, { panel }, panel.id)) }) });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-root", "data-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel", "data-position": inline ? void 0 : position, "data-mode": mode, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Panel, { panel, defaultOpen: inline || defaultOpen, inline }, panel.id)) }) });
+  if (inline) {
+    return content;
+  }
   return (0, import_react_dom3.createPortal)(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ButtonGroup({ buttons }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "button",
     {
       className: "dialkit-button",
@@ -1757,6 +2091,7 @@ function ButtonGroup({ buttons }) {
   ColorControl,
   DialRoot,
   DialStore,
+  EasingVisualization,
   Folder,
   PresetManager,
   SelectControl,
@@ -1765,6 +2100,7 @@ function ButtonGroup({ buttons }) {
   SpringVisualization,
   TextControl,
   Toggle,
+  TransitionControl,
   useDialKit
 });
 //# sourceMappingURL=index.cjs.map