dialkit 0.2.0 → 0.2.2

package/README.md

@@ -72,12 +72,24 @@ Returns a fully typed object matching your config shape with live values. Updati
 
 ### Slider
 
+Numbers create sliders. There are three ways to define them:
+
+**Explicit range** — `[default, min, max]`:
+```tsx
+blur: [24, 0, 100]
+```
+
+**Explicit range + step** — `[default, min, max, step]`:
 ```tsx
-blur: [24, 0, 100]      // [default, min, max] — explicit range
-scale: 1.2              // auto-infers range from value
+blur: [24, 0, 100, 5]    // snaps in increments of 5
 ```
+When `step` is omitted, it's inferred from the range (see table below).
 
-Numbers create sliders. With a tuple `[default, min, max]` you set the range explicitly. A bare number auto-infers a reasonable range:
+**Auto-inferred** — bare number:
+```tsx
+scale: 1.2
+```
+A single number auto-infers a reasonable min, max, and step:
 
 | Value range | Inferred min/max | Step |
 |-------------|-----------------|------|
@@ -197,19 +209,28 @@ Action buttons trigger callbacks without storing any value. The `label` defaults
 
 ### Folder
 
+Any nested plain object becomes a collapsible folder. Folders can nest arbitrarily deep.
+
 ```tsx
 shadow: {
   blur: [10, 0, 50],
   opacity: [0.25, 0, 1],
   color: '#000000',
 }
+
+// Access nested values:
+params.shadow.blur     // number
+params.shadow.color    // string
 ```
 
-Any nested plain object becomes a collapsible folder. Folders can nest arbitrarily deep. Access nested values with dot notation on the returned object:
+Folders are open by default. Add `_collapsed: true` to start a folder closed. This is a reserved metadata key — it controls the UI only and won't appear in your returned values.
 
 ```tsx
-params.shadow.blur     // number
-params.shadow.color    // string
+shadow: {
+  _collapsed: true,    // folder starts closed
+  blur: [10, 0, 50],
+  opacity: [0.25, 0, 1],
+}
 ```
 
 ---

package/dist/index.cjs

@@ -197,16 +197,17 @@ var DialStoreClass = class {
   parseConfig(config, prefix) {
     const controls = [];
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
       const label = this.formatLabel(key);
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         controls.push({
           type: "slider",
           path,
           label,
           min: value[1],
           max: value[2],
-          step: this.inferStep(value[1], value[2])
+          step: value[3] ?? this.inferStep(value[1], value[2])
         });
       } else if (typeof value === "number") {
         const { min, max, step } = this.inferRange(value);
@@ -230,11 +231,14 @@ var DialStoreClass = class {
           controls.push({ type: "text", path, label });
         }
       } else if (typeof value === "object" && value !== null) {
+        const folderConfig = value;
+        const defaultOpen = "_collapsed" in folderConfig ? !folderConfig._collapsed : true;
         controls.push({
           type: "folder",
           path,
           label,
-          children: this.parseConfig(value, path)
+          defaultOpen,
+          children: this.parseConfig(folderConfig, path)
         });
       }
     }
@@ -243,8 +247,9 @@ var DialStoreClass = class {
   flattenValues(config, prefix) {
     const values = {};
     for (const [key, value] of Object.entries(config)) {
+      if (key === "_collapsed") continue;
       const path = prefix ? `${prefix}.${key}` : key;
-      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+      if (Array.isArray(value) && value.length <= 4 && typeof value[0] === "number") {
         values[path] = value[0];
       } else if (typeof value === "number" || typeof value === "boolean" || typeof value === "string") {
         values[path] = value;
@@ -336,8 +341,9 @@ function useDialKit(name, config, options) {
 function buildResolvedValues(config, flatValues, prefix) {
   const result = {};
   for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed") continue;
     const path = prefix ? `${prefix}.${key}` : key;
-    if (Array.isArray(configValue) && configValue.length === 3 && typeof configValue[0] === "number") {
+    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
       result[key] = flatValues[path] ?? configValue[0];
     } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
       result[key] = flatValues[path] ?? configValue;
@@ -383,7 +389,7 @@ function getFirstOptionValue(options) {
 
 // src/components/DialRoot.tsx
 var import_react16 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 
 // src/components/Panel.tsx
 var import_react14 = require("react");
@@ -398,8 +404,6 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
   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 panelTransition = { type: "spring", visualDuration: 0.4, bounce: 0.2 };
   (0, import_react2.useEffect)(() => {
     const el = contentRef.current;
     if (!el) return;
@@ -412,25 +416,20 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
     ro.observe(el);
     return () => ro.disconnect();
   }, [isOpen]);
+  const handleToggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    if (next) {
+      setIsCollapsed(false);
+    } else {
+      setIsCollapsed(true);
+    }
+    onOpenChange?.(next);
+  };
   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 ${isRoot ? "dialkit-panel-header" : ""}`, onClick: handleToggle, 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-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 })
-          }
-        ) }) : /* @__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 ? 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)(
@@ -467,53 +466,32 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, onOpenCha
           )
         )
       ] }),
-      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 })
-        }
-      ) })
+      isRoot && toolbar && isOpen && /* @__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: 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" },
+        initial: isRoot ? void 0 : { height: 0, opacity: 0 },
+        animate: isRoot ? void 0 : { height: "auto", opacity: 1 },
+        exit: isRoot ? void 0 : { height: 0, opacity: 0 },
+        transition: isRoot ? void 0 : { type: "spring", visualDuration: 0.35, bounce: 0.1 },
+        style: isRoot ? void 0 : { clipPath: "inset(0 -20px)" },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dialkit-folder-inner", children })
       }
     ) })
   ] });
   if (isRoot) {
+    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,
       {
         className: "dialkit-panel-inner",
-        initial: false,
-        animate: {
-          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: 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);
-        },
+        style: panelStyle,
+        onClick: !isOpen ? handleToggle : void 0,
         "data-collapsed": isCollapsed,
+        whileTap: !isOpen ? { scale: 0.9 } : void 0,
+        transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
         children: folderContent
       }
     );
@@ -529,10 +507,14 @@ var CLICK_THRESHOLD = 3;
 var DEAD_ZONE = 32;
 var MAX_CURSOR_RANGE = 200;
 var MAX_STRETCH = 8;
+function decimalsForStep(step) {
+  const s = step.toString();
+  const dot = s.indexOf(".");
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
 function roundValue(val, step) {
-  const decimals = step >= 1 ? 0 : 2;
-  const factor = 10 ** decimals;
-  return Math.round(val * factor) / factor;
+  const raw = Math.round(val / step) * step;
+  return parseFloat(raw.toFixed(decimalsForStep(step)));
 }
 function snapToDecile(rawValue, min, max) {
   const normalized = (rawValue - min) / (max - min);
@@ -680,7 +662,8 @@ function Slider({
       if (!isInteracting) return;
       if (isClickRef.current) {
         const rawValue = positionToValue(e.clientX);
-        const snappedValue = snapToDecile(rawValue, min, max);
+        const discreteSteps2 = (max - min) / step;
+        const snappedValue = discreteSteps2 <= 10 ? Math.max(min, Math.min(max, min + Math.round((rawValue - min) / step) * step)) : snapToDecile(rawValue, min, max);
         const newPct = percentFromValue(snappedValue);
         if (animRef.current) {
           animRef.current.stop();
@@ -760,7 +743,7 @@ function Slider({
       e.stopPropagation();
       e.preventDefault();
       setShowInput(true);
-      setInputValue(step >= 1 ? value.toFixed(0) : value.toFixed(2));
+      setInputValue(value.toFixed(decimalsForStep(step)));
     }
   };
   const handleInputKeyDown = (e) => {
@@ -774,7 +757,7 @@ function Slider({
   const handleInputBlur = () => {
     handleInputSubmit();
   };
-  const displayValue = step >= 1 ? value.toFixed(0) : value.toFixed(2);
+  const displayValue = value.toFixed(decimalsForStep(step));
   const HANDLE_BUFFER = 8;
   const LABEL_CSS_LEFT = 10;
   const VALUE_CSS_RIGHT = 10;
@@ -792,7 +775,18 @@ function Slider({
   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: 9 }, (_, i) => {
+  const discreteSteps = (max - min) / step;
+  const hashMarks = discreteSteps <= 10 ? Array.from({ length: discreteSteps - 1 }, (_, i) => {
+    const pct = (i + 1) * step / (max - min) * 100;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: "dialkit-slider-hashmark",
+        style: { left: `${pct}%` }
+      },
+      i
+    );
+  }) : Array.from({ length: 9 }, (_, i) => {
     const pct = (i + 1) * 10;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
@@ -1182,32 +1176,63 @@ function TextControl({ label, value, onChange, placeholder }) {
 
 // src/components/SelectControl.tsx
 var import_react9 = require("react");
+var import_react_dom = require("react-dom");
 var import_react10 = require("motion/react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+function toTitleCase(s) {
+  return s.replace(/\b\w/g, (c) => c.toUpperCase());
+}
 function normalizeOptions(options) {
   return options.map(
-    (opt) => typeof opt === "string" ? { value: opt, label: opt } : opt
+    (opt) => typeof opt === "string" ? { value: opt, label: toTitleCase(opt) } : opt
   );
 }
 function SelectControl({ label, value, options, onChange }) {
   const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const containerRef = (0, import_react9.useRef)(null);
+  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 normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
+  const updatePos = (0, import_react9.useCallback)(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const dropdownHeight = 8 + normalized.length * 36;
+    const spaceBelow = window.innerHeight - rect.bottom - 4;
+    const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
+    setPos({
+      top: above ? rect.top - 4 : rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      above
+    });
+  }, [normalized.length]);
+  (0, import_react9.useEffect)(() => {
+    const root = triggerRef.current?.closest(".dialkit-root");
+    setPortalTarget(root ?? document.body);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen) return;
+    updatePos();
+  }, [isOpen, updatePos]);
   (0, import_react9.useEffect)(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
+      const target = e.target;
+      if (triggerRef.current && !triggerRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "dialkit-select-row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
+        ref: triggerRef,
         className: "dialkit-select-trigger",
         onClick: () => setIsOpen(!isOpen),
         "data-open": String(isOpen),
@@ -1234,29 +1259,39 @@ function SelectControl({ label, value, options, onChange }) {
         ]
       }
     ),
-    /* @__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
+    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,
+        {
+          ref: dropdownRef,
+          className: "dialkit-select-dropdown",
+          initial: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: pos.above ? 8 : -8, scale: 0.95 },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          style: {
+            position: "fixed",
+            left: pos.left,
+            width: pos.width,
+            ...pos.above ? { bottom: window.innerHeight - pos.top, transformOrigin: "bottom" } : { top: pos.top, transformOrigin: "top" }
           },
-          option.value
-        ))
-      }
-    ) })
+          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
+          ))
+        }
+      ) }),
+      portalTarget
+    )
   ] });
 }
 
@@ -1340,7 +1375,7 @@ function expandShorthandHex(hex) {
 
 // src/components/PresetManager.tsx
 var import_react12 = require("react");
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var import_react13 = require("motion/react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function PresetManager({ panelId, presets, activePresetId, onAdd }) {
@@ -1407,7 +1442,7 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
               strokeWidth: "2.5",
               strokeLinecap: "round",
               strokeLinejoin: "round",
-              animate: { rotate: isOpen ? 180 : 0 },
+              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" })
             }
@@ -1415,12 +1450,12 @@ function PresetManager({ panelId, presets, activePresetId, onAdd }) {
         ]
       }
     ),
-    (0, import_react_dom.createPortal)(
+    (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,
         {
           ref: dropdownRef,
-          className: "dialkit-preset-dropdown",
+          className: "dialkit-root 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 },
@@ -1539,7 +1574,7 @@ Apply these values as the new defaults in the useDialKit call.`;
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Folder, { title: control.label, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime11.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)(
           TextControl,
@@ -1603,11 +1638,13 @@ Apply these values as the new defaults in the useDialKit call.`;
   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",
+      import_react15.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" }),
@@ -1627,13 +1664,15 @@ Apply these values as the new defaults in the useDialKit call.`;
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "button",
+      import_react15.motion.button,
       {
         className: "dialkit-toolbar-copy",
         onClick: handleCopy,
         title: "Copy parameters",
+        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, { mode: "popLayout", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__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,
             {
               className: "dialkit-toolbar-copy-icon",
@@ -1696,7 +1735,7 @@ function DialRoot({ position = "top-right" }) {
     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)) }) });
-  return (0, import_react_dom2.createPortal)(content, document.body);
+  return (0, import_react_dom3.createPortal)(content, document.body);
 }
 
 // src/components/ButtonGroup.tsx