dialkit 0.1.2 → 0.2.0

package/dist/index.cjs

@@ -22,13 +22,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ButtonGroup: () => ButtonGroup,
+  ColorControl: () => ColorControl,
   DialRoot: () => DialRoot,
   DialStore: () => DialStore,
   Folder: () => Folder,
-  SegmentedControl: () => SegmentedControl,
+  PresetManager: () => PresetManager,
+  SelectControl: () => SelectControl,
   Slider: () => Slider,
   SpringControl: () => SpringControl,
   SpringVisualization: () => SpringVisualization,
+  TextControl: () => TextControl,
   Toggle: () => Toggle,
   useDialKit: () => useDialKit
 });
@@ -46,12 +49,16 @@ var DialStoreClass = class {
     this.globalListeners = /* @__PURE__ */ new Set();
     this.snapshots = /* @__PURE__ */ new Map();
     this.actionListeners = /* @__PURE__ */ new Map();
+    this.presets = /* @__PURE__ */ new Map();
+    this.activePreset = /* @__PURE__ */ new Map();
+    this.baseValues = /* @__PURE__ */ new Map();
   }
   registerPanel(id, name, config) {
     const controls = this.parseConfig(config, "");
     const values = this.flattenValues(config, "");
     this.panels.set(id, { id, name, controls, values });
     this.snapshots.set(id, { ...values });
+    this.baseValues.set(id, { ...values });
     this.notifyGlobal();
   }
   unregisterPanel(id) {
@@ -64,6 +71,15 @@ var DialStoreClass = class {
     const panel = this.panels.get(panelId);
     if (!panel) return;
     panel.values[path] = value;
+    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;
+    } else {
+      const base = this.baseValues.get(panelId);
+      if (base) base[path] = value;
+    }
     this.snapshots.set(panelId, { ...panel.values });
     this.notify(panelId);
   }
