dialkit 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -23,8 +23,10 @@ var index_exports = {};
 __export(index_exports, {
   ButtonGroup: () => ButtonGroup,
   ColorControl: () => ColorControl,
+  ControlRenderer: () => ControlRenderer,
   DialRoot: () => DialRoot,
   DialStore: () => DialStore,
+  DialTimeline: () => DialTimeline,
   EasingVisualization: () => EasingVisualization,
   Folder: () => Folder,
   PresetManager: () => PresetManager,
@@ -34,15 +36,18 @@ __export(index_exports, {
   SpringControl: () => SpringControl,
   SpringVisualization: () => SpringVisualization,
   TextControl: () => TextControl,
+  TimelineStore: () => TimelineStore,
   Toggle: () => Toggle,
   TransitionControl: () => TransitionControl,
+  formatClock: () => formatClock,
   useDialKit: () => useDialKit,
-  useDialKitController: () => useDialKitController
+  useDialKitController: () => useDialKitController,
+  useDialTimeline: () => useDialTimeline
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/hooks/useDialKit.ts
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/store/DialStore.ts
 var EMPTY_VALUES = Object.freeze({});
@@ -112,6 +117,19 @@ function isSpringConfigValue(value) {
 function isEasingConfigValue(value) {
   return hasType(value, "easing");
 }
+function isHexColor(value) {
+  return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/.test(value);
+}
+function formatLabel(key) {
+  return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+}
+function 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;
+}
 function isActionConfigValue(value) {
   return hasType(value, "action");
 }
@@ -132,6 +150,9 @@ function getFirstOptionValue(options) {
 var DialStoreClass = class {
   constructor() {
     this.panels = /* @__PURE__ */ new Map();
+    this.panelsSnapshot = [];
+    this.standardPanelsSnapshot = [];
+    this.timelinePanelsSnapshot = [];
     this.listeners = /* @__PURE__ */ new Map();
     this.globalListeners = /* @__PURE__ */ new Set();
     this.snapshots = /* @__PURE__ */ new Map();
@@ -145,6 +166,12 @@ var DialStoreClass = class {
     this.persistConfigs = /* @__PURE__ */ new Map();
   }
   registerPanel(id, name, config, shortcuts, options = {}) {
+    const existingPanel = this.panels.get(id);
+    if (existingPanel && existingPanel.kind !== options.kind) {
+      console.warn(
+        `[dialkit] Panel id "${id}" cannot be shared by a timeline and a standard panel; the most recent registration controls where it renders.`
+      );
+    }
     this.configurePanelRetention(id, options);
     this.registrationCounts.set(id, (this.registrationCounts.get(id) ?? 0) + 1);
     const controls = this.parseConfig(config, "", shortcuts);
@@ -156,7 +183,7 @@ var DialStoreClass = class {
     const values = this.reconcileValues(defaultValues, previousValues, controlsByPath);
     const previousBaseValues = this.baseValues.get(id) ?? persisted?.baseValues ?? persisted?.values ?? {};
     const baseValues = this.reconcileValues(defaultValues, previousBaseValues, controlsByPath);
-    this.panels.set(id, { id, name, controls, values, shortcuts: shortcuts ?? {} });
+    this.panels.set(id, { id, name, controls, values, shortcuts: shortcuts ?? {}, kind: options.kind });
     this.snapshots.set(id, { ...values });
     this.baseValues.set(id, baseValues);
     this.defaultValues.set(id, { ...defaultValues });
@@ -183,7 +210,7 @@ var DialStoreClass = class {
     const defaultValues = this.flattenValues(config, "");
     this.initTransitionModes(config, "", defaultValues);
     const nextValues = this.reconcileValues(defaultValues, existing.values, controlsByPath);
-    const nextPanel = { id, name, controls, values: nextValues, shortcuts: shortcuts ?? existing.shortcuts };
+    const nextPanel = { id, name, controls, values: nextValues, shortcuts: shortcuts ?? existing.shortcuts, kind: options.kind ?? existing.kind };
     this.panels.set(id, nextPanel);
     this.snapshots.set(id, { ...nextValues });
     const previousBaseValues = this.baseValues.get(id) ?? {};
@@ -208,8 +235,8 @@ var DialStoreClass = class {
     }
     this.registrationCounts.delete(id);
     this.panels.delete(id);
-    this.listeners.delete(id);
-    this.actionListeners.delete(id);
+    if (this.listeners.get(id)?.size === 0) this.listeners.delete(id);
+    if (this.actionListeners.get(id)?.size === 0) this.actionListeners.delete(id);
     if (!this.retainedPanels.has(id)) {
       this.snapshots.delete(id);
       this.baseValues.delete(id);
@@ -301,8 +328,10 @@ var DialStoreClass = class {
   getValues(panelId) {
     return this.snapshots.get(panelId) ?? EMPTY_VALUES;
   }
-  getPanels() {
-    return Array.from(this.panels.values());
+  getPanels(kind) {
+    if (kind === "panel") return this.standardPanelsSnapshot;
+    if (kind === "timeline") return this.timelinePanelsSnapshot;
+    return this.panelsSnapshot;
   }
   getPanel(id) {
     return this.panels.get(id);
@@ -313,7 +342,11 @@ var DialStoreClass = class {
     }
     this.listeners.get(panelId).add(listener);
     return () => {
-      this.listeners.get(panelId)?.delete(listener);
+      const listeners = this.listeners.get(panelId);
+      listeners?.delete(listener);
+      if (listeners?.size === 0 && !this.panels.has(panelId)) {
+        this.listeners.delete(panelId);
+      }
     };
   }
   subscribeGlobal(listener) {
@@ -326,7 +359,11 @@ var DialStoreClass = class {
     }
     this.actionListeners.get(panelId).add(listener);
     return () => {
-      this.actionListeners.get(panelId)?.delete(listener);
+      const listeners = this.actionListeners.get(panelId);
+      listeners?.delete(listener);
+      if (listeners?.size === 0 && !this.panels.has(panelId)) {
+        this.actionListeners.delete(panelId);
+      }
     };
   }
   triggerAction(panelId, path) {
@@ -521,6 +558,9 @@ var DialStoreClass = class {
     this.listeners.get(panelId)?.forEach((fn) => fn());
   }
   notifyGlobal() {
+    this.panelsSnapshot = Array.from(this.panels.values());
+    this.standardPanelsSnapshot = this.panelsSnapshot.filter((panel) => panel.kind !== "timeline");
+    this.timelinePanelsSnapshot = this.panelsSnapshot.filter((panel) => panel.kind === "timeline");
     this.globalListeners.forEach((fn) => fn());
   }
   initTransitionModes(config, prefix, values) {
@@ -636,10 +676,10 @@ var DialStoreClass = class {
     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);
+    return isHexColor(value);
   }
   formatLabel(key) {
-    return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+    return formatLabel(key);
   }
   inferRange(value) {
     if (value >= 0 && value <= 1) {
@@ -655,11 +695,7 @@ var DialStoreClass = class {
     }
   }
   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;
+    return inferStep(min, max);
   }
   normalizePreservedValue(existingValue, defaultValue, control) {
     if (existingValue === void 0 || !control) {
@@ -731,31 +767,33 @@ var DialStoreClass = class {
     return map;
   }
 };
-var DialStore = new DialStoreClass();
+var DialStore = /* @__PURE__ */ new DialStoreClass();
 
-// src/hooks/useDialKit.ts
-function useDialKit(name, config, options) {
-  return useDialKitController(name, config, options).values;
+// src/hooks/useDialStorePanel.ts
+var import_react = require("react");
+function useSerialized(value) {
+  const ref = (0, import_react.useRef)();
+  if (!ref.current || !Object.is(ref.current.value, value)) {
+    ref.current = { value, text: JSON.stringify(value) };
+  }
+  return ref.current.text;
 }
-function useDialKitController(name, config, options) {
+function useDialStorePanel(name, config, options = {}) {
   const instanceId = (0, import_react.useId)();
-  const hasStableId = options?.id !== void 0;
-  const panelId = options?.id ?? `${name}-${instanceId}`;
+  const hasStableId = options.id !== void 0;
+  const panelId = options.id ?? `${name}-${instanceId}`;
   const configRef = (0, import_react.useRef)(config);
-  const serializedConfig = JSON.stringify(config);
   configRef.current = config;
-  const onActionRef = (0, import_react.useRef)(options?.onAction);
-  onActionRef.current = options?.onAction;
-  const shortcutsRef = (0, import_react.useRef)(options?.shortcuts);
-  shortcutsRef.current = options?.shortcuts;
-  const persistRef = (0, import_react.useRef)(options?.persist);
-  persistRef.current = options?.persist;
-  const serializedShortcuts = JSON.stringify(options?.shortcuts);
-  const serializedPersist = JSON.stringify(options?.persist);
+  const optionsRef = (0, import_react.useRef)(options);
+  optionsRef.current = options;
+  const serializedConfig = useSerialized(config);
+  const serializedShortcuts = useSerialized(options.shortcuts);
+  const serializedPersist = useSerialized(options.persist);
   (0, import_react.useEffect)(() => {
-    DialStore.registerPanel(panelId, name, configRef.current, shortcutsRef.current, {
+    DialStore.registerPanel(panelId, name, configRef.current, optionsRef.current.shortcuts, {
       retainOnUnmount: hasStableId,
-      persist: persistRef.current
+      persist: optionsRef.current.persist,
+      kind: optionsRef.current.kind
     });
     return () => DialStore.unregisterPanel(panelId);
   }, [hasStableId, panelId, name]);
@@ -765,49 +803,65 @@ function useDialKitController(name, config, options) {
       mountedRef.current = true;
       return;
     }
-    DialStore.updatePanel(panelId, name, configRef.current, shortcutsRef.current, {
+    DialStore.updatePanel(panelId, name, configRef.current, optionsRef.current.shortcuts, {
       retainOnUnmount: hasStableId,
-      persist: persistRef.current
+      persist: optionsRef.current.persist,
+      kind: optionsRef.current.kind
     });
   }, [hasStableId, panelId, name, serializedConfig, serializedShortcuts, serializedPersist]);
-  (0, import_react.useEffect)(() => {
-    return DialStore.subscribeActions(panelId, (action) => {
-      onActionRef.current?.(action);
-    });
-  }, [panelId]);
   const subscribe = (0, import_react.useCallback)(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = (0, import_react.useCallback)(
-    () => DialStore.getValues(panelId),
-    [panelId]
-  );
+  const getSnapshot = (0, import_react.useCallback)(() => DialStore.getValues(panelId), [panelId]);
   const flatValues = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  const values = (0, import_react.useMemo)(
+  return { panelId, flatValues, serializedConfig };
+}
+
+// src/hooks/useDialKit.ts
+function useDialKit(name, config, options) {
+  return useDialKitController(name, config, options).values;
+}
+function useDialKitController(name, config, options) {
+  const { panelId, flatValues, serializedConfig } = useDialStorePanel(name, config, {
+    id: options?.id,
+    persist: options?.persist,
+    shortcuts: options?.shortcuts
+  });
+  const configRef = (0, import_react2.useRef)(config);
+  configRef.current = config;
+  const onActionRef = (0, import_react2.useRef)(options?.onAction);
+  onActionRef.current = options?.onAction;
+  (0, import_react2.useEffect)(() => {
+    return DialStore.subscribeActions(panelId, (action) => {
+      onActionRef.current?.(action);
+    });
+  }, [panelId]);
+  const values = (0, import_react2.useMemo)(
     () => resolveDialValues(configRef.current, flatValues),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [flatValues, serializedConfig]
   );
-  const setValue = (0, import_react.useCallback)(
+  const setValue = (0, import_react2.useCallback)(
     (path, value) => {
       DialStore.updateValue(panelId, path, value);
     },
     [panelId]
   );
-  const setValues = (0, import_react.useCallback)(
+  const setValues = (0, import_react2.useCallback)(
     (nextValues) => {
       DialStore.updateValues(panelId, flattenDialValueUpdates(configRef.current, nextValues));
     },
     [panelId]
   );
-  const resetValues = (0, import_react.useCallback)(() => {
+  const resetValues = (0, import_react2.useCallback)(() => {
     DialStore.resetValues(panelId);
   }, [panelId]);
-  const getValues = (0, import_react.useCallback)(
+  const getValues = (0, import_react2.useCallback)(
     () => resolveDialValues(configRef.current, DialStore.getValues(panelId)),
     [panelId]
   );
-  return (0, import_react.useMemo)(
+  return (0, import_react2.useMemo)(
     () => ({
       values,
       setValue,
@@ -820,16 +874,222 @@ function useDialKitController(name, config, options) {
 }
 
 // src/components/DialRoot.tsx
-var import_react17 = require("react");
+var import_react21 = require("react");
 var import_react_dom3 = require("react-dom");
 
+// src/store/TimelineStore.ts
+function loopSpan(duration, loopStart) {
+  if (!Number.isFinite(duration) || duration <= 0) return 0;
+  if (!Number.isFinite(loopStart)) loopStart = 0;
+  const start = Math.min(Math.max(0, loopStart), duration);
+  return duration - start > 0 ? duration - start : duration;
+}
+function foldLoopTime(time, duration, loopStart = 0) {
+  if (!Number.isFinite(time) || !Number.isFinite(duration) || duration <= 0) {
+    return { time: 0, wraps: 0 };
+  }
+  if (time < duration) return { time, wraps: 0 };
+  const span = loopSpan(duration, loopStart);
+  const base = duration - span;
+  const over = time - base;
+  return { time: base + over % span, wraps: Math.floor(over / span) };
+}
+var TIMELINE_CLIP_COLORS = [
+  "#E8E8E8"
+  // neutral white — slightly off-white so the pure-white selection ring still reads
+];
+var EMPTY_TRANSPORT = Object.freeze({ time: 0, playing: false, duration: 0, wraps: 0 });
+var TimelineStoreClass = class {
+  constructor() {
+    this.timelines = /* @__PURE__ */ new Map();
+    this.transports = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+    this.globalListeners = /* @__PURE__ */ new Set();
+    this.registrationCounts = /* @__PURE__ */ new Map();
+    this.listCache = null;
+    this.rafId = null;
+    this.lastTick = 0;
+    this.tick = (now) => {
+      const dt = Math.max(0, (now - this.lastTick) / 1e3);
+      this.lastTick = now;
+      let anyPlaying = false;
+      for (const [id, transport] of this.transports) {
+        if (!transport.playing) continue;
+        const meta = this.timelines.get(id);
+        const duration = meta?.duration ?? transport.duration;
+        if (!Number.isFinite(duration) || duration <= 0) {
+          this.transports.set(id, { time: 0, playing: false, duration: 0, wraps: 0 });
+          this.notify(id);
+          continue;
+        }
+        let time = transport.time + dt;
+        let playing = true;
+        let wraps = transport.wraps;
+        if (time >= duration) {
+          if (meta?.loop) {
+            const folded = foldLoopTime(time, duration, meta.loopStart);
+            time = folded.time;
+            wraps += folded.wraps;
+          } else {
+            time = duration;
+            playing = false;
+          }
+        }
+        this.transports.set(id, { time, playing, duration, wraps });
+        if (playing) anyPlaying = true;
+        this.notify(id);
+      }
+      this.rafId = anyPlaying ? window.requestAnimationFrame(this.tick) : null;
+    };
+  }
+  register(meta, options) {
+    const existing = this.timelines.get(meta.id);
+    if (existing && existing.name !== meta.name) {
+      console.warn(
+        `[dialkit] Timeline id "${meta.id}" is already registered by "${existing.name}"; "${meta.name}" will share and overwrite that transport.`
+      );
+    }
+    this.registrationCounts.set(meta.id, (this.registrationCounts.get(meta.id) ?? 0) + 1);
+    this.applyMeta(meta, options.autoplay);
+  }
+  update(meta) {
+    if (!this.timelines.has(meta.id)) return;
+    this.applyMeta(meta, false);
+  }
+  unregister(id) {
+    const nextCount = (this.registrationCounts.get(id) ?? 1) - 1;
+    if (nextCount > 0) {
+      this.registrationCounts.set(id, nextCount);
+      return;
+    }
+    this.registrationCounts.delete(id);
+    this.timelines.delete(id);
+    this.transports.delete(id);
+    if (this.listeners.get(id)?.size === 0) this.listeners.delete(id);
+    this.listCache = null;
+    this.notifyGlobal();
+  }
+  play(id) {
+    const transport = this.transports.get(id);
+    if (!transport || transport.duration <= 0 || transport.playing) return;
+    const restart = transport.time >= transport.duration;
+    this.transports.set(id, {
+      ...transport,
+      time: restart ? 0 : transport.time,
+      wraps: restart ? 0 : transport.wraps,
+      playing: true
+    });
+    this.notify(id);
+    this.ensureLoop();
+  }
+  pause(id) {
+    const transport = this.transports.get(id);
+    if (!transport || !transport.playing) return;
+    this.transports.set(id, { ...transport, playing: false });
+    this.notify(id);
+  }
+  replay(id) {
+    const transport = this.transports.get(id);
+    if (!transport || transport.duration <= 0) return;
+    this.transports.set(id, { ...transport, time: 0, wraps: 0, playing: true });
+    this.notify(id);
+    this.ensureLoop();
+  }
+  seek(id, time) {
+    const transport = this.transports.get(id);
+    if (!transport || !Number.isFinite(time)) return;
+    const clamped = Math.min(transport.duration, Math.max(0, time));
+    this.transports.set(id, { ...transport, time: clamped, wraps: 0 });
+    this.notify(id);
+  }
+  getTransport(id) {
+    return this.transports.get(id) ?? EMPTY_TRANSPORT;
+  }
+  getTimeline(id) {
+    return this.timelines.get(id);
+  }
+  getTimelines() {
+    if (!this.listCache) {
+      this.listCache = Array.from(this.timelines.values());
+    }
+    return this.listCache;
+  }
+  subscribe(id, listener) {
+    if (!this.listeners.has(id)) {
+      this.listeners.set(id, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(id).add(listener);
+    return () => {
+      const listeners = this.listeners.get(id);
+      listeners?.delete(listener);
+      if (listeners?.size === 0 && !this.timelines.has(id)) {
+        this.listeners.delete(id);
+      }
+    };
+  }
+  subscribeGlobal(listener) {
+    this.globalListeners.add(listener);
+    return () => {
+      this.globalListeners.delete(listener);
+    };
+  }
+  applyMeta(meta, autoplay) {
+    const duration = Number.isFinite(meta.duration) ? Math.max(0, meta.duration) : 0;
+    const loopStart = Number.isFinite(meta.loopStart) ? Math.min(duration, Math.max(0, meta.loopStart)) : 0;
+    const safeMeta = { ...meta, duration, loopStart };
+    this.timelines.set(meta.id, safeMeta);
+    const existing = this.transports.get(meta.id);
+    if (existing) {
+      this.transports.set(meta.id, {
+        time: Math.min(existing.time, duration),
+        playing: duration > 0 && existing.playing,
+        duration,
+        wraps: existing.wraps
+      });
+    } else {
+      const playing = duration > 0 && autoplay;
+      this.transports.set(meta.id, { time: 0, playing, duration, wraps: 0 });
+      if (playing) this.ensureLoop();
+    }
+    this.listCache = null;
+    this.notify(meta.id);
+    this.notifyGlobal();
+  }
+  ensureLoop() {
+    if (this.rafId !== null || typeof window === "undefined") return;
+    this.lastTick = performance.now();
+    this.rafId = window.requestAnimationFrame(this.tick);
+  }
+  notify(id) {
+    this.listeners.get(id)?.forEach((fn) => fn());
+  }
+  notifyGlobal() {
+    this.globalListeners.forEach((fn) => fn());
+  }
+};
+var TimelineStore = /* @__PURE__ */ new TimelineStoreClass();
+
+// src/env.ts
+var import_meta = {};
+var isDevDefault = typeof process !== "undefined" && process?.env?.NODE_ENV ? process.env.NODE_ENV !== "production" : typeof import_meta !== "undefined" && import_meta.env?.MODE ? import_meta.env.MODE !== "production" : true;
+
 // src/components/Folder.tsx
-var import_react2 = require("react");
-var import_react3 = require("motion/react");
+var import_react3 = require("react");
+var import_react4 = require("motion/react");
 
 // src/icons.ts
 var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
 var ICON_CHECK = "M5 12.75L10 19L19 5";
+var ICON_PAUSE = [
+  "M6.75 3C5.23122 3 4 4.23122 4 5.75V18.25C4 19.7688 5.23122 21 6.75 21H7.25C8.76878 21 10 19.7688 10 18.25V5.75C10 4.23122 8.76878 3 7.25 3H6.75Z",
+  "M16.75 3C15.2312 3 14 4.23122 14 5.75V18.25C14 19.7688 15.2312 21 16.75 21H17.25C18.7688 21 20 19.7688 20 18.25V5.75C20 4.23122 18.7688 3 17.25 3H16.75Z"
+];
+var ICON_PLAY = "M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z";
+var ICON_TIMELINE = [
+  "M18.868 10C20.8517 10.0003 22.2886 11.8914 21.7577 13.8027L20.369 18.8027C20.0083 20.1012 18.826 20.9999 17.4784 21H6.51941C5.17179 21 3.98948 20.1012 3.62878 18.8027L2.24011 13.8027C1.7092 11.8913 3.14603 10.0003 5.12976 10H18.868Z",
+  "M18.9989 6.5C19.5511 6.50007 19.9989 6.94776 19.9989 7.5C19.9989 8.05224 19.5511 8.49993 18.9989 8.5H4.9989C4.44661 8.5 3.9989 8.05228 3.9989 7.5C3.9989 6.94772 4.44661 6.5 4.9989 6.5H18.9989Z",
+  "M16.9989 3C17.5511 3.00007 17.9989 3.44776 17.9989 4C17.9989 4.55224 17.5511 4.99993 16.9989 5H6.9989C6.44661 5 5.9989 4.55228 5.9989 4C5.9989 3.44772 6.44661 3 6.9989 3H16.9989Z"
+];
 var ICON_CLIPBOARD = {
   board: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z",
   sparkle: "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",
@@ -861,18 +1121,18 @@ var ICON_PANEL = {
 // src/components/Folder.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar, panelHeightOffset = 10 }) {
-  const [isOpen, setIsOpen] = (0, import_react2.useState)(defaultOpen);
-  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 [windowHeight, setWindowHeight] = (0, import_react2.useState)(typeof window !== "undefined" ? window.innerHeight : 800);
-  (0, import_react2.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(defaultOpen);
+  const [isCollapsed, setIsCollapsed] = (0, import_react3.useState)(!defaultOpen);
+  const contentRef = (0, import_react3.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react3.useState)(void 0);
+  const [windowHeight, setWindowHeight] = (0, import_react3.useState)(typeof window !== "undefined" ? window.innerHeight : 800);
+  (0, import_react3.useEffect)(() => {
     if (!isRoot) return;
     const onResize = () => setWindowHeight(window.innerHeight);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [isRoot]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const el = contentRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => {
@@ -918,7 +1178,7 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
               }
             ),
             !isRoot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_react3.motion.svg,
+              import_react4.motion.svg,
               {
                 className: "dialkit-folder-icon",
                 viewBox: "0 0 24 24",
@@ -936,8 +1196,8 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
           ] }),
           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,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react4.motion.div,
           {
             className: "dialkit-folder-content",
             initial: isRoot ? void 0 : { height: 0, opacity: 0 },
@@ -957,7 +1217,7 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
     }
     const panelStyle = isOpen ? { width: 280, height: contentHeight !== void 0 ? Math.min(contentHeight + panelHeightOffset, windowHeight - 32) : "auto", borderRadius: 14, boxShadow: "var(--dial-shadow)", cursor: void 0, overflowY: "auto" } : { width: 42, height: 42, borderRadius: "50%", boxSizing: "border-box", boxShadow: "var(--dial-shadow-collapsed)", overflow: "hidden", cursor: "pointer" };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react3.motion.div,
+      import_react4.motion.div,
       {
         className: "dialkit-panel-inner",
         style: panelStyle,
@@ -973,11 +1233,43 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
 }
 
 // src/components/Panel.tsx
-var import_react15 = require("react");
-var import_react16 = require("motion/react");
+var import_react17 = require("react");
+var import_react18 = require("motion/react");
+
+// src/copy-instruction.ts
+function buildCopyInstruction(hookName, panelName, values) {
+  const jsonStr = JSON.stringify(values, null, 2);
+  if (hookName === "useDialTimeline" || hookName === "createDialTimeline") {
+    return `Update the ${hookName} configuration for "${panelName}" with these values:
+
+\`\`\`json
+${jsonStr}
+\`\`\`
+
+Apply these values as the new defaults in the ${hookName} call. Keep the existing \`clip.current\` bindings while this timeline is being authored; do not convert the animation or remove DialKit yet.
+
+Add this comment immediately above the ${hookName} call as a production handoff note:
+
+\`\`\`tsx
+// TODO(production): DialKit's clip.current values are the scrubbable authoring preview.
+// Replace them with equivalent real Motion animations using the tuned timeline
+// timings and transitions, then remove ${hookName} and <DialTimeline />.
+\`\`\``;
+  }
+  return `Update the ${hookName} configuration for "${panelName}" with these values:
+
+\`\`\`json
+${jsonStr}
+\`\`\`
+
+Apply these values as the new defaults in the ${hookName} call.`;
+}
+
+// src/components/ControlRenderer.tsx
+var import_react14 = require("react");
 
 // src/components/ShortcutListener.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/shortcut-utils.ts
 function decimalsForStep(step) {
@@ -1066,14 +1358,14 @@ function formatModifier(modifier) {
 
 // src/components/ShortcutListener.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ShortcutContext = (0, import_react4.createContext)({ activePanelId: null, activePath: null });
+var ShortcutContext = (0, import_react5.createContext)({ activePanelId: null, activePath: null });
 function ShortcutListener({ children }) {
-  const [activeShortcut, setActiveShortcut] = (0, import_react4.useState)({ activePanelId: null, activePath: null });
-  const activeKeysRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
-  const isDraggingRef = (0, import_react4.useRef)(false);
-  const lastMouseXRef = (0, import_react4.useRef)(null);
-  const dragAccumulatorRef = (0, import_react4.useRef)(0);
-  const resolveActiveTarget = (0, import_react4.useCallback)((interaction) => {
+  const [activeShortcut, setActiveShortcut] = (0, import_react5.useState)({ activePanelId: null, activePath: null });
+  const activeKeysRef = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const isDraggingRef = (0, import_react5.useRef)(false);
+  const lastMouseXRef = (0, import_react5.useRef)(null);
+  const dragAccumulatorRef = (0, import_react5.useRef)(0);
+  const resolveActiveTarget = (0, import_react5.useCallback)((interaction) => {
     for (const key of activeKeysRef.current) {
       const panels = DialStore.getPanels();
       for (const panel of panels) {
@@ -1090,7 +1382,7 @@ function ShortcutListener({ children }) {
     }
     return null;
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (isInputFocused()) return;
       const key = e.key.toLowerCase();
@@ -1252,8 +1544,8 @@ function ShortcutListener({ children }) {
 }
 
 // src/components/Slider.tsx
-var import_react5 = require("react");
-var import_react6 = require("motion/react");
+var import_react6 = require("react");
+var import_react7 = require("motion/react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CLICK_THRESHOLD = 3;
 var DEAD_ZONE = 32;
@@ -1270,47 +1562,47 @@ function Slider({
   shortcut,
   shortcutActive
 }) {
-  const wrapperRef = (0, import_react5.useRef)(null);
-  const trackRef = (0, import_react5.useRef)(null);
-  const inputRef = (0, import_react5.useRef)(null);
-  const labelRef = (0, import_react5.useRef)(null);
-  const valueSpanRef = (0, import_react5.useRef)(null);
-  const [isInteracting, setIsInteracting] = (0, import_react5.useState)(false);
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
-  const [isValueHovered, setIsValueHovered] = (0, import_react5.useState)(false);
-  const [isValueEditable, setIsValueEditable] = (0, import_react5.useState)(false);
-  const [showInput, setShowInput] = (0, import_react5.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react5.useState)("");
-  const hoverTimeoutRef = (0, import_react5.useRef)(null);
-  const pointerDownPos = (0, import_react5.useRef)(null);
-  const isClickRef = (0, import_react5.useRef)(true);
-  const animRef = (0, import_react5.useRef)(null);
-  const wrapperRectRef = (0, import_react5.useRef)(null);
-  const scaleRef = (0, import_react5.useRef)(1);
+  const wrapperRef = (0, import_react6.useRef)(null);
+  const trackRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
+  const labelRef = (0, import_react6.useRef)(null);
+  const valueSpanRef = (0, import_react6.useRef)(null);
+  const [isInteracting, setIsInteracting] = (0, import_react6.useState)(false);
+  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
+  const [isValueHovered, setIsValueHovered] = (0, import_react6.useState)(false);
+  const [isValueEditable, setIsValueEditable] = (0, import_react6.useState)(false);
+  const [showInput, setShowInput] = (0, import_react6.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react6.useState)("");
+  const hoverTimeoutRef = (0, import_react6.useRef)(null);
+  const pointerDownPos = (0, import_react6.useRef)(null);
+  const isClickRef = (0, import_react6.useRef)(true);
+  const animRef = (0, import_react6.useRef)(null);
+  const wrapperRectRef = (0, import_react6.useRef)(null);
+  const scaleRef = (0, import_react6.useRef)(1);
   const percentage = (value - min) / (max - min) * 100;
   const isActive = isInteracting || isHovered;
-  const fillPercent = (0, import_react6.useMotionValue)(percentage);
-  const fillWidth = (0, import_react6.useTransform)(fillPercent, (pct) => `${pct}%`);
-  const handleLeft = (0, import_react6.useTransform)(
+  const fillPercent = (0, import_react7.useMotionValue)(percentage);
+  const fillWidth = (0, import_react7.useTransform)(fillPercent, (pct) => `${pct}%`);
+  const handleLeft = (0, import_react7.useTransform)(
     fillPercent,
     (pct) => `max(5px, calc(${pct}% - 9px))`
   );
-  const rubberStretchPx = (0, import_react6.useMotionValue)(0);
-  const rubberBandWidth = (0, import_react6.useTransform)(
+  const rubberStretchPx = (0, import_react7.useMotionValue)(0);
+  const rubberBandWidth = (0, import_react7.useTransform)(
     rubberStretchPx,
     (stretch) => `calc(100% + ${Math.abs(stretch)}px)`
   );
-  const rubberBandX = (0, import_react6.useTransform)(
+  const rubberBandX = (0, import_react7.useTransform)(
     rubberStretchPx,
     (stretch) => stretch < 0 ? stretch : 0
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!isInteracting && !animRef.current) {
       fillPercent.jump(percentage);
     }
   }, [percentage, isInteracting, fillPercent]);
-  const positionToValue = (0, import_react5.useCallback)(
+  const positionToValue = (0, import_react6.useCallback)(
     (clientX) => {
       const rect = wrapperRectRef.current;
       if (!rect) return value;
@@ -1323,11 +1615,11 @@ function Slider({
     },
     [min, max, value]
   );
-  const percentFromValue = (0, import_react5.useCallback)(
+  const percentFromValue = (0, import_react6.useCallback)(
     (v) => (v - min) / (max - min) * 100,
     [min, max]
   );
-  const computeRubberStretch = (0, import_react5.useCallback)(
+  const computeRubberStretch = (0, import_react6.useCallback)(
     (clientX, sign) => {
       const rect = wrapperRectRef.current;
       if (!rect) return 0;
@@ -1337,7 +1629,7 @@ function Slider({
     },
     []
   );
-  const handlePointerDown = (0, import_react5.useCallback)(
+  const handlePointerDown = (0, import_react6.useCallback)(
     (e) => {
       if (showInput) return;
       e.preventDefault();
@@ -1353,7 +1645,7 @@ function Slider({
     },
     [showInput]
   );
-  const handlePointerMove = (0, import_react5.useCallback)(
+  const handlePointerMove = (0, import_react6.useCallback)(
     (e) => {
       if (!isInteracting || !pointerDownPos.current) return;
       const dx = e.clientX - pointerDownPos.current.x;
@@ -1394,7 +1686,7 @@ function Slider({
       computeRubberStretch
     ]
   );
-  const handlePointerUp = (0, import_react5.useCallback)(
+  const handlePointerUp = (0, import_react6.useCallback)(
     (e) => {
       if (!isInteracting) return;
       if (isClickRef.current) {
@@ -1405,7 +1697,7 @@ function Slider({
         if (animRef.current) {
           animRef.current.stop();
         }
-        animRef.current = (0, import_react6.animate)(fillPercent, newPct, {
+        animRef.current = (0, import_react7.animate)(fillPercent, newPct, {
           type: "spring",
           stiffness: 300,
           damping: 25,
@@ -1417,7 +1709,7 @@ function Slider({
         onChange(roundValue(snappedValue, step));
       }
       if (rubberStretchPx.get() !== 0) {
-        (0, import_react6.animate)(rubberStretchPx, 0, {
+        (0, import_react7.animate)(rubberStretchPx, 0, {
           type: "spring",
           visualDuration: 0.35,
           bounce: 0.15
@@ -1438,7 +1730,7 @@ function Slider({
       rubberStretchPx
     ]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isValueHovered && !showInput && !isValueEditable) {
       hoverTimeoutRef.current = setTimeout(() => {
         setIsValueEditable(true);
@@ -1456,7 +1748,7 @@ function Slider({
       }
     };
   }, [isValueHovered, showInput, isValueEditable]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (showInput && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -1534,7 +1826,7 @@ function Slider({
     );
   });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: wrapperRef, className: "dialkit-slider-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    import_react6.motion.div,
+    import_react7.motion.div,
     {
       ref: trackRef,
       className: `dialkit-slider ${isActive ? "dialkit-slider-active" : ""}`,
@@ -1547,7 +1839,7 @@ function Slider({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dialkit-slider-hashmarks", children: hashMarks }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react6.motion.div,
+          import_react7.motion.div,
           {
             className: "dialkit-slider-fill",
             style: {
@@ -1556,7 +1848,7 @@ function Slider({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_react6.motion.div,
+          import_react7.motion.div,
           {
             className: "dialkit-slider-handle",
             style: {
@@ -1611,17 +1903,17 @@ function Slider({
 }
 
 // src/components/SegmentedControl.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function SegmentedControl({
   options,
   value,
   onChange
 }) {
-  const containerRef = (0, import_react7.useRef)(null);
-  const hasAnimated = (0, import_react7.useRef)(false);
-  const [pillStyle, setPillStyle] = (0, import_react7.useState)(null);
-  const measure = (0, import_react7.useCallback)(() => {
+  const containerRef = (0, import_react8.useRef)(null);
+  const hasAnimated = (0, import_react8.useRef)(false);
+  const [pillStyle, setPillStyle] = (0, import_react8.useState)(null);
+  const measure = (0, import_react8.useCallback)(() => {
     const container = containerRef.current;
     if (!container) return;
     const activeButton = container.querySelector('[data-active="true"]');
@@ -1631,7 +1923,7 @@ function SegmentedControl({
       width: activeButton.offsetWidth
     });
   }, []);
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     measure();
   }, [value, options.length, measure]);
   const shouldAnimate = hasAnimated.current;
@@ -1686,47 +1978,118 @@ function Toggle({ label, checked, onChange, shortcut, shortcutActive }) {
   ] });
 }
 
-// src/components/SpringVisualization.tsx
-var import_jsx_runtime6 = require("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;
+// src/transition-math.ts
+function round2(value) {
+  return Math.round(value * 100) / 100;
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function isTransitionConfig(value) {
+  return isSpringConfigValue(value) || isEasingConfigValue(value);
+}
+function isPhysicsSpring(transition) {
+  return transition.type === "spring" && (transition.stiffness !== void 0 || transition.damping !== void 0 || transition.mass !== void 0);
+}
+function springParams(spring) {
+  if (isPhysicsSpring(spring)) {
+    return { stiffness: spring.stiffness ?? 200, damping: spring.damping ?? 25, mass: spring.mass ?? 1 };
+  }
+  const visualDuration = Math.max(0.05, spring.visualDuration ?? 0.3);
+  const bounce = spring.bounce ?? 0.3;
+  const root = 2 * Math.PI / (visualDuration * 1.2);
+  const stiffness = root * root;
+  const damping = 2 * Math.min(1, Math.max(0.05, 1 - bounce)) * Math.sqrt(stiffness);
+  return { stiffness, damping, mass: 1 };
+}
+function springProgress(t, { stiffness, damping, mass }) {
+  if (t <= 0) return 0;
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 0.9999) {
+    const wd2 = w0 * Math.sqrt(1 - zeta * zeta);
+    return 1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd2 * t) + zeta * w0 / wd2 * Math.sin(wd2 * t));
+  }
+  if (zeta < 1.0001) {
+    return 1 - Math.exp(-w0 * t) * (1 + w0 * t);
+  }
+  const wd = w0 * Math.sqrt(zeta * zeta - 1);
+  const r1 = -zeta * w0 + wd;
+  const r2 = -zeta * w0 - wd;
+  return 1 + (r2 * Math.exp(r1 * t) - r1 * Math.exp(r2 * t)) / (r1 - r2);
+}
+function springSettleDuration(params) {
+  const w0 = Math.sqrt(params.stiffness / params.mass);
+  const zeta = params.damping / (2 * Math.sqrt(params.stiffness * params.mass));
+  const decay = zeta >= 1 ? zeta * w0 - w0 * Math.sqrt(Math.max(0, zeta * zeta - 1)) : zeta * w0;
+  const duration = Math.log(200) / Math.max(decay, 1e-6);
+  return round2(clamp(duration, 0.05, 10));
+}
+function cubicBezierProgress(p, [x1, y1, x2, y2]) {
+  if (p <= 0) return 0;
+  if (p >= 1) return 1;
+  const sampleX = (t2) => bezierAxis(t2, x1, x2);
+  const sampleY = (t2) => bezierAxis(t2, y1, y2);
+  let t = p;
+  for (let i = 0; i < 8; i++) {
+    const x = sampleX(t) - p;
+    if (Math.abs(x) < 1e-5) return sampleY(t);
+    const dx = bezierAxisDerivative(t, x1, x2);
+    if (Math.abs(dx) < 1e-6) break;
+    t -= x / dx;
+  }
+  let lo = 0;
+  let hi = 1;
+  t = p;
+  while (hi - lo > 1e-5) {
+    if (sampleX(t) < p) lo = t;
+    else hi = t;
+    t = (lo + hi) / 2;
+  }
+  return sampleY(t);
+}
+function bezierAxis(t, a1, a2) {
+  return (1 - 3 * a2 + 3 * a1) * t * t * t + (3 * a2 - 6 * a1) * t * t + 3 * a1 * t;
+}
+function bezierAxisDerivative(t, a1, a2) {
+  return 3 * (1 - 3 * a2 + 3 * a1) * t * t + 2 * (3 * a2 - 6 * a1) * t + 3 * a1;
+}
+function resolveClipTransition(raw, clipDuration) {
+  const safeDuration = Math.max(0.05, clipDuration);
+  if (raw.type === "easing") {
+    return {
+      transition: { ...raw, duration: safeDuration },
+      duration: safeDuration,
+      isPhysics: false
+    };
+  }
+  if (isPhysicsSpring(raw)) {
+    return {
+      transition: raw,
+      duration: springSettleDuration(springParams(raw)),
+      isPhysics: true
+    };
   }
-  return points;
+  return {
+    transition: { type: "spring", bounce: raw.bounce ?? 0.2, visualDuration: safeDuration },
+    duration: safeDuration,
+    isPhysics: false
+  };
 }
+
+// src/components/SpringVisualization.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 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 params = isSimpleMode ? springParams({ type: "spring", visualDuration: spring.visualDuration ?? 0.3, bounce: spring.bounce ?? 0.2 }) : springParams({ type: "spring", stiffness: spring.stiffness ?? 400, damping: spring.damping ?? 17, mass: spring.mass ?? 1 });
   const duration = 2;
-  const points = generateSpringCurve(stiffness, damping, mass, duration);
+  const steps = 100;
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const time = i / steps * duration;
+    points.push([time, springProgress(time, params)]);
+  }
   const values = points.map(([, value]) => value);
   const minValue = Math.min(...values);
   const maxValue = Math.max(...values);
@@ -1775,20 +2138,20 @@ function SpringVisualization({ spring, isSimpleMode }) {
 }
 
 // src/components/SpringControl.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function SpringControl({ panelId, path, label, spring, onChange }) {
-  const subscribe = (0, import_react8.useCallback)(
+  const subscribe = (0, import_react9.useCallback)(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = (0, import_react8.useCallback)(
+  const getSnapshot = (0, import_react9.useCallback)(
     () => DialStore.getSpringMode(panelId, path),
     [panelId, path]
   );
-  const mode = (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const mode = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   const isSimpleMode = mode === "simple";
-  const cache = (0, import_react8.useRef)({
+  const cache = (0, import_react9.useRef)({
     simple: spring.visualDuration !== void 0 ? spring : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
     advanced: spring.stiffness !== void 0 ? spring : { type: "spring", stiffness: 200, damping: 25, mass: 1 }
   });
@@ -1935,21 +2298,29 @@ function EasingVisualization({ easing }) {
 }
 
 // src/components/TransitionControl.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function TransitionControl({ panelId, path, label, value, onChange }) {
-  const subscribe = (0, import_react9.useCallback)(
+function TransitionControl({
+  panelId,
+  path,
+  label,
+  value,
+  onChange,
+  hideDuration = false,
+  durationControl
+}) {
+  const subscribe = (0, import_react10.useCallback)(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = (0, import_react9.useCallback)(
+  const getSnapshot = (0, import_react10.useCallback)(
     () => DialStore.getTransitionMode(panelId, path),
     [panelId, path]
   );
-  const mode = (0, import_react9.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const mode = (0, import_react10.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
   const isEasing = mode === "easing";
   const isSimpleSpring = mode === "simple";
-  const cache = (0, import_react9.useRef)({
+  const cache = (0, import_react10.useRef)({
     easing: value.type === "easing" ? value : { type: "easing", duration: 0.3, ease: [1, -0.4, 0.5, 1] },
     simple: value.type === "spring" && value.visualDuration !== void 0 ? value : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
     advanced: value.type === "spring" && value.stiffness !== void 0 ? value : { type: "spring", stiffness: 200, damping: 25, mass: 1 }
@@ -1987,6 +2358,21 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
     newEase[index] = val;
     onChange({ ...easing, ease: newEase });
   };
+  const durationSlider = !hideDuration && (isEasing || isSimpleSpring) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Slider,
+    {
+      label: "Duration",
+      value: durationControl?.value ?? (isEasing ? easing.duration : spring.visualDuration ?? 0.3),
+      onChange: durationControl?.onChange ?? ((next) => {
+        if (isEasing) onChange({ ...easing, duration: next });
+        else handleSpringUpdate("visualDuration", next);
+      }),
+      min: durationControl?.min ?? 0.1,
+      max: durationControl?.max ?? (isEasing ? 2 : 1),
+      step: durationControl?.step ?? 0.05,
+      unit: "s"
+    }
+  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
     isEasing ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EasingVisualization, { easing }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpringVisualization, { spring, isSimpleMode: isSimpleSpring }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "dialkit-labeled-control", children: [
@@ -2009,16 +2395,13 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "y1", value: easing.ease[1], onChange: (v) => updateEase(1, v), min: -1, max: 2, step: 0.01 }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "x2", value: easing.ease[2], onChange: (v) => updateEase(2, v), min: 0, max: 1, step: 0.01 }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "y2", value: easing.ease[3], onChange: (v) => updateEase(3, v), min: -1, max: 2, step: 0.01 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Duration", value: easing.duration, onChange: (v) => onChange({ ...easing, duration: v }), min: 0.1, max: 2, step: 0.05, unit: "s" }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EaseTextInput, { ease: easing.ease, onChange: (newEase) => onChange({ ...easing, ease: newEase }) })
-    ] }) : isSimpleSpring ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Duration", value: spring.visualDuration ?? 0.3, onChange: (v) => handleSpringUpdate("visualDuration", v), min: 0.1, max: 1, step: 0.05, unit: "s" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    ] }) : isSimpleSpring ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Stiffness", value: spring.stiffness ?? 400, onChange: (v) => handleSpringUpdate("stiffness", v), min: 1, max: 1e3, step: 10 }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Damping", value: spring.damping ?? 17, onChange: (v) => handleSpringUpdate("damping", v), min: 1, max: 100, step: 1 }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slider, { label: "Mass", value: spring.mass ?? 1, onChange: (v) => handleSpringUpdate("mass", v), min: 0.1, max: 10, step: 0.1 })
-    ] })
+    ] }),
+    durationSlider
   ] }) });
 }
 function formatEase(ease) {
@@ -2032,8 +2415,8 @@ function parseEase(str) {
   return null;
 }
 function EaseTextInput({ ease, onChange }) {
-  const [editing, setEditing] = (0, import_react9.useState)(false);
-  const [draft, setDraft] = (0, import_react9.useState)("");
+  const [editing, setEditing] = (0, import_react10.useState)(false);
+  const [draft, setDraft] = (0, import_react10.useState)("");
   const handleFocus = () => {
     setDraft(formatEase(ease));
     setEditing(true);
@@ -2085,9 +2468,9 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom = require("react-dom");
-var import_react11 = require("motion/react");
+var import_react12 = require("motion/react");
 
 // src/dropdown-position.ts
 function getDropdownPosition(trigger, portalRoot, options = {}) {
@@ -2118,27 +2501,27 @@ function normalizeOptions(options) {
   );
 }
 function SelectControl({ label, value, options, onChange }) {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const triggerRef = (0, import_react10.useRef)(null);
-  const dropdownRef = (0, import_react10.useRef)(null);
-  const [portalTarget, setPortalTarget] = (0, import_react10.useState)(null);
-  const [pos, setPos] = (0, import_react10.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const triggerRef = (0, import_react11.useRef)(null);
+  const dropdownRef = (0, import_react11.useRef)(null);
+  const [portalTarget, setPortalTarget] = (0, import_react11.useState)(null);
+  const [pos, setPos] = (0, import_react11.useState)(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
-  const updatePos = (0, import_react10.useCallback)(() => {
+  const updatePos = (0, import_react11.useCallback)(() => {
     const el = triggerRef.current;
     if (!el || !portalTarget) return;
     const dropdownHeight = 8 + normalized.length * 36;
     setPos(getDropdownPosition(el, portalTarget, { dropdownHeight }));
   }, [normalized.length, portalTarget]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setPortalTarget(getDialKitPortalRoot(triggerRef.current) ?? document.body);
   }, []);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isOpen) return;
     updatePos();
   }, [isOpen, updatePos]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -2162,7 +2545,7 @@ function SelectControl({ label, value, options, onChange }) {
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "dialkit-select-right", children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "dialkit-select-value", children: selectedOption?.label ?? value }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              import_react11.motion.svg,
+              import_react12.motion.svg,
               {
                 className: "dialkit-select-chevron",
                 viewBox: "0 0 24 24",
@@ -2181,8 +2564,8 @@ function SelectControl({ label, value, options, onChange }) {
       }
     ),
     portalTarget && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react11.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_react11.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react12.AnimatePresence, { children: isOpen && pos && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react12.motion.div,
         {
           ref: dropdownRef,
           className: "dialkit-select-dropdown",
@@ -2218,14 +2601,14 @@ function SelectControl({ label, value, options, onChange }) {
 }
 
 // src/components/ColorControl.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime12 = 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_react12.useState)(false);
-  const [editValue, setEditValue] = (0, import_react12.useState)(value);
-  const colorInputRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react13.useState)(false);
+  const [editValue, setEditValue] = (0, import_react13.useState)(value);
+  const colorInputRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (!isEditing) {
       setEditValue(value);
     }
@@ -2295,266 +2678,105 @@ function expandShorthandHex(hex) {
   return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
 }
 
-// src/components/PresetManager.tsx
-var import_react13 = require("react");
-var import_react_dom2 = require("react-dom");
-var import_react14 = require("motion/react");
+// src/components/ControlRenderer.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function PresetManager({ panelId, presets, activePresetId, onAdd }) {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const triggerRef = (0, import_react13.useRef)(null);
-  const dropdownRef = (0, import_react13.useRef)(null);
-  const [pos, setPos] = (0, import_react13.useState)({ top: 0, left: 0, width: 0 });
-  const hasPresets = presets.length > 0;
-  const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = (0, import_react13.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_react13.useCallback)(() => setIsOpen(false), []);
-  const toggle = (0, import_react13.useCallback)(() => {
-    if (isOpen) close();
-    else open();
-  }, [isOpen, open, close]);
-  (0, import_react13.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_runtime13.jsxs)("div", { className: "dialkit-preset-manager", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_react14.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, opacity: hasPresets ? 0.6 : 0.25 },
-              transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: ICON_CHEVRON })
-            }
-          )
-        ]
-      }
-    ),
-    (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react14.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-        import_react14.motion.div,
-        {
-          ref: dropdownRef,
-          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 },
-          exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
-          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "div",
-              {
-                className: "dialkit-preset-item",
-                "data-active": String(!activePresetId),
-                onClick: () => handleSelect(null),
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
-              }
-            ),
-            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "div",
-              {
-                className: "dialkit-preset-item",
-                "data-active": String(preset.id === activePresetId),
-                onClick: () => handleSelect(preset.id),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    "button",
-                    {
-                      className: "dialkit-preset-delete",
-                      onClick: (e) => handleDelete(e, preset.id),
-                      title: "Delete preset",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_TRASH.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d }, i)) })
-                    }
-                  )
-                ]
-              },
-              preset.id
-            ))
-          ]
-        }
-      ) }),
-      document.body
-    )
-  ] });
-}
-
-// src/components/Panel.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function Panel({ panel, defaultOpen = true, inline = false, onOpenChange, variant = "root" }) {
-  const [copied, setCopied] = (0, import_react15.useState)(false);
-  const [isPanelOpen, setIsPanelOpen] = (0, import_react15.useState)(defaultOpen);
-  const shortcutCtx = (0, import_react15.useContext)(ShortcutContext);
-  const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
-  const subscribe = (0, import_react15.useCallback)(
-    (callback) => DialStore.subscribe(panel.id, callback),
-    [panel.id]
-  );
-  const getSnapshot = (0, import_react15.useCallback)(
-    () => DialStore.getValues(panel.id),
-    [panel.id]
-  );
-  const values = (0, import_react15.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
-  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 handleOpenChange = (0, import_react15.useCallback)((open) => {
-    setIsPanelOpen(open);
-    onOpenChange?.(open);
-  }, [onOpenChange]);
+function ControlRenderer({ panelId, controls, values, transitionDuration }) {
+  const shortcutCtx = (0, import_react14.useContext)(ShortcutContext);
   const renderControl = (control) => {
     const value = values[control.path];
     switch (control.type) {
       case "slider":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Slider,
           {
             label: control.label,
             value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v),
             min: control.min,
             max: control.max,
             step: control.step,
             shortcut: control.shortcut,
-            shortcutActive: shortcutCtx.activePanelId === panel.id && shortcutCtx.activePath === control.path
+            shortcutActive: shortcutCtx.activePanelId === panelId && shortcutCtx.activePath === control.path
           },
           control.path
         );
       case "toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           Toggle,
           {
             label: control.label,
             checked: value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v),
             shortcut: control.shortcut,
-            shortcutActive: shortcutCtx.activePanelId === panel.id && shortcutCtx.activePath === control.path
+            shortcutActive: shortcutCtx.activePanelId === panelId && shortcutCtx.activePath === control.path
           },
           control.path
         );
       case "spring":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           SpringControl,
           {
-            panelId: panel.id,
+            panelId,
             path: control.path,
             label: control.label,
             spring: value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v)
           },
           control.path
         );
       case "transition":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TransitionControl,
           {
-            panelId: panel.id,
+            panelId,
             path: control.path,
             label: control.label,
             value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v),
+            durationControl: transitionDuration
           },
           control.path
         );
       case "folder":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TextControl,
           {
             label: control.label,
             value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v),
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v),
             placeholder: control.placeholder
           },
           control.path
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           SelectControl,
           {
             label: control.label,
             value,
             options: control.options ?? [],
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v)
           },
           control.path
         );
       case "color":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ColorControl,
           {
             label: control.label,
             value,
-            onChange: (v) => DialStore.updateValue(panel.id, control.path, v)
+            onChange: (v) => DialStore.updateValue(panelId, control.path, v)
           },
           control.path
         );
       case "action":
-        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             className: "dialkit-button",
-            onClick: () => DialStore.triggerAction(panel.id, control.path),
+            onClick: () => DialStore.triggerAction(panelId, control.path),
             children: control.label
           },
           control.path
@@ -2563,23 +2785,181 @@ Apply these values as the new defaults in the useDialKit call.`;
         return null;
     }
   };
-  const renderControls = () => {
-    return panel.controls.map(renderControl);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: controls.map(renderControl) });
+}
+
+// src/components/PresetManager.tsx
+var import_react15 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_react16 = require("motion/react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PresetManager({ panelId, presets, activePresetId, onAdd }) {
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const triggerRef = (0, import_react15.useRef)(null);
+  const dropdownRef = (0, import_react15.useRef)(null);
+  const [pos, setPos] = (0, import_react15.useState)({ top: 0, left: 0, width: 0 });
+  const hasPresets = presets.length > 0;
+  const activePreset = presets.find((p) => p.id === activePresetId);
+  const open = (0, import_react15.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_react15.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react15.useCallback)(() => {
+    if (isOpen) close();
+    else open();
+  }, [isOpen, open, close]);
+  (0, import_react15.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_runtime14.jsxs)("div", { className: "dialkit-preset-manager", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_react16.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, opacity: hasPresets ? 0.6 : 0.25 },
+              transition: { type: "spring", visualDuration: 0.2, bounce: 0.15 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CHEVRON })
+            }
+          )
+        ]
+      }
+    ),
+    (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_react16.motion.div,
+        {
+          ref: dropdownRef,
+          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 },
+          exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
+          transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "dialkit-preset-item",
+                "data-active": String(!activePresetId),
+                onClick: () => handleSelect(null),
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dialkit-preset-name", children: "Version 1" })
+              }
+            ),
+            presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              "div",
+              {
+                className: "dialkit-preset-item",
+                "data-active": String(preset.id === activePresetId),
+                onClick: () => handleSelect(preset.id),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dialkit-preset-name", children: preset.name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    "button",
+                    {
+                      className: "dialkit-preset-delete",
+                      onClick: (e) => handleDelete(e, preset.id),
+                      title: "Delete preset",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_TRASH.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d }, i)) })
+                    }
+                  )
+                ]
+              },
+              preset.id
+            ))
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+// src/components/Panel.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Panel({ panel, defaultOpen = true, inline = false, onOpenChange, variant = "root", toolbarExtra }) {
+  const [copied, setCopied] = (0, import_react17.useState)(false);
+  const [isPanelOpen, setIsPanelOpen] = (0, import_react17.useState)(defaultOpen);
+  const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
+  const subscribe = (0, import_react17.useCallback)(
+    (callback) => DialStore.subscribe(panel.id, callback),
+    [panel.id]
+  );
+  const getSnapshot = (0, import_react17.useCallback)(
+    () => DialStore.getValues(panel.id),
+    [panel.id]
+  );
+  const values = (0, import_react17.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  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 = () => {
+    navigator.clipboard.writeText(buildCopyInstruction("useDialKit", panel.name, values));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
   };
+  const handleOpenChange = (0, import_react17.useCallback)((open) => {
+    setIsPanelOpen(open);
+    onOpenChange?.(open);
+  }, [onOpenChange]);
+  const renderControls = () => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ControlRenderer, { panelId: panel.id, controls: panel.controls, values });
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react16.motion.button,
+  const toolbar = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react18.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_runtime14.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_ADD_PRESET.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d }, i)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_ADD_PRESET.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d }, i)) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       PresetManager,
       {
         panelId: panel.id,
@@ -2588,16 +2968,16 @@ Apply these values as the new defaults in the useDialKit call.`;
         onAdd: handleAddPreset
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      import_react16.motion.button,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react18.motion.button,
       {
         className: "dialkit-toolbar-add",
         onClick: handleCopy,
         title: "Copy parameters",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react16.AnimatePresence, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          import_react16.motion.svg,
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react18.AnimatePresence, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_react18.motion.svg,
           {
             viewBox: "0 0 24 24",
             fill: "none",
@@ -2610,11 +2990,11 @@ Apply these values as the new defaults in the useDialKit call.`;
             animate: { scale: 1, opacity: 1 },
             exit: { scale: 0.8, opacity: 0 },
             transition: { duration: 0.08 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CHECK })
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: ICON_CHECK })
           },
           "check"
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-          import_react16.motion.svg,
+        ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          import_react18.motion.svg,
           {
             viewBox: "0 0 24 24",
             fill: "none",
@@ -2624,23 +3004,116 @@ Apply these values as the new defaults in the useDialKit call.`;
             exit: { scale: 0.8, opacity: 0 },
             transition: { duration: 0.08 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
             ]
           },
           "clipboard"
         ) }) })
       }
-    )
+    ),
+    toolbarExtra
   ] });
   if (variant === "section") {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Folder, { title: panel.name, defaultOpen, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel-section-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar }),
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Folder, { title: panel.name, defaultOpen, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-panel-section-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar }),
       renderControls()
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: handleOpenChange, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: handleOpenChange, toolbar, children: renderControls() }) });
+}
+
+// src/components/Timeline/TimelineToggleButton.tsx
+var import_react19 = require("react");
+var import_react20 = require("motion/react");
+
+// src/store/TimelineUiStore.ts
+var TimelineUiStoreClass = class {
+  constructor() {
+    this.visible = true;
+    this.initialized = false;
+    this.controllers = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  getVisible() {
+    for (const controller of this.controllers.values()) {
+      if (controller.visible !== void 0) return controller.visible;
+    }
+    return this.visible;
+  }
+  registerController(id, controller) {
+    const previous = this.getVisible();
+    if (!this.initialized) {
+      this.visible = controller.defaultVisible;
+      this.initialized = true;
+    }
+    this.controllers.set(id, controller);
+    if (previous !== this.getVisible()) this.notify();
+    return () => {
+      const before = this.getVisible();
+      this.controllers.delete(id);
+      if (this.controllers.size === 0) this.initialized = false;
+      if (before !== this.getVisible()) this.notify();
+    };
+  }
+  updateController(id, controller) {
+    if (!this.controllers.has(id)) return;
+    const previous = this.getVisible();
+    this.controllers.set(id, controller);
+    if (previous !== this.getVisible()) this.notify();
+  }
+  requestVisible(visible) {
+    const current = this.getVisible();
+    if (current === visible) return;
+    const controlled = Array.from(this.controllers.values()).filter(
+      (controller) => controller.visible !== void 0
+    );
+    if (controlled.length > 0) {
+      controlled.forEach((controller) => controller.onVisibilityChange?.(visible));
+      return;
+    }
+    this.visible = visible;
+    this.controllers.forEach((controller) => controller.onVisibilityChange?.(visible));
+    this.notify();
+  }
+  toggle() {
+    this.requestVisible(!this.getVisible());
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener());
+  }
+};
+var TimelineUiStore = /* @__PURE__ */ new TimelineUiStoreClass();
+
+// src/components/Timeline/TimelineToggleButton.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function TimelineToggleButton() {
+  const subscribe = (0, import_react19.useCallback)(
+    (listener) => TimelineUiStore.subscribe(listener),
+    []
+  );
+  const getVisible = (0, import_react19.useCallback)(() => TimelineUiStore.getVisible(), []);
+  const visible = (0, import_react19.useSyncExternalStore)(subscribe, getVisible, getVisible);
+  const label = visible ? "Hide timeline" : "Show timeline";
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_react20.motion.button,
+    {
+      className: "dialkit-toolbar-add dialkit-timeline-toolbar-toggle",
+      "data-active": visible || void 0,
+      "aria-pressed": visible,
+      "aria-label": label,
+      title: label,
+      onClick: () => TimelineUiStore.toggle(),
+      whileTap: { scale: 0.9 },
+      transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: ICON_TIMELINE.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d, fill: "currentColor" }, i)) })
+    }
+  );
 }
 
 // src/panel-drag.ts
@@ -2708,33 +3181,39 @@ function blockPanelDragClick(handle) {
 }
 
 // src/components/DialRoot.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var import_meta = {};
-var isDevDefault = typeof process !== "undefined" && process?.env?.NODE_ENV ? process.env.NODE_ENV !== "production" : typeof import_meta !== "undefined" && import_meta.env?.MODE ? import_meta.env.MODE !== "production" : true;
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover", theme = "system", productionEnabled = isDevDefault, onOpenChange }) {
   if (!productionEnabled) return null;
-  const [panels, setPanels] = (0, import_react17.useState)([]);
-  const [mounted, setMounted] = (0, import_react17.useState)(false);
+  const [panels, setPanels] = (0, import_react21.useState)([]);
+  const [timelineCount, setTimelineCount] = (0, import_react21.useState)(0);
+  const [mounted, setMounted] = (0, import_react21.useState)(false);
   const inline = mode === "inline";
-  const panelRef = (0, import_react17.useRef)(null);
-  const [dragOffset, setDragOffset] = (0, import_react17.useState)(null);
-  const [activePosition, setActivePosition] = (0, import_react17.useState)(position);
-  const lastDragOffset = (0, import_react17.useRef)(null);
-  const draggingRef = (0, import_react17.useRef)(false);
-  const dragStartRef = (0, import_react17.useRef)(null);
-  const didDragRef = (0, import_react17.useRef)(false);
-  const dragTargetRef = (0, import_react17.useRef)(null);
-  const panelOpenStatesRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const rootOpenRef = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
+  const panelRef = (0, import_react21.useRef)(null);
+  const [dragOffset, setDragOffset] = (0, import_react21.useState)(null);
+  const [activePosition, setActivePosition] = (0, import_react21.useState)(position);
+  const lastDragOffset = (0, import_react21.useRef)(null);
+  const draggingRef = (0, import_react21.useRef)(false);
+  const dragStartRef = (0, import_react21.useRef)(null);
+  const didDragRef = (0, import_react21.useRef)(false);
+  const dragTargetRef = (0, import_react21.useRef)(null);
+  const panelOpenStatesRef = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
+  const rootOpenRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     setMounted(true);
-    setPanels(DialStore.getPanels());
-    const unsubscribe = DialStore.subscribeGlobal(() => {
-      setPanels(DialStore.getPanels());
+    setPanels(DialStore.getPanels("panel"));
+    setTimelineCount(TimelineStore.getTimelines().length);
+    const unsubscribePanels = DialStore.subscribeGlobal(() => {
+      setPanels(DialStore.getPanels("panel"));
     });
-    return unsubscribe;
+    const unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+      setTimelineCount(TimelineStore.getTimelines().length);
+    });
+    return () => {
+      unsubscribePanels();
+      unsubscribeTimelines();
+    };
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const fallbackOpen = inline || defaultOpen;
     const nextStates = /* @__PURE__ */ new Map();
     for (const panel of panels) {
@@ -2743,7 +3222,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     panelOpenStatesRef.current = nextStates;
     rootOpenRef.current = Array.from(nextStates.values()).some(Boolean);
   }, [defaultOpen, inline, panels]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!panelRef.current || inline) return;
     const observer = new MutationObserver(() => {
       const inners = panelRef.current?.querySelectorAll(".dialkit-panel-inner");
@@ -2771,7 +3250,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     observer.observe(panelRef.current, { subtree: true, attributes: true, attributeFilter: ["data-collapsed"] });
     return () => observer.disconnect();
   }, [inline, dragOffset, position]);
-  const handlePointerDown = (0, import_react17.useCallback)((e) => {
+  const handlePointerDown = (0, import_react21.useCallback)((e) => {
     const panel = panelRef.current;
     const handle = getPanelDragHandle(e.target, panel);
     if (!panel || !handle) return;
@@ -2781,13 +3260,13 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     draggingRef.current = true;
     handle.setPointerCapture(e.pointerId);
   }, []);
-  const handlePointerMove = (0, import_react17.useCallback)((e) => {
+  const handlePointerMove = (0, import_react21.useCallback)((e) => {
     if (!draggingRef.current || !dragStartRef.current) return;
     if (!didDragRef.current && !hasPanelDragMoved(dragStartRef.current, e.clientX, e.clientY)) return;
     didDragRef.current = true;
     setDragOffset(getPanelDragOffset(dragStartRef.current, e.clientX, e.clientY));
   }, []);
-  const handlePointerUp = (0, import_react17.useCallback)((e) => {
+  const handlePointerUp = (0, import_react21.useCallback)((e) => {
     if (!draggingRef.current) return;
     draggingRef.current = false;
     dragStartRef.current = null;
@@ -2803,7 +3282,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     }
     dragTargetRef.current = null;
   }, []);
-  const handlePanelOpenChange = (0, import_react17.useCallback)((panelId, open) => {
+  const handlePanelOpenChange = (0, import_react21.useCallback)((panelId, open) => {
     panelOpenStatesRef.current.set(panelId, open);
     const fallbackOpen = inline || defaultOpen;
     const nextRootOpen = panels.some((panel) => panelOpenStatesRef.current.get(panel.id) ?? fallbackOpen);
@@ -2811,7 +3290,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     rootOpenRef.current = nextRootOpen;
     onOpenChange?.(nextRootOpen);
   }, [defaultOpen, inline, onOpenChange, panels]);
-  const handleRootOpenChange = (0, import_react17.useCallback)((open) => {
+  const handleRootOpenChange = (0, import_react21.useCallback)((open) => {
     if (rootOpenRef.current === open) return;
     rootOpenRef.current = open;
     onOpenChange?.(open);
@@ -2819,7 +3298,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
   if (!mounted || typeof window === "undefined") {
     return null;
   }
-  if (panels.length === 0) {
+  if (panels.length === 0 && timelineCount === 0) {
     return null;
   }
   const dragStyle = dragOffset ? {
@@ -2830,7 +3309,8 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
   } : void 0;
   const originX = getPanelOriginX(activePosition, dragOffset);
   const hasMultiplePanels = panels.length > 1;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ShortcutListener, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const timelineToggle = timelineCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TimelineToggleButton, {}) : null;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ShortcutListener, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref: panelRef,
@@ -2844,7 +3324,19 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
       onPointerMove: !inline ? handlePointerMove : void 0,
       onPointerUp: !inline ? handlePointerUp : void 0,
       onPointerCancel: !inline ? handlePointerUp : void 0,
-      children: hasMultiplePanels ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: panels.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Folder,
+        {
+          title: "DialKit",
+          defaultOpen: inline || defaultOpen,
+          isRoot: true,
+          inline,
+          onOpenChange: handleRootOpenChange,
+          toolbar: timelineToggle,
+          panelHeightOffset: 2,
+          children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-timeline-toolkit-only", children: "Timeline" })
+        }
+      ) }) : hasMultiplePanels ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Folder,
         {
           title: "DialKit",
@@ -2852,8 +3344,9 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
           isRoot: true,
           inline,
           onOpenChange: handleRootOpenChange,
+          toolbar: timelineToggle,
           panelHeightOffset: 2,
-          children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          children: panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Panel,
             {
               panel,
@@ -2863,12 +3356,13 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
             panel.id
           ))
         }
-      ) }) : panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      ) }) : panels.map((panel) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         Panel,
         {
           panel,
           defaultOpen: inline || defaultOpen,
           inline,
+          toolbarExtra: timelineToggle,
           onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
         },
         panel.id
@@ -2881,25 +3375,2164 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
   return (0, import_react_dom3.createPortal)(content, document.body);
 }
 
-// src/components/ButtonGroup.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function ButtonGroup({ buttons }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "button",
-    {
-      className: "dialkit-button",
-      onClick: button.onClick,
-      children: button.label
-    },
-    index
-  )) });
-}
+// src/hooks/useDialTimeline.ts
+var import_react22 = require("react");
 
-// src/components/ShortcutsMenu.tsx
-var import_react18 = require("react");
+// src/timeline-core.ts
+var CLIP_VALUE_STEP = 0.01;
+var TIMELINE_MIN_CLIP_DURATION = 0.05;
+var DEFAULT_STEP_DURATION = 0.3;
+var DEFAULT_CLIP_TRANSITION = { type: "spring", bounce: 0.2 };
+var RESERVED_KEYS = /* @__PURE__ */ new Set(["time", "playing", "duration", "play", "pause", "replay", "seek"]);
+function isClipConfig(value) {
+  return isPlainObject(value) && Number.isFinite(value.at);
+}
+function isGroupConfig(value) {
+  if (!isPlainObject(value) || "at" in value) return false;
+  const entries = Object.values(value);
+  return entries.length > 0 && entries.some(isClipConfig);
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function nonNegativeFinite(value, fallback = 0) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : fallback;
+}
+function animatedDuration(value, fallback = DEFAULT_STEP_DURATION) {
+  return Math.max(TIMELINE_MIN_CLIP_DURATION, nonNegativeFinite(value, fallback));
+}
+function transitionDefaultDuration(transition) {
+  if (transition.type === "easing") return animatedDuration(transition.duration);
+  if (isPhysicsSpring(transition)) {
+    return animatedDuration(springSettleDuration(springParams(transition)));
+  }
+  if (transition.visualDuration !== void 0) return animatedDuration(transition.visualDuration);
+  return animatedDuration(springSettleDuration(springParams(transition)));
+}
+function defaultStepDuration(step, inheritedTransition) {
+  const curve = step.transition ?? inheritedTransition;
+  if (curve && isPhysicsSpring(curve)) return transitionDefaultDuration(curve);
+  if (step.duration !== void 0) return animatedDuration(step.duration);
+  if (step.transition) return transitionDefaultDuration(step.transition);
+  return DEFAULT_STEP_DURATION;
+}
+function defaultTrackDuration(track, inheritedTransition) {
+  const curve = track.transition ?? inheritedTransition;
+  if (track.steps?.length) {
+    return track.steps.reduce((sum, step) => sum + defaultStepDuration(step, curve), 0);
+  }
+  if (curve && isPhysicsSpring(curve)) return transitionDefaultDuration(curve);
+  if (track.duration !== void 0) return animatedDuration(track.duration);
+  if (track.transition) return transitionDefaultDuration(track.transition);
+  return DEFAULT_STEP_DURATION;
+}
+function defaultClipDuration(clip) {
+  const defaultCurve = isTransitionConfig(clip.transition) ? clip.transition : DEFAULT_CLIP_TRANSITION;
+  if (clip.props) {
+    return Object.values(clip.props).reduce(
+      (max, track) => Math.max(
+        max,
+        nonNegativeFinite(track.delay) + defaultTrackDuration(track, defaultCurve)
+      ),
+      0
+    );
+  }
+  if (clip.steps?.length) {
+    return clip.steps.reduce((sum, step) => sum + defaultStepDuration(step, defaultCurve), 0);
+  }
+  const animating = Boolean(clip.transition || clip.from || clip.to);
+  if (!animating) return nonNegativeFinite(clip.duration);
+  if (isPhysicsSpring(defaultCurve)) return transitionDefaultDuration(defaultCurve);
+  if (clip.duration !== void 0) return animatedDuration(clip.duration);
+  if (isTransitionConfig(clip.transition)) return transitionDefaultDuration(clip.transition);
+  return clip.from || clip.to ? transitionDefaultDuration(DEFAULT_CLIP_TRANSITION) : 0;
+}
+function normalizeLoopMode(value) {
+  if (value === true || value === "mirror" || value === "repeat") return "repeat";
+  return "off";
+}
+function normalizeStoredTransition(transition, clipDuration) {
+  if (transition.type === "easing") {
+    return { ...transition, duration: clipDuration };
+  }
+  if (isPhysicsSpring(transition)) {
+    return transition;
+  }
+  return { type: "spring", bounce: transition.bounce ?? 0.2 };
+}
+function collectClipEntries(config) {
+  const entries = [];
+  for (const [key, value] of Object.entries(config)) {
+    if (key === "duration") continue;
+    if (RESERVED_KEYS.has(key)) {
+      console.warn(`[dialkit] Timeline key "${key}" collides with a reserved key and was skipped.`);
+      continue;
+    }
+    if (isClipConfig(value)) {
+      entries.push({ path: key, childKey: key, clip: value });
+    } else if (isGroupConfig(value)) {
+      for (const [childKey, childClip] of Object.entries(value)) {
+        if (isClipConfig(childClip)) {
+          entries.push({ path: `${key}.${childKey}`, childKey, group: key, clip: childClip });
+        } else {
+          console.warn(
+            `[dialkit] Timeline clip "${key}.${childKey}" is missing a numeric "at" and was skipped.`
+          );
+        }
+      }
+    } else {
+      console.warn(
+        `[dialkit] Timeline entry "${key}" is neither a clip (needs a numeric "at") nor a group of clips and was skipped.`
+      );
+    }
+  }
+  return entries;
+}
+function definedValues(values) {
+  if (!values) return void 0;
+  const result = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (value !== void 0) result[key] = value;
+  }
+  return result;
+}
+function setDialPath(dialConfig, path, value) {
+  const segments = path.split(".");
+  let node = dialConfig;
+  for (const segment of segments.slice(0, -1)) {
+    node = node[segment] ?? (node[segment] = {});
+  }
+  node[segments[segments.length - 1]] = value;
+}
+function parseTimelineConfig(config) {
+  const entries = collectClipEntries(config);
+  let maxEnd = 0;
+  for (const { clip } of entries) {
+    maxEnd = Math.max(maxEnd, nonNegativeFinite(clip.at) + defaultClipDuration(clip));
+  }
+  const duration = typeof config.duration === "number" && Number.isFinite(config.duration) && config.duration > 0 ? config.duration : maxEnd > 0 ? Math.ceil(maxEnd * 100 - 1e-4) / 100 : 1;
+  const dialConfig = {};
+  const clips = [];
+  entries.forEach(({ path, childKey, group, clip }, index) => {
+    const raw = clip;
+    if (raw.props && (raw.steps?.length || raw.from || raw.to)) {
+      console.warn(
+        `[dialkit] Timeline clip "${path}": "props" is mutually exclusive with from/to/steps \u2014 using "props".`
+      );
+    } else if (raw.steps?.length && raw.to) {
+      console.warn(
+        `[dialkit] Timeline clip "${path}": "to" is ignored when "steps" is present \u2014 each leg's "to" defines its targets.`
+      );
+    }
+    const hasSteps = Boolean(clip.steps?.length) && !clip.props;
+    const hasProps = Boolean(clip.props);
+    const single = isTransitionConfig(clip.transition) ? clip.transition : void 0;
+    const total = defaultClipDuration(clip);
+    const defaultCurve = single ?? DEFAULT_CLIP_TRANSITION;
+    const clipAt = nonNegativeFinite(clip.at);
+    const clipDial = {
+      at: [clipAt, 0, duration, CLIP_VALUE_STEP]
+    };
+    if (!hasSteps && !hasProps) {
+      clipDial.duration = [total, 0, duration, CLIP_VALUE_STEP];
+    }
+    if (!hasSteps && !hasProps && (clip.transition || clip.from || clip.to)) {
+      clipDial.transition = normalizeStoredTransition(defaultCurve, total);
+    }
+    let tracks;
+    if (clip.props) {
+      tracks = [];
+      for (const [prop, track] of Object.entries(clip.props)) {
+        if (TRACK_RESERVED.has(prop) || /^step\d+$/.test(prop)) {
+          console.warn(`[dialkit] Timeline property "${prop}" collides with a clip field and was skipped.`);
+          continue;
+        }
+        const trackDuration = defaultTrackDuration(track, defaultCurve);
+        const trackCurve = track.transition ?? defaultCurve;
+        const hasTrackSteps = Boolean(track.steps?.length);
+        const trackDial = {
+          delay: [nonNegativeFinite(track.delay), 0, duration, CLIP_VALUE_STEP]
+        };
+        if (!hasTrackSteps) {
+          trackDial.duration = [trackDuration, 0, duration, CLIP_VALUE_STEP];
+          trackDial.transition = normalizeStoredTransition(trackCurve, trackDuration);
+        }
+        const fromValue = track.from ?? (hasTrackSteps ? void 0 : track.to);
+        if (hasTrackSteps && fromValue === void 0) {
+          console.warn(
+            `[dialkit] Timeline clip "${path}": track "${prop}" has steps but no "from" \u2014 declare its starting value.`
+          );
+        }
+        if (fromValue !== void 0) {
+          trackDial.from = scalarDial(prop, fromValue, hasTrackSteps ? track.steps[0]?.to : track.to);
+        }
+        if (!hasTrackSteps && track.to !== void 0) {
+          trackDial.to = scalarDial(prop, track.to, fromValue);
+        }
+        let trackStepKeys;
+        if (hasTrackSteps) {
+          trackStepKeys = [];
+          let previous = fromValue;
+          track.steps.forEach((step, stepIndex) => {
+            const stepKey = `step${stepIndex + 1}`;
+            trackStepKeys.push(stepKey);
+            const stepDuration = defaultStepDuration(step, trackCurve);
+            const stepDial = {
+              duration: [stepDuration, 0, duration, CLIP_VALUE_STEP],
+              transition: normalizeStoredTransition(step.transition ?? trackCurve, stepDuration)
+            };
+            if (step.to !== void 0) {
+              stepDial.to = scalarDial(prop, step.to, previous);
+              previous = step.to;
+            }
+            trackDial[stepKey] = stepDial;
+          });
+        }
+        clipDial[prop] = trackDial;
+        tracks.push({ prop, stepKeys: trackStepKeys });
+      }
+    }
+    if (clip.from && !hasProps) {
+      clipDial.from = withFromToRanges(
+        clip.from,
+        hasSteps ? definedValues(clip.steps[0]?.to) : clip.to
+      );
+    }
+    if (!hasSteps && !hasProps && clip.to) {
+      clipDial.to = withFromToRanges(clip.to, clip.from);
+    }
+    let stepKeys;
+    if (hasSteps) {
+      stepKeys = [];
+      let running = clip.from;
+      clip.steps.forEach((step, stepIndex) => {
+        const stepKey = `step${stepIndex + 1}`;
+        stepKeys.push(stepKey);
+        const stepDuration = defaultStepDuration(step, defaultCurve);
+        const stepDial = {
+          duration: [stepDuration, 0, duration, CLIP_VALUE_STEP],
+          transition: normalizeStoredTransition(step.transition ?? defaultCurve, stepDuration)
+        };
+        const stepTo = definedValues(step.to);
+        if (stepTo) {
+          for (const prop of Object.keys(stepTo)) {
+            if (!running || !(prop in running)) {
+              console.warn(
+                `[dialkit] Timeline clip "${path}": property "${prop}" first animates in step ${stepIndex + 1} with no starting value \u2014 declare it in "from".`
+              );
+            }
+          }
+          stepDial.to = withFromToRanges(stepTo, running);
+        }
+        clipDial[stepKey] = stepDial;
+        running = { ...running ?? {}, ...stepTo ?? {} };
+      });
+    }
+    setDialPath(dialConfig, path, clipDial);
+    clips.push({
+      key: path,
+      label: formatLabel(childKey),
+      color: TIMELINE_CLIP_COLORS[index % TIMELINE_CLIP_COLORS.length],
+      loop: normalizeLoopMode(clip.loop),
+      group,
+      stepKeys,
+      tracks
+    });
+  });
+  return { duration, dialConfig, clips };
+}
+var TRACK_RESERVED = /* @__PURE__ */ new Set(["at", "duration", "loop", "from", "to", "transition", "delay"]);
+function scalarDial(prop, value, counterpart) {
+  const record = withFromToRanges(
+    { [prop]: value },
+    counterpart === void 0 ? void 0 : { [prop]: counterpart }
+  );
+  return record[prop];
+}
+var FROM_TO_RANGE_PRESETS = [
+  [/^(x|y|z|tx|ty|offsetx|offsety|translatex|translatey)$/i, { min: -100, max: 100, step: 1 }],
+  [/rotat|angle|skew/i, { min: -180, max: 180, step: 1 }],
+  [/^scale/i, { min: 0, max: 2, step: 0.01 }],
+  [/opacity|alpha/i, { min: 0, max: 1, step: 0.01 }],
+  [/blur|radius|spread/i, { min: 0, max: 100, step: 1 }]
+];
+function inferFromToRange(key, value, counterpart) {
+  const lo = Math.min(value, counterpart ?? value);
+  const hi = Math.max(value, counterpart ?? value);
+  const preset = FROM_TO_RANGE_PRESETS.find(([pattern]) => pattern.test(key))?.[1];
+  if (preset) {
+    return [value, Math.min(preset.min, lo), Math.max(preset.max, hi), preset.step];
+  }
+  if (lo >= 0 && hi <= 1) {
+    return [value, 0, 1, 0.01];
+  }
+  const extent = Math.max(Math.abs(lo), Math.abs(hi), 1);
+  const min = lo < 0 ? -extent * 2 : 0;
+  const max = Math.max(extent * 2, hi);
+  return [value, min, max, inferStep(min, max)];
+}
+function withFromToRanges(config, counterpart) {
+  const result = {};
+  for (const [key, value] of Object.entries(config)) {
+    const other = counterpart?.[key];
+    if (typeof value === "number") {
+      result[key] = inferFromToRange(key, value, typeof other === "number" ? other : void 0);
+    } else if (isPlainObject(value) && !("type" in value)) {
+      result[key] = withFromToRanges(
+        value,
+        isPlainObject(other) && !("type" in other) ? other : void 0
+      );
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function curveStatic(transition, duration) {
+  if (!transition) return { duration };
+  if (transition.type === "easing") return { duration, ease: transition.ease };
+  const spring = springParams(transition);
+  return { duration, spring, settle: springSettleDuration(spring) };
+}
+function sampleCurve(curve, elapsed) {
+  if (elapsed <= 0) return 0;
+  if (curve.spring) {
+    if (curve.settle !== void 0 && elapsed >= curve.settle) return 1;
+    return springProgress(elapsed, curve.spring);
+  }
+  if (curve.ease) {
+    return cubicBezierProgress(clamp(curve.duration > 0 ? elapsed / curve.duration : 1, 0, 1), curve.ease);
+  }
+  return curve.duration > 0 ? Math.min(1, elapsed / curve.duration) : 1;
+}
+function resolvedAtPath(resolved, path) {
+  let node = resolved;
+  for (const segment of path.split(".")) {
+    node = isPlainObject(node) ? node[segment] : void 0;
+  }
+  return isPlainObject(node) ? node : {};
+}
+function computeStaticClips(parsed, flatValues) {
+  const resolved = resolveDialValues(parsed.dialConfig, flatValues);
+  return parsed.clips.map(
+    (clip) => buildClipStatic(resolvedAtPath(resolved, clip.key), clip, parsed.duration)
+  );
+}
+function computeStaticTimeline(parsed, flatValues) {
+  let clips = computeStaticClips(parsed, flatValues);
+  const maxEnd = clips.reduce(
+    (end, clip) => Math.max(end, clip.at + clip.duration),
+    parsed.duration
+  );
+  const duration = maxEnd > parsed.duration ? Math.ceil(maxEnd * 100 - 1e-4) / 100 : parsed.duration;
+  if (duration !== parsed.duration) {
+    clips = clips.map(
+      (clip) => clip.loop === "repeat" ? { ...clip, end: duration } : clip
+    );
+  }
+  return { duration, clips };
+}
+function computeClipStaticFromValues(values, clip, timelineDuration) {
+  return buildClipStatic(unflattenClipValues(values, clip.key), clip, timelineDuration);
+}
+function buildClipStatic(clipResolved, clip, timelineDuration) {
+  {
+    const at = typeof clipResolved.at === "number" ? clipResolved.at : 0;
+    const from = isPlainObject(clipResolved.from) ? clipResolved.from : void 0;
+    const single = isTransitionConfig(clipResolved.transition) ? clipResolved.transition : void 0;
+    const staticClip = {
+      key: clip.key,
+      childKey: clip.group ? clip.key.slice(clip.group.length + 1) : clip.key,
+      group: clip.group,
+      at,
+      duration: 0,
+      loop: "off",
+      end: 0,
+      isPhysics: false,
+      from,
+      tracks: [],
+      explicitSteps: Boolean(clip.stepKeys?.length)
+    };
+    if (clip.tracks?.length) {
+      const tracks = clip.tracks.map(({ prop, stepKeys }) => {
+        const trackResolved = isPlainObject(clipResolved[prop]) ? clipResolved[prop] : {};
+        const delay = typeof trackResolved.delay === "number" ? trackResolved.delay : 0;
+        const fromValue = trackResolved.from;
+        let steps;
+        let trackDuration = 0;
+        if (stepKeys?.length) {
+          let running = fromValue;
+          steps = stepKeys.map((stepKey) => {
+            const stepResolved = isPlainObject(trackResolved[stepKey]) ? trackResolved[stepKey] : {};
+            const storedDuration = typeof stepResolved.duration === "number" ? stepResolved.duration : 0;
+            const raw = isTransitionConfig(stepResolved.transition) ? stepResolved.transition : void 0;
+            const effective = raw ? resolveClipTransition(raw, storedDuration) : { transition: void 0, duration: storedDuration, isPhysics: false };
+            const toValue = stepResolved.to;
+            const step = {
+              key: stepKey,
+              offset: trackDuration,
+              duration: effective.duration,
+              isPhysics: effective.isPhysics,
+              start: running === void 0 ? {} : { [prop]: running },
+              to: toValue === void 0 ? {} : { [prop]: toValue },
+              curve: curveStatic(effective.transition, effective.duration)
+            };
+            if (toValue !== void 0) running = toValue;
+            trackDuration += effective.duration;
+            return step;
+          });
+        } else {
+          const storedDuration = typeof trackResolved.duration === "number" ? trackResolved.duration : 0;
+          const raw = isTransitionConfig(trackResolved.transition) ? trackResolved.transition : void 0;
+          const effective = raw ? resolveClipTransition(raw, storedDuration) : { transition: void 0, duration: storedDuration, isPhysics: false };
+          const toValue = trackResolved.to;
+          trackDuration = effective.duration;
+          steps = [
+            {
+              key: null,
+              offset: 0,
+              duration: effective.duration,
+              isPhysics: effective.isPhysics,
+              start: fromValue === void 0 ? {} : { [prop]: fromValue },
+              to: toValue === void 0 ? {} : { [prop]: toValue },
+              curve: curveStatic(effective.transition, effective.duration)
+            }
+          ];
+        }
+        return { prop, delay, duration: trackDuration, steps };
+      });
+      staticClip.tracks = tracks;
+      staticClip.props = tracks.map((track) => track.prop);
+      staticClip.duration = tracks.reduce((max, track) => Math.max(max, track.delay + track.duration), 0);
+      staticClip.from = Object.fromEntries(
+        tracks.map((track) => [track.prop, track.steps[0].start[track.prop]])
+      );
+      staticClip.to = Object.fromEntries(
+        tracks.map((track) => {
+          const last = track.steps[track.steps.length - 1];
+          return [track.prop, last.to[track.prop] ?? last.start[track.prop]];
+        })
+      );
+      staticClip.loop = staticClip.duration > 0 ? clip.loop : "off";
+      staticClip.end = staticClip.loop === "off" ? staticClip.at + staticClip.duration : timelineDuration;
+      return staticClip;
+    }
+    if (clip.stepKeys?.length) {
+      let running = { ...from ?? {} };
+      let offset = 0;
+      const steps = clip.stepKeys.map((stepKey) => {
+        const stepResolved = isPlainObject(clipResolved[stepKey]) ? clipResolved[stepKey] : {};
+        const storedDuration = typeof stepResolved.duration === "number" ? stepResolved.duration : 0;
+        const raw = isTransitionConfig(stepResolved.transition) ? stepResolved.transition : void 0;
+        const effective = raw ? resolveClipTransition(raw, storedDuration) : { transition: void 0, duration: storedDuration, isPhysics: false };
+        const to = isPlainObject(stepResolved.to) ? stepResolved.to : {};
+        const step = {
+          key: stepKey,
+          offset,
+          duration: effective.duration,
+          isPhysics: effective.isPhysics,
+          start: running,
+          to,
+          curve: curveStatic(effective.transition, effective.duration)
+        };
+        running = { ...running, ...to };
+        offset += effective.duration;
+        return step;
+      });
+      staticClip.tracks = [{ delay: 0, duration: offset, steps }];
+      staticClip.duration = offset;
+      staticClip.to = running;
+    } else {
+      const storedDuration = typeof clipResolved.duration === "number" ? clipResolved.duration : 0;
+      const to = isPlainObject(clipResolved.to) ? clipResolved.to : void 0;
+      if (single) {
+        const effective = resolveClipTransition(single, storedDuration);
+        staticClip.duration = effective.duration;
+        staticClip.isPhysics = effective.isPhysics;
+        staticClip.transition = effective.transition;
+        staticClip.css = transitionToCss(effective.transition);
+        staticClip.to = to;
+        if (from && to) {
+          staticClip.tracks = [
+            {
+              delay: 0,
+              duration: effective.duration,
+              steps: [
+                {
+                  key: null,
+                  offset: 0,
+                  duration: effective.duration,
+                  isPhysics: effective.isPhysics,
+                  start: from,
+                  to,
+                  curve: curveStatic(effective.transition, effective.duration)
+                }
+              ]
+            }
+          ];
+        }
+      } else {
+        staticClip.duration = storedDuration;
+        staticClip.to = to;
+        if (from && to) {
+          const base = resolveClipTransition(DEFAULT_CLIP_TRANSITION, storedDuration);
+          staticClip.duration = base.duration;
+          staticClip.tracks = [
+            {
+              delay: 0,
+              duration: base.duration,
+              steps: [
+                {
+                  key: null,
+                  offset: 0,
+                  duration: base.duration,
+                  isPhysics: false,
+                  start: from,
+                  to,
+                  curve: curveStatic(base.transition, base.duration)
+                }
+              ]
+            }
+          ];
+        }
+      }
+    }
+    if (staticClip.tracks.length) {
+      const props = new Set(Object.keys(from ?? {}));
+      for (const track of staticClip.tracks) {
+        for (const step of track.steps) {
+          for (const prop of Object.keys(step.to)) props.add(prop);
+        }
+      }
+      staticClip.props = Array.from(props);
+    }
+    staticClip.loop = staticClip.duration > 0 ? clip.loop : "off";
+    staticClip.end = staticClip.loop === "off" ? staticClip.at + staticClip.duration : timelineDuration;
+    return staticClip;
+  }
+}
+function stepAtPosition(steps, pos) {
+  for (const step of steps) {
+    if (pos < step.offset + step.duration) return step;
+  }
+  return steps[steps.length - 1];
+}
+function evalPropAtPos(steps, prop, pos) {
+  const step = stepAtPosition(steps, pos);
+  const within = Math.max(0, pos - step.offset);
+  if (prop in step.to) {
+    const eased = sampleCurve(step.curve, within);
+    return interpolateResolved(step.start[prop], step.to[prop], eased);
+  }
+  return step.start[prop];
+}
+function computeClipState(clip, time, cycleTime = time) {
+  const total = clip.duration;
+  const looping = clip.loop === "repeat" && total > 0;
+  const started = time >= clip.at || looping && cycleTime > time;
+  const done = time >= clip.end;
+  const elapsed = time - clip.at;
+  const phaseElapsed = looping ? cycleTime - clip.at : elapsed;
+  const fold = (e) => looping ? e % total : e;
+  const basePos = started ? fold(Math.max(0, phaseElapsed)) : 0;
+  const progress = total > 0 ? clamp(basePos / total, 0, 1) : started ? 1 : 0;
+  let current;
+  let stepIndex = 0;
+  if (clip.tracks.length && clip.props?.length) {
+    current = {};
+    for (const track of clip.tracks) {
+      const props = track.prop !== void 0 ? [track.prop] : clip.props;
+      for (const prop of props) {
+        const startValue = track.steps[0]?.start[prop];
+        if (!started) {
+          if (startValue !== void 0) current[prop] = startValue;
+          continue;
+        }
+        const phase = phaseElapsed - track.delay;
+        if (phase <= 0) {
+          if (startValue !== void 0) current[prop] = startValue;
+          continue;
+        }
+        const pos = looping && track.duration > 0 ? phase % track.duration : phase;
+        const value = evalPropAtPos(track.steps, prop, pos);
+        if (value !== void 0) current[prop] = value;
+      }
+    }
+    const shared = clip.tracks[0];
+    if (started && clip.explicitSteps && shared.prop === void 0) {
+      stepIndex = shared.steps.indexOf(stepAtPosition(shared.steps, basePos));
+    }
+  }
+  return {
+    at: clip.at,
+    duration: clip.duration,
+    loop: clip.loop,
+    started,
+    active: started && !done,
+    done,
+    progress,
+    step: clip.explicitSteps ? stepIndex : void 0,
+    from: clip.from,
+    to: clip.to,
+    animate: started ? clip.to : clip.from,
+    transition: clip.transition,
+    css: clip.css,
+    current
+  };
+}
+function interpolateResolved(from, to, p) {
+  if (typeof from === "number" && typeof to === "number") {
+    return from + (to - from) * p;
+  }
+  if (typeof from === "string" && typeof to === "string") {
+    const mixed = mixHexColors(from, to, p);
+    if (mixed) return mixed;
+  }
+  if (isPlainObject(from) && isPlainObject(to)) {
+    const result = {};
+    for (const key of Object.keys(from)) {
+      result[key] = key in to ? interpolateResolved(from[key], to[key], p) : from[key];
+    }
+    for (const key of Object.keys(to)) {
+      if (!(key in from)) result[key] = to[key];
+    }
+    return result;
+  }
+  return p < 0.5 ? from : to;
+}
+function parseHex(hex) {
+  if (!isHexColor(hex)) return null;
+  let h = hex.slice(1);
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+    h.length === 8 ? parseInt(h.slice(6, 8), 16) : 255
+  ];
+}
+function mixHexColors(a, b, p) {
+  const ca = parseHex(a);
+  const cb = parseHex(b);
+  if (!ca || !cb) return null;
+  const t = clamp(p, 0, 1);
+  const mixed = ca.map((v, i) => Math.round(v + (cb[i] - v) * t));
+  const hex = (n) => n.toString(16).padStart(2, "0");
+  const rgb = `#${hex(mixed[0])}${hex(mixed[1])}${hex(mixed[2])}`;
+  return mixed[3] === 255 ? rgb : `${rgb}${hex(mixed[3])}`;
+}
+function transitionToCss(transition) {
+  if (!transition) return void 0;
+  if (transition.type === "easing") {
+    return {
+      transitionDuration: `${round2(transition.duration)}s`,
+      transitionTimingFunction: `cubic-bezier(${transition.ease.map((v) => round2(v)).join(", ")})`
+    };
+  }
+  const params = springParams(transition);
+  const dampingRatio = params.damping / (2 * Math.sqrt(params.stiffness * params.mass));
+  const duration = transition.visualDuration ?? springSettleDuration(params);
+  const bounce = transition.bounce ?? Math.max(0, round2(1 - dampingRatio));
+  return {
+    transitionDuration: `${round2(duration)}s`,
+    transitionTimingFunction: bounce > 0.05 ? `cubic-bezier(0.34, ${round2(1.2 + bounce)}, 0.64, 1)` : "cubic-bezier(0.25, 0.6, 0.35, 1)"
+  };
+}
+function timelinePopoverDisplayValues(values, clipKey, stepKeys, stepKey) {
+  const display = { ...values };
+  const swap = (path, duration) => {
+    const raw = display[path];
+    if (isTransitionConfig(raw)) display[path] = resolveClipTransition(raw, duration).transition;
+  };
+  if (stepKey) {
+    swap(`${clipKey}.${stepKey}.transition`, numberValue(values[`${clipKey}.${stepKey}.duration`]));
+    return display;
+  }
+  const cycle = stepKeys?.length ? stepKeys.reduce((sum, sk) => sum + numberValue(values[`${clipKey}.${sk}.duration`]), 0) : numberValue(values[`${clipKey}.duration`]);
+  swap(`${clipKey}.transition`, cycle);
+  return display;
+}
+function numberValue(value) {
+  return typeof value === "number" ? value : 0;
+}
+function unflattenClipValues(values, clipKey) {
+  const prefix = `${clipKey}.`;
+  const result = {};
+  const entries = Object.entries(values).filter(([path]) => path.startsWith(prefix)).map(([path, value]) => ({ segments: path.slice(prefix.length).split("."), value })).sort((a, b) => a.segments.length - b.segments.length);
+  for (const { segments, value } of entries) {
+    let node = result;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const existing = node[segments[i]];
+      node = isPlainObject(existing) ? existing : node[segments[i]] = {};
+    }
+    node[segments[segments.length - 1]] = cloneTimelineValue(value);
+  }
+  return result;
+}
+function cloneTimelineValue(value) {
+  if (Array.isArray(value)) return value.map(cloneTimelineValue);
+  if (!isPlainObject(value)) return value;
+  return Object.fromEntries(
+    Object.entries(value).map(([key, nested]) => [key, cloneTimelineValue(nested)])
+  );
+}
+function clampTrackDelay(delay, at, trackDuration, timelineDuration) {
+  return clamp(round2(delay), 0, Math.max(0, round2(timelineDuration - at - trackDuration)));
+}
+function clampClipMove(at, duration, timelineDuration) {
+  return clamp(round2(at), 0, Math.max(0, timelineDuration - duration));
+}
+function clampClipResizeEnd(duration, at, timelineDuration) {
+  return clamp(round2(duration), TIMELINE_MIN_CLIP_DURATION, timelineDuration - at);
+}
+function clampClipResizeStart(newAt, at, duration) {
+  const clampedAt = clamp(round2(newAt), 0, at + duration - TIMELINE_MIN_CLIP_DURATION);
+  return { at: clampedAt, duration: round2(at + duration - clampedAt) };
+}
+function clampStepResize(duration, at, otherStepsTotal, timelineDuration) {
+  const max = Math.max(TIMELINE_MIN_CLIP_DURATION, timelineDuration - at - otherStepsTotal);
+  return clamp(round2(duration), TIMELINE_MIN_CLIP_DURATION, max);
+}
+function normalizeTimelineValuesForCopy(values, clips) {
+  const normalized = { ...values };
+  for (const path of Object.keys(normalized)) {
+    if (path.endsWith(".__mode")) delete normalized[path];
+  }
+  const normalizeTransitionAt = (transitionPath, durationPath) => {
+    const raw = normalized[transitionPath];
+    if (!isTransitionConfig(raw)) return;
+    if (isPhysicsSpring(raw)) {
+      normalized[durationPath] = transitionDefaultDuration(raw);
+    }
+    normalized[transitionPath] = normalizeStoredTransition(
+      raw,
+      numberValue(normalized[durationPath])
+    );
+  };
+  for (const clip of clips) {
+    for (const stepKey of clip.stepKeys ?? []) {
+      normalizeTransitionAt(
+        `${clip.key}.${stepKey}.transition`,
+        `${clip.key}.${stepKey}.duration`
+      );
+    }
+    normalizeTransitionAt(`${clip.key}.transition`, `${clip.key}.duration`);
+    for (const track of clip.tracks ?? []) {
+      const trackKey = `${clip.key}.${track.prop}`;
+      for (const stepKey of track.stepKeys ?? []) {
+        normalizeTransitionAt(
+          `${trackKey}.${stepKey}.transition`,
+          `${trackKey}.${stepKey}.duration`
+        );
+      }
+      normalizeTransitionAt(`${trackKey}.transition`, `${trackKey}.duration`);
+      if (normalized[`${trackKey}.delay`] === 0) {
+        delete normalized[`${trackKey}.delay`];
+      }
+    }
+    delete normalized[`${clip.key}.loop`];
+  }
+  return normalized;
+}
+function formatClock(time, tenths = false) {
+  const safe = Math.max(0, time);
+  const minutes = Math.floor(safe / 60);
+  const seconds = safe - minutes * 60;
+  const secondsText = tenths ? seconds.toFixed(1).padStart(4, "0") : String(Math.floor(seconds)).padStart(2, "0");
+  return `${String(minutes).padStart(2, "0")}:${secondsText}`;
+}
+function formatSeconds(value) {
+  return `${round2(value)}s`;
+}
+function formatStepLabel(stepKey) {
+  const match = /^step(\d+)$/.exec(stepKey);
+  return match ? `Step ${match[1]}` : formatLabel(stepKey);
+}
+
+// src/timeline/adapter.ts
+function resolveTimelineLoop(loop) {
+  if (typeof loop === "object" && loop !== null) {
+    return {
+      enabled: true,
+      start: Number.isFinite(loop.from) ? Math.max(0, loop.from) : 0
+    };
+  }
+  return { enabled: Boolean(loop), start: 0 };
+}
+function buildTimelineMeta(id, name, duration, parsed, loop) {
+  const resolvedLoop = resolveTimelineLoop(loop);
+  return {
+    id,
+    name,
+    duration,
+    loop: resolvedLoop.enabled,
+    loopStart: resolvedLoop.start,
+    clips: parsed.clips
+  };
+}
+function buildTimelineValues(staticClips, transport, timelineDuration, loopStart, actions) {
+  var _a;
+  const result = {
+    time: transport.time,
+    playing: transport.playing,
+    duration: timelineDuration,
+    ...actions
+  };
+  const span = loopSpan(transport.duration, loopStart);
+  const cycleTime = (span > 0 ? transport.wraps * span : 0) + transport.time;
+  for (const clip of staticClips) {
+    const state = computeClipState(clip, transport.time, cycleTime);
+    if (clip.group) {
+      const bucket = result[_a = clip.group] ?? (result[_a] = {});
+      bucket[clip.childKey] = state;
+    } else {
+      result[clip.key] = state;
+    }
+  }
+  return result;
+}
+
+// src/hooks/useDialTimeline.ts
+function useDialTimeline(name, config, options) {
+  const serializedConfig = useSerialized(config);
+  const parsed = (0, import_react22.useMemo)(() => parseTimelineConfig(config), [serializedConfig]);
+  const { panelId, flatValues } = useDialStorePanel(name, parsed.dialConfig, {
+    id: options?.id,
+    persist: options?.persist,
+    kind: "timeline"
+  });
+  const staticTimeline = (0, import_react22.useMemo)(
+    () => computeStaticTimeline(parsed, flatValues),
+    [parsed, flatValues]
+  );
+  const timelineDuration = staticTimeline.duration;
+  const staticClips = staticTimeline.clips;
+  const parsedRef = (0, import_react22.useRef)(parsed);
+  parsedRef.current = parsed;
+  const optionsRef = (0, import_react22.useRef)(options);
+  optionsRef.current = options;
+  const { start: loopStart } = resolveTimelineLoop(options?.loop);
+  const buildMeta = (0, import_react22.useCallback)(
+    () => buildTimelineMeta(panelId, name, timelineDuration, parsedRef.current, options?.loop),
+    [panelId, name, timelineDuration, options?.loop]
+  );
+  const buildMetaRef = (0, import_react22.useRef)(buildMeta);
+  buildMetaRef.current = buildMeta;
+  (0, import_react22.useEffect)(() => {
+    TimelineStore.register(buildMetaRef.current(), { autoplay: optionsRef.current?.autoplay ?? true });
+    return () => TimelineStore.unregister(panelId);
+  }, [panelId, name]);
+  const mountedRef = (0, import_react22.useRef)(false);
+  (0, import_react22.useEffect)(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    TimelineStore.update(buildMeta());
+  }, [buildMeta, parsed]);
+  const subscribeTransport = (0, import_react22.useCallback)(
+    (callback) => TimelineStore.subscribe(panelId, callback),
+    [panelId]
+  );
+  const getTransport = (0, import_react22.useCallback)(() => TimelineStore.getTransport(panelId), [panelId]);
+  const transport = (0, import_react22.useSyncExternalStore)(subscribeTransport, getTransport, getTransport);
+  const play = (0, import_react22.useCallback)(() => TimelineStore.play(panelId), [panelId]);
+  const pause = (0, import_react22.useCallback)(() => TimelineStore.pause(panelId), [panelId]);
+  const replay = (0, import_react22.useCallback)(() => TimelineStore.replay(panelId), [panelId]);
+  const seek = (0, import_react22.useCallback)((time) => TimelineStore.seek(panelId, time), [panelId]);
+  return (0, import_react22.useMemo)(
+    () => buildTimelineValues(staticClips, transport, timelineDuration, loopStart, {
+      play,
+      pause,
+      replay,
+      seek
+    }),
+    [staticClips, transport, timelineDuration, loopStart, play, pause, replay, seek]
+  );
+}
+
+// src/components/Timeline/DialTimeline.tsx
+var import_react23 = require("react");
 var import_react_dom4 = require("react-dom");
-var import_react19 = require("motion/react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react24 = require("motion/react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DRAG_THRESHOLD_PX = 3;
+var MAJOR_TICK_TARGET_PX = 140;
+var MILLISECOND_STEP = 1e-3;
+var SECOND_TICK_STEPS = [
+  1e-3,
+  2e-3,
+  5e-3,
+  0.01,
+  0.02,
+  0.05,
+  0.1,
+  0.2,
+  0.5,
+  1,
+  2,
+  5,
+  10,
+  15,
+  30,
+  60,
+  120,
+  300,
+  600
+];
+var MIN_TIMELINE_MAX_ZOOM = 8;
+var PLAYHEAD_FLAG_WIDTH = 52;
+var POPOVER_WIDTH = 280;
+var ZOOM_DRAG_DISTANCE = 180;
+var subscribeGlobalTimelines = (callback) => TimelineStore.subscribeGlobal(callback);
+var getTimelines = () => TimelineStore.getTimelines();
+var subscribeTimelineVisibility = (callback) => TimelineUiStore.subscribe(callback);
+var getTimelineVisibility = () => TimelineUiStore.getVisible();
+var DialTimeline = (0, import_react23.memo)(function DialTimeline2({
+  theme = "system",
+  defaultVisible = true,
+  visible,
+  onVisibilityChange,
+  defaultOpen = true,
+  productionEnabled = isDevDefault
+}) {
+  if (!productionEnabled) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    DialTimelineDock,
+    {
+      theme,
+      defaultVisible,
+      visible,
+      onVisibilityChange,
+      defaultOpen
+    }
+  );
+});
+function DialTimelineDock({
+  theme,
+  defaultVisible,
+  visible,
+  onVisibilityChange,
+  defaultOpen
+}) {
+  const [mounted, setMounted] = (0, import_react23.useState)(false);
+  const visibilityControllerId = (0, import_react23.useRef)(/* @__PURE__ */ Symbol("dialkit-timeline-visibility"));
+  (0, import_react23.useEffect)(() => TimelineUiStore.registerController(visibilityControllerId.current, {
+    visible,
+    defaultVisible,
+    onVisibilityChange
+  }), []);
+  (0, import_react23.useEffect)(() => {
+    TimelineUiStore.updateController(visibilityControllerId.current, {
+      visible,
+      defaultVisible,
+      onVisibilityChange
+    });
+  }, [defaultVisible, onVisibilityChange, visible]);
+  (0, import_react23.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const timelines = (0, import_react23.useSyncExternalStore)(subscribeGlobalTimelines, getTimelines, getTimelines);
+  const dockVisible = (0, import_react23.useSyncExternalStore)(
+    subscribeTimelineVisibility,
+    getTimelineVisibility,
+    getTimelineVisibility
+  );
+  if (!mounted || typeof window === "undefined" || timelines.length === 0) {
+    return null;
+  }
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-dock", children: timelines.map((timeline) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      TimelineSection,
+      {
+        meta: timeline,
+        defaultOpen,
+        theme,
+        dockVisible
+      },
+      timeline.id
+    )) }) }),
+    document.body
+  );
+}
+function useTransportSubscribe(id) {
+  return (0, import_react23.useCallback)((callback) => TimelineStore.subscribe(id, callback), [id]);
+}
+function PlayPauseButton({ id }) {
+  const subscribe = useTransportSubscribe(id);
+  const getPlaying = (0, import_react23.useCallback)(() => TimelineStore.getTransport(id).playing, [id]);
+  const playing = (0, import_react23.useSyncExternalStore)(subscribe, getPlaying, getPlaying);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react24.motion.button,
+    {
+      className: "dialkit-toolbar-add",
+      onClick: () => playing ? TimelineStore.pause(id) : TimelineStore.play(id),
+      title: playing ? "Pause" : "Play",
+      "aria-label": playing ? "Pause" : "Play",
+      whileTap: { scale: 0.9 },
+      transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react24.AnimatePresence, { initial: false, mode: "wait", children: playing ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react24.motion.svg,
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+          initial: { scale: 0.8, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          exit: { scale: 0.8, opacity: 0 },
+          transition: { duration: 0.08 },
+          children: ICON_PAUSE.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d, fill: "currentColor" }, i))
+        },
+        "pause"
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react24.motion.svg,
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+          initial: { scale: 0.8, opacity: 0 },
+          animate: { scale: 1, opacity: 1 },
+          exit: { scale: 0.8, opacity: 0 },
+          transition: { duration: 0.08 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_PLAY, fill: "currentColor" })
+        },
+        "play"
+      ) }) })
+    }
+  );
+}
+function TimelinePlayheadFlag({
+  id,
+  duration,
+  pxPerSecond,
+  viewStart,
+  viewEnd,
+  laneWidth,
+  rulerRef,
+  headerClearStart,
+  headerClearEnd,
+  onResetView
+}) {
+  const subscribe = useTransportSubscribe(id);
+  const getTime = (0, import_react23.useCallback)(() => TimelineStore.getTransport(id).time, [id]);
+  const time = (0, import_react23.useSyncExternalStore)(subscribe, getTime, getTime);
+  const scrubRef = (0, import_react23.useRef)(null);
+  const cleanupScrubRef = (0, import_react23.useRef)(null);
+  const seekFromClientX = (0, import_react23.useCallback)((clientX) => {
+    const rect = scrubRef.current?.rect;
+    const scrub = scrubRef.current;
+    const contentWidth = rect?.width ?? 0;
+    if (!rect || !scrub || contentWidth <= 0) return;
+    const nextTime = clamp(
+      scrub.viewStart + (clientX - rect.left) / contentWidth * (scrub.viewEnd - scrub.viewStart),
+      scrub.viewStart,
+      scrub.viewEnd
+    );
+    TimelineStore.seek(id, nextTime);
+  }, [id]);
+  const handlePointerDown = (0, import_react23.useCallback)((e) => {
+    const rect = rulerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    e.preventDefault();
+    e.stopPropagation();
+    cleanupScrubRef.current?.();
+    const resetView = e.shiftKey;
+    scrubRef.current = {
+      wasPlaying: TimelineStore.getTransport(id).playing,
+      rect,
+      viewStart: resetView ? 0 : viewStart,
+      viewEnd: resetView ? duration : viewEnd
+    };
+    if (resetView) onResetView();
+    TimelineStore.pause(id);
+    seekFromClientX(e.clientX);
+    const handleWindowPointerMove = (event) => {
+      event.preventDefault();
+      seekFromClientX(event.clientX);
+    };
+    const finishWindowScrub = () => {
+      window.removeEventListener("pointermove", handleWindowPointerMove);
+      window.removeEventListener("pointerup", finishWindowScrub);
+      window.removeEventListener("pointercancel", finishWindowScrub);
+      if (scrubRef.current?.wasPlaying) TimelineStore.play(id);
+      scrubRef.current = null;
+      cleanupScrubRef.current = null;
+    };
+    window.addEventListener("pointermove", handleWindowPointerMove, { passive: false });
+    window.addEventListener("pointerup", finishWindowScrub);
+    window.addEventListener("pointercancel", finishWindowScrub);
+    cleanupScrubRef.current = finishWindowScrub;
+  }, [duration, id, onResetView, rulerRef, seekFromClientX, viewEnd, viewStart]);
+  (0, import_react23.useEffect)(() => () => cleanupScrubRef.current?.(), []);
+  if (time < viewStart || time > viewEnd || laneWidth <= 0) return null;
+  const x = clamp(
+    (time - viewStart) * pxPerSecond,
+    0,
+    laneWidth
+  );
+  const flagLeft = x - PLAYHEAD_FLAG_WIDTH / 2;
+  const flagRight = flagLeft + PLAYHEAD_FLAG_WIDTH;
+  const placement = flagLeft >= headerClearStart && flagRight <= headerClearEnd ? "raised" : "lowered";
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: "dialkit-timeline-playhead-control",
+      "data-edge": "center",
+      "data-placement": placement,
+      style: { left: `calc(var(--dial-timeline-label-w) + ${x}px)` },
+      onPointerDown: handlePointerDown,
+      role: "slider",
+      "aria-label": "Timeline current time",
+      "aria-valuemin": 0,
+      "aria-valuemax": duration,
+      "aria-valuenow": time,
+      title: "Drag to scrub the timeline",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-playhead-stem" })
+      ]
+    }
+  );
+}
+function TimelineOverview({
+  id,
+  duration,
+  viewStart,
+  viewEnd,
+  onNavigate
+}) {
+  const subscribe = useTransportSubscribe(id);
+  const getTime = (0, import_react23.useCallback)(() => TimelineStore.getTransport(id).time, [id]);
+  const time = (0, import_react23.useSyncExternalStore)(subscribe, getTime, getTime);
+  const scrubRef = (0, import_react23.useRef)(null);
+  const seekFromClientX = (0, import_react23.useCallback)((clientX) => {
+    const rect = scrubRef.current?.rect;
+    if (!rect || rect.width <= 0 || duration <= 0) return;
+    const nextTime = clamp((clientX - rect.left) / rect.width * duration, 0, duration);
+    TimelineStore.seek(id, nextTime);
+    onNavigate(nextTime);
+  }, [duration, id, onNavigate]);
+  const handlePointerDown = (0, import_react23.useCallback)((e) => {
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    scrubRef.current = {
+      wasPlaying: TimelineStore.getTransport(id).playing,
+      rect: e.currentTarget.getBoundingClientRect()
+    };
+    TimelineStore.pause(id);
+    seekFromClientX(e.clientX);
+  }, [id, seekFromClientX]);
+  const handlePointerMove = (0, import_react23.useCallback)((e) => {
+    if (scrubRef.current) seekFromClientX(e.clientX);
+  }, [seekFromClientX]);
+  const finishScrub = (0, import_react23.useCallback)(() => {
+    if (scrubRef.current?.wasPlaying) TimelineStore.play(id);
+    scrubRef.current = null;
+  }, [id]);
+  const viewportLeft = duration > 0 ? viewStart / duration * 100 : 0;
+  const viewportWidth = duration > 0 ? (viewEnd - viewStart) / duration * 100 : 100;
+  const playheadLeft = duration > 0 ? time / duration * 100 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: "dialkit-timeline-overview",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: finishScrub,
+      onPointerCancel: finishScrub,
+      onLostPointerCapture: finishScrub,
+      title: "Drag to scrub the full timeline",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            className: "dialkit-timeline-overview-viewport",
+            "data-zoomed": viewportWidth < 99.999 || void 0,
+            style: { left: `${viewportLeft}%`, width: `${viewportWidth}%` }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-overview-progress", style: { width: `${playheadLeft}%` } }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-overview-playhead", style: { left: `${playheadLeft}%` } })
+      ]
+    }
+  );
+}
+function clampViewStart(start, duration, visibleDuration) {
+  return clamp(start, 0, Math.max(0, duration - visibleDuration));
+}
+function formatRulerSeconds(time, step) {
+  if (step >= 1 && Number.isInteger(time)) return formatClock(time);
+  const decimals = Math.min(3, Math.max(1, Math.ceil(-Math.log10(step))));
+  return `${time.toFixed(decimals)}s`;
+}
+var TimelineSection = (0, import_react23.memo)(function TimelineSection2({
+  meta,
+  defaultOpen,
+  theme,
+  dockVisible
+}) {
+  const [open, setOpen] = (0, import_react23.useState)(defaultOpen);
+  const [copied, setCopied] = (0, import_react23.useState)(false);
+  const [popover, setPopover] = (0, import_react23.useState)(null);
+  const [collapsedGroups, setCollapsedGroups] = (0, import_react23.useState)(() => /* @__PURE__ */ new Set());
+  const [expandedTracks, setExpandedTracks] = (0, import_react23.useState)(() => /* @__PURE__ */ new Set());
+  const [zoom, setZoom] = (0, import_react23.useState)(1);
+  const [viewStart, setViewStart] = (0, import_react23.useState)(0);
+  const subscribeValues = (0, import_react23.useCallback)(
+    (callback) => DialStore.subscribe(meta.id, callback),
+    [meta.id]
+  );
+  const getValues = (0, import_react23.useCallback)(() => DialStore.getValues(meta.id), [meta.id]);
+  const values = (0, import_react23.useSyncExternalStore)(subscribeValues, getValues, getValues);
+  const presets = DialStore.getPresets(meta.id);
+  const activePresetId = DialStore.getActivePresetId(meta.id);
+  const laneAreaRef = (0, import_react23.useRef)(null);
+  const titleRef = (0, import_react23.useRef)(null);
+  const actionsRef = (0, import_react23.useRef)(null);
+  const [laneWidth, setLaneWidth] = (0, import_react23.useState)(0);
+  const [flagClearRange, setFlagClearRange] = (0, import_react23.useState)({ start: 0, end: 0 });
+  (0, import_react23.useLayoutEffect)(() => {
+    if (!open) return;
+    const ruler = laneAreaRef.current;
+    const title = titleRef.current;
+    const actions = actionsRef.current;
+    if (!ruler || !title || !actions) return;
+    const measure = () => {
+      const rulerRect = ruler.getBoundingClientRect();
+      const titleRect = title.getBoundingClientRect();
+      const actionsRect = actions.getBoundingClientRect();
+      setLaneWidth(rulerRect.width);
+      const start = Math.round(titleRect.right + 10 - rulerRect.left);
+      const end = Math.round(actionsRect.left - 10 - rulerRect.left);
+      setFlagClearRange((current) => current.start === start && current.end === end ? current : { start, end });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(ruler);
+    observer.observe(title);
+    observer.observe(actions);
+    return () => observer.disconnect();
+  }, [open]);
+  const visibleDuration = meta.duration > 0 ? meta.duration / zoom : meta.duration;
+  const safeViewStart = clampViewStart(viewStart, meta.duration, visibleDuration);
+  const viewEnd = safeViewStart + visibleDuration;
+  const pxPerSecond = visibleDuration > 0 && laneWidth > 0 ? laneWidth / visibleDuration : 0;
+  const millisecondReadableZoom = laneWidth > 0 && meta.duration > 0 ? MAJOR_TICK_TARGET_PX * meta.duration / (MILLISECOND_STEP * 10 * laneWidth) : MIN_TIMELINE_MAX_ZOOM;
+  const maxZoom = Math.max(MIN_TIMELINE_MAX_ZOOM, millisecondReadableZoom);
+  (0, import_react23.useEffect)(() => {
+    setZoom((current) => clamp(current, 1, maxZoom));
+  }, [maxZoom]);
+  (0, import_react23.useEffect)(() => {
+    setViewStart((current) => clampViewStart(current, meta.duration, meta.duration / zoom));
+  }, [meta.duration, zoom]);
+  (0, import_react23.useEffect)(() => {
+    if (!dockVisible) setPopover(null);
+  }, [dockVisible]);
+  const centerViewAt = (0, import_react23.useCallback)((time) => {
+    if (zoom <= 1 || meta.duration <= 0) return;
+    const windowDuration = meta.duration / zoom;
+    setViewStart(clampViewStart(time - windowDuration / 2, meta.duration, windowDuration));
+  }, [meta.duration, zoom]);
+  const resetView = (0, import_react23.useCallback)(() => {
+    setZoom(1);
+    setViewStart(0);
+  }, []);
+  const zoomDragRef = (0, import_react23.useRef)(null);
+  const rulerScrubRef = (0, import_react23.useRef)(null);
+  const seekRulerFromClientX = (0, import_react23.useCallback)((clientX) => {
+    const scrub = rulerScrubRef.current;
+    const contentWidth = scrub?.rect.width ?? 0;
+    if (!scrub || contentWidth <= 0) return;
+    TimelineStore.seek(
+      meta.id,
+      clamp(
+        scrub.viewStart + (clientX - scrub.rect.left) / contentWidth * scrub.visibleDuration,
+        scrub.viewStart,
+        scrub.viewStart + scrub.visibleDuration
+      )
+    );
+  }, [meta.id]);
+  const handleRulerPointerDown = (0, import_react23.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    const contentWidth = rect.width;
+    if (contentWidth <= 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    if (!e.altKey) {
+      const resetView2 = e.shiftKey;
+      rulerScrubRef.current = {
+        wasPlaying: TimelineStore.getTransport(meta.id).playing,
+        rect,
+        viewStart: resetView2 ? 0 : safeViewStart,
+        visibleDuration: resetView2 ? meta.duration : visibleDuration
+      };
+      if (resetView2) {
+        setZoom(1);
+        setViewStart(0);
+      }
+      TimelineStore.pause(meta.id);
+      seekRulerFromClientX(e.clientX);
+      return;
+    }
+    const anchorRatio = clamp((e.clientX - rect.left) / contentWidth, 0, 1);
+    zoomDragRef.current = {
+      pointerX: e.clientX,
+      rect,
+      zoom,
+      viewStart: safeViewStart,
+      anchorRatio,
+      anchorTime: safeViewStart + anchorRatio * visibleDuration,
+      moved: false
+    };
+  }, [meta.duration, meta.id, safeViewStart, seekRulerFromClientX, visibleDuration, zoom]);
+  const handleRulerPointerMove = (0, import_react23.useCallback)((e) => {
+    if (rulerScrubRef.current) {
+      seekRulerFromClientX(e.clientX);
+      return;
+    }
+    const drag = zoomDragRef.current;
+    if (!drag || meta.duration <= 0) return;
+    const dx = e.clientX - drag.pointerX;
+    if (!drag.moved && Math.abs(dx) <= DRAG_THRESHOLD_PX) return;
+    drag.moved = true;
+    const nextZoom = clamp(drag.zoom * Math.exp(dx / ZOOM_DRAG_DISTANCE), 1, maxZoom);
+    const nextVisibleDuration = meta.duration / nextZoom;
+    const nextStart = clampViewStart(
+      drag.anchorTime - drag.anchorRatio * nextVisibleDuration,
+      meta.duration,
+      nextVisibleDuration
+    );
+    setZoom(nextZoom);
+    setViewStart(nextStart);
+  }, [maxZoom, meta.duration, seekRulerFromClientX]);
+  const handleRulerPointerUp = (0, import_react23.useCallback)(() => {
+    if (rulerScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    rulerScrubRef.current = null;
+    zoomDragRef.current = null;
+  }, [meta.id]);
+  const handleRulerPointerCancel = (0, import_react23.useCallback)(() => {
+    if (rulerScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    rulerScrubRef.current = null;
+    zoomDragRef.current = null;
+  }, [meta.id]);
+  const trackScrubRef = (0, import_react23.useRef)(null);
+  const seekTrackFromClientX = (0, import_react23.useCallback)((clientX) => {
+    const scrub = trackScrubRef.current;
+    const contentWidth = scrub?.rect.width ?? 0;
+    if (!scrub || contentWidth <= 0) return;
+    const nextTime = clamp(
+      scrub.viewStart + (clientX - scrub.rect.left) / contentWidth * scrub.visibleDuration,
+      scrub.viewStart,
+      scrub.viewStart + scrub.visibleDuration
+    );
+    TimelineStore.seek(meta.id, nextTime);
+  }, [meta.id]);
+  const handleTrackPointerDown = (0, import_react23.useCallback)((e) => {
+    const target = e.target;
+    if (target.closest(".dialkit-timeline-label, button")) return;
+    if (!e.shiftKey && target.closest(".dialkit-timeline-clip")) return;
+    const rect = laneAreaRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const resetView2 = e.shiftKey;
+    trackScrubRef.current = {
+      wasPlaying: TimelineStore.getTransport(meta.id).playing,
+      rect,
+      viewStart: resetView2 ? 0 : safeViewStart,
+      visibleDuration: resetView2 ? meta.duration : visibleDuration
+    };
+    if (resetView2) {
+      setZoom(1);
+      setViewStart(0);
+    }
+    setPopover(null);
+    TimelineStore.pause(meta.id);
+    seekTrackFromClientX(e.clientX);
+  }, [meta.duration, meta.id, safeViewStart, seekTrackFromClientX, visibleDuration]);
+  const handleTrackPointerMove = (0, import_react23.useCallback)((e) => {
+    if (trackScrubRef.current) seekTrackFromClientX(e.clientX);
+  }, [seekTrackFromClientX]);
+  const finishTrackScrub = (0, import_react23.useCallback)(() => {
+    if (trackScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    trackScrubRef.current = null;
+  }, [meta.id]);
+  const handleCopy = (0, import_react23.useCallback)(() => {
+    const normalized = normalizeTimelineValuesForCopy(DialStore.getValues(meta.id), meta.clips);
+    navigator.clipboard.writeText(buildCopyInstruction("useDialTimeline", meta.name, normalized));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [meta.clips, meta.id, meta.name]);
+  const handleAddPreset = (0, import_react23.useCallback)(() => {
+    DialStore.savePreset(meta.id, `Version ${presets.length + 2}`);
+  }, [meta.id, presets.length]);
+  const closePopover = (0, import_react23.useCallback)(() => setPopover(null), []);
+  const openClipPopover = (0, import_react23.useCallback)(
+    (clip, rect, stepKey) => {
+      const targetPath = stepKey ? `${clip.key}.${stepKey}` : clip.key;
+      const exclude = stepKey ? void 0 : clipPopoverExclusions(clip);
+      if (getClipControls(meta.id, targetPath, exclude).length === 0) return;
+      setPopover(
+        (prev) => prev?.clip.key === clip.key && prev?.stepKey === stepKey ? null : {
+          clip,
+          stepKey,
+          anchor: {
+            left: rect.left,
+            top: rect.top,
+            right: rect.right,
+            bottom: rect.bottom,
+            width: rect.width,
+            height: rect.height
+          }
+        }
+      );
+    },
+    [meta.id]
+  );
+  const toggleTracks = (0, import_react23.useCallback)((clipKey) => {
+    setExpandedTracks((prev) => {
+      const next = new Set(prev);
+      if (next.has(clipKey)) next.delete(clipKey);
+      else next.add(clipKey);
+      return next;
+    });
+  }, []);
+  const handleBarClick = (0, import_react23.useCallback)(
+    (clip, rect, stepKey) => {
+      if (!stepKey && clip.tracks?.length) {
+        toggleTracks(clip.key);
+        return;
+      }
+      openClipPopover(clip, rect, stepKey);
+    },
+    [openClipPopover, toggleTracks]
+  );
+  const toggleGroup = (0, import_react23.useCallback)((group) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(group)) next.delete(group);
+      else next.add(group);
+      return next;
+    });
+  }, []);
+  const rawStep = pxPerSecond > 0 ? MAJOR_TICK_TARGET_PX / pxPerSecond : 1;
+  const adaptiveMajorStep = SECOND_TICK_STEPS.find((step) => step >= rawStep) ?? SECOND_TICK_STEPS[SECOND_TICK_STEPS.length - 1];
+  const majorStep = zoom < 1.5 && meta.duration >= 1 ? Math.max(1, adaptiveMajorStep) : adaptiveMajorStep;
+  const fineTickStep = majorStep / 10;
+  const majorTicks = [];
+  const mediumTicks = [];
+  const fineTicks = [];
+  const firstMajorTick = Math.ceil((safeViewStart - 1e-6) / majorStep) * majorStep;
+  for (let t = firstMajorTick; t <= viewEnd + 1e-6; t += majorStep) {
+    majorTicks.push(Number(t.toFixed(4)));
+  }
+  const firstFineIndex = Math.ceil((safeViewStart - 1e-6) / fineTickStep);
+  const lastFineIndex = Math.floor((viewEnd + 1e-6) / fineTickStep);
+  for (let index = firstFineIndex; index <= lastFineIndex; index++) {
+    if (index % 10 === 0) continue;
+    const tick = Number((index * fineTickStep).toFixed(6));
+    if (index % 5 === 0) mediumTicks.push(tick);
+    else fineTicks.push(tick);
+  }
+  const rows = [];
+  let lastGroup;
+  for (const clip of meta.clips) {
+    if (clip.group !== lastGroup) {
+      lastGroup = clip.group;
+      if (clip.group) {
+        const group = clip.group;
+        const isCollapsed = collapsedGroups.has(group);
+        rows.push(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-row dialkit-timeline-group-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-label", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                "button",
+                {
+                  className: "dialkit-timeline-group-toggle",
+                  "data-open": !isCollapsed,
+                  onClick: () => toggleGroup(group),
+                  title: isCollapsed ? "Expand layer" : "Collapse layer",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CHEVRON }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: formatLabel(group) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-lane" })
+          ] }, `group:${group}`)
+        );
+      }
+    }
+    if (clip.group && collapsedGroups.has(clip.group)) continue;
+    const isProps = Boolean(clip.tracks?.length);
+    const tracksOpen = isProps && expandedTracks.has(clip.key);
+    const stat = computeClipStaticFromValues(values, clip, meta.duration);
+    rows.push(
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-row", "data-grouped": clip.group ? "" : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-label", children: [
+          isProps ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "button",
+            {
+              className: "dialkit-timeline-group-toggle",
+              "data-open": tracksOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleTracks(clip.key);
+              },
+              title: tracksOpen ? "Collapse properties" : "Expand properties",
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CHEVRON }) })
+            }
+          ) : null,
+          clip.label
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-lane", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          TimelineClip,
+          {
+            timelineId: meta.id,
+            clip,
+            at: stat.at,
+            duration: stat.duration,
+            loop: stat.loop,
+            steps: clip.stepKeys?.length ? stat.tracks[0]?.steps : void 0,
+            fixedDuration: isProps ? true : stat.isPhysics,
+            composite: isProps,
+            pxPerSecond,
+            viewStart: safeViewStart,
+            timelineDuration: meta.duration,
+            selected: popover?.clip.key === clip.key,
+            selectedStepKey: popover?.clip.key === clip.key ? popover.stepKey : void 0,
+            onClick: handleBarClick,
+            onDrag: closePopover
+          }
+        ) })
+      ] }, clip.key)
+    );
+    if (tracksOpen) {
+      for (const trackRef of clip.tracks ?? []) {
+        const track = stat.tracks.find((candidate) => candidate.prop === trackRef.prop);
+        if (!track) continue;
+        const trackKey = `${clip.key}.${trackRef.prop}`;
+        const trackMeta = {
+          key: trackKey,
+          label: `${clip.label} \xB7 ${formatLabel(trackRef.prop)}`,
+          color: clip.color,
+          loop: clip.loop,
+          group: clip.group,
+          stepKeys: trackRef.stepKeys
+        };
+        rows.push(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            "div",
+            {
+              className: "dialkit-timeline-row dialkit-timeline-track-row",
+              "data-grouped": clip.group ? "" : void 0,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-label", children: formatLabel(trackRef.prop) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-lane", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  TimelineClip,
+                  {
+                    timelineId: meta.id,
+                    clip: trackMeta,
+                    at: stat.at + track.delay,
+                    duration: track.duration,
+                    loop: stat.loop,
+                    steps: trackRef.stepKeys?.length ? track.steps : void 0,
+                    fixedDuration: !trackRef.stepKeys?.length && track.steps[0]?.isPhysics === true,
+                    baseAt: stat.at,
+                    delayMode: true,
+                    pxPerSecond,
+                    viewStart: safeViewStart,
+                    timelineDuration: meta.duration,
+                    selected: popover?.clip.key === trackKey,
+                    selectedStepKey: popover?.clip.key === trackKey ? popover.stepKey : void 0,
+                    onClick: openClipPopover,
+                    onDrag: closePopover
+                  }
+                ) })
+              ]
+            },
+            trackKey
+          )
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-header", "data-open": open || void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { ref: titleRef, className: "dialkit-timeline-title", children: meta.name }) }),
+      !open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        TimelineOverview,
+        {
+          id: meta.id,
+          duration: meta.duration,
+          viewStart: safeViewStart,
+          viewEnd,
+          onNavigate: centerViewAt
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref: actionsRef, className: "dialkit-timeline-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PlayPauseButton, { id: meta.id }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react24.motion.button,
+          {
+            className: "dialkit-toolbar-add",
+            onClick: handleAddPreset,
+            title: "Add timeline version",
+            "aria-label": "Add timeline version",
+            whileTap: { scale: 0.9 },
+            transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: ICON_ADD_PRESET.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d }, i)) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          PresetManager,
+          {
+            panelId: meta.id,
+            presets,
+            activePresetId,
+            onAdd: handleAddPreset
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_react24.motion.button,
+          {
+            className: "dialkit-toolbar-add",
+            onClick: handleCopy,
+            title: "Copy parameters",
+            "aria-label": copied ? "Copied parameters" : "Copy parameters",
+            whileTap: { scale: 0.9 },
+            transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react24.AnimatePresence, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              import_react24.motion.svg,
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+                initial: { scale: 0.8, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.8, opacity: 0 },
+                transition: { duration: 0.08 },
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CHECK })
+              },
+              "check"
+            ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              import_react24.motion.svg,
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true",
+                style: { position: "absolute", inset: 0, width: 16, height: 16, color: "var(--dial-text-label)" },
+                initial: { scale: 0.8, opacity: 0 },
+                animate: { scale: 1, opacity: 1 },
+                exit: { scale: 0.8, opacity: 0 },
+                transition: { duration: 0.08 },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                ]
+              },
+              "clipboard"
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            className: "dialkit-timeline-chevron",
+            "data-open": open,
+            "aria-expanded": open,
+            onClick: () => setOpen(!open),
+            title: open ? "Collapse timeline" : "Expand timeline",
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: ICON_CHEVRON }) })
+          }
+        )
+      ] })
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: "dialkit-timeline-body",
+        onPointerDown: handleTrackPointerDown,
+        onPointerMove: handleTrackPointerMove,
+        onPointerUp: finishTrackScrub,
+        onPointerCancel: finishTrackScrub,
+        onLostPointerCapture: finishTrackScrub,
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-grid", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-label" }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+              "div",
+              {
+                ref: laneAreaRef,
+                className: "dialkit-timeline-ruler",
+                onPointerDown: handleRulerPointerDown,
+                onPointerMove: handleRulerPointerMove,
+                onPointerUp: handleRulerPointerUp,
+                onPointerCancel: handleRulerPointerCancel,
+                onLostPointerCapture: handleRulerPointerCancel,
+                title: "Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom",
+                children: [
+                  fineTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
+                  mediumTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
+                  majorTicks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-tick-label", children: formatRulerSeconds(t, majorStep) }) }, t))
+                ]
+              }
+            )
+          ] }),
+          rows,
+          pxPerSecond > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            TimelinePlayheadFlag,
+            {
+              id: meta.id,
+              duration: meta.duration,
+              pxPerSecond,
+              viewStart: safeViewStart,
+              viewEnd,
+              laneWidth,
+              rulerRef: laneAreaRef,
+              headerClearStart: flagClearRange.start,
+              headerClearEnd: flagClearRange.end,
+              onResetView: resetView
+            }
+          )
+        ] })
+      }
+    ),
+    popover && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ClipPopover,
+      {
+        panelId: meta.id,
+        popover,
+        values,
+        theme,
+        onClose: closePopover
+      }
+    )
+  ] });
+});
+function ClipPopover({
+  panelId,
+  popover,
+  values,
+  theme,
+  onClose
+}) {
+  const ref = (0, import_react23.useRef)(null);
+  const [naturalHeight, setNaturalHeight] = (0, import_react23.useState)(0);
+  const [viewport, setViewport] = (0, import_react23.useState)(() => ({
+    width: window.visualViewport?.width ?? window.innerWidth,
+    height: window.visualViewport?.height ?? window.innerHeight,
+    offsetLeft: window.visualViewport?.offsetLeft ?? 0,
+    offsetTop: window.visualViewport?.offsetTop ?? 0
+  }));
+  (0, import_react23.useLayoutEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => setNaturalHeight(element.scrollHeight + 2);
+    measure();
+    const observer = new ResizeObserver(measure);
+    const body = element.querySelector(".dialkit-timeline-popover-body");
+    observer.observe(body ?? element);
+    return () => observer.disconnect();
+  }, [popover.clip.key, popover.stepKey]);
+  (0, import_react23.useEffect)(() => {
+    const updateViewport = () => setViewport({
+      width: window.visualViewport?.width ?? window.innerWidth,
+      height: window.visualViewport?.height ?? window.innerHeight,
+      offsetLeft: window.visualViewport?.offsetLeft ?? 0,
+      offsetTop: window.visualViewport?.offsetTop ?? 0
+    });
+    window.addEventListener("resize", updateViewport);
+    window.visualViewport?.addEventListener("resize", updateViewport);
+    window.visualViewport?.addEventListener("scroll", updateViewport);
+    return () => {
+      window.removeEventListener("resize", updateViewport);
+      window.visualViewport?.removeEventListener("resize", updateViewport);
+      window.visualViewport?.removeEventListener("scroll", updateViewport);
+    };
+  }, []);
+  (0, import_react23.useEffect)(() => {
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      if (ref.current?.contains(target)) return;
+      if (target.closest?.(".dialkit-timeline-clip")) return;
+      if (target.closest?.(".dialkit-timeline-label")) return;
+      onClose();
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+  const { clip, stepKey } = popover;
+  let controls;
+  let title;
+  if (stepKey) {
+    controls = getClipControls(panelId, `${clip.key}.${stepKey}`);
+    if (stepKey === clip.stepKeys?.[0]) {
+      const from = getControlAt(panelId, `${clip.key}.from`);
+      if (from) {
+        const toIndex = controls.findIndex((control) => control.path === `${clip.key}.${stepKey}.to`);
+        controls = toIndex >= 0 ? [...controls.slice(0, toIndex), from, ...controls.slice(toIndex)] : [...controls, from];
+      }
+    }
+    title = `${clip.label} \xB7 ${formatStepLabel(stepKey)}`;
+  } else {
+    controls = getClipControls(panelId, clip.key, clipPopoverExclusions(clip));
+    title = clip.label;
+  }
+  if (controls.length === 0) return null;
+  const targetPath = stepKey ? `${clip.key}.${stepKey}` : clip.key;
+  const durationMeta = getControlAt(panelId, `${targetPath}.duration`);
+  const durationValue = durationMeta ? values[durationMeta.path] : void 0;
+  const transitionDuration = durationMeta?.type === "slider" && typeof durationValue === "number" ? {
+    value: durationValue,
+    onChange: (next) => DialStore.updateValue(panelId, durationMeta.path, next),
+    min: Math.max(TIMELINE_MIN_CLIP_DURATION, durationMeta.min ?? 0),
+    max: durationMeta.max,
+    step: durationMeta.step
+  } : void 0;
+  const displayValues = timelinePopoverDisplayValues(values, clip.key, clip.stepKeys, stepKey);
+  const viewportRight = viewport.offsetLeft + viewport.width;
+  const viewportBottom = viewport.offsetTop + viewport.height;
+  const popoverWidth = Math.min(POPOVER_WIDTH, Math.max(220, viewport.width - 24));
+  const left = clamp(
+    popover.anchor.left + popover.anchor.width / 2 - popoverWidth / 2,
+    viewport.offsetLeft + 12,
+    Math.max(viewport.offsetLeft + 12, viewportRight - popoverWidth - 12)
+  );
+  const spaceAbove = Math.max(0, popover.anchor.top - viewport.offsetTop - 22);
+  const spaceBelow = Math.max(0, viewportBottom - popover.anchor.bottom - 22);
+  const placeAbove = naturalHeight === 0 ? spaceAbove >= spaceBelow : naturalHeight <= spaceAbove || naturalHeight > spaceBelow && spaceAbove >= spaceBelow;
+  const availableHeight = placeAbove ? spaceAbove : spaceBelow;
+  const renderedHeight = Math.min(naturalHeight || availableHeight, availableHeight);
+  const unclampedTop = placeAbove ? popover.anchor.top - 10 - renderedHeight : popover.anchor.bottom + 10;
+  const top = clamp(
+    unclampedTop,
+    viewport.offsetTop + 12,
+    Math.max(viewport.offsetTop + 12, viewportBottom - renderedHeight - 12)
+  );
+  return (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-root", "data-theme": theme, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        ref,
+        className: "dialkit-timeline-popover",
+        "data-placement": placeAbove ? "above" : "below",
+        style: {
+          left,
+          top,
+          width: popoverWidth,
+          maxHeight: availableHeight,
+          visibility: naturalHeight > 0 ? "visible" : "hidden"
+        },
+        role: "dialog",
+        "aria-label": `Edit ${title}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "dialkit-timeline-popover-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-popover-title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: "dialkit-timeline-popover-close", onClick: onClose, title: "Close editor", "aria-label": "Close editor", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6 6L18 18M18 6L6 18" }) }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-popover-body", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            ControlRenderer,
+            {
+              panelId,
+              controls,
+              values: displayValues,
+              transitionDuration
+            }
+          ) })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+function clipPopoverExclusions(clip) {
+  return /* @__PURE__ */ new Set([
+    ...clip.stepKeys ?? [],
+    ...clip.tracks?.map((track) => track.prop) ?? []
+  ]);
+}
+function getClipControls(panelId, controlPath, excludeChildren) {
+  const panel = DialStore.getPanel(panelId);
+  const folder = panel ? findControl(panel.controls, controlPath) : null;
+  if (!folder?.children) return [];
+  return folder.children.filter((control) => {
+    const childKey = control.path.slice(controlPath.length + 1);
+    if (childKey === "at" || childKey === "duration") return false;
+    return !excludeChildren?.has(childKey);
+  });
+}
+function getControlAt(panelId, path) {
+  const panel = DialStore.getPanel(panelId);
+  return panel ? findControl(panel.controls, path) : null;
+}
+function TimelineClip({
+  timelineId,
+  clip,
+  at,
+  duration,
+  loop,
+  steps,
+  fixedDuration,
+  composite = false,
+  baseAt = 0,
+  delayMode = false,
+  pxPerSecond,
+  viewStart,
+  timelineDuration,
+  selected,
+  selectedStepKey,
+  onClick,
+  onDrag
+}) {
+  const dragRef = (0, import_react23.useRef)(null);
+  const [dragging, setDragging] = (0, import_react23.useState)(false);
+  const isSteps = Boolean(steps?.length);
+  const handlePointerDown = (0, import_react23.useCallback)(
+    (e) => {
+      if (e.shiftKey) return;
+      e.stopPropagation();
+      const target = e.target;
+      let mode = "move";
+      let boundaryIndex;
+      const boundary = target.dataset?.boundary;
+      if (boundary !== void 0) {
+        mode = "boundary";
+        boundaryIndex = Number(boundary);
+      } else if (!fixedDuration) {
+        const edge = target.dataset?.edge;
+        if (edge) mode = edge;
+      }
+      dragRef.current = {
+        mode,
+        boundaryIndex,
+        pointerX: e.clientX,
+        at,
+        duration,
+        stepDurations: steps?.map((step) => step.duration),
+        clickEl: target.closest?.("[data-step]") ?? null,
+        moved: false
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [at, duration, fixedDuration, steps]
+  );
+  const handlePointerMove = (0, import_react23.useCallback)(
+    (e) => {
+      const drag = dragRef.current;
+      if (!drag || pxPerSecond <= 0) return;
+      const dx = e.clientX - drag.pointerX;
+      if (!drag.moved) {
+        if (Math.abs(dx) <= DRAG_THRESHOLD_PX) return;
+        drag.moved = true;
+        setDragging(true);
+        onDrag();
+      }
+      const dt = dx / pxPerSecond;
+      if (drag.mode === "boundary" && steps && drag.stepDurations) {
+        const index = drag.boundaryIndex ?? 0;
+        const others = drag.stepDurations.reduce((sum, d, j) => j === index ? sum : sum + d, 0);
+        DialStore.updateValue(
+          timelineId,
+          `${clip.key}.${steps[index].key ?? ""}.duration`,
+          clampStepResize(drag.stepDurations[index] + dt, drag.at, others, timelineDuration)
+        );
+      } else if (drag.mode === "move") {
+        if (delayMode) {
+          DialStore.updateValue(
+            timelineId,
+            `${clip.key}.delay`,
+            clampTrackDelay(drag.at + dt - baseAt, baseAt, drag.duration, timelineDuration)
+          );
+        } else {
+          DialStore.updateValue(timelineId, `${clip.key}.at`, clampClipMove(drag.at + dt, drag.duration, timelineDuration));
+        }
+      } else if (drag.mode === "end") {
+        DialStore.updateValue(
+          timelineId,
+          `${clip.key}.duration`,
+          clampClipResizeEnd(drag.duration + dt, drag.at, timelineDuration)
+        );
+      } else if (steps && drag.stepDurations) {
+        const limit = Math.max(baseAt, 0);
+        const next = clampClipResizeStart(Math.max(drag.at + dt, limit), drag.at, drag.stepDurations[0]);
+        DialStore.updateValues(timelineId, {
+          [delayMode ? `${clip.key}.delay` : `${clip.key}.at`]: delayMode ? Math.max(0, next.at - baseAt) : next.at,
+          [`${clip.key}.${steps[0].key ?? ""}.duration`]: next.duration
+        });
+      } else {
+        const limit = Math.max(baseAt, 0);
+        const next = clampClipResizeStart(Math.max(drag.at + dt, limit), drag.at, drag.duration);
+        DialStore.updateValues(timelineId, {
+          [delayMode ? `${clip.key}.delay` : `${clip.key}.at`]: delayMode ? Math.max(0, next.at - baseAt) : next.at,
+          [`${clip.key}.duration`]: next.duration
+        });
+      }
+    },
+    [baseAt, clip.key, delayMode, onDrag, pxPerSecond, steps, timelineId, timelineDuration]
+  );
+  const handlePointerUp = (0, import_react23.useCallback)(
+    (e) => {
+      const drag = dragRef.current;
+      dragRef.current = null;
+      setDragging(false);
+      if (drag && !drag.moved) {
+        const stepKey = drag.clickEl?.dataset?.step;
+        const anchorEl = drag.clickEl ?? e.currentTarget;
+        onClick(clip, anchorEl.getBoundingClientRect(), stepKey);
+      }
+    },
+    [clip, onClick]
+  );
+  const handlePointerCancel = (0, import_react23.useCallback)(() => {
+    dragRef.current = null;
+    setDragging(false);
+  }, []);
+  const width = Math.max(duration * pxPerSecond, 14);
+  const resizable = duration > 0 && !fixedDuration && !composite;
+  const durationText = `${fixedDuration && !composite ? "~" : ""}${formatSeconds(duration)}`;
+  const looping = loop === "repeat" && duration > 0;
+  const ghostCycles = [];
+  if (looping) {
+    const maxGhostCycles = 256;
+    const firstGhostIndex = Math.max(1, Math.floor((viewStart - at) / duration));
+    for (let offset = 0; offset < maxGhostCycles; offset++) {
+      const index = firstGhostIndex + offset;
+      const start = at + duration * index;
+      if (start >= timelineDuration - 1e-6) break;
+      ghostCycles.push({
+        start,
+        duration: Math.min(duration, timelineDuration - start),
+        index
+      });
+    }
+  }
+  const boundaryOffsets = [];
+  if (steps) {
+    let cumulative = 0;
+    for (const step of steps) {
+      cumulative += step.duration;
+      boundaryOffsets.push(cumulative);
+    }
+  }
+  const barTitle = composite ? `${clip.label} \u2014 composite of its property tracks${looping ? " \xB7 repeats through timeline" : ""} \xB7 click to expand` : `${clip.label} \u2014 ${formatSeconds(at)} for ${durationText}${fixedDuration ? " (duration set by spring physics)" : ""}${looping ? " \xB7 repeats through timeline" : ""}${delayMode ? " \xB7 drag to phase-shift" : ""}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    ghostCycles.map((cycle) => {
+      const ghostWidth = Math.max(1, cycle.duration * pxPerSecond - 2);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: "dialkit-timeline-clip-ghost",
+          "data-steps": isSteps || void 0,
+          "aria-hidden": "true",
+          style: {
+            left: (cycle.start - viewStart) * pxPerSecond + 1,
+            width: ghostWidth,
+            background: clip.color
+          },
+          children: steps?.map((step, stepIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "span",
+            {
+              className: "dialkit-timeline-clip-ghost-segment",
+              style: { width: step.duration * pxPerSecond }
+            },
+            step.key ?? `step:${stepIndex}`
+          ))
+        },
+        `ghost:${cycle.index}`
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        className: "dialkit-timeline-clip",
+        "data-steps": isSteps || void 0,
+        "data-composite": composite || void 0,
+        "data-selected": selected || void 0,
+        "data-dragging": dragging || void 0,
+        style: {
+          left: (at - viewStart) * pxPerSecond,
+          width,
+          background: composite ? `${clip.color}80` : clip.color
+        },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onLostPointerCapture: handlePointerCancel,
+        title: barTitle,
+        children: composite ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: width > 56 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-clip-duration", children: durationText }) }) : isSteps ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          steps.map((step) => {
+            const segmentWidth = step.duration * pxPerSecond;
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "div",
+              {
+                className: "dialkit-timeline-clip-segment",
+                "data-step": step.key ?? void 0,
+                "data-selected": selectedStepKey === step.key || void 0,
+                style: { width: segmentWidth },
+                children: segmentWidth > 52 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-clip-duration", children: formatSeconds(step.duration) })
+              },
+              step.key ?? "step"
+            );
+          }),
+          steps.map(
+            (step, index) => step.isPhysics ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              "div",
+              {
+                className: "dialkit-timeline-clip-handle",
+                "data-boundary": index,
+                style: { left: boundaryOffsets[index] * pxPerSecond - 4 }
+              },
+              `boundary:${step.key}`
+            )
+          ),
+          !steps[0].isPhysics && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-clip-handle", "data-edge": "start" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          resizable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-clip-handle", "data-edge": "start" }),
+          width > 56 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-clip-duration", children: durationText }),
+          resizable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "dialkit-timeline-clip-handle", "data-edge": "end" })
+        ] })
+      }
+    ),
+    looping && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "dialkit-timeline-loop-infinity", "aria-hidden": "true", title: "Repeats indefinitely", children: "\u221E" })
+  ] });
+}
+
+// src/components/ButtonGroup.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ButtonGroup({ buttons }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "button",
+    {
+      className: "dialkit-button",
+      onClick: button.onClick,
+      children: button.label
+    },
+    index
+  )) });
+}
+
+// src/components/ShortcutsMenu.tsx
+var import_react25 = require("react");
+var import_react_dom5 = require("react-dom");
+var import_react26 = require("motion/react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function formatShortcutKey(sc) {
   if (!sc.key) return "\u2014";
   const mod = sc.modifier === "alt" ? "\u2325" : sc.modifier === "shift" ? "\u21E7" : sc.modifier === "meta" ? "\u2318" : "";
@@ -2919,23 +5552,23 @@ function formatInteraction(sc) {
   }
 }
 function ShortcutsMenu({ panelId }) {
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-  const triggerRef = (0, import_react18.useRef)(null);
-  const dropdownRef = (0, import_react18.useRef)(null);
-  const [pos, setPos] = (0, import_react18.useState)({ top: 0, right: 0 });
-  const open = (0, import_react18.useCallback)(() => {
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const triggerRef = (0, import_react25.useRef)(null);
+  const dropdownRef = (0, import_react25.useRef)(null);
+  const [pos, setPos] = (0, import_react25.useState)({ top: 0, right: 0 });
+  const open = (0, import_react25.useCallback)(() => {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
       setPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
     }
     setIsOpen(true);
   }, []);
-  const close = (0, import_react18.useCallback)(() => setIsOpen(false), []);
-  const toggle = (0, import_react18.useCallback)(() => {
+  const close = (0, import_react25.useCallback)(() => setIsOpen(false), []);
+  const toggle = (0, import_react25.useCallback)(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isOpen) return;
     const handler = (e) => {
       const target = e.target;
@@ -2966,9 +5599,9 @@ function ShortcutsMenu({ panelId }) {
       label: findLabel(panel.controls)
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react19.motion.button,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_react26.motion.button,
       {
         ref: triggerRef,
         className: "dialkit-shortcuts-trigger",
@@ -2976,19 +5609,19 @@ function ShortcutsMenu({ panelId }) {
         title: "Keyboard shortcuts",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 10H6.01" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 10H10.01" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M14 10H14.01" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M18 10H18.01" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M8 14H16" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M6 10H6.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M10 10H10.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M14 10H14.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M18 10H18.01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { d: "M8 14H16" })
         ] })
       }
     ),
-    (0, import_react_dom4.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react19.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-        import_react19.motion.div,
+    (0, import_react_dom5.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react26.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        import_react26.motion.div,
         {
           ref: dropdownRef,
           className: "dialkit-root dialkit-shortcuts-dropdown",
@@ -2998,13 +5631,13 @@ function ShortcutsMenu({ panelId }) {
           exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
           transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-title", children: "Keyboard Shortcuts" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-list", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "dialkit-shortcuts-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-key", children: formatShortcutKey(row.shortcut) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-label", children: row.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "dialkit-shortcuts-row-mode", children: formatInteraction(row.shortcut) })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dialkit-shortcuts-title", children: "Keyboard Shortcuts" }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dialkit-shortcuts-list", children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "dialkit-shortcuts-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "dialkit-shortcuts-row-key", children: formatShortcutKey(row.shortcut) }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "dialkit-shortcuts-row-label", children: row.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "dialkit-shortcuts-row-mode", children: formatInteraction(row.shortcut) })
             ] }, row.path)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "dialkit-shortcuts-hint", children: "See pill badges on controls for keys" })
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "dialkit-shortcuts-hint", children: "See pill badges on controls for keys" })
           ]
         }
       ) }),
@@ -3016,8 +5649,10 @@ function ShortcutsMenu({ panelId }) {
 0 && (module.exports = {
   ButtonGroup,
   ColorControl,
+  ControlRenderer,
   DialRoot,
   DialStore,
+  DialTimeline,
   EasingVisualization,
   Folder,
   PresetManager,
@@ -3027,9 +5662,12 @@ function ShortcutsMenu({ panelId }) {
   SpringControl,
   SpringVisualization,
   TextControl,
+  TimelineStore,
   Toggle,
   TransitionControl,
+  formatClock,
   useDialKit,
-  useDialKitController
+  useDialKitController,
+  useDialTimeline
 });
 //# sourceMappingURL=index.cjs.map