dialkit 1.3.0 → 1.4.1

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/hooks/useDialKit.ts
-import { useCallback, useEffect, useId, useMemo, useRef, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
 
 // src/store/DialStore.ts
 var EMPTY_VALUES = Object.freeze({});
@@ -71,6 +71,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");
 }
@@ -91,6 +104,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();
@@ -104,6 +120,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);
@@ -115,7 +137,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 });
@@ -142,7 +164,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) ?? {};
@@ -167,8 +189,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);
@@ -260,8 +282,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);
@@ -272,7 +296,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) {
@@ -285,7 +313,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) {
@@ -480,6 +512,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) {
@@ -595,10 +630,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) {
@@ -614,11 +649,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) {
@@ -690,31 +721,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
+import { useCallback, useEffect, useId, useRef, useSyncExternalStore } from "react";
+function useSerialized(value) {
+  const ref = 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 = 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 = useRef(config);
-  const serializedConfig = JSON.stringify(config);
   configRef.current = config;
-  const onActionRef = useRef(options?.onAction);
-  onActionRef.current = options?.onAction;
-  const shortcutsRef = useRef(options?.shortcuts);
-  shortcutsRef.current = options?.shortcuts;
-  const persistRef = useRef(options?.persist);
-  persistRef.current = options?.persist;
-  const serializedShortcuts = JSON.stringify(options?.shortcuts);
-  const serializedPersist = JSON.stringify(options?.persist);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const serializedConfig = useSerialized(config);
+  const serializedShortcuts = useSerialized(options.shortcuts);
+  const serializedPersist = useSerialized(options.persist);
   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]);
@@ -724,45 +757,61 @@ 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]);
-  useEffect(() => {
-    return DialStore.subscribeActions(panelId, (action) => {
-      onActionRef.current?.(action);
-    });
-  }, [panelId]);
   const subscribe = useCallback(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = useCallback(
-    () => DialStore.getValues(panelId),
-    [panelId]
-  );
+  const getSnapshot = useCallback(() => DialStore.getValues(panelId), [panelId]);
   const flatValues = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  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 = useRef2(config);
+  configRef.current = config;
+  const onActionRef = useRef2(options?.onAction);
+  onActionRef.current = options?.onAction;
+  useEffect2(() => {
+    return DialStore.subscribeActions(panelId, (action) => {
+      onActionRef.current?.(action);
+    });
+  }, [panelId]);
   const values = useMemo(
     () => resolveDialValues(configRef.current, flatValues),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [flatValues, serializedConfig]
   );
-  const setValue = useCallback(
+  const setValue = useCallback2(
     (path, value) => {
       DialStore.updateValue(panelId, path, value);
     },
     [panelId]
   );
-  const setValues = useCallback(
+  const setValues = useCallback2(
     (nextValues) => {
       DialStore.updateValues(panelId, flattenDialValueUpdates(configRef.current, nextValues));
     },
     [panelId]
   );
-  const resetValues = useCallback(() => {
+  const resetValues = useCallback2(() => {
     DialStore.resetValues(panelId);
   }, [panelId]);
-  const getValues = useCallback(
+  const getValues = useCallback2(
     () => resolveDialValues(configRef.current, DialStore.getValues(panelId)),
     [panelId]
   );
@@ -779,16 +828,225 @@ function useDialKitController(name, config, options) {
 }
 
 // src/components/DialRoot.tsx
-import { useEffect as useEffect8, useState as useState10, useRef as useRef11, useCallback as useCallback10 } from "react";
+import { useEffect as useEffect9, useState as useState10, useRef as useRef12, useCallback as useCallback12 } from "react";
 import { createPortal as createPortal3 } from "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 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
-import { useState, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { motion, AnimatePresence } from "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_REPLAY = [
+  "M12 2.5C17.2466 2.50016 21.5 6.7534 21.5 12C21.5 17.2466 17.2466 21.4998 12 21.5C7.52191 21.5 3.76987 18.4025 2.76465 14.2344C2.63517 13.6975 2.96508 13.1578 3.50195 13.0283C4.03883 12.8988 4.57851 13.2288 4.70801 13.7656C5.5016 17.0563 8.46701 19.5 12 19.5C16.142 19.4998 19.5 16.142 19.5 12C19.5 7.85796 16.142 4.50016 12 4.5C9.32981 4.5 6.98389 5.89541 5.6543 8H7.5C8.05228 8 8.5 8.44772 8.5 9C8.5 9.55228 8.05228 10 7.5 10H3.5C2.94772 10 2.5 9.55228 2.5 9V5C2.5 4.44772 2.94772 4 3.5 4C4.05228 4 4.5 4.44772 4.5 5V6.16797C6.2376 3.93677 8.95063 2.5 12 2.5Z",
+  "M10 9.94043C10 9.33379 10.6826 8.97849 11.1797 9.32617L14.1221 11.3857C14.5486 11.6843 14.5486 12.3157 14.1221 12.6143L11.1797 14.6738C10.6826 15.0215 10 14.6662 10 14.0596V9.94043Z"
+];
+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",
@@ -822,16 +1080,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Folder({ title, children, defaultOpen = true, isRoot = false, inline = false, onOpenChange, toolbar, panelHeightOffset = 10 }) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [isCollapsed, setIsCollapsed] = useState(!defaultOpen);
-  const contentRef = useRef2(null);
+  const contentRef = useRef3(null);
   const [contentHeight, setContentHeight] = useState(void 0);
   const [windowHeight, setWindowHeight] = useState(typeof window !== "undefined" ? window.innerHeight : 800);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isRoot) return;
     const onResize = () => setWindowHeight(window.innerHeight);
     window.addEventListener("resize", onResize);
     return () => window.removeEventListener("resize", onResize);
   }, [isRoot]);
-  useEffect2(() => {
+  useEffect3(() => {
     const el = contentRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => {
@@ -932,11 +1190,43 @@ function Folder({ title, children, defaultOpen = true, isRoot = false, inline =
 }
 
 // src/components/Panel.tsx
-import { useCallback as useCallback9, useContext, useState as useState9, useSyncExternalStore as useSyncExternalStore4 } from "react";
+import { useCallback as useCallback10, useState as useState9, useSyncExternalStore as useSyncExternalStore4 } from "react";
 import { motion as motion5, AnimatePresence as AnimatePresence4 } from "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
+import { useContext } from "react";
+
 // src/components/ShortcutListener.tsx
-import { createContext, useEffect as useEffect3, useRef as useRef3, useState as useState2, useCallback as useCallback2 } from "react";
+import { createContext, useEffect as useEffect4, useRef as useRef4, useState as useState2, useCallback as useCallback3 } from "react";
 
 // src/shortcut-utils.ts
 function decimalsForStep(step) {
@@ -1028,11 +1318,11 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var ShortcutContext = createContext({ activePanelId: null, activePath: null });
 function ShortcutListener({ children }) {
   const [activeShortcut, setActiveShortcut] = useState2({ activePanelId: null, activePath: null });
-  const activeKeysRef = useRef3(/* @__PURE__ */ new Set());
-  const isDraggingRef = useRef3(false);
-  const lastMouseXRef = useRef3(null);
-  const dragAccumulatorRef = useRef3(0);
-  const resolveActiveTarget = useCallback2((interaction) => {
+  const activeKeysRef = useRef4(/* @__PURE__ */ new Set());
+  const isDraggingRef = useRef4(false);
+  const lastMouseXRef = useRef4(null);
+  const dragAccumulatorRef = useRef4(0);
+  const resolveActiveTarget = useCallback3((interaction) => {
     for (const key of activeKeysRef.current) {
       const panels = DialStore.getPanels();
       for (const panel of panels) {
@@ -1049,7 +1339,7 @@ function ShortcutListener({ children }) {
     }
     return null;
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleKeyDown = (e) => {
       if (isInputFocused()) return;
       const key = e.key.toLowerCase();
@@ -1211,7 +1501,7 @@ function ShortcutListener({ children }) {
 }
 
 // src/components/Slider.tsx
-import { useRef as useRef4, useState as useState3, useCallback as useCallback3, useEffect as useEffect4 } from "react";
+import { useRef as useRef5, useState as useState3, useCallback as useCallback4, useEffect as useEffect5 } from "react";
 import { motion as motion2, useMotionValue, useTransform, animate } from "motion/react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var CLICK_THRESHOLD = 3;
@@ -1229,11 +1519,11 @@ function Slider({
   shortcut,
   shortcutActive
 }) {
-  const wrapperRef = useRef4(null);
-  const trackRef = useRef4(null);
-  const inputRef = useRef4(null);
-  const labelRef = useRef4(null);
-  const valueSpanRef = useRef4(null);
+  const wrapperRef = useRef5(null);
+  const trackRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const labelRef = useRef5(null);
+  const valueSpanRef = useRef5(null);
   const [isInteracting, setIsInteracting] = useState3(false);
   const [isDragging, setIsDragging] = useState3(false);
   const [isHovered, setIsHovered] = useState3(false);
@@ -1241,12 +1531,12 @@ function Slider({
   const [isValueEditable, setIsValueEditable] = useState3(false);
   const [showInput, setShowInput] = useState3(false);
   const [inputValue, setInputValue] = useState3("");
-  const hoverTimeoutRef = useRef4(null);
-  const pointerDownPos = useRef4(null);
-  const isClickRef = useRef4(true);
-  const animRef = useRef4(null);
-  const wrapperRectRef = useRef4(null);
-  const scaleRef = useRef4(1);
+  const hoverTimeoutRef = useRef5(null);
+  const pointerDownPos = useRef5(null);
+  const isClickRef = useRef5(true);
+  const animRef = useRef5(null);
+  const wrapperRectRef = useRef5(null);
+  const scaleRef = useRef5(1);
   const percentage = (value - min) / (max - min) * 100;
   const isActive = isInteracting || isHovered;
   const fillPercent = useMotionValue(percentage);
@@ -1264,12 +1554,12 @@ function Slider({
     rubberStretchPx,
     (stretch) => stretch < 0 ? stretch : 0
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isInteracting && !animRef.current) {
       fillPercent.jump(percentage);
     }
   }, [percentage, isInteracting, fillPercent]);
-  const positionToValue = useCallback3(
+  const positionToValue = useCallback4(
     (clientX) => {
       const rect = wrapperRectRef.current;
       if (!rect) return value;
@@ -1282,11 +1572,11 @@ function Slider({
     },
     [min, max, value]
   );
-  const percentFromValue = useCallback3(
+  const percentFromValue = useCallback4(
     (v) => (v - min) / (max - min) * 100,
     [min, max]
   );
-  const computeRubberStretch = useCallback3(
+  const computeRubberStretch = useCallback4(
     (clientX, sign) => {
       const rect = wrapperRectRef.current;
       if (!rect) return 0;
@@ -1296,7 +1586,7 @@ function Slider({
     },
     []
   );
-  const handlePointerDown = useCallback3(
+  const handlePointerDown = useCallback4(
     (e) => {
       if (showInput) return;
       e.preventDefault();
@@ -1312,7 +1602,7 @@ function Slider({
     },
     [showInput]
   );
-  const handlePointerMove = useCallback3(
+  const handlePointerMove = useCallback4(
     (e) => {
       if (!isInteracting || !pointerDownPos.current) return;
       const dx = e.clientX - pointerDownPos.current.x;
@@ -1353,7 +1643,7 @@ function Slider({
       computeRubberStretch
     ]
   );
-  const handlePointerUp = useCallback3(
+  const handlePointerUp = useCallback4(
     (e) => {
       if (!isInteracting) return;
       if (isClickRef.current) {
@@ -1397,7 +1687,7 @@ function Slider({
       rubberStretchPx
     ]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (isValueHovered && !showInput && !isValueEditable) {
       hoverTimeoutRef.current = setTimeout(() => {
         setIsValueEditable(true);
@@ -1415,7 +1705,7 @@ function Slider({
       }
     };
   }, [isValueHovered, showInput, isValueEditable]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (showInput && inputRef.current) {
       inputRef.current.focus();
       inputRef.current.select();
@@ -1570,17 +1860,17 @@ function Slider({
 }
 
 // src/components/SegmentedControl.tsx
-import { useRef as useRef5, useState as useState4, useLayoutEffect, useCallback as useCallback4 } from "react";
+import { useRef as useRef6, useState as useState4, useLayoutEffect, useCallback as useCallback5 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
   value,
   onChange
 }) {
-  const containerRef = useRef5(null);
-  const hasAnimated = useRef5(false);
+  const containerRef = useRef6(null);
+  const hasAnimated = useRef6(false);
   const [pillStyle, setPillStyle] = useState4(null);
-  const measure = useCallback4(() => {
+  const measure = useCallback5(() => {
     const container = containerRef.current;
     if (!container) return;
     const activeButton = container.querySelector('[data-active="true"]');
@@ -1645,47 +1935,118 @@ function Toggle({ label, checked, onChange, shortcut, shortcutActive }) {
   ] });
 }
 
-// src/components/SpringVisualization.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function generateSpringCurve(stiffness, damping, mass, duration) {
-  const points = [];
-  const steps = 100;
-  const dt = duration / steps;
-  let position = 0;
-  let velocity = 0;
-  const target = 1;
-  for (let i = 0; i <= steps; i++) {
-    const time = i * dt;
-    points.push([time, position]);
-    const springForce = -stiffness * (position - target);
-    const dampingForce = -damping * velocity;
-    const acceleration = (springForce + dampingForce) / mass;
-    velocity += acceleration * dt;
-    position += velocity * dt;
+// 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
+import { jsx as jsx6, jsxs as jsxs5 } from "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);
@@ -1734,20 +2095,20 @@ function SpringVisualization({ spring, isSimpleMode }) {
 }
 
 // src/components/SpringControl.tsx
-import { useCallback as useCallback5, useRef as useRef6, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useCallback as useCallback6, useRef as useRef7, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function SpringControl({ panelId, path, label, spring, onChange }) {
-  const subscribe = useCallback5(
+  const subscribe = useCallback6(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = useCallback5(
+  const getSnapshot = useCallback6(
     () => DialStore.getSpringMode(panelId, path),
     [panelId, path]
   );
   const mode = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
   const isSimpleMode = mode === "simple";
-  const cache = useRef6({
+  const cache = useRef7({
     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 }
   });
@@ -1894,21 +2255,29 @@ function EasingVisualization({ easing }) {
 }
 
 // src/components/TransitionControl.tsx
-import { useCallback as useCallback6, useRef as useRef7, useState as useState5, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { useCallback as useCallback7, useRef as useRef8, useState as useState5, useSyncExternalStore as useSyncExternalStore3 } from "react";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function TransitionControl({ panelId, path, label, value, onChange }) {
-  const subscribe = useCallback6(
+function TransitionControl({
+  panelId,
+  path,
+  label,
+  value,
+  onChange,
+  hideDuration = false,
+  durationControl
+}) {
+  const subscribe = useCallback7(
     (callback) => DialStore.subscribe(panelId, callback),
     [panelId]
   );
-  const getSnapshot = useCallback6(
+  const getSnapshot = useCallback7(
     () => DialStore.getTransitionMode(panelId, path),
     [panelId, path]
   );
   const mode = useSyncExternalStore3(subscribe, getSnapshot, getSnapshot);
   const isEasing = mode === "easing";
   const isSimpleSpring = mode === "simple";
-  const cache = useRef7({
+  const cache = useRef8({
     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 }
@@ -1946,6 +2315,21 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
     newEase[index] = val;
     onChange({ ...easing, ease: newEase });
   };
+  const durationSlider = !hideDuration && (isEasing || isSimpleSpring) ? /* @__PURE__ */ jsx9(
+    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__ */ jsx9(Folder, { title: label, defaultOpen: true, children: /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
     isEasing ? /* @__PURE__ */ jsx9(EasingVisualization, { easing }) : /* @__PURE__ */ jsx9(SpringVisualization, { spring, isSimpleMode: isSimpleSpring }),
     /* @__PURE__ */ jsxs8("div", { className: "dialkit-labeled-control", children: [
@@ -1968,16 +2352,13 @@ function TransitionControl({ panelId, path, label, value, onChange }) {
       /* @__PURE__ */ jsx9(Slider, { label: "y1", value: easing.ease[1], onChange: (v) => updateEase(1, v), min: -1, max: 2, step: 0.01 }),
       /* @__PURE__ */ jsx9(Slider, { label: "x2", value: easing.ease[2], onChange: (v) => updateEase(2, v), min: 0, max: 1, step: 0.01 }),
       /* @__PURE__ */ jsx9(Slider, { label: "y2", value: easing.ease[3], onChange: (v) => updateEase(3, v), min: -1, max: 2, step: 0.01 }),
-      /* @__PURE__ */ jsx9(Slider, { label: "Duration", value: easing.duration, onChange: (v) => onChange({ ...easing, duration: v }), min: 0.1, max: 2, step: 0.05, unit: "s" }),
       /* @__PURE__ */ jsx9(EaseTextInput, { ease: easing.ease, onChange: (newEase) => onChange({ ...easing, ease: newEase }) })
-    ] }) : isSimpleSpring ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
-      /* @__PURE__ */ jsx9(Slider, { label: "Duration", value: spring.visualDuration ?? 0.3, onChange: (v) => handleSpringUpdate("visualDuration", v), min: 0.1, max: 1, step: 0.05, unit: "s" }),
-      /* @__PURE__ */ jsx9(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 })
-    ] }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    ] }) : isSimpleSpring ? /* @__PURE__ */ jsx9(Slider, { label: "Bounce", value: spring.bounce ?? 0.2, onChange: (v) => handleSpringUpdate("bounce", v), min: 0, max: 1, step: 0.05 }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
       /* @__PURE__ */ jsx9(Slider, { label: "Stiffness", value: spring.stiffness ?? 400, onChange: (v) => handleSpringUpdate("stiffness", v), min: 1, max: 1e3, step: 10 }),
       /* @__PURE__ */ jsx9(Slider, { label: "Damping", value: spring.damping ?? 17, onChange: (v) => handleSpringUpdate("damping", v), min: 1, max: 100, step: 1 }),
       /* @__PURE__ */ jsx9(Slider, { label: "Mass", value: spring.mass ?? 1, onChange: (v) => handleSpringUpdate("mass", v), min: 0.1, max: 10, step: 0.1 })
-    ] })
+    ] }),
+    durationSlider
   ] }) });
 }
 function formatEase(ease) {
@@ -2044,7 +2425,7 @@ function TextControl({ label, value, onChange, placeholder }) {
 }
 
 // src/components/SelectControl.tsx
-import { useState as useState6, useRef as useRef8, useEffect as useEffect5, useCallback as useCallback7 } from "react";
+import { useState as useState6, useRef as useRef9, useEffect as useEffect6, useCallback as useCallback8 } from "react";
 import { createPortal } from "react-dom";
 import { motion as motion3, AnimatePresence as AnimatePresence2 } from "motion/react";
 
@@ -2078,26 +2459,26 @@ function normalizeOptions(options) {
 }
 function SelectControl({ label, value, options, onChange }) {
   const [isOpen, setIsOpen] = useState6(false);
-  const triggerRef = useRef8(null);
-  const dropdownRef = useRef8(null);
+  const triggerRef = useRef9(null);
+  const dropdownRef = useRef9(null);
   const [portalTarget, setPortalTarget] = useState6(null);
   const [pos, setPos] = useState6(null);
   const normalized = normalizeOptions(options);
   const selectedOption = normalized.find((o) => o.value === value);
-  const updatePos = useCallback7(() => {
+  const updatePos = useCallback8(() => {
     const el = triggerRef.current;
     if (!el || !portalTarget) return;
     const dropdownHeight = 8 + normalized.length * 36;
     setPos(getDropdownPosition(el, portalTarget, { dropdownHeight }));
   }, [normalized.length, portalTarget]);
-  useEffect5(() => {
+  useEffect6(() => {
     setPortalTarget(getDialKitPortalRoot(triggerRef.current) ?? document.body);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     updatePos();
   }, [isOpen, updatePos]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -2177,14 +2558,14 @@ function SelectControl({ label, value, options, onChange }) {
 }
 
 // src/components/ColorControl.tsx
-import { useState as useState7, useRef as useRef9, useEffect as useEffect6 } from "react";
+import { useState as useState7, useRef as useRef10, useEffect as useEffect7 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "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] = useState7(false);
   const [editValue, setEditValue] = useState7(value);
-  const colorInputRef = useRef9(null);
-  useEffect6(() => {
+  const colorInputRef = useRef10(null);
+  useEffect7(() => {
     if (!isEditing) {
       setEditValue(value);
     }
@@ -2254,266 +2635,105 @@ function expandShorthandHex(hex) {
   return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
 }
 
-// src/components/PresetManager.tsx
-import { useState as useState8, useRef as useRef10, useEffect as useEffect7, useCallback as useCallback8 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { motion as motion4, AnimatePresence as AnimatePresence3 } from "motion/react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
-function PresetManager({ panelId, presets, activePresetId, onAdd }) {
-  const [isOpen, setIsOpen] = useState8(false);
-  const triggerRef = useRef10(null);
-  const dropdownRef = useRef10(null);
-  const [pos, setPos] = useState8({ top: 0, left: 0, width: 0 });
-  const hasPresets = presets.length > 0;
-  const activePreset = presets.find((p) => p.id === activePresetId);
-  const open = useCallback8(() => {
-    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 = useCallback8(() => setIsOpen(false), []);
-  const toggle = useCallback8(() => {
-    if (isOpen) close();
-    else open();
-  }, [isOpen, open, close]);
-  useEffect7(() => {
-    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__ */ jsxs12("div", { className: "dialkit-preset-manager", children: [
-    /* @__PURE__ */ jsxs12(
-      "button",
-      {
-        ref: triggerRef,
-        className: "dialkit-preset-trigger",
-        onClick: toggle,
-        "data-open": String(isOpen),
-        "data-has-preset": String(!!activePreset),
-        "data-disabled": String(!hasPresets),
-        children: [
-          /* @__PURE__ */ jsx13("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
-          /* @__PURE__ */ jsx13(
-            motion4.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__ */ jsx13("path", { d: ICON_CHEVRON })
-            }
-          )
-        ]
-      }
-    ),
-    createPortal2(
-      /* @__PURE__ */ jsx13(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsxs12(
-        motion4.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__ */ jsx13(
-              "div",
-              {
-                className: "dialkit-preset-item",
-                "data-active": String(!activePresetId),
-                onClick: () => handleSelect(null),
-                children: /* @__PURE__ */ jsx13("span", { className: "dialkit-preset-name", children: "Version 1" })
-              }
-            ),
-            presets.map((preset) => /* @__PURE__ */ jsxs12(
-              "div",
-              {
-                className: "dialkit-preset-item",
-                "data-active": String(preset.id === activePresetId),
-                onClick: () => handleSelect(preset.id),
-                children: [
-                  /* @__PURE__ */ jsx13("span", { className: "dialkit-preset-name", children: preset.name }),
-                  /* @__PURE__ */ jsx13(
-                    "button",
-                    {
-                      className: "dialkit-preset-delete",
-                      onClick: (e) => handleDelete(e, preset.id),
-                      title: "Delete preset",
-                      children: /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_TRASH.map((d, i) => /* @__PURE__ */ jsx13("path", { d }, i)) })
-                    }
-                  )
-                ]
-              },
-              preset.id
-            ))
-          ]
-        }
-      ) }),
-      document.body
-    )
-  ] });
-}
-
-// src/components/Panel.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
-function Panel({ panel, defaultOpen = true, inline = false, onOpenChange, variant = "root" }) {
-  const [copied, setCopied] = useState9(false);
-  const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
+// src/components/ControlRenderer.tsx
+import { Fragment as Fragment3, jsx as jsx13 } from "react/jsx-runtime";
+function ControlRenderer({ panelId, controls, values, transitionDuration }) {
   const shortcutCtx = useContext(ShortcutContext);
-  const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
-  const subscribe = useCallback9(
-    (callback) => DialStore.subscribe(panel.id, callback),
-    [panel.id]
-  );
-  const getSnapshot = useCallback9(
-    () => DialStore.getValues(panel.id),
-    [panel.id]
-  );
-  const values = useSyncExternalStore4(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 = useCallback9((open) => {
-    setIsPanelOpen(open);
-    onOpenChange?.(open);
-  }, [onOpenChange]);
   const renderControl = (control) => {
     const value = values[control.path];
     switch (control.type) {
       case "slider":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
+        return /* @__PURE__ */ jsx13(Folder, { title: control.label, defaultOpen: control.defaultOpen ?? true, children: control.children?.map(renderControl) }, control.path);
       case "text":
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           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__ */ jsx14(
+        return /* @__PURE__ */ jsx13(
           "button",
           {
             className: "dialkit-button",
-            onClick: () => DialStore.triggerAction(panel.id, control.path),
+            onClick: () => DialStore.triggerAction(panelId, control.path),
             children: control.label
           },
           control.path
@@ -2522,12 +2742,170 @@ Apply these values as the new defaults in the useDialKit call.`;
         return null;
     }
   };
-  const renderControls = () => {
-    return panel.controls.map(renderControl);
+  return /* @__PURE__ */ jsx13(Fragment3, { children: controls.map(renderControl) });
+}
+
+// src/components/PresetManager.tsx
+import { useState as useState8, useRef as useRef11, useEffect as useEffect8, useCallback as useCallback9 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { motion as motion4, AnimatePresence as AnimatePresence3 } from "motion/react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function PresetManager({ panelId, presets, activePresetId, onAdd }) {
+  const [isOpen, setIsOpen] = useState8(false);
+  const triggerRef = useRef11(null);
+  const dropdownRef = useRef11(null);
+  const [pos, setPos] = useState8({ top: 0, left: 0, width: 0 });
+  const hasPresets = presets.length > 0;
+  const activePreset = presets.find((p) => p.id === activePresetId);
+  const open = useCallback9(() => {
+    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 = useCallback9(() => setIsOpen(false), []);
+  const toggle = useCallback9(() => {
+    if (isOpen) close();
+    else open();
+  }, [isOpen, open, close]);
+  useEffect8(() => {
+    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__ */ jsxs12("div", { className: "dialkit-preset-manager", children: [
+    /* @__PURE__ */ jsxs12(
+      "button",
+      {
+        ref: triggerRef,
+        className: "dialkit-preset-trigger",
+        onClick: toggle,
+        "data-open": String(isOpen),
+        "data-has-preset": String(!!activePreset),
+        "data-disabled": String(!hasPresets),
+        children: [
+          /* @__PURE__ */ jsx14("span", { className: "dialkit-preset-label", children: activePreset ? activePreset.name : "Version 1" }),
+          /* @__PURE__ */ jsx14(
+            motion4.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__ */ jsx14("path", { d: ICON_CHEVRON })
+            }
+          )
+        ]
+      }
+    ),
+    createPortal2(
+      /* @__PURE__ */ jsx14(AnimatePresence3, { children: isOpen && /* @__PURE__ */ jsxs12(
+        motion4.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__ */ jsx14(
+              "div",
+              {
+                className: "dialkit-preset-item",
+                "data-active": String(!activePresetId),
+                onClick: () => handleSelect(null),
+                children: /* @__PURE__ */ jsx14("span", { className: "dialkit-preset-name", children: "Version 1" })
+              }
+            ),
+            presets.map((preset) => /* @__PURE__ */ jsxs12(
+              "div",
+              {
+                className: "dialkit-preset-item",
+                "data-active": String(preset.id === activePresetId),
+                onClick: () => handleSelect(preset.id),
+                children: [
+                  /* @__PURE__ */ jsx14("span", { className: "dialkit-preset-name", children: preset.name }),
+                  /* @__PURE__ */ jsx14(
+                    "button",
+                    {
+                      className: "dialkit-preset-delete",
+                      onClick: (e) => handleDelete(e, preset.id),
+                      title: "Delete preset",
+                      children: /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: ICON_TRASH.map((d, i) => /* @__PURE__ */ jsx14("path", { d }, i)) })
+                    }
+                  )
+                ]
+              },
+              preset.id
+            ))
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+// src/components/Panel.tsx
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Panel({ panel, defaultOpen = true, inline = false, onOpenChange, variant = "root", toolbarExtra }) {
+  const [copied, setCopied] = useState9(false);
+  const [isPanelOpen, setIsPanelOpen] = useState9(defaultOpen);
+  const hasShortcuts = Object.keys(panel.shortcuts).length > 0;
+  const subscribe = useCallback10(
+    (callback) => DialStore.subscribe(panel.id, callback),
+    [panel.id]
+  );
+  const getSnapshot = useCallback10(
+    () => DialStore.getValues(panel.id),
+    [panel.id]
+  );
+  const values = useSyncExternalStore4(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 = useCallback10((open) => {
+    setIsPanelOpen(open);
+    onOpenChange?.(open);
+  }, [onOpenChange]);
+  const renderControls = () => /* @__PURE__ */ jsx15(ControlRenderer, { panelId: panel.id, controls: panel.controls, values });
   const iconTransition = { type: "spring", visualDuration: 0.4, bounce: 0.1 };
-  const toolbar = /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    /* @__PURE__ */ jsx14(
+  const toolbar = /* @__PURE__ */ jsxs13(Fragment4, { children: [
+    /* @__PURE__ */ jsx15(
       motion5.button,
       {
         className: "dialkit-toolbar-add",
@@ -2535,10 +2913,10 @@ Apply these values as the new defaults in the useDialKit call.`;
         title: "Add preset",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ jsx14("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__ */ jsx14("path", { d }, i)) })
+        children: /* @__PURE__ */ jsx15("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__ */ jsx15("path", { d }, i)) })
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       PresetManager,
       {
         panelId: panel.id,
@@ -2547,7 +2925,7 @@ Apply these values as the new defaults in the useDialKit call.`;
         onAdd: handleAddPreset
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       motion5.button,
       {
         className: "dialkit-toolbar-add",
@@ -2555,7 +2933,7 @@ Apply these values as the new defaults in the useDialKit call.`;
         title: "Copy parameters",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ jsx14("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ jsx14(AnimatePresence4, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ jsx14(
+        children: /* @__PURE__ */ jsx15("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ jsx15(AnimatePresence4, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ jsx15(
           motion5.svg,
           {
             viewBox: "0 0 24 24",
@@ -2569,7 +2947,7 @@ 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__ */ jsx14("path", { d: ICON_CHECK })
+            children: /* @__PURE__ */ jsx15("path", { d: ICON_CHECK })
           },
           "check"
         ) : /* @__PURE__ */ jsxs13(
@@ -2583,23 +2961,116 @@ Apply these values as the new defaults in the useDialKit call.`;
             exit: { scale: 0.8, opacity: 0 },
             transition: { duration: 0.08 },
             children: [
-              /* @__PURE__ */ jsx14("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
-              /* @__PURE__ */ jsx14("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
-              /* @__PURE__ */ jsx14("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+              /* @__PURE__ */ jsx15("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+              /* @__PURE__ */ jsx15("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+              /* @__PURE__ */ jsx15("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
             ]
           },
           "clipboard"
         ) }) })
       }
-    )
+    ),
+    toolbarExtra
   ] });
   if (variant === "section") {
     return /* @__PURE__ */ jsxs13(Folder, { title: panel.name, defaultOpen, onOpenChange: handleOpenChange, children: [
-      /* @__PURE__ */ jsx14("div", { className: "dialkit-panel-section-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar }),
+      /* @__PURE__ */ jsx15("div", { className: "dialkit-panel-section-toolbar", onClick: (e) => e.stopPropagation(), children: toolbar }),
       renderControls()
     ] });
   }
-  return /* @__PURE__ */ jsx14("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx14(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: handleOpenChange, toolbar, children: renderControls() }) });
+  return /* @__PURE__ */ jsx15("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx15(Folder, { title: panel.name, defaultOpen, isRoot: true, inline, onOpenChange: handleOpenChange, toolbar, children: renderControls() }) });
+}
+
+// src/components/Timeline/TimelineToggleButton.tsx
+import { useCallback as useCallback11, useSyncExternalStore as useSyncExternalStore5 } from "react";
+import { motion as motion6 } from "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
+import { jsx as jsx16 } from "react/jsx-runtime";
+function TimelineToggleButton() {
+  const subscribe = useCallback11(
+    (listener) => TimelineUiStore.subscribe(listener),
+    []
+  );
+  const getVisible = useCallback11(() => TimelineUiStore.getVisible(), []);
+  const visible = useSyncExternalStore5(subscribe, getVisible, getVisible);
+  const label = visible ? "Hide timeline" : "Show timeline";
+  return /* @__PURE__ */ jsx16(
+    motion6.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__ */ jsx16("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: ICON_TIMELINE.map((d, i) => /* @__PURE__ */ jsx16("path", { d, fill: "currentColor" }, i)) })
+    }
+  );
 }
 
 // src/panel-drag.ts
@@ -2667,32 +3138,39 @@ function blockPanelDragClick(handle) {
 }
 
 // src/components/DialRoot.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-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;
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover", theme = "system", productionEnabled = isDevDefault, onOpenChange }) {
   if (!productionEnabled) return null;
   const [panels, setPanels] = useState10([]);
+  const [timelineCount, setTimelineCount] = useState10(0);
   const [mounted, setMounted] = useState10(false);
   const inline = mode === "inline";
-  const panelRef = useRef11(null);
+  const panelRef = useRef12(null);
   const [dragOffset, setDragOffset] = useState10(null);
   const [activePosition, setActivePosition] = useState10(position);
-  const lastDragOffset = useRef11(null);
-  const draggingRef = useRef11(false);
-  const dragStartRef = useRef11(null);
-  const didDragRef = useRef11(false);
-  const dragTargetRef = useRef11(null);
-  const panelOpenStatesRef = useRef11(/* @__PURE__ */ new Map());
-  const rootOpenRef = useRef11(null);
-  useEffect8(() => {
+  const lastDragOffset = useRef12(null);
+  const draggingRef = useRef12(false);
+  const dragStartRef = useRef12(null);
+  const didDragRef = useRef12(false);
+  const dragTargetRef = useRef12(null);
+  const panelOpenStatesRef = useRef12(/* @__PURE__ */ new Map());
+  const rootOpenRef = useRef12(null);
+  useEffect9(() => {
     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();
+    };
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const fallbackOpen = inline || defaultOpen;
     const nextStates = /* @__PURE__ */ new Map();
     for (const panel of panels) {
@@ -2701,7 +3179,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     panelOpenStatesRef.current = nextStates;
     rootOpenRef.current = Array.from(nextStates.values()).some(Boolean);
   }, [defaultOpen, inline, panels]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!panelRef.current || inline) return;
     const observer = new MutationObserver(() => {
       const inners = panelRef.current?.querySelectorAll(".dialkit-panel-inner");
@@ -2729,7 +3207,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 = useCallback10((e) => {
+  const handlePointerDown = useCallback12((e) => {
     const panel = panelRef.current;
     const handle = getPanelDragHandle(e.target, panel);
     if (!panel || !handle) return;
@@ -2739,13 +3217,13 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     draggingRef.current = true;
     handle.setPointerCapture(e.pointerId);
   }, []);
-  const handlePointerMove = useCallback10((e) => {
+  const handlePointerMove = useCallback12((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 = useCallback10((e) => {
+  const handlePointerUp = useCallback12((e) => {
     if (!draggingRef.current) return;
     draggingRef.current = false;
     dragStartRef.current = null;
@@ -2761,7 +3239,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     }
     dragTargetRef.current = null;
   }, []);
-  const handlePanelOpenChange = useCallback10((panelId, open) => {
+  const handlePanelOpenChange = useCallback12((panelId, open) => {
     panelOpenStatesRef.current.set(panelId, open);
     const fallbackOpen = inline || defaultOpen;
     const nextRootOpen = panels.some((panel) => panelOpenStatesRef.current.get(panel.id) ?? fallbackOpen);
@@ -2769,7 +3247,7 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
     rootOpenRef.current = nextRootOpen;
     onOpenChange?.(nextRootOpen);
   }, [defaultOpen, inline, onOpenChange, panels]);
-  const handleRootOpenChange = useCallback10((open) => {
+  const handleRootOpenChange = useCallback12((open) => {
     if (rootOpenRef.current === open) return;
     rootOpenRef.current = open;
     onOpenChange?.(open);
@@ -2777,7 +3255,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 ? {
@@ -2788,7 +3266,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__ */ jsx15(ShortcutListener, { children: /* @__PURE__ */ jsx15("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx15(
+  const timelineToggle = timelineCount > 0 ? /* @__PURE__ */ jsx17(TimelineToggleButton, {}) : null;
+  const content = /* @__PURE__ */ jsx17(ShortcutListener, { children: /* @__PURE__ */ jsx17("div", { className: "dialkit-root", "data-mode": mode, "data-theme": theme, children: /* @__PURE__ */ jsx17(
     "div",
     {
       ref: panelRef,
@@ -2802,7 +3281,7 @@ 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__ */ jsx15("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx15(
+      children: panels.length === 0 ? /* @__PURE__ */ jsx17("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx17(
         Folder,
         {
           title: "DialKit",
@@ -2810,23 +3289,37 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
           isRoot: true,
           inline,
           onOpenChange: handleRootOpenChange,
+          toolbar: timelineToggle,
           panelHeightOffset: 2,
-          children: panels.map((panel) => /* @__PURE__ */ jsx15(
-            Panel,
-            {
-              panel,
-              defaultOpen: true,
-              variant: "section"
-            },
-            panel.id
+          children: /* @__PURE__ */ jsx17("div", { className: "dialkit-timeline-toolkit-only", children: "Timeline" })
+        }
+      ) }) : hasMultiplePanels ? /* @__PURE__ */ jsx17("div", { className: "dialkit-panel-wrapper", children: /* @__PURE__ */ jsx17(
+        Folder,
+        {
+          title: "DialKit",
+          defaultOpen: inline || defaultOpen,
+          isRoot: true,
+          inline,
+          onOpenChange: handleRootOpenChange,
+          toolbar: timelineToggle,
+          panelHeightOffset: 2,
+          children: panels.map((panel) => /* @__PURE__ */ jsx17(
+            Panel,
+            {
+              panel,
+              defaultOpen: true,
+              variant: "section"
+            },
+            panel.id
           ))
         }
-      ) }) : panels.map((panel) => /* @__PURE__ */ jsx15(
+      ) }) : panels.map((panel) => /* @__PURE__ */ jsx17(
         Panel,
         {
           panel,
           defaultOpen: inline || defaultOpen,
           inline,
+          toolbarExtra: timelineToggle,
           onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
         },
         panel.id
@@ -2839,10 +3332,2250 @@ function DialRoot({ position = "top-right", defaultOpen = true, mode = "popover"
   return createPortal3(content, document.body);
 }
 
+// src/hooks/useDialTimeline.ts
+import { useCallback as useCallback13, useEffect as useEffect10, useMemo as useMemo2, useRef as useRef13, useSyncExternalStore as useSyncExternalStore6 } from "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 = useMemo2(() => parseTimelineConfig(config), [serializedConfig]);
+  const { panelId, flatValues } = useDialStorePanel(name, parsed.dialConfig, {
+    id: options?.id,
+    persist: options?.persist,
+    kind: "timeline"
+  });
+  const staticTimeline = useMemo2(
+    () => computeStaticTimeline(parsed, flatValues),
+    [parsed, flatValues]
+  );
+  const timelineDuration = staticTimeline.duration;
+  const staticClips = staticTimeline.clips;
+  const parsedRef = useRef13(parsed);
+  parsedRef.current = parsed;
+  const optionsRef = useRef13(options);
+  optionsRef.current = options;
+  const { start: loopStart } = resolveTimelineLoop(options?.loop);
+  const buildMeta = useCallback13(
+    () => buildTimelineMeta(panelId, name, timelineDuration, parsedRef.current, options?.loop),
+    [panelId, name, timelineDuration, options?.loop]
+  );
+  const buildMetaRef = useRef13(buildMeta);
+  buildMetaRef.current = buildMeta;
+  useEffect10(() => {
+    TimelineStore.register(buildMetaRef.current(), { autoplay: optionsRef.current?.autoplay ?? true });
+    return () => TimelineStore.unregister(panelId);
+  }, [panelId, name]);
+  const mountedRef = useRef13(false);
+  useEffect10(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    TimelineStore.update(buildMeta());
+  }, [buildMeta, parsed]);
+  const subscribeTransport = useCallback13(
+    (callback) => TimelineStore.subscribe(panelId, callback),
+    [panelId]
+  );
+  const getTransport = useCallback13(() => TimelineStore.getTransport(panelId), [panelId]);
+  const transport = useSyncExternalStore6(subscribeTransport, getTransport, getTransport);
+  const play = useCallback13(() => TimelineStore.play(panelId), [panelId]);
+  const pause = useCallback13(() => TimelineStore.pause(panelId), [panelId]);
+  const replay = useCallback13(() => TimelineStore.replay(panelId), [panelId]);
+  const seek = useCallback13((time) => TimelineStore.seek(panelId, time), [panelId]);
+  return useMemo2(
+    () => buildTimelineValues(staticClips, transport, timelineDuration, loopStart, {
+      play,
+      pause,
+      replay,
+      seek
+    }),
+    [staticClips, transport, timelineDuration, loopStart, play, pause, replay, seek]
+  );
+}
+
+// src/components/Timeline/DialTimeline.tsx
+import { memo, useCallback as useCallback14, useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useRef as useRef14, useState as useState11, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { AnimatePresence as AnimatePresence5, motion as motion7 } from "motion/react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs14 } from "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 PLAYHEAD_FLAG_EDGE_OVERHANG = 1;
+var POPOVER_WIDTH = 280;
+var ZOOM_DRAG_DISTANCE = 180;
+var DEFAULT_DOCK_MAX_HEIGHT = 400;
+var MIN_DOCK_MAX_HEIGHT = 120;
+var subscribeGlobalTimelines = (callback) => TimelineStore.subscribeGlobal(callback);
+var getTimelines = () => TimelineStore.getTimelines();
+var subscribeTimelineVisibility = (callback) => TimelineUiStore.subscribe(callback);
+var getTimelineVisibility = () => TimelineUiStore.getVisible();
+var DialTimeline = memo(function DialTimeline2({
+  theme = "system",
+  defaultVisible = true,
+  visible,
+  onVisibilityChange,
+  defaultOpen = true,
+  productionEnabled = isDevDefault
+}) {
+  if (!productionEnabled) return null;
+  return /* @__PURE__ */ jsx18(
+    DialTimelineDock,
+    {
+      theme,
+      defaultVisible,
+      visible,
+      onVisibilityChange,
+      defaultOpen
+    }
+  );
+});
+function DialTimelineDock({
+  theme,
+  defaultVisible,
+  visible,
+  onVisibilityChange,
+  defaultOpen
+}) {
+  const [mounted, setMounted] = useState11(false);
+  const [dockMaxHeight, setDockMaxHeight] = useState11(DEFAULT_DOCK_MAX_HEIGHT);
+  const visibilityControllerId = useRef14(/* @__PURE__ */ Symbol("dialkit-timeline-visibility"));
+  const dockRef = useRef14(null);
+  const resizeCleanupRef = useRef14(null);
+  useEffect11(() => TimelineUiStore.registerController(visibilityControllerId.current, {
+    visible,
+    defaultVisible,
+    onVisibilityChange
+  }), []);
+  useEffect11(() => {
+    TimelineUiStore.updateController(visibilityControllerId.current, {
+      visible,
+      defaultVisible,
+      onVisibilityChange
+    });
+  }, [defaultVisible, onVisibilityChange, visible]);
+  useEffect11(() => {
+    setMounted(true);
+  }, []);
+  useEffect11(() => () => resizeCleanupRef.current?.(), []);
+  const handleResizePointerDown = useCallback14((e) => {
+    const dock = dockRef.current;
+    if (!dock) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizeCleanupRef.current?.();
+    const pointerY = e.clientY;
+    const startHeight = dock.getBoundingClientRect().height;
+    const handlePointerMove = (event) => {
+      event.preventDefault();
+      const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+      setDockMaxHeight(clamp(startHeight + pointerY - event.clientY, MIN_DOCK_MAX_HEIGHT, viewportMax));
+    };
+    const finishResize = () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", finishResize);
+      window.removeEventListener("pointercancel", finishResize);
+      resizeCleanupRef.current = null;
+    };
+    window.addEventListener("pointermove", handlePointerMove, { passive: false });
+    window.addEventListener("pointerup", finishResize);
+    window.addEventListener("pointercancel", finishResize);
+    resizeCleanupRef.current = finishResize;
+  }, []);
+  const timelines = useSyncExternalStore7(subscribeGlobalTimelines, getTimelines, getTimelines);
+  const dockVisible = useSyncExternalStore7(
+    subscribeTimelineVisibility,
+    getTimelineVisibility,
+    getTimelineVisibility
+  );
+  if (!mounted || typeof window === "undefined" || timelines.length === 0) {
+    return null;
+  }
+  return createPortal4(
+    /* @__PURE__ */ jsxs14("div", { className: "dialkit-root dialkit-timeline", "data-theme": theme, hidden: !dockVisible, children: [
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: "dialkit-timeline-resize-handle",
+          onPointerDown: handleResizePointerDown,
+          role: "separator",
+          "aria-label": "Resize timeline height",
+          "aria-orientation": "horizontal",
+          title: "Drag to resize timeline"
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        "div",
+        {
+          ref: dockRef,
+          className: "dialkit-timeline-dock",
+          style: { maxHeight: `min(${dockMaxHeight}px, calc(100vh - 24px))` },
+          children: timelines.map((timeline) => /* @__PURE__ */ jsx18(
+            TimelineSection,
+            {
+              meta: timeline,
+              defaultOpen,
+              theme,
+              dockVisible
+            },
+            timeline.id
+          ))
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function useTransportSubscribe(id) {
+  return useCallback14((callback) => TimelineStore.subscribe(id, callback), [id]);
+}
+function PlayPauseButton({ id }) {
+  const subscribe = useTransportSubscribe(id);
+  const getPlaying = useCallback14(() => TimelineStore.getTransport(id).playing, [id]);
+  const playing = useSyncExternalStore7(subscribe, getPlaying, getPlaying);
+  return /* @__PURE__ */ jsx18(
+    motion7.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__ */ jsx18("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ jsx18(AnimatePresence5, { initial: false, mode: "wait", children: playing ? /* @__PURE__ */ jsx18(
+        motion7.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__ */ jsx18("path", { d, fill: "currentColor" }, i))
+        },
+        "pause"
+      ) : /* @__PURE__ */ jsx18(
+        motion7.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__ */ jsx18("path", { d: ICON_PLAY, fill: "currentColor" })
+        },
+        "play"
+      ) }) })
+    }
+  );
+}
+function ReplayButton({ onReplay }) {
+  return /* @__PURE__ */ jsx18(
+    motion7.button,
+    {
+      className: "dialkit-toolbar-add",
+      onClick: onReplay,
+      title: "Replay",
+      "aria-label": "Replay",
+      whileTap: { scale: 0.9 },
+      transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
+      children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: ICON_REPLAY.map((d, i) => /* @__PURE__ */ jsx18("path", { d, fill: "currentColor" }, i)) })
+    }
+  );
+}
+function TimelinePlayheadFlag({
+  id,
+  duration,
+  pxPerSecond,
+  viewStart,
+  viewEnd,
+  laneWidth,
+  rulerRef,
+  onResetView
+}) {
+  const subscribe = useTransportSubscribe(id);
+  const getTime = useCallback14(() => TimelineStore.getTransport(id).time, [id]);
+  const time = useSyncExternalStore7(subscribe, getTime, getTime);
+  const scrubRef = useRef14(null);
+  const cleanupScrubRef = useRef14(null);
+  const seekFromClientX = useCallback14((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 = useCallback14((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]);
+  useEffect11(() => () => cleanupScrubRef.current?.(), []);
+  if (time < viewStart || time > viewEnd || laneWidth <= 0) return null;
+  const x = clamp(
+    (time - viewStart) * pxPerSecond,
+    0,
+    laneWidth
+  );
+  const flagCenter = clamp(
+    x,
+    PLAYHEAD_FLAG_WIDTH / 2 - PLAYHEAD_FLAG_EDGE_OVERHANG,
+    laneWidth - PLAYHEAD_FLAG_WIDTH / 2 + PLAYHEAD_FLAG_EDGE_OVERHANG
+  );
+  const flagOffset = flagCenter - x;
+  const edge = flagOffset > 0.5 ? "start" : flagOffset < -0.5 ? "end" : "center";
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: "dialkit-timeline-playhead-control",
+      "data-edge": edge,
+      style: {
+        left: `calc(var(--dial-timeline-label-w) + ${x}px)`,
+        "--dial-timeline-playhead-flag-offset": `${flagOffset}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__ */ jsx18("div", { className: "dialkit-timeline-playhead-stem" }),
+        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-anchor", children: /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-playhead-flag", children: time.toFixed(2) }) })
+      ]
+    }
+  );
+}
+function TimelineOverview({
+  id,
+  duration,
+  viewStart,
+  viewEnd,
+  onNavigate
+}) {
+  const subscribe = useTransportSubscribe(id);
+  const getTime = useCallback14(() => TimelineStore.getTransport(id).time, [id]);
+  const time = useSyncExternalStore7(subscribe, getTime, getTime);
+  const scrubRef = useRef14(null);
+  const seekFromClientX = useCallback14((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 = useCallback14((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 = useCallback14((e) => {
+    if (scrubRef.current) seekFromClientX(e.clientX);
+  }, [seekFromClientX]);
+  const finishScrub = useCallback14(() => {
+    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__ */ jsxs14(
+    "div",
+    {
+      className: "dialkit-timeline-overview",
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: finishScrub,
+      onPointerCancel: finishScrub,
+      onLostPointerCapture: finishScrub,
+      title: "Drag to scrub the full timeline",
+      children: [
+        /* @__PURE__ */ jsx18(
+          "div",
+          {
+            className: "dialkit-timeline-overview-viewport",
+            "data-zoomed": viewportWidth < 99.999 || void 0,
+            style: { left: `${viewportLeft}%`, width: `${viewportWidth}%` }
+          }
+        ),
+        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-overview-progress", style: { width: `${playheadLeft}%` } }),
+        /* @__PURE__ */ jsx18("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 = memo(function TimelineSection2({
+  meta,
+  defaultOpen,
+  theme,
+  dockVisible
+}) {
+  const [open, setOpen] = useState11(defaultOpen);
+  const [copied, setCopied] = useState11(false);
+  const [popover, setPopover] = useState11(null);
+  const [collapsedGroups, setCollapsedGroups] = useState11(() => /* @__PURE__ */ new Set());
+  const [expandedTracks, setExpandedTracks] = useState11(() => /* @__PURE__ */ new Set());
+  const [zoom, setZoom] = useState11(1);
+  const [viewStart, setViewStart] = useState11(0);
+  const subscribeValues = useCallback14(
+    (callback) => DialStore.subscribe(meta.id, callback),
+    [meta.id]
+  );
+  const getValues = useCallback14(() => DialStore.getValues(meta.id), [meta.id]);
+  const values = useSyncExternalStore7(subscribeValues, getValues, getValues);
+  const presets = DialStore.getPresets(meta.id);
+  const activePresetId = DialStore.getActivePresetId(meta.id);
+  const laneAreaRef = useRef14(null);
+  const horizontalScrollRef = useRef14(null);
+  const [laneWidth, setLaneWidth] = useState11(0);
+  useLayoutEffect2(() => {
+    if (!open) return;
+    const ruler = laneAreaRef.current;
+    if (!ruler) return;
+    const measure = () => {
+      setLaneWidth(ruler.getBoundingClientRect().width);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(ruler);
+    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);
+  useEffect11(() => {
+    setZoom((current) => clamp(current, 1, maxZoom));
+  }, [maxZoom]);
+  useEffect11(() => {
+    setViewStart((current) => clampViewStart(current, meta.duration, meta.duration / zoom));
+  }, [meta.duration, zoom]);
+  useLayoutEffect2(() => {
+    const scroller = horizontalScrollRef.current;
+    if (!scroller || pxPerSecond <= 0) return;
+    const nextScrollLeft = safeViewStart * pxPerSecond;
+    if (Math.abs(scroller.scrollLeft - nextScrollLeft) > 0.5) {
+      scroller.scrollLeft = nextScrollLeft;
+    }
+  }, [open, pxPerSecond, safeViewStart]);
+  useEffect11(() => {
+    if (!dockVisible) setPopover(null);
+  }, [dockVisible]);
+  const centerViewAt = useCallback14((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 = useCallback14(() => {
+    setZoom(1);
+    setViewStart(0);
+  }, []);
+  const handleReplay = useCallback14(() => {
+    setViewStart(0);
+    TimelineStore.replay(meta.id);
+  }, [meta.id]);
+  const handleHorizontalScroll = useCallback14((e) => {
+    if (pxPerSecond <= 0) return;
+    setViewStart(clampViewStart(
+      e.currentTarget.scrollLeft / pxPerSecond,
+      meta.duration,
+      visibleDuration
+    ));
+  }, [meta.duration, pxPerSecond, visibleDuration]);
+  const handleTimelineWheel = useCallback14((e) => {
+    const scroller = horizontalScrollRef.current;
+    if (!scroller || zoom <= 1) return;
+    const horizontalDelta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.shiftKey ? e.deltaY : 0;
+    if (horizontalDelta === 0) return;
+    e.preventDefault();
+    scroller.scrollLeft += horizontalDelta;
+  }, [zoom]);
+  const zoomDragRef = useRef14(null);
+  const rulerScrubRef = useRef14(null);
+  const seekRulerFromClientX = useCallback14((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 = useCallback14((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 = useCallback14((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 = useCallback14(() => {
+    if (rulerScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    rulerScrubRef.current = null;
+    zoomDragRef.current = null;
+  }, [meta.id]);
+  const handleRulerPointerCancel = useCallback14(() => {
+    if (rulerScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    rulerScrubRef.current = null;
+    zoomDragRef.current = null;
+  }, [meta.id]);
+  const trackScrubRef = useRef14(null);
+  const seekTrackFromClientX = useCallback14((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 = useCallback14((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 = useCallback14((e) => {
+    if (trackScrubRef.current) seekTrackFromClientX(e.clientX);
+  }, [seekTrackFromClientX]);
+  const finishTrackScrub = useCallback14(() => {
+    if (trackScrubRef.current?.wasPlaying) TimelineStore.play(meta.id);
+    trackScrubRef.current = null;
+  }, [meta.id]);
+  const handleCopy = useCallback14(() => {
+    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 = useCallback14(() => {
+    DialStore.savePreset(meta.id, `Version ${presets.length + 2}`);
+  }, [meta.id, presets.length]);
+  const closePopover = useCallback14(() => setPopover(null), []);
+  const openClipPopover = useCallback14(
+    (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 = useCallback14((clipKey) => {
+    setExpandedTracks((prev) => {
+      const next = new Set(prev);
+      if (next.has(clipKey)) next.delete(clipKey);
+      else next.add(clipKey);
+      return next;
+    });
+  }, []);
+  const handleBarClick = useCallback14(
+    (clip, rect, stepKey) => {
+      if (!stepKey && clip.tracks?.length) {
+        toggleTracks(clip.key);
+        return;
+      }
+      openClipPopover(clip, rect, stepKey);
+    },
+    [openClipPopover, toggleTracks]
+  );
+  const toggleGroup = useCallback14((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__ */ jsxs14("div", { className: "dialkit-timeline-row dialkit-timeline-group-row", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-label", children: [
+              /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  className: "dialkit-timeline-group-toggle",
+                  "data-open": !isCollapsed,
+                  onClick: () => toggleGroup(group),
+                  title: isCollapsed ? "Expand layer" : "Collapse layer",
+                  children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("path", { d: ICON_CHEVRON }) })
+                }
+              ),
+              /* @__PURE__ */ jsx18("span", { children: formatLabel(group) })
+            ] }),
+            /* @__PURE__ */ jsx18("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__ */ jsxs14("div", { className: "dialkit-timeline-row", "data-grouped": clip.group ? "" : void 0, children: [
+        /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-label", children: [
+          isProps ? /* @__PURE__ */ jsx18(
+            "button",
+            {
+              className: "dialkit-timeline-group-toggle",
+              "data-open": tracksOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleTracks(clip.key);
+              },
+              title: tracksOpen ? "Collapse properties" : "Expand properties",
+              children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("path", { d: ICON_CHEVRON }) })
+            }
+          ) : null,
+          clip.label
+        ] }),
+        /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-lane", children: /* @__PURE__ */ jsx18(
+          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__ */ jsxs14(
+            "div",
+            {
+              className: "dialkit-timeline-row dialkit-timeline-track-row",
+              "data-grouped": clip.group ? "" : void 0,
+              children: [
+                /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-label", children: formatLabel(trackRef.prop) }),
+                /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-lane", children: /* @__PURE__ */ jsx18(
+                  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__ */ jsxs14("div", { className: "dialkit-timeline-section", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-header", "data-open": open || void 0, children: [
+      /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-identity", children: /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-title", children: meta.name }) }),
+      !open && /* @__PURE__ */ jsx18(
+        TimelineOverview,
+        {
+          id: meta.id,
+          duration: meta.duration,
+          viewStart: safeViewStart,
+          viewEnd,
+          onNavigate: centerViewAt
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-actions", children: [
+        /* @__PURE__ */ jsx18(PlayPauseButton, { id: meta.id }),
+        /* @__PURE__ */ jsx18(ReplayButton, { onReplay: handleReplay }),
+        /* @__PURE__ */ jsx18(
+          motion7.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__ */ jsx18("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__ */ jsx18("path", { d }, i)) })
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          PresetManager,
+          {
+            panelId: meta.id,
+            presets,
+            activePresetId,
+            onAdd: handleAddPreset
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          motion7.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__ */ jsx18("span", { style: { position: "relative", width: 16, height: 16 }, children: /* @__PURE__ */ jsx18(AnimatePresence5, { initial: false, mode: "wait", children: copied ? /* @__PURE__ */ jsx18(
+              motion7.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__ */ jsx18("path", { d: ICON_CHECK })
+              },
+              "check"
+            ) : /* @__PURE__ */ jsxs14(
+              motion7.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__ */ jsx18("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+                  /* @__PURE__ */ jsx18("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+                  /* @__PURE__ */ jsx18("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+                ]
+              },
+              "clipboard"
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          "button",
+          {
+            className: "dialkit-timeline-chevron",
+            "data-open": open,
+            "aria-expanded": open,
+            onClick: () => setOpen(!open),
+            title: open ? "Collapse timeline" : "Expand timeline",
+            children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("path", { d: ICON_CHEVRON }) })
+          }
+        )
+      ] })
+    ] }),
+    open && /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: "dialkit-timeline-body",
+        onWheel: handleTimelineWheel,
+        onPointerDown: handleTrackPointerDown,
+        onPointerMove: handleTrackPointerMove,
+        onPointerUp: finishTrackScrub,
+        onPointerCancel: finishTrackScrub,
+        onLostPointerCapture: finishTrackScrub,
+        children: [
+          /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-grid", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-row dialkit-timeline-ruler-row", children: [
+              /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-label" }),
+              /* @__PURE__ */ jsxs14(
+                "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__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: (t - safeViewStart) * pxPerSecond } }, `fine:${t}`)),
+                    mediumTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: (t - safeViewStart) * pxPerSecond } }, `medium:${t}`)),
+                    majorTicks.map((t) => /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-tick", style: { left: (t - safeViewStart) * pxPerSecond }, children: /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-tick-label", children: formatRulerSeconds(t, majorStep) }) }, t))
+                  ]
+                }
+              )
+            ] }),
+            rows,
+            pxPerSecond > 0 && /* @__PURE__ */ jsx18(
+              TimelinePlayheadFlag,
+              {
+                id: meta.id,
+                duration: meta.duration,
+                pxPerSecond,
+                viewStart: safeViewStart,
+                viewEnd,
+                laneWidth,
+                rulerRef: laneAreaRef,
+                onResetView: resetView
+              }
+            )
+          ] }),
+          zoom > 1 && /* @__PURE__ */ jsxs14("div", { className: "dialkit-timeline-scroll-row", children: [
+            /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-label" }),
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                ref: horizontalScrollRef,
+                className: "dialkit-timeline-horizontal-scroll",
+                onScroll: handleHorizontalScroll,
+                "aria-label": "Timeline horizontal scroll",
+                children: /* @__PURE__ */ jsx18("div", { style: { width: laneWidth * zoom } })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    popover && /* @__PURE__ */ jsx18(
+      ClipPopover,
+      {
+        panelId: meta.id,
+        popover,
+        values,
+        theme,
+        onClose: closePopover
+      }
+    )
+  ] });
+});
+function ClipPopover({
+  panelId,
+  popover,
+  values,
+  theme,
+  onClose
+}) {
+  const ref = useRef14(null);
+  const [naturalHeight, setNaturalHeight] = useState11(0);
+  const [viewport, setViewport] = useState11(() => ({
+    width: window.visualViewport?.width ?? window.innerWidth,
+    height: window.visualViewport?.height ?? window.innerHeight,
+    offsetLeft: window.visualViewport?.offsetLeft ?? 0,
+    offsetTop: window.visualViewport?.offsetTop ?? 0
+  }));
+  useLayoutEffect2(() => {
+    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]);
+  useEffect11(() => {
+    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);
+    };
+  }, []);
+  useEffect11(() => {
+    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 createPortal4(
+    /* @__PURE__ */ jsx18("div", { className: "dialkit-root", "data-theme": theme, children: /* @__PURE__ */ jsxs14(
+      "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__ */ jsxs14("div", { className: "dialkit-timeline-popover-header", children: [
+            /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-popover-title", children: title }),
+            /* @__PURE__ */ jsx18("button", { className: "dialkit-timeline-popover-close", onClick: onClose, title: "Close editor", "aria-label": "Close editor", children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx18("path", { d: "M6 6L18 18M18 6L6 18" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-popover-body", children: /* @__PURE__ */ jsx18(
+            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 = useRef14(null);
+  const [dragging, setDragging] = useState11(false);
+  const isSteps = Boolean(steps?.length);
+  const handlePointerDown = useCallback14(
+    (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 = useCallback14(
+    (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 = useCallback14(
+    (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 = useCallback14(() => {
+    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__ */ jsxs14(Fragment5, { children: [
+    ghostCycles.map((cycle) => {
+      const ghostWidth = Math.max(1, cycle.duration * pxPerSecond - 2);
+      return /* @__PURE__ */ jsx18(
+        "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__ */ jsx18(
+            "span",
+            {
+              className: "dialkit-timeline-clip-ghost-segment",
+              style: { width: step.duration * pxPerSecond }
+            },
+            step.key ?? `step:${stepIndex}`
+          ))
+        },
+        `ghost:${cycle.index}`
+      );
+    }),
+    /* @__PURE__ */ jsx18(
+      "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__ */ jsx18(Fragment5, { children: width > 56 && /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-clip-duration", children: durationText }) }) : isSteps ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          steps.map((step) => {
+            const segmentWidth = step.duration * pxPerSecond;
+            return /* @__PURE__ */ jsx18(
+              "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__ */ jsx18("span", { className: "dialkit-timeline-clip-duration", children: formatSeconds(step.duration) })
+              },
+              step.key ?? "step"
+            );
+          }),
+          steps.map(
+            (step, index) => step.isPhysics ? null : /* @__PURE__ */ jsx18(
+              "div",
+              {
+                className: "dialkit-timeline-clip-handle",
+                "data-boundary": index,
+                style: { left: boundaryOffsets[index] * pxPerSecond - 4 }
+              },
+              `boundary:${step.key}`
+            )
+          ),
+          !steps[0].isPhysics && /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-clip-handle", "data-edge": "start" })
+        ] }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          resizable && /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-clip-handle", "data-edge": "start" }),
+          width > 56 && /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-clip-duration", children: durationText }),
+          resizable && /* @__PURE__ */ jsx18("div", { className: "dialkit-timeline-clip-handle", "data-edge": "end" })
+        ] })
+      }
+    ),
+    looping && /* @__PURE__ */ jsx18("span", { className: "dialkit-timeline-loop-infinity", "aria-hidden": "true", title: "Repeats indefinitely", children: "\u221E" })
+  ] });
+}
+
 // src/components/ButtonGroup.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ButtonGroup({ buttons }) {
-  return /* @__PURE__ */ jsx16("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19("div", { className: "dialkit-button-group", children: buttons.map((button, index) => /* @__PURE__ */ jsx19(
     "button",
     {
       className: "dialkit-button",
@@ -2854,10 +5587,10 @@ function ButtonGroup({ buttons }) {
 }
 
 // src/components/ShortcutsMenu.tsx
-import { useState as useState11, useRef as useRef12, useEffect as useEffect9, useCallback as useCallback11 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
-import { motion as motion6, AnimatePresence as AnimatePresence5 } from "motion/react";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState12, useRef as useRef15, useEffect as useEffect12, useCallback as useCallback15 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+import { motion as motion8, AnimatePresence as AnimatePresence6 } from "motion/react";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs15 } from "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" : "";
@@ -2877,23 +5610,23 @@ function formatInteraction(sc) {
   }
 }
 function ShortcutsMenu({ panelId }) {
-  const [isOpen, setIsOpen] = useState11(false);
-  const triggerRef = useRef12(null);
-  const dropdownRef = useRef12(null);
-  const [pos, setPos] = useState11({ top: 0, right: 0 });
-  const open = useCallback11(() => {
+  const [isOpen, setIsOpen] = useState12(false);
+  const triggerRef = useRef15(null);
+  const dropdownRef = useRef15(null);
+  const [pos, setPos] = useState12({ top: 0, right: 0 });
+  const open = useCallback15(() => {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) {
       setPos({ top: rect.bottom + 4, right: window.innerWidth - rect.right });
     }
     setIsOpen(true);
   }, []);
-  const close = useCallback11(() => setIsOpen(false), []);
-  const toggle = useCallback11(() => {
+  const close = useCallback15(() => setIsOpen(false), []);
+  const toggle = useCallback15(() => {
     if (isOpen) close();
     else open();
   }, [isOpen, open, close]);
-  useEffect9(() => {
+  useEffect12(() => {
     if (!isOpen) return;
     const handler = (e) => {
       const target = e.target;
@@ -2924,9 +5657,9 @@ function ShortcutsMenu({ panelId }) {
       label: findLabel(panel.controls)
     };
   });
-  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
-    /* @__PURE__ */ jsx17(
-      motion6.button,
+  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
+    /* @__PURE__ */ jsx20(
+      motion8.button,
       {
         ref: triggerRef,
         className: "dialkit-shortcuts-trigger",
@@ -2934,19 +5667,19 @@ function ShortcutsMenu({ panelId }) {
         title: "Keyboard shortcuts",
         whileTap: { scale: 0.9 },
         transition: { type: "spring", visualDuration: 0.15, bounce: 0.3 },
-        children: /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsx17("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
-          /* @__PURE__ */ jsx17("path", { d: "M6 10H6.01" }),
-          /* @__PURE__ */ jsx17("path", { d: "M10 10H10.01" }),
-          /* @__PURE__ */ jsx17("path", { d: "M14 10H14.01" }),
-          /* @__PURE__ */ jsx17("path", { d: "M18 10H18.01" }),
-          /* @__PURE__ */ jsx17("path", { d: "M8 14H16" })
+        children: /* @__PURE__ */ jsxs15("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx20("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+          /* @__PURE__ */ jsx20("path", { d: "M6 10H6.01" }),
+          /* @__PURE__ */ jsx20("path", { d: "M10 10H10.01" }),
+          /* @__PURE__ */ jsx20("path", { d: "M14 10H14.01" }),
+          /* @__PURE__ */ jsx20("path", { d: "M18 10H18.01" }),
+          /* @__PURE__ */ jsx20("path", { d: "M8 14H16" })
         ] })
       }
     ),
-    createPortal4(
-      /* @__PURE__ */ jsx17(AnimatePresence5, { children: isOpen && /* @__PURE__ */ jsxs14(
-        motion6.div,
+    createPortal5(
+      /* @__PURE__ */ jsx20(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs15(
+        motion8.div,
         {
           ref: dropdownRef,
           className: "dialkit-root dialkit-shortcuts-dropdown",
@@ -2956,13 +5689,13 @@ function ShortcutsMenu({ panelId }) {
           exit: { opacity: 0, y: 4, scale: 0.97, pointerEvents: "none" },
           transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
           children: [
-            /* @__PURE__ */ jsx17("div", { className: "dialkit-shortcuts-title", children: "Keyboard Shortcuts" }),
-            /* @__PURE__ */ jsx17("div", { className: "dialkit-shortcuts-list", children: rows.map((row) => /* @__PURE__ */ jsxs14("div", { className: "dialkit-shortcuts-row", children: [
-              /* @__PURE__ */ jsx17("span", { className: "dialkit-shortcuts-row-key", children: formatShortcutKey(row.shortcut) }),
-              /* @__PURE__ */ jsx17("span", { className: "dialkit-shortcuts-row-label", children: row.label }),
-              /* @__PURE__ */ jsx17("span", { className: "dialkit-shortcuts-row-mode", children: formatInteraction(row.shortcut) })
+            /* @__PURE__ */ jsx20("div", { className: "dialkit-shortcuts-title", children: "Keyboard Shortcuts" }),
+            /* @__PURE__ */ jsx20("div", { className: "dialkit-shortcuts-list", children: rows.map((row) => /* @__PURE__ */ jsxs15("div", { className: "dialkit-shortcuts-row", children: [
+              /* @__PURE__ */ jsx20("span", { className: "dialkit-shortcuts-row-key", children: formatShortcutKey(row.shortcut) }),
+              /* @__PURE__ */ jsx20("span", { className: "dialkit-shortcuts-row-label", children: row.label }),
+              /* @__PURE__ */ jsx20("span", { className: "dialkit-shortcuts-row-mode", children: formatInteraction(row.shortcut) })
             ] }, row.path)) }),
-            /* @__PURE__ */ jsx17("div", { className: "dialkit-shortcuts-hint", children: "See pill badges on controls for keys" })
+            /* @__PURE__ */ jsx20("div", { className: "dialkit-shortcuts-hint", children: "See pill badges on controls for keys" })
           ]
         }
       ) }),
@@ -2973,8 +5706,10 @@ function ShortcutsMenu({ panelId }) {
 export {
   ButtonGroup,
   ColorControl,
+  ControlRenderer,
   DialRoot,
   DialStore,
+  DialTimeline,
   EasingVisualization,
   Folder,
   PresetManager,
@@ -2984,9 +5719,12 @@ export {
   SpringControl,
   SpringVisualization,
   TextControl,
+  TimelineStore,
   Toggle,
   TransitionControl,
+  formatClock,
   useDialKit,
-  useDialKitController
+  useDialKitController,
+  useDialTimeline
 };
 //# sourceMappingURL=index.js.map