@@ -117,6 +133,61 @@ var DialStoreClass = class {
   triggerAction(panelId, path) {
     this.actionListeners.get(panelId)?.forEach((fn) => fn(path));
   }
+  savePreset(panelId, name) {
+    const panel = this.panels.get(panelId);
+    if (!panel) throw new Error(`Panel ${panelId} not found`);
+    const id = `preset-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const preset = {
+      id,
+      name,
+      values: { ...panel.values }
+    };
+    const existing = this.presets.get(panelId) ?? [];
+    this.presets.set(panelId, [...existing, preset]);
+    this.activePreset.set(panelId, id);
+    this.snapshots.set(panelId, { ...panel.values });
+    this.notify(panelId);
+    return id;
+  }
+  loadPreset(panelId, presetId) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return;
+    const presets = this.presets.get(panelId) ?? [];
+    const preset = presets.find((p) => p.id === presetId);
+    if (!preset) return;
+    panel.values = { ...preset.values };
+    this.snapshots.set(panelId, { ...panel.values });
+    this.activePreset.set(panelId, presetId);
+    this.notify(panelId);
+  }
+  deletePreset(panelId, presetId) {
+    const presets = this.presets.get(panelId) ?? [];
+    this.presets.set(panelId, presets.filter((p) => p.id !== presetId));
+    if (this.activePreset.get(panelId) === presetId) {
+      this.activePreset.set(panelId, null);
+    }
+    const panel = this.panels.get(panelId);
+    if (panel) {
+      this.snapshots.set(panelId, { ...panel.values });
+    }
+    this.notify(panelId);
+  }
+  getPresets(panelId) {
+    return this.presets.get(panelId) ?? [];
+  }
+  getActivePresetId(panelId) {
+    return this.activePreset.get(panelId) ?? null;
+  }
+  clearActivePreset(panelId) {
+    const panel = this.panels.get(panelId);
+    const base = this.baseValues.get(panelId);
+    if (panel && base) {
+      panel.values = { ...base };
+      this.snapshots.set(panelId, { ...panel.values });
+    }
+    this.activePreset.set(panelId, null);
+    this.notify(panelId);
+  }
   notify(panelId) {
     this.listeners.get(panelId)?.forEach((fn) => fn());
   }
@@ -146,6 +217,18 @@ var DialStoreClass = class {
         controls.push({ type: "spring", path, label });
       } else if (this.isActionConfig(value)) {
         controls.push({ type: "action", path, label: value.label || label });
+      } else if (this.isSelectConfig(value)) {
+        controls.push({ type: "select", path, label, options: value.options });
+      } else if (this.isColorConfig(value)) {
+        controls.push({ type: "color", path, label });
+      } else if (this.isTextConfig(value)) {
+        controls.push({ type: "text", path, label, placeholder: value.placeholder });
+      } else if (typeof value === "string") {
+        if (this.isHexColor(value)) {
+          controls.push({ type: "color", path, label });
+        } else {
+          controls.push({ type: "text", path, label });
+        }
       } else if (typeof value === "object" && value !== null) {
         controls.push({
           type: "folder",
@@ -169,6 +252,14 @@ var DialStoreClass = class {
         values[path] = value;
       } else if (this.isActionConfig(value)) {
         values[path] = value;
+      } else if (this.isSelectConfig(value)) {
+        const firstOption = value.options[0];
+        const firstValue = typeof firstOption === "string" ? firstOption : firstOption.value;
+        values[path] = value.default ?? firstValue;
+      } else if (this.isColorConfig(value)) {
+        values[path] = value.default ?? "#000000";
+      } else if (this.isTextConfig(value)) {
+        values[path] = value.default ?? "";
       } else if (typeof value === "object" && value !== null) {
         Object.assign(values, this.flattenValues(value, path));
       }
@@ -181,6 +272,18 @@ var DialStoreClass = class {
   isActionConfig(value) {
     return typeof value === "object" && value !== null && "type" in value && value.type === "action";
   }
+  isSelectConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "select" && "options" in value && Array.isArray(value.options);
+  }
+  isColorConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "color";
+  }
+  isTextConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "text";
+  }
+  isHexColor(value) {
+    return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(value);
+  }
   formatLabel(key) {
     return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
   }
@@ -188,13 +291,13 @@ var DialStoreClass = class {
     if (value >= 0 && value <= 1) {
       return { min: 0, max: 1, step: 0.01 };
     } else if (value >= 0 && value <= 10) {
-      return { min: 0, max: value * 2 || 10, step: 0.1 };
+      return { min: 0, max: value * 3 || 10, step: 0.1 };
     } else if (value >= 0 && value <= 100) {
-      return { min: 0, max: value * 2 || 100, step: 1 };
+      return { min: 0, max: value * 3 || 100, step: 1 };
     } else if (value >= 0) {
-      return { min: 0, max: value * 2 || 1e3, step: 10 };
+      return { min: 0, max: value * 3 || 1e3, step: 10 };
     } else {
-      return { min: value * 2, max: -value * 2, step: 1 };
+      return { min: value * 3, max: -value * 3, step: 1 };
     }
   }
   inferStep(min, max) {
@@ -240,188 +343,150 @@ function buildResolvedValues(config, flatValues, prefix) {
       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);
     }
   }
   return result;
 }
+function hasType(value, type) {
+  return typeof value === "object" && value !== null && "type" in value && value.type === type;
+}
 function isSpringConfig(value) {
-  return typeof value === "object" && value !== null && "type" in value && value.type === "spring";
+  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/components/DialRoot.tsx
-var import_react10 = require("react");
-var import_react_dom = require("react-dom");
+var import_react16 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/components/Panel.tsx
+var import_react14 = require("react");
+var import_react15 = 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, panelId }) {
+function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenChange, toolbar }) {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultOpen);
-  const [copied, setCopied] = (0, import_react2.useState)(false);
-  const handleCopy = (e) => {
-    e.stopPropagation();
-    if (!panelId) return;
-    const values = DialStore.getValues(panelId);
-    const jsonStr = JSON.stringify(values, null, 2);
-    const instruction = `Update the useDialKit configuration for "${title}" with these values:
-
-\`\`\`json
-${jsonStr}
-\`\`\`
-
-Apply these values as the new defaults in the useDialKit call.`;
-    navigator.clipboard.writeText(instruction);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
-  };
+  const [isCollapsed, setIsCollapsed] = (0, import_react2.useState)(!defaultOpen);
+  const contentRef = (0, import_react2.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react2.useState)(void 0);
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const folderContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header", onClick: () => setIsOpen(!isOpen), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-title-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `dialkit-folder-title ${isRoot ? "dialkit-folder-title-root" : ""}`, children: title }),
-        isRoot && panelId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react3.motion.button,
+  const panelTransition = { type: "spring", visualDuration: 0.4, bounce: 0.2 };
+  (0, import_react2.useEffect)(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      if (isOpen) {
+        const h = el.offsetHeight;
+        setContentHeight((prev) => prev === h ? prev : h);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isOpen]);
+  const folderContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: isRoot ? contentRef : void 0, className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `dialkit-folder-header ${isRoot ? "dialkit-panel-header" : ""}`, onClick: () => {
+      const next = !isOpen;
+      setIsOpen(next);
+      if (next) setIsCollapsed(false);
+      onOpenChange?.(next);
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-header-top", children: [
+        isRoot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, mode: "popLayout", children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react3.motion.div,
           {
-            className: "dialkit-folder-copy",
-            onClick: handleCopy,
-            title: "Copy parameters",
-            initial: false,
-            animate: {
-              opacity: isOpen ? 1 : 0,
-              scale: isOpen ? 1 : 0.7,
-              filter: isOpen ? "blur(0px)" : "blur(6px)"
-            },
-            transition: iconTransition,
-            style: { pointerEvents: isOpen ? "auto" : "none" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width: 14, height: 14 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_react3.motion.svg,
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  style: { position: "absolute", inset: 0 },
-                  initial: false,
-                  animate: {
-                    opacity: copied ? 0 : 1,
-                    scale: copied ? 0.7 : 1,
-                    filter: copied ? "blur(6px)" : "blur(0px)"
-                  },
-                  transition: iconTransition,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react3.motion.svg,
-                {
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  style: { position: "absolute", inset: 0 },
-                  initial: false,
-                  animate: {
-                    opacity: copied ? 1 : 0,
-                    scale: copied ? 1 : 0.7,
-                    filter: copied ? "blur(0px)" : "blur(6px)"
-                  },
-                  transition: iconTransition,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
-                }
-              )
-            ] })
+            className: "dialkit-folder-title-row",
+            initial: { opacity: 1 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.15 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dialkit-folder-title dialkit-folder-title-root", children: title })
           }
-        )
-      ] }),
-      isRoot ? (
-        // Root panel uses minus/plus icons with crossfade
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dialkit-folder-icon", style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_react3.motion.svg,
+        ) }) : /* @__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",
             {
-              viewBox: "0 0 24 24",
+              className: "dialkit-panel-icon",
+              viewBox: "0 0 16 16",
               fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-              initial: false,
-              animate: {
-                opacity: isOpen ? 1 : 0,
-                scale: isOpen ? 1 : 0.7,
-                filter: isOpen ? "blur(0px)" : "blur(6px)"
-              },
-              transition: iconTransition,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { opacity: "0.5", d: "M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z", fill: "currentColor" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "8", r: "0.998596", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10.4999", cy: "3.5", r: "0.998657", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9.75015", cy: "12.5", r: "0.997986", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })
+              ]
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          )
+        ) : (
+          // 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",
+              strokeWidth: "2.5",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              style: { position: "absolute", inset: 0, width: "100%", height: "100%" },
               initial: false,
-              animate: {
-                opacity: isOpen ? 0 : 1,
-                scale: isOpen ? 0.7 : 1,
-                filter: isOpen ? "blur(6px)" : "blur(0px)"
-              },
-              transition: iconTransition,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-              ]
+              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" })
             }
           )
-        ] })
-      ) : (
-        // Section folders use rotating chevron with gentle spring
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_react3.motion.svg,
-          {
-            className: "dialkit-folder-icon",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.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)("line", { x1: "5", y1: "9", x2: "12", y2: "16" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "19", y1: "9", x2: "12", y2: "16" })
-            ]
-          }
         )
-      )
+      ] }),
+      isRoot && toolbar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react3.motion.div,
+        {
+          initial: { opacity: 1 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.15 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-panel-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar })
+        }
+      ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react3.motion.div,
       {
         className: "dialkit-folder-content",
-        initial: { height: 0, opacity: 0 },
-        animate: { height: "auto", opacity: 1 },
-        exit: { height: 0, opacity: 0 },
-        transition: { type: "spring", visualDuration: 0.25, bounce: 0 },
+        initial: isRoot ? { opacity: 1 } : { height: 0, opacity: 0 },
+        animate: isRoot ? { opacity: 1 } : { height: "auto", opacity: 1 },
+        exit: isRoot ? { opacity: 0 } : { height: 0, opacity: 0 },
+        transition: isRoot ? { duration: 0.15 } : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
+        style: isRoot ? void 0 : { overflow: "hidden" },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-inner", children })
       }
     ) })
@@ -433,11 +498,22 @@ Apply these values as the new defaults in the useDialKit call.`;
         className: "dialkit-panel-inner",
         initial: false,
         animate: {
-          width: isOpen ? 280 : 160,
+          width: isOpen ? 280 : 42,
+          height: isOpen ? contentHeight !== void 0 ? contentHeight + 24 : "auto" : 42,
+          borderRadius: isOpen ? 14 : 21,
           boxShadow: isOpen ? "0 8px 32px rgba(0, 0, 0, 0.5)" : "0 4px 16px rgba(0, 0, 0, 0.25)"
         },
-        transition: { type: "spring", visualDuration: 0.4, bounce: 0.05 },
-        "data-collapsed": !isOpen,
+        transition: panelTransition,
+        style: { overflow: isOpen ? void 0 : "hidden", cursor: isOpen ? void 0 : "pointer" },
+        onClick: !isOpen ? () => {
+          setIsOpen(true);
+          setIsCollapsed(false);
+          onOpenChange?.(true);
+        } : void 0,
+        onAnimationComplete: () => {
+          if (!isOpen) setIsCollapsed(true);
+        },
+        "data-collapsed": isCollapsed,
         children: folderContent
       }
     );
@@ -449,6 +525,23 @@ Apply these values as the new defaults in the useDialKit call.`;
 var import_react4 = require("react");
 var import_react5 = require("motion/react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var CLICK_THRESHOLD = 3;
+var DEAD_ZONE = 32;
+var MAX_CURSOR_RANGE = 200;
+var MAX_STRETCH = 8;
+function roundValue(val, step) {
+  const decimals = step >= 1 ? 0 : 2;
+  const factor = 10 ** decimals;
+  return Math.round(val * factor) / factor;
+}
+function snapToDecile(rawValue, min, max) {
+  const normalized = (rawValue - min) / (max - min);
+  const nearest = Math.round(normalized * 10) / 10;
+  if (Math.abs(normalized - nearest) <= 0.03125) {
+    return min + nearest * (max - min);
+  }
+  return rawValue;
+}
 function Slider({
   label,
   value,
@@ -458,8 +551,11 @@ function Slider({
   step = 0.01,
   unit
 }) {
+  const wrapperRef = (0, import_react4.useRef)(null);
   const trackRef = (0, import_react4.useRef)(null);
   const inputRef = (0, import_react4.useRef)(null);
+  const labelRef = (0, import_react4.useRef)(null);
+  const valueSpanRef = (0, import_react4.useRef)(null);
   const [isInteracting, setIsInteracting] = (0, import_react4.useState)(false);
   const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
@@ -468,78 +564,160 @@ function Slider({
   const [showInput, setShowInput] = (0, import_react4.useState)(false);
   const [inputValue, setInputValue] = (0, import_react4.useState)("");
   const hoverTimeoutRef = (0, import_react4.useRef)(null);
+  const pointerDownPos = (0, import_react4.useRef)(null);
+  const isClickRef = (0, import_react4.useRef)(true);
+  const animRef = (0, import_react4.useRef)(null);
+  const wrapperRectRef = (0, import_react4.useRef)(null);
+  const scaleRef = (0, import_react4.useRef)(1);
   const percentage = (value - min) / (max - min) * 100;
-  const isAtMinimum = value <= min;
   const isActive = isInteracting || isHovered;
+  const fillPercent = (0, import_react5.useMotionValue)(percentage);
+  const fillWidth = (0, import_react5.useTransform)(fillPercent, (pct) => `${pct}%`);
+  const handleLeft = (0, import_react5.useTransform)(
+    fillPercent,
+    (pct) => `max(5px, calc(${pct}% - 9px))`
+  );
+  const rubberStretchPx = (0, import_react5.useMotionValue)(0);
+  const rubberBandWidth = (0, import_react5.useTransform)(
+    rubberStretchPx,
+    (stretch) => `calc(100% + ${Math.abs(stretch)}px)`
+  );
+  const rubberBandX = (0, import_react5.useTransform)(
+    rubberStretchPx,
+    (stretch) => stretch < 0 ? stretch : 0
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!isInteracting && !animRef.current) {
+      fillPercent.jump(percentage);
+    }
+  }, [percentage, isInteracting, fillPercent]);
   const positionToValue = (0, import_react4.useCallback)(
     (clientX) => {
-      if (!trackRef.current) return value;
-      const rect = trackRef.current.getBoundingClientRect();
-      const x = clientX - rect.left;
-      const percent = Math.max(0, Math.min(1, x / rect.width));
+      const rect = wrapperRectRef.current;
+      if (!rect) return value;
+      const screenX = clientX - rect.left;
+      const sceneX = screenX / scaleRef.current;
+      const nativeWidth = wrapperRef.current ? wrapperRef.current.offsetWidth : rect.width;
+      const percent = Math.max(0, Math.min(1, sceneX / nativeWidth));
       const rawValue = min + percent * (max - min);
       return Math.max(min, Math.min(max, rawValue));
     },
     [min, max, value]
   );
-  const handleMouseDown = (0, import_react4.useCallback)(
-    (e) => {
-      if (showInput) return;
-      e.preventDefault();
-      setIsInteracting(true);
-      onChange(positionToValue(e.clientX));
-    },
-    [positionToValue, onChange, showInput]
+  const percentFromValue = (0, import_react4.useCallback)(
+    (v) => (v - min) / (max - min) * 100,
+    [min, max]
   );
-  const handleMouseMove = (0, import_react4.useCallback)(
-    (e) => {
-      if (!isInteracting) return;
-      if (!isDragging) setIsDragging(true);
-      onChange(positionToValue(e.clientX));
+  const computeRubberStretch = (0, import_react4.useCallback)(
+    (clientX, sign) => {
+      const rect = wrapperRectRef.current;
+      if (!rect) return 0;
+      const distancePast = sign < 0 ? rect.left - clientX : clientX - rect.right;
+      const overflow = Math.max(0, distancePast - DEAD_ZONE);
+      return sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1));
     },
-    [isInteracting, isDragging, positionToValue, onChange]
+    []
   );
-  const handleMouseUp = (0, import_react4.useCallback)(() => {
-    setIsInteracting(false);
-    setIsDragging(false);
-  }, []);
-  const handleTouchStart = (0, import_react4.useCallback)(
+  const handlePointerDown = (0, import_react4.useCallback)(
     (e) => {
       if (showInput) return;
       e.preventDefault();
+      e.target.setPointerCapture(e.pointerId);
+      pointerDownPos.current = { x: e.clientX, y: e.clientY };
+      isClickRef.current = true;
       setIsInteracting(true);
-      const touch = e.touches[0];
-      onChange(positionToValue(touch.clientX));
+      if (wrapperRef.current) {
+        wrapperRectRef.current = wrapperRef.current.getBoundingClientRect();
+        const nativeWidth = wrapperRef.current.offsetWidth;
+        scaleRef.current = wrapperRectRef.current.width / nativeWidth;
+      }
     },
-    [positionToValue, onChange, showInput]
+    [showInput]
   );
-  const handleTouchMove = (0, import_react4.useCallback)(
+  const handlePointerMove = (0, import_react4.useCallback)(
+    (e) => {
+      if (!isInteracting || !pointerDownPos.current) return;
+      const dx = e.clientX - pointerDownPos.current.x;
+      const dy = e.clientY - pointerDownPos.current.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (isClickRef.current && distance > CLICK_THRESHOLD) {
+        isClickRef.current = false;
+        setIsDragging(true);
+      }
+      if (!isClickRef.current) {
+        const rect = wrapperRectRef.current;
+        if (rect) {
+          if (e.clientX < rect.left) {
+            rubberStretchPx.jump(computeRubberStretch(e.clientX, -1));
+          } else if (e.clientX > rect.right) {
+            rubberStretchPx.jump(computeRubberStretch(e.clientX, 1));
+          } else {
+            rubberStretchPx.jump(0);
+          }
+        }
+        const newValue = positionToValue(e.clientX);
+        const newPct = percentFromValue(newValue);
+        if (animRef.current) {
+          animRef.current.stop();
+          animRef.current = null;
+        }
+        fillPercent.jump(newPct);
+        onChange(roundValue(newValue, step));
+      }
+    },
+    [
+      isInteracting,
+      positionToValue,
+      percentFromValue,
+      onChange,
+      fillPercent,
+      rubberStretchPx,
+      computeRubberStretch
+    ]
+  );
+  const handlePointerUp = (0, import_react4.useCallback)(
     (e) => {
       if (!isInteracting) return;
-      if (!isDragging) setIsDragging(true);
-      const touch = e.touches[0];
-      onChange(positionToValue(touch.clientX));
+      if (isClickRef.current) {
+        const rawValue = positionToValue(e.clientX);
+        const snappedValue = snapToDecile(rawValue, min, max);
+        const newPct = percentFromValue(snappedValue);
+        if (animRef.current) {
+          animRef.current.stop();
+        }
+        animRef.current = (0, import_react5.animate)(fillPercent, newPct, {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          mass: 0.8,
+          onComplete: () => {
+            animRef.current = null;
+          }
+        });
+        onChange(roundValue(snappedValue, step));
+      }
+      if (rubberStretchPx.get() !== 0) {
+        (0, import_react5.animate)(rubberStretchPx, 0, {
+          type: "spring",
+          visualDuration: 0.35,
+          bounce: 0.15
+        });
+      }
+      setIsInteracting(false);
+      setIsDragging(false);
+      pointerDownPos.current = null;
     },
-    [isInteracting, isDragging, positionToValue, onChange]
+    [
+      isInteracting,
+      positionToValue,
+      percentFromValue,
+      onChange,
+      min,
+      max,
+      fillPercent,
+      rubberStretchPx
+    ]
   );
-  const handleTouchEnd = (0, import_react4.useCallback)(() => {
-    setIsInteracting(false);
-    setIsDragging(false);
-  }, []);
-  (0, import_react4.useEffect)(() => {
-    if (isInteracting) {
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-      document.addEventListener("touchmove", handleTouchMove, { passive: false });
-      document.addEventListener("touchend", handleTouchEnd);
-      return () => {
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        document.removeEventListener("touchmove", handleTouchMove);
-        document.removeEventListener("touchend", handleTouchEnd);
-      };
-    }
-  }, [isInteracting, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
   (0, import_react4.useEffect)(() => {
     if (isValueHovered && !showInput && !isValueEditable) {
       hoverTimeoutRef.current = setTimeout(() => {
@@ -571,7 +749,7 @@ function Slider({
     const parsed = parseFloat(inputValue);
     if (!isNaN(parsed)) {
       const clamped = Math.max(min, Math.min(max, parsed));
-      onChange(clamped);
+      onChange(roundValue(clamped, step));
     }
     setShowInput(false);
     setIsValueHovered(false);
@@ -597,29 +775,56 @@ function Slider({
     handleInputSubmit();
   };
   const displayValue = step >= 1 ? value.toFixed(0) : value.toFixed(2);
-  const shouldAnimate = !isDragging;
-  const transition = shouldAnimate ? { type: "spring", visualDuration: 0.3, bounce: 0.15 } : { duration: 0 };
-  const handleLeft = isAtMinimum ? 7 : `calc(${percentage}% - 9px)`;
+  const HANDLE_BUFFER = 8;
+  const LABEL_CSS_LEFT = 10;
+  const VALUE_CSS_RIGHT = 10;
+  let leftThreshold = 30;
+  let rightThreshold = 78;
+  const trackWidth = wrapperRef.current?.offsetWidth;
+  if (trackWidth && trackWidth > 0) {
+    if (labelRef.current) {
+      leftThreshold = (LABEL_CSS_LEFT + labelRef.current.offsetWidth + HANDLE_BUFFER) / trackWidth * 100;
+    }
+    if (valueSpanRef.current) {
+      rightThreshold = (trackWidth - VALUE_CSS_RIGHT - valueSpanRef.current.offsetWidth - HANDLE_BUFFER) / trackWidth * 100;
+    }
+  }
+  const valueDodge = percentage < leftThreshold || percentage > rightThreshold;
+  const handleOpacity = !isActive ? 0 : valueDodge ? 0.1 : isDragging ? 0.9 : 0.5;
   const fillBackground = isActive ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.11)";
-  const hashMarks = Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dialkit-slider-hashmark", children: "\u2022" }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
+  const hashMarks = Array.from({ length: 9 }, (_, i) => {
+    const pct = (i + 1) * 10;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "dialkit-slider-hashmark",
+        style: { left: `${pct}%` }
+      },
+      i
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: wrapperRef, className: "dialkit-slider-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_react5.motion.div,
     {
       ref: trackRef,
       className: `dialkit-slider ${isActive ? "dialkit-slider-active" : ""}`,
-      onMouseDown: handleMouseDown,
-      onTouchStart: handleTouchStart,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
+      style: { width: rubberBandWidth, x: rubberBandX },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dialkit-slider-hashmarks", children: hashMarks }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           import_react5.motion.div,
           {
             className: "dialkit-slider-fill",
-            style: { background: fillBackground, width: `${percentage}%`, transition: "background 0.15s" },
-            animate: { width: `${percentage}%` },
-            transition
+            style: {
+              background: fillBackground,
+              width: fillWidth,
+              transition: "background 0.15s"
+            }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -627,15 +832,23 @@ function Slider({
           {
             className: "dialkit-slider-handle",
             style: {
-              background: isInteracting ? "rgba(255, 255, 255, 1)" : "rgba(255, 255, 255, 0.5)",
               left: handleLeft,
-              opacity: isActive ? 1 : 0
+              y: "-50%",
+              background: "rgba(255, 255, 255, 0.9)"
+            },
+            animate: {
+              opacity: handleOpacity,
+              scaleX: isActive ? 1 : 0.25,
+              scaleY: isActive && valueDodge ? 0.75 : 1
             },
-            animate: { left: handleLeft, opacity: isActive ? 1 : 0 },
-            transition
+            transition: {
+              scaleX: { type: "spring", visualDuration: 0.25, bounce: 0.15 },
+              scaleY: { type: "spring", visualDuration: 0.2, bounce: 0.1 },
+              opacity: { duration: 0.15 }
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "dialkit-slider-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: labelRef, className: "dialkit-slider-label", children: label }),
         showInput ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "input",
           {
@@ -649,24 +862,22 @@ function Slider({
             onClick: (e) => e.stopPropagation(),
             onMouseDown: (e) => e.stopPropagation()
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "span",
           {
+            ref: valueSpanRef,
             className: `dialkit-slider-value ${isValueEditable ? "dialkit-slider-value-editable" : ""}`,
             onMouseEnter: () => setIsValueHovered(true),
             onMouseLeave: () => setIsValueHovered(false),
             onClick: handleValueClick,
             onMouseDown: (e) => isValueEditable && e.stopPropagation(),
             style: { cursor: isValueEditable ? "text" : "default" },
-            children: [
-              displayValue,
-              unit
-            ]
+            children: displayValue
           }
         )
       ]
     }
-  );
+  ) });
 }
 
 // src/components/SegmentedControl.tsx
@@ -951,20 +1162,349 @@ function SpringControl({ panelId, path, label, spring, onChange }) {
   ] }) });
 }
 
-// src/components/Panel.tsx
-var import_react9 = require("react");
+// src/components/TextControl.tsx
 var import_jsx_runtime7 = 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)(
+      "input",
+      {
+        type: "text",
+        className: "dialkit-text-input",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder
+      }
+    )
+  ] });
+}
+
+// src/components/SelectControl.tsx
+var import_react9 = require("react");
+var import_react10 = require("motion/react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function normalizeOptions(options) {
+  return options.map(
+    (opt) => typeof opt === "string" ? { value: opt, label: opt } : opt
+  );
+}
+function SelectControl({ label, value, options, onChange }) {
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const containerRef = (0, import_react9.useRef)(null);
+  const normalized = normalizeOptions(options);
+  const selectedOption = normalized.find((o) => o.value === value);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: containerRef, className: "dialkit-select-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        className: "dialkit-select-trigger",
+        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,
+              {
+                className: "dialkit-select-chevron",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                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" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react10.motion.div,
+      {
+        className: "dialkit-select-dropdown",
+        initial: { opacity: 0, y: -8, scale: 0.95 },
+        animate: { opacity: 1, y: 0, scale: 1 },
+        exit: { opacity: 0, y: -8, scale: 0.95 },
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+        children: normalized.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "button",
+          {
+            className: "dialkit-select-option",
+            "data-selected": String(option.value === value),
+            onClick: () => {
+              onChange(option.value);
+              setIsOpen(false);
+            },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    ) })
+  ] });
+}
+
+// src/components/ColorControl.tsx
+var import_react11 = require("react");
+var import_jsx_runtime9 = 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)(() => {
+    if (!isEditing) {
+      setEditValue(value);
+    }
+  }, [value, isEditing]);
+  function handleTextSubmit() {
+    setIsEditing(false);
+    if (HEX_COLOR_REGEX.test(editValue)) {
+      onChange(editValue);
+    } else {
+      setEditValue(value);
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      handleTextSubmit();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      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)(
+        "input",
+        {
+          type: "text",
+          className: "dialkit-color-hex-input",
+          value: editValue,
+          onChange: (e) => setEditValue(e.target.value),
+          onBlur: handleTextSubmit,
+          onKeyDown: handleKeyDown,
+          autoFocus: true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "span",
+        {
+          className: "dialkit-color-hex",
+          onClick: () => setIsEditing(true),
+          children: (value ?? "").toUpperCase()
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          className: "dialkit-color-swatch",
+          style: { backgroundColor: value },
+          onClick: () => colorInputRef.current?.click(),
+          title: "Pick color"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "input",
+        {
+          ref: colorInputRef,
+          type: "color",
+          className: "dialkit-color-picker-native",
+          value: value.length === 4 ? expandShorthandHex(value) : value.slice(0, 7),
+          onChange: (e) => onChange(e.target.value)
+        }
+      )
+    ] })
+  ] });
+}
+function expandShorthandHex(hex) {
+  if (hex.length !== 4) return hex;
+  return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+}
+
+// src/components/PresetManager.tsx
+var import_react12 = require("react");
+var import_react_dom = require("react-dom");
+var import_react13 = require("motion/react");
+var import_jsx_runtime10 = 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 hasPresets = presets.length > 0;
+  const activePreset = presets.find((p) => p.id === activePresetId);
+  const open = (0, import_react12.useCallback)(() => {
+    if (!hasPresets) return;
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (rect) {
+      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }
+    setIsOpen(true);
+  }, [hasPresets]);
+  const close = (0, import_react12.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react12.useCallback)(() => {
+    if (isOpen) close();
+    else open();
+  }, [isOpen, open, close]);
+  (0, import_react12.useEffect)(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen, close]);
+  const handleSelect = (presetId) => {
+    if (presetId) {
+      DialStore.loadPreset(panelId, presetId);
+    } else {
+      DialStore.clearActivePreset(panelId);
+    }
+    close();
+  };
+  const handleDelete = (e, presetId) => {
+    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)(
+      "button",
+      {
+        ref: triggerRef,
+        className: "dialkit-preset-trigger",
+        onClick: toggle,
+        "data-open": String(isOpen),
+        "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,
+            {
+              className: "dialkit-select-chevron",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              animate: { rotate: isOpen ? 180 : 0 },
+              transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M6 9.5L12 15.5L18 9.5" })
+            }
+          )
+        ]
+      }
+    ),
+    (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react13.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        import_react13.motion.div,
+        {
+          ref: dropdownRef,
+          className: "dialkit-preset-dropdown",
+          style: { position: "fixed", top: pos.top, left: pos.left, minWidth: pos.width },
+          initial: { opacity: 0, y: 4, scale: 0.97 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.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" })
+              }
+            ),
+            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime10.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)(
+                    "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" })
+                      ] })
+                    }
+                  )
+                ]
+              },
+              preset.id
+            ))
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+// src/components/Panel.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Panel({ panel }) {
-  const values = (0, import_react9.useSyncExternalStore)(
+  const [copied, setCopied] = (0, import_react14.useState)(false);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react14.useState)(true);
+  const values = (0, import_react14.useSyncExternalStore)(
     (cb) => DialStore.subscribe(panel.id, cb),
     () => DialStore.getValues(panel.id),
     () => DialStore.getValues(panel.id)
   );
+  const presets = DialStore.getPresets(panel.id);
+  const activePresetId = DialStore.getActivePresetId(panel.id);
+  const handleAddPreset = () => {
+    const nextNum = presets.length + 2;
+    DialStore.savePreset(panel.id, `Version ${nextNum}`);
+  };
+  const handleCopy = () => {
+    const jsonStr = JSON.stringify(values, null, 2);
+    const instruction = `Update the useDialKit configuration for "${panel.name}" with these values:
+
+\`\`\`json
+${jsonStr}
+\`\`\`
+
+Apply these values as the new defaults in the useDialKit call.`;
+    navigator.clipboard.writeText(instruction);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
   const renderControl = (control) => {
     const value = values[control.path];
     switch (control.type) {
       case "slider":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Slider,
           {
             label: control.label,
@@ -977,7 +1517,7 @@ function Panel({ panel }) {
           control.path
         );
       case "toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Toggle,
           {
             label: control.label,
@@ -987,7 +1527,7 @@ function Panel({ panel }) {
           control.path
         );
       case "spring":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           SpringControl,
           {
             panelId: panel.id,
@@ -999,7 +1539,39 @@ function Panel({ panel }) {
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+      case "text":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          TextControl,
+          {
+            label: control.label,
+            value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            placeholder: control.placeholder
+          },
+          control.path
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          SelectControl,
+          {
+            label: control.label,
+            value,
+            options: control.options ?? [],
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+          },
+          control.path
+        );
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ColorControl,
+          {
+            label: control.label,
+            value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+          },
+          control.path
+        );
       default:
         return null;
     }
@@ -1010,24 +1582,16 @@ function Panel({ panel }) {
     while (i < panel.controls.length) {
       const control = panel.controls[i];
       if (control.type === "action") {
-        const actions = [control];
-        while (i + 1 < panel.controls.length && panel.controls[i + 1].type === "action") {
-          i++;
-          actions.push(panel.controls[i]);
-        }
         result.push(
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "dialkit-labeled-control dialkit-actions-group", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "dialkit-labeled-control-label", children: "Actions" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "dialkit-actions-stack", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "button",
-              {
-                className: "dialkit-action-button",
-                onClick: () => DialStore.triggerAction(panel.id, action.path),
-                children: action.label
-              },
-              action.path
-            )) })
-          ] }, `actions-${actions[0].path}`)
+          /* @__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));
@@ -1036,15 +1600,88 @@ function Panel({ panel }) {
     }
     return result;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Folder, { title: panel.name, defaultOpen: true, isRoot: true, panelId: panel.id, children: renderControls() });
+  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)(
+      "button",
+      {
+        className: "dialkit-toolbar-add",
+        onClick: handleAddPreset,
+        title: "Add preset",
+        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" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      PresetManager,
+      {
+        panelId: panel.id,
+        presets,
+        activePresetId,
+        onAdd: handleAddPreset
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "button",
+      {
+        className: "dialkit-toolbar-copy",
+        onClick: handleCopy,
+        title: "Copy parameters",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-toolbar-copy-icon-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react15.AnimatePresence, { mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react15.motion.svg,
+            {
+              className: "dialkit-toolbar-copy-icon",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              initial: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
+              animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
+              exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
+              transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M5 12.75L10 19L19 5" })
+            },
+            "check"
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_react15.motion.svg,
+            {
+              className: "dialkit-toolbar-copy-icon",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              initial: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
+              animate: { scale: 1, opacity: 1, filter: "blur(0px)" },
+              exit: { scale: 0.5, opacity: 0, filter: "blur(4px)" },
+              transition: { type: "spring", visualDuration: 0.3, bounce: 0.2 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_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" })
+              ]
+            },
+            "clipboard"
+          ) }) }),
+          "Copy"
+        ]
+      }
+    )
+  ] });
+  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() }) });
 }
 
 // src/components/DialRoot.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DialRoot({ position = "top-right" }) {
-  const [panels, setPanels] = (0, import_react10.useState)([]);
-  const [mounted, setMounted] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const [panels, setPanels] = (0, import_react16.useState)([]);
+  const [mounted, setMounted] = (0, import_react16.useState)(false);
+  (0, import_react16.useEffect)(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
     const unsubscribe = DialStore.subscribeGlobal(() => {
@@ -1058,14 +1695,14 @@ function DialRoot({ position = "top-right" }) {
   if (panels.length === 0) {
     return null;
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dialkit-root", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Panel, { panel }, panel.id)) }) });
-  return (0, import_react_dom.createPortal)(content, document.body);
+  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)) }) });
+  return (0, import_react_dom2.createPortal)(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ButtonGroup({ buttons }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       className: "dialkit-button",
@@ -1078,13 +1715,16 @@ function ButtonGroup({ buttons }) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonGroup,
+  ColorControl,
   DialRoot,
   DialStore,
   Folder,
-  SegmentedControl,
+  PresetManager,
+  SelectControl,
   Slider,
   SpringControl,
   SpringVisualization,
+  TextControl,
   Toggle,
   useDialKit
 });