dialkit 0.1.0

package/dist/index.js

@@ -0,0 +1,1055 @@
+"use client";
+
+// src/hooks/useDialKit.ts
+import { useEffect, useId, useSyncExternalStore, useRef } from "react";
+
+// src/store/DialStore.ts
+var DialStoreClass = class {
+  constructor() {
+    this.panels = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+    this.globalListeners = /* @__PURE__ */ new Set();
+    this.snapshots = /* @__PURE__ */ new Map();
+    this.actionListeners = /* @__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.notifyGlobal();
+  }
+  unregisterPanel(id) {
+    this.panels.delete(id);
+    this.listeners.delete(id);
+    this.snapshots.delete(id);
+    this.notifyGlobal();
+  }
+  updateValue(panelId, path, value) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return;
+    panel.values[path] = value;
+    this.snapshots.set(panelId, { ...panel.values });
+    this.notify(panelId);
+  }
+  updateSpringMode(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) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return "simple";
+    return panel.values[`${path}.__mode`] || "simple";
+  }
+  getValue(panelId, path) {
+    const panel = this.panels.get(panelId);
+    return panel?.values[path];
+  }
+  getValues(panelId) {
+    return this.snapshots.get(panelId) ?? {};
+  }
+  getPanels() {
+    return Array.from(this.panels.values());
+  }
+  getPanel(id) {
+    return this.panels.get(id);
+  }
+  subscribe(panelId, listener) {
+    if (!this.listeners.has(panelId)) {
+      this.listeners.set(panelId, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(panelId).add(listener);
+    return () => {
+      this.listeners.get(panelId)?.delete(listener);
+    };
+  }
+  subscribeGlobal(listener) {
+    this.globalListeners.add(listener);
+    return () => this.globalListeners.delete(listener);
+  }
+  subscribeActions(panelId, listener) {
+    if (!this.actionListeners.has(panelId)) {
+      this.actionListeners.set(panelId, /* @__PURE__ */ new Set());
+    }
+    this.actionListeners.get(panelId).add(listener);
+    return () => {
+      this.actionListeners.get(panelId)?.delete(listener);
+    };
+  }
+  triggerAction(panelId, path) {
+    this.actionListeners.get(panelId)?.forEach((fn) => fn(path));
+  }
+  notify(panelId) {
+    this.listeners.get(panelId)?.forEach((fn) => fn());
+  }
+  notifyGlobal() {
+    this.globalListeners.forEach((fn) => fn());
+  }
+  parseConfig(config, prefix) {
+    const controls = [];
+    for (const [key, value] of Object.entries(config)) {
+      const path = prefix ? `${prefix}.${key}` : key;
+      const label = this.formatLabel(key);
+      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+        controls.push({
+          type: "slider",
+          path,
+          label,
+          min: value[1],
+          max: value[2],
+          step: this.inferStep(value[1], value[2])
+        });
+      } else if (typeof value === "number") {
+        const { min, max, step } = this.inferRange(value);
+        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.isActionConfig(value)) {
+        controls.push({ type: "action", path, label: value.label || label });
+      } else if (typeof value === "object" && value !== null) {
+        controls.push({
+          type: "folder",
+          path,
+          label,
+          children: this.parseConfig(value, path)
+        });
+      }
+    }
+    return controls;
+  }
+  flattenValues(config, prefix) {
+    const values = {};
+    for (const [key, value] of Object.entries(config)) {
+      const path = prefix ? `${prefix}.${key}` : key;
+      if (Array.isArray(value) && value.length === 3 && typeof value[0] === "number") {
+        values[path] = value[0];
+      } else if (typeof value === "number" || typeof value === "boolean" || typeof value === "string") {
+        values[path] = value;
+      } else if (this.isSpringConfig(value)) {
+        values[path] = value;
+      } else if (this.isActionConfig(value)) {
+        values[path] = value;
+      } else if (typeof value === "object" && value !== null) {
+        Object.assign(values, this.flattenValues(value, path));
+      }
+    }
+    return values;
+  }
+  isSpringConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "spring";
+  }
+  isActionConfig(value) {
+    return typeof value === "object" && value !== null && "type" in value && value.type === "action";
+  }
+  formatLabel(key) {
+    return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+  }
+  inferRange(value) {
+    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 };
+    } else if (value >= 0 && value <= 100) {
+      return { min: 0, max: value * 2 || 100, step: 1 };
+    } else if (value >= 0) {
+      return { min: 0, max: value * 2 || 1e3, step: 10 };
+    } else {
+      return { min: value * 2, max: -value * 2, step: 1 };
+    }
+  }
+  inferStep(min, max) {
+    const range = max - min;
+    if (range <= 1) return 0.01;
+    if (range <= 10) return 0.1;
+    if (range <= 100) return 1;
+    return 10;
+  }
+};
+var DialStore = new DialStoreClass();
+
+// src/hooks/useDialKit.ts
+function useDialKit(name, config, options) {
+  const instanceId = useId();
+  const panelId = `${name}-${instanceId}`;
+  const configRef = useRef(config);
+  const onActionRef = useRef(options?.onAction);
+  onActionRef.current = options?.onAction;
+  useEffect(() => {
+    DialStore.registerPanel(panelId, name, configRef.current);
+    return () => DialStore.unregisterPanel(panelId);
+  }, [panelId, name]);
+  useEffect(() => {
+    return DialStore.subscribeActions(panelId, (action) => {
+      onActionRef.current?.(action);
+    });
+  }, [panelId]);
+  const values = useSyncExternalStore(
+    (callback) => DialStore.subscribe(panelId, callback),
+    () => DialStore.getValues(panelId),
+    () => DialStore.getValues(panelId)
+  );
+  return buildResolvedValues(config, values, "");
+}
+function buildResolvedValues(config, flatValues, prefix) {
+  const result = {};
+  for (const [key, configValue] of Object.entries(config)) {
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (Array.isArray(configValue) && configValue.length === 3 && typeof configValue[0] === "number") {
+      result[key] = flatValues[path] ?? configValue[0];
+    } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isSpringConfig(configValue)) {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (typeof configValue === "object" && configValue !== null) {
+      result[key] = buildResolvedValues(configValue, flatValues, path);
+    }
+  }
+  return result;
+}
+function isSpringConfig(value) {
+  return typeof value === "object" && value !== null && "type" in value && value.type === "spring";
+}
+
+// src/components/DialRoot.tsx
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/Folder.tsx
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Folder({ title, children, defaultOpen = true, isRoot = false, panelId }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [copied, setCopied] = 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 iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
+  const folderContent = /* @__PURE__ */ jsxs("div", { className: `dialkit-folder ${isRoot ? "dialkit-folder-root" : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-header", onClick: () => setIsOpen(!isOpen), children: [
+      /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-title-row", children: [
+        /* @__PURE__ */ jsx("span", { className: `dialkit-folder-title ${isRoot ? "dialkit-folder-title-root" : ""}`, children: title }),
+        isRoot && panelId && /* @__PURE__ */ jsx(
+          motion.button,
+          {
+            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__ */ jsxs("div", { style: { position: "relative", width: 14, height: 14 }, children: [
+              /* @__PURE__ */ jsxs(
+                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__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                    /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                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__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+                }
+              )
+            ] })
+          }
+        )
+      ] }),
+      isRoot ? (
+        // Root panel uses minus/plus icons with crossfade
+        /* @__PURE__ */ jsxs("div", { className: "dialkit-folder-icon", style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsx(
+            motion.svg,
+            {
+              viewBox: "0 0 24 24",
+              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__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.svg,
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              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__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+              ]
+            }
+          )
+        ] })
+      ) : (
+        // Section folders use rotating chevron with gentle spring
+        /* @__PURE__ */ jsxs(
+          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__ */ jsx("line", { x1: "5", y1: "9", x2: "12", y2: "16" }),
+              /* @__PURE__ */ jsx("line", { x1: "19", y1: "9", x2: "12", y2: "16" })
+            ]
+          }
+        )
+      )
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+      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 },
+        children: /* @__PURE__ */ jsx("div", { className: "dialkit-folder-inner", children })
+      }
+    ) })
+  ] });
+  if (isRoot) {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "dialkit-panel-inner",
+        initial: false,
+        animate: {
+          width: isOpen ? 280 : 160,
+          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,
+        children: folderContent
+      }
+    );
+  }
+  return folderContent;
+}
+
+// src/components/Slider.tsx
+import { useRef as useRef2, useState as useState2, useCallback, useEffect as useEffect2 } from "react";
+import { motion as motion2 } from "motion/react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Slider({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 1,
+  step = 0.01,
+  unit
+}) {
+  const trackRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const [isInteracting, setIsInteracting] = useState2(false);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [isHovered, setIsHovered] = useState2(false);
+  const [isValueHovered, setIsValueHovered] = useState2(false);
+  const [isValueEditable, setIsValueEditable] = useState2(false);
+  const [showInput, setShowInput] = useState2(false);
+  const [inputValue, setInputValue] = useState2("");
+  const hoverTimeoutRef = useRef2(null);
+  const percentage = (value - min) / (max - min) * 100;
+  const isAtMinimum = value <= min;
+  const isActive = isInteracting || isHovered;
+  const positionToValue = 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 rawValue = min + percent * (max - min);
+      return Math.max(min, Math.min(max, rawValue));
+    },
+    [min, max, value]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (showInput) return;
+      e.preventDefault();
+      setIsInteracting(true);
+      onChange(positionToValue(e.clientX));
+    },
+    [positionToValue, onChange, showInput]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isInteracting) return;
+      if (!isDragging) setIsDragging(true);
+      onChange(positionToValue(e.clientX));
+    },
+    [isInteracting, isDragging, positionToValue, onChange]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsInteracting(false);
+    setIsDragging(false);
+  }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (showInput) return;
+      e.preventDefault();
+      setIsInteracting(true);
+      const touch = e.touches[0];
+      onChange(positionToValue(touch.clientX));
+    },
+    [positionToValue, onChange, showInput]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!isInteracting) return;
+      if (!isDragging) setIsDragging(true);
+      const touch = e.touches[0];
+      onChange(positionToValue(touch.clientX));
+    },
+    [isInteracting, isDragging, positionToValue, onChange]
+  );
+  const handleTouchEnd = useCallback(() => {
+    setIsInteracting(false);
+    setIsDragging(false);
+  }, []);
+  useEffect2(() => {
+    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]);
+  useEffect2(() => {
+    if (isValueHovered && !showInput && !isValueEditable) {
+      hoverTimeoutRef.current = setTimeout(() => {
+        setIsValueEditable(true);
+      }, 800);
+    } else if (!isValueHovered && !showInput) {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      setIsValueEditable(false);
+    }
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, [isValueHovered, showInput, isValueEditable]);
+  useEffect2(() => {
+    if (showInput && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [showInput]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleInputSubmit = () => {
+    const parsed = parseFloat(inputValue);
+    if (!isNaN(parsed)) {
+      const clamped = Math.max(min, Math.min(max, parsed));
+      onChange(clamped);
+    }
+    setShowInput(false);
+    setIsValueHovered(false);
+    setIsValueEditable(false);
+  };
+  const handleValueClick = (e) => {
+    if (isValueEditable) {
+      e.stopPropagation();
+      e.preventDefault();
+      setShowInput(true);
+      setInputValue(step >= 1 ? value.toFixed(0) : value.toFixed(2));
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleInputSubmit();
+    } else if (e.key === "Escape") {
+      setShowInput(false);
+      setIsValueHovered(false);
+    }
+  };
+  const handleInputBlur = () => {
+    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 fillBackground = isActive ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.11)";
+  const hashMarks = Array.from({ length: 7 }, (_, i) => /* @__PURE__ */ jsx2("span", { className: "dialkit-slider-hashmark", children: "\u2022" }, i));
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: trackRef,
+      className: `dialkit-slider ${isActive ? "dialkit-slider-active" : ""}`,
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "dialkit-slider-hashmarks", children: hashMarks }),
+        /* @__PURE__ */ jsx2(
+          motion2.div,
+          {
+            className: "dialkit-slider-fill",
+            style: { background: fillBackground, width: `${percentage}%`, transition: "background 0.15s" },
+            animate: { width: `${percentage}%` },
+            transition
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          motion2.div,
+          {
+            className: "dialkit-slider-handle",
+            style: {
+              background: isInteracting ? "rgba(255, 255, 255, 1)" : "rgba(255, 255, 255, 0.5)",
+              left: handleLeft,
+              opacity: isActive ? 1 : 0
+            },
+            animate: { left: handleLeft, opacity: isActive ? 1 : 0 },
+            transition
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "dialkit-slider-label", children: label }),
+        showInput ? /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            className: "dialkit-slider-input",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleInputKeyDown,
+            onBlur: handleInputBlur,
+            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation()
+          }
+        ) : /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            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
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/SegmentedControl.tsx
+import { useRef as useRef3, useState as useState3, useLayoutEffect } from "react";
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SegmentedControl({
+  options,
+  value,
+  onChange
+}) {
+  const containerRef = useRef3(null);
+  const buttonRefs = useRef3(/* @__PURE__ */ new Map());
+  const [pillStyle, setPillStyle] = useState3(null);
+  const hasAnimated = useRef3(false);
+  useLayoutEffect(() => {
+    const button = buttonRefs.current.get(value);
+    const container = containerRef.current;
+    if (button && container) {
+      const containerRect = container.getBoundingClientRect();
+      const buttonRect = button.getBoundingClientRect();
+      setPillStyle({
+        left: buttonRect.left - containerRect.left,
+        width: buttonRect.width
+      });
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: "dialkit-segmented", children: [
+    pillStyle && /* @__PURE__ */ jsx3(
+      motion3.div,
+      {
+        className: "dialkit-segmented-pill",
+        style: { left: pillStyle.left, width: pillStyle.width },
+        animate: { left: pillStyle.left, width: pillStyle.width },
+        transition: hasAnimated.current ? { type: "spring", visualDuration: 0.2, bounce: 0.15 } : { duration: 0 },
+        onAnimationComplete: () => {
+          hasAnimated.current = true;
+        }
+      }
+    ),
+    options.map((option) => {
+      const isActive = value === option.value;
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          ref: (el) => {
+            if (el) buttonRefs.current.set(option.value, el);
+          },
+          onClick: () => onChange(option.value),
+          className: "dialkit-segmented-button",
+          "data-active": String(isActive),
+          children: option.label
+        },
+        option.value
+      );
+    })
+  ] });
+}
+
+// src/components/Toggle.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function Toggle({ label, checked, onChange }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "dialkit-labeled-control", children: [
+    /* @__PURE__ */ jsx4("span", { className: "dialkit-labeled-control-label", children: label }),
+    /* @__PURE__ */ jsx4(
+      SegmentedControl,
+      {
+        options: [
+          { value: "off", label: "Off" },
+          { value: "on", label: "On" }
+        ],
+        value: checked ? "on" : "off",
+        onChange: (val) => onChange(val === "on")
+      }
+    )
+  ] });
+}
+
+// src/components/SpringVisualization.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function generateSpringCurve(stiffness, damping, mass, duration) {
+  const points = [];
+  const steps = 100;
+  const dt = duration / steps;
+  let position = 0;
+  let velocity = 0;
+  const target = 1;
+  for (let i = 0; i <= steps; i++) {
+    const time = i * dt;
+    points.push([time, position]);
+    const springForce = -stiffness * (position - target);
+    const dampingForce = -damping * velocity;
+    const acceleration = (springForce + dampingForce) / mass;
+    velocity += acceleration * dt;
+    position += velocity * dt;
+  }
+  return points;
+}
+function SpringVisualization({ spring, isSimpleMode }) {
+  const width = 256;
+  const height = 140;
+  let stiffness;
+  let damping;
+  let mass;
+  if (isSimpleMode) {
+    const visualDuration = spring.visualDuration ?? 0.3;
+    const bounce = spring.bounce ?? 0.2;
+    mass = 1;
+    stiffness = 2 * Math.PI / visualDuration;
+    stiffness = Math.pow(stiffness, 2);
+    const dampingRatio = 1 - bounce;
+    damping = 2 * dampingRatio * Math.sqrt(stiffness * mass);
+  } else {
+    stiffness = spring.stiffness ?? 400;
+    damping = spring.damping ?? 17;
+    mass = spring.mass ?? 1;
+  }
+  const duration = 2;
+  const points = generateSpringCurve(stiffness, damping, mass, duration);
+  const values = points.map(([, value]) => value);
+  const minValue = Math.min(...values);
+  const maxValue = Math.max(...values);
+  const valueRange = maxValue - minValue;
+  const pathData = points.map(([time, value], i) => {
+    const x = time / duration * width;
+    const normalizedValue = (value - minValue) / (valueRange || 1);
+    const y = height - (normalizedValue * height * 0.6 + height * 0.2);
+    return `${i === 0 ? "M" : "L"} ${x} ${y}`;
+  }).join(" ");
+  const gridLines = [];
+  for (let i = 1; i < 4; i++) {
+    const x = width / 4 * i;
+    const y = height / 4 * i;
+    gridLines.push(
+      /* @__PURE__ */ jsx5("line", { x1: x, y1: 0, x2: x, y2: height, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `v-${i}`),
+      /* @__PURE__ */ jsx5("line", { x1: 0, y1: y, x2: width, y2: y, stroke: "rgba(255, 255, 255, 0.08)", strokeWidth: "1" }, `h-${i}`)
+    );
+  }
+  return /* @__PURE__ */ jsxs5("svg", { viewBox: `0 0 ${width} ${height}`, className: "dialkit-spring-viz", children: [
+    gridLines,
+    /* @__PURE__ */ jsx5(
+      "line",
+      {
+        x1: 0,
+        y1: height / 2,
+        x2: width,
+        y2: height / 2,
+        stroke: "rgba(255, 255, 255, 0.15)",
+        strokeWidth: "1",
+        strokeDasharray: "4,4"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: pathData,
+        fill: "none",
+        stroke: "rgba(255, 255, 255, 0.6)",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+
+// src/components/SpringControl.tsx
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function SpringControl({ panelId, path, label, spring, onChange }) {
+  const mode = useSyncExternalStore2(
+    (cb) => DialStore.subscribe(panelId, cb),
+    () => DialStore.getSpringMode(panelId, path),
+    () => DialStore.getSpringMode(panelId, path)
+  );
+  const isSimpleMode = mode === "simple";
+  const handleModeChange = (newMode) => {
+    DialStore.updateSpringMode(panelId, path, newMode);
+    if (newMode === "simple") {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({
+        ...rest,
+        type: "spring",
+        visualDuration: spring.visualDuration ?? 0.3,
+        bounce: spring.bounce ?? 0.2
+      });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({
+        ...rest,
+        type: "spring",
+        stiffness: spring.stiffness ?? 200,
+        damping: spring.damping ?? 25,
+        mass: spring.mass ?? 1
+      });
+    }
+  };
+  const handleUpdate = (key, value) => {
+    if (isSimpleMode) {
+      const { stiffness, damping, mass, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    } else {
+      const { visualDuration, bounce, ...rest } = spring;
+      onChange({ ...rest, [key]: value });
+    }
+  };
+  return /* @__PURE__ */ jsx6(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+    /* @__PURE__ */ jsx6(SpringVisualization, { spring, isSimpleMode }),
+    /* @__PURE__ */ jsxs6("div", { className: "dialkit-labeled-control", children: [
+      /* @__PURE__ */ jsx6("span", { className: "dialkit-labeled-control-label", children: "Type" }),
+      /* @__PURE__ */ jsx6(
+        SegmentedControl,
+        {
+          options: [
+            { value: "simple", label: "Time" },
+            { value: "advanced", label: "Physics" }
+          ],
+          value: mode,
+          onChange: handleModeChange
+        }
+      )
+    ] }),
+    isSimpleMode ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        Slider,
+        {
+          label: "Duration",
+          value: spring.visualDuration ?? 0.3,
+          onChange: (v) => handleUpdate("visualDuration", v),
+          min: 0.1,
+          max: 1,
+          step: 0.05,
+          unit: "s"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Slider,
+        {
+          label: "Bounce",
+          value: spring.bounce ?? 0.2,
+          onChange: (v) => handleUpdate("bounce", v),
+          min: 0,
+          max: 1,
+          step: 0.05
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+      /* @__PURE__ */ jsx6(
+        Slider,
+        {
+          label: "Stiffness",
+          value: spring.stiffness ?? 400,
+          onChange: (v) => handleUpdate("stiffness", v),
+          min: 1,
+          max: 1e3,
+          step: 10
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Slider,
+        {
+          label: "Damping",
+          value: spring.damping ?? 17,
+          onChange: (v) => handleUpdate("damping", v),
+          min: 1,
+          max: 100,
+          step: 1
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        Slider,
+        {
+          label: "Mass",
+          value: spring.mass ?? 1,
+          onChange: (v) => handleUpdate("mass", v),
+          min: 0.1,
+          max: 10,
+          step: 0.1
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/Panel.tsx
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function Panel({ panel }) {
+  const values = useSyncExternalStore3(
+    (cb) => DialStore.subscribe(panel.id, cb),
+    () => DialStore.getValues(panel.id),
+    () => DialStore.getValues(panel.id)
+  );
+  const renderControl = (control) => {
+    const value = values[control.path];
+    switch (control.type) {
+      case "slider":
+        return /* @__PURE__ */ jsx7(
+          Slider,
+          {
+            label: control.label,
+            value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            min: control.min,
+            max: control.max,
+            step: control.step
+          },
+          control.path
+        );
+      case "toggle":
+        return /* @__PURE__ */ jsx7(
+          Toggle,
+          {
+            label: control.label,
+            checked: value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+          },
+          control.path
+        );
+      case "spring":
+        return /* @__PURE__ */ jsx7(
+          SpringControl,
+          {
+            panelId: panel.id,
+            path: control.path,
+            label: control.label,
+            spring: value,
+            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+          },
+          control.path
+        );
+      case "folder":
+        return /* @__PURE__ */ jsx7(Folder, { title: control.label, children: control.children?.map(renderControl) }, 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") {
+        const actions = [control];
+        while (i + 1 < panel.controls.length && panel.controls[i + 1].type === "action") {
+          i++;
+          actions.push(panel.controls[i]);
+        }
+        result.push(
+          /* @__PURE__ */ jsxs7("div", { className: "dialkit-labeled-control dialkit-actions-group", children: [
+            /* @__PURE__ */ jsx7("span", { className: "dialkit-labeled-control-label", children: "Actions" }),
+            /* @__PURE__ */ jsx7("div", { className: "dialkit-actions-stack", children: actions.map((action) => /* @__PURE__ */ jsx7(
+              "button",
+              {
+                className: "dialkit-action-button",
+                onClick: () => DialStore.triggerAction(panel.id, action.path),
+                children: action.label
+              },
+              action.path
+            )) })
+          ] }, `actions-${actions[0].path}`)
+        );
+      } else {
+        result.push(renderControl(control));
+      }
+      i++;
+    }
+    return result;
+  };
+  return /* @__PURE__ */ jsx7(Folder, { title: panel.name, defaultOpen: true, isRoot: true, panelId: panel.id, children: renderControls() });
+}
+
+// src/components/DialRoot.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DialRoot({ position = "top-right" }) {
+  const [panels, setPanels] = useState4([]);
+  const [mounted, setMounted] = useState4(false);
+  useEffect3(() => {
+    setMounted(true);
+    setPanels(DialStore.getPanels());
+    const unsubscribe = DialStore.subscribeGlobal(() => {
+      setPanels(DialStore.getPanels());
+    });
+    return unsubscribe;
+  }, []);
+  if (!mounted || typeof window === "undefined") {
+    return null;
+  }
+  if (panels.length === 0) {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsx8("div", { className: "dialkit-root", children: /* @__PURE__ */ jsx8("div", { className: "dialkit-panel", "data-position": position, children: panels.map((panel) => /* @__PURE__ */ jsx8(Panel, { panel }, panel.id)) }) });
+  return createPortal(content, document.body);
+}
+
+// src/components/ButtonGroup.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ButtonGroup({ buttons }) {
+  return /* @__PURE__ */ jsx9("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ jsx9(
+    "button",
+    {
+      className: "dialkit-button",
+      onClick: button.onClick,
+      children: button.label
+    },
+    index
+  )) });
+}
+export {
+  ButtonGroup,
+  DialRoot,
+  DialStore,
+  Folder,
+  SegmentedControl,
+  Slider,
+  SpringControl,
+  SpringVisualization,
+  Toggle,
+  useDialKit
+};
+//# sourceMappingURL=index.js.map