dialkit 1.2.1 → 1.4.0

package/dist/vue/index.js

@@ -3,9 +3,108 @@ import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
 
 // src/store/DialStore.ts
 var EMPTY_VALUES = Object.freeze({});
+function resolveDialValues(config, flatValues) {
+  return resolveConfigValues(config, flatValues, "");
+}
+function flattenDialValueUpdates(config, updates) {
+  const values = {};
+  if (typeof updates === "object" && updates !== null) {
+    flattenConfigUpdates(config, updates, "", values);
+  }
+  return values;
+}
+function resolveConfigValues(config, flatValues, prefix) {
+  const result = {};
+  for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed") continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
+      result[key] = flatValues[path] ?? configValue[0];
+    } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isSpringConfigValue(configValue) || isEasingConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isActionConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue;
+    } else if (isSelectConfigValue(configValue)) {
+      const defaultValue = configValue.default ?? getFirstOptionValue(configValue.options);
+      result[key] = flatValues[path] ?? defaultValue;
+    } else if (isColorConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue.default ?? "#000000";
+    } else if (isTextConfigValue(configValue)) {
+      result[key] = flatValues[path] ?? configValue.default ?? "";
+    } else if (typeof configValue === "object" && configValue !== null) {
+      result[key] = resolveConfigValues(configValue, flatValues, path);
+    }
+  }
+  return result;
+}
+function flattenConfigUpdates(config, updates, prefix, values) {
+  for (const [key, configValue] of Object.entries(config)) {
+    if (key === "_collapsed" || !(key in updates)) continue;
+    const nextValue = updates[key];
+    if (nextValue === void 0) continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if (isActionConfigValue(configValue)) {
+      continue;
+    }
+    if (isLeafConfigValue(configValue)) {
+      values[path] = nextValue;
+      continue;
+    }
+    if (typeof configValue === "object" && configValue !== null && typeof nextValue === "object" && nextValue !== null && !Array.isArray(nextValue)) {
+      flattenConfigUpdates(configValue, nextValue, path, values);
+    }
+  }
+}
+function isLeafConfigValue(value) {
+  return Array.isArray(value) && value.length <= 4 && typeof value[0] === "number" || typeof value === "number" || typeof value === "boolean" || typeof value === "string" || isSpringConfigValue(value) || isEasingConfigValue(value) || isActionConfigValue(value) || isSelectConfigValue(value) || isColorConfigValue(value) || isTextConfigValue(value);
+}
+function hasType(value, type) {
+  return typeof value === "object" && value !== null && "type" in value && value.type === type;
+}
+function isSpringConfigValue(value) {
+  return hasType(value, "spring");
+}
+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");
+}
+function isSelectConfigValue(value) {
+  return hasType(value, "select") && "options" in value && Array.isArray(value.options);
+}
+function isColorConfigValue(value) {
+  return hasType(value, "color");
+}
+function isTextConfigValue(value) {
+  return hasType(value, "text");
+}
+function getFirstOptionValue(options) {
+  const first = options[0];
+  if (first === void 0) return "";
+  return typeof first === "string" ? first : first.value;
+}
 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();
@@ -13,87 +112,144 @@ var DialStoreClass = class {
     this.presets = /* @__PURE__ */ new Map();
     this.activePreset = /* @__PURE__ */ new Map();
     this.baseValues = /* @__PURE__ */ new Map();
+    this.defaultValues = /* @__PURE__ */ new Map();
+    this.registrationCounts = /* @__PURE__ */ new Map();
+    this.retainedPanels = /* @__PURE__ */ new Set();
+    this.persistConfigs = /* @__PURE__ */ new Map();
   }
-  registerPanel(id, name, config, shortcuts) {
+  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);
-    const values = this.flattenValues(config, "");
-    this.initTransitionModes(config, "", values);
-    this.panels.set(id, { id, name, controls, values, shortcuts: shortcuts ?? {} });
+    const controlsByPath = this.mapControlsByPath(controls);
+    const defaultValues = this.flattenValues(config, "");
+    this.initTransitionModes(config, "", defaultValues);
+    const persisted = this.loadPersistedPanel(id);
+    const previousValues = this.panels.get(id)?.values ?? this.snapshots.get(id) ?? persisted?.values ?? {};
+    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 ?? {}, kind: options.kind });
     this.snapshots.set(id, { ...values });
-    this.baseValues.set(id, { ...values });
+    this.baseValues.set(id, baseValues);
+    this.defaultValues.set(id, { ...defaultValues });
+    const existingPresets = this.presets.get(id) ?? persisted?.presets;
+    if (existingPresets) {
+      this.presets.set(id, this.reconcilePresets(existingPresets, defaultValues, controlsByPath));
+    }
+    if (!this.activePreset.has(id) && persisted?.activePresetId !== void 0) {
+      this.activePreset.set(id, persisted.activePresetId);
+    }
+    this.persistPanel(id);
+    this.notify(id);
     this.notifyGlobal();
   }
-  updatePanel(id, name, config, shortcuts) {
+  updatePanel(id, name, config, shortcuts, options = {}) {
+    this.configurePanelRetention(id, options);
     const existing = this.panels.get(id);
     if (!existing) {
-      this.registerPanel(id, name, config, shortcuts);
+      this.registerPanel(id, name, config, shortcuts, options);
       return;
     }
     const controls = this.parseConfig(config, "", shortcuts);
     const controlsByPath = this.mapControlsByPath(controls);
     const defaultValues = this.flattenValues(config, "");
-    const nextValues = {};
-    for (const [path, defaultValue] of Object.entries(defaultValues)) {
-      nextValues[path] = this.normalizePreservedValue(
-        existing.values[path],
-        defaultValue,
-        controlsByPath.get(path)
-      );
-    }
-    this.initTransitionModes(config, "", nextValues);
-    for (const [path, mode] of Object.entries(existing.values)) {
-      if (!path.endsWith(".__mode")) {
-        continue;
-      }
-      const transitionPath = path.slice(0, -"__mode".length - 1);
-      const transitionControl = controlsByPath.get(transitionPath);
-      if (transitionControl?.type === "transition") {
-        nextValues[path] = mode;
-      }
-    }
-    const nextPanel = { id, name, controls, values: nextValues, shortcuts: shortcuts ?? existing.shortcuts };
+    this.initTransitionModes(config, "", defaultValues);
+    const nextValues = this.reconcileValues(defaultValues, existing.values, controlsByPath);
+    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) ?? {};
-    const nextBaseValues = {};
-    for (const [path, defaultValue] of Object.entries(defaultValues)) {
-      nextBaseValues[path] = this.normalizePreservedValue(
-        previousBaseValues[path],
-        defaultValue,
-        controlsByPath.get(path)
-      );
-    }
+    const nextBaseValues = this.reconcileValues(defaultValues, previousBaseValues, controlsByPath);
     for (const [path, value] of Object.entries(nextValues)) {
       if (path.endsWith(".__mode")) {
         nextBaseValues[path] = value;
       }
     }
     this.baseValues.set(id, nextBaseValues);
+    this.defaultValues.set(id, { ...defaultValues });
+    this.presets.set(id, this.reconcilePresets(this.presets.get(id) ?? [], defaultValues, controlsByPath));
+    this.persistPanel(id);
     this.notify(id);
     this.notifyGlobal();
   }
   unregisterPanel(id) {
+    const nextCount = (this.registrationCounts.get(id) ?? 1) - 1;
+    if (nextCount > 0) {
+      this.registrationCounts.set(id, nextCount);
+      return;
+    }
+    this.registrationCounts.delete(id);
     this.panels.delete(id);
-    this.listeners.delete(id);
-    this.snapshots.delete(id);
-    this.actionListeners.delete(id);
-    this.baseValues.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);
+      this.defaultValues.delete(id);
+      this.presets.delete(id);
+      this.activePreset.delete(id);
+      this.persistConfigs.delete(id);
+    }
     this.notifyGlobal();
   }
   updateValue(panelId, path, value) {
+    this.updateValues(panelId, { [path]: value });
+  }
+  updateValues(panelId, updates) {
     const panel = this.panels.get(panelId);
     if (!panel) return;
-    panel.values[path] = value;
+    const validUpdates = {};
+    for (const [path, value] of Object.entries(updates)) {
+      if (!Object.prototype.hasOwnProperty.call(panel.values, path)) {
+        continue;
+      }
+      const control = this.findControlByPath(panel.controls, path);
+      if (control?.type === "action") {
+        continue;
+      }
+      panel.values[path] = value;
+      validUpdates[path] = value;
+    }
+    if (Object.keys(validUpdates).length === 0) {
+      return;
+    }
     const activeId = this.activePreset.get(panelId);
     if (activeId) {
       const presets = this.presets.get(panelId) ?? [];
       const preset = presets.find((p) => p.id === activeId);
-      if (preset) preset.values[path] = value;
+      if (preset) {
+        for (const [path, value] of Object.entries(validUpdates)) {
+          preset.values[path] = value;
+        }
+      }
     } else {
       const base = this.baseValues.get(panelId);
-      if (base) base[path] = value;
+      if (base) {
+        for (const [path, value] of Object.entries(validUpdates)) {
+          base[path] = value;
+        }
+      }
     }
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
+    this.notify(panelId);
+  }
+  resetValues(panelId) {
+    const panel = this.panels.get(panelId);
+    const defaults = this.defaultValues.get(panelId);
+    if (!panel || !defaults) return;
+    panel.values = { ...defaults };
+    this.snapshots.set(panelId, { ...panel.values });
+    this.baseValues.set(panelId, { ...defaults });
+    this.activePreset.set(panelId, null);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   updateSpringMode(panelId, path, mode) {
@@ -109,6 +265,7 @@ var DialStoreClass = class {
     if (!panel) return;
     panel.values[`${path}.__mode`] = mode;
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   getTransitionMode(panelId, path) {
@@ -123,8 +280,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);
@@ -135,7 +294,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) {
@@ -148,7 +311,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) {
@@ -167,6 +334,7 @@ var DialStoreClass = class {
     this.presets.set(panelId, [...existing, preset]);
     this.activePreset.set(panelId, id);
     this.snapshots.set(panelId, { ...panel.values });
+    this.persistPanel(panelId);
     this.notify(panelId);
     return id;
   }
@@ -179,6 +347,7 @@ var DialStoreClass = class {
     panel.values = { ...preset.values };
     this.snapshots.set(panelId, { ...panel.values });
     this.activePreset.set(panelId, presetId);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   deletePreset(panelId, presetId) {
@@ -191,6 +360,7 @@ var DialStoreClass = class {
     if (panel) {
       this.snapshots.set(panelId, { ...panel.values });
     }
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   getPresets(panelId) {
@@ -207,6 +377,7 @@ var DialStoreClass = class {
       this.snapshots.set(panelId, { ...panel.values });
     }
     this.activePreset.set(panelId, null);
+    this.persistPanel(panelId);
     this.notify(panelId);
   }
   resolveShortcutTarget(key, modifier) {
@@ -237,6 +408,94 @@ var DialStoreClass = class {
     }
     return results;
   }
+  configurePanelRetention(id, options) {
+    if (options.retainOnUnmount) {
+      this.retainedPanels.add(id);
+    }
+    const persistConfig = this.normalizePersistConfig(id, options.persist);
+    if (persistConfig) {
+      this.persistConfigs.set(id, persistConfig);
+      this.retainedPanels.add(id);
+    }
+  }
+  reconcileValues(defaultValues, previousValues, controlsByPath) {
+    const nextValues = {};
+    for (const [path, defaultValue] of Object.entries(defaultValues)) {
+      if (path.endsWith(".__mode")) {
+        const transitionPath = path.slice(0, -".__mode".length);
+        const transitionControl = controlsByPath.get(transitionPath);
+        nextValues[path] = transitionControl?.type === "transition" && previousValues[path] !== void 0 ? previousValues[path] : defaultValue;
+        continue;
+      }
+      nextValues[path] = this.normalizePreservedValue(
+        previousValues[path],
+        defaultValue,
+        controlsByPath.get(path)
+      );
+    }
+    return nextValues;
+  }
+  reconcilePresets(presets, defaultValues, controlsByPath) {
+    return presets.map((preset) => ({
+      ...preset,
+      values: this.reconcileValues(defaultValues, preset.values, controlsByPath)
+    }));
+  }
+  normalizePersistConfig(id, persist) {
+    if (!persist) return null;
+    const options = typeof persist === "object" ? persist : {};
+    return {
+      key: options.key ?? `dialkit:${id}`,
+      storage: options.storage ?? "localStorage",
+      presets: options.presets ?? true
+    };
+  }
+  loadPersistedPanel(id) {
+    const config = this.persistConfigs.get(id);
+    if (!config) return null;
+    const storage = this.getStorage(config.storage);
+    if (!storage) return null;
+    try {
+      const raw = storage.getItem(config.key);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      if (parsed?.version !== 1 || typeof parsed !== "object") return null;
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  persistPanel(id) {
+    const config = this.persistConfigs.get(id);
+    if (!config) return;
+    const storage = this.getStorage(config.storage);
+    if (!storage) return;
+    const values = this.snapshots.get(id) ?? this.panels.get(id)?.values;
+    if (!values) return;
+    const state = {
+      version: 1,
+      values,
+      baseValues: this.baseValues.get(id) ?? values,
+      activePresetId: this.activePreset.get(id) ?? null
+    };
+    if (config.presets) {
+      state.presets = this.presets.get(id) ?? [];
+    }
+    try {
+      storage.setItem(config.key, JSON.stringify(state));
+    } catch {
+    }
+  }
+  getStorage(kind) {
+    if (typeof globalThis === "undefined" || !("window" in globalThis)) {
+      return null;
+    }
+    try {
+      return kind === "sessionStorage" ? globalThis.window?.sessionStorage ?? null : globalThis.window?.localStorage ?? null;
+    } catch {
+      return null;
+    }
+  }
   findControlByPath(controls, path) {
     for (const control of controls) {
       if (control.path === path) return control;
@@ -251,6 +510,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) {
@@ -366,10 +628,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) {
@@ -385,11 +647,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) {
@@ -461,26 +719,35 @@ var DialStoreClass = class {
     return map;
   }
 };
-var DialStore = new DialStoreClass();
+var DialStore = /* @__PURE__ */ new DialStoreClass();
 
 // src/vue/useDialKit.ts
 var dialKitInstance = 0;
 function useDialKit(name, config, options) {
-  const panelId = `${name}-${++dialKitInstance}`;
+  return useDialKitController(name, config, options).values;
+}
+function useDialKitController(name, config, options) {
+  const hasStableId = options?.id !== void 0;
+  const panelId = options?.id ?? `${name}-${++dialKitInstance}`;
   const configRef = shallowRef(config);
   const onActionRef = ref(options?.onAction);
   const shortcutsRef = shallowRef(options?.shortcuts);
-  const values = ref(DialStore.getValues(panelId));
+  const persistRef = shallowRef(options?.persist);
+  const flatValues = ref(DialStore.getValues(panelId));
   const mounted = ref(false);
   const serializedConfig = computed(() => JSON.stringify(config));
   const serializedShortcuts = computed(() => JSON.stringify(options?.shortcuts));
+  const serializedPersist = computed(() => JSON.stringify(options?.persist));
   let unsubscribeValues;
   let unsubscribeActions;
   const register = () => {
-    DialStore.registerPanel(panelId, name, configRef.value, shortcutsRef.value);
-    values.value = DialStore.getValues(panelId);
+    DialStore.registerPanel(panelId, name, configRef.value, shortcutsRef.value, {
+      retainOnUnmount: hasStableId,
+      persist: persistRef.value
+    });
+    flatValues.value = DialStore.getValues(panelId);
     unsubscribeValues = DialStore.subscribe(panelId, () => {
-      values.value = DialStore.getValues(panelId);
+      flatValues.value = DialStore.getValues(panelId);
     });
     unsubscribeActions = DialStore.subscribeActions(panelId, (action) => {
       onActionRef.value?.(action);
@@ -492,12 +759,19 @@ function useDialKit(name, config, options) {
   watch(() => options?.shortcuts, (next) => {
     shortcutsRef.value = next;
   });
-  watch([serializedConfig, serializedShortcuts], () => {
+  watch(() => options?.persist, (next) => {
+    persistRef.value = next;
+  });
+  watch([serializedConfig, serializedShortcuts, serializedPersist], () => {
     configRef.value = config;
     shortcutsRef.value = options?.shortcuts;
+    persistRef.value = options?.persist;
     if (mounted.value) {
-      DialStore.updatePanel(panelId, name, configRef.value, shortcutsRef.value);
-      values.value = DialStore.getValues(panelId);
+      DialStore.updatePanel(panelId, name, configRef.value, shortcutsRef.value, {
+        retainOnUnmount: hasStableId,
+        persist: persistRef.value
+      });
+      flatValues.value = DialStore.getValues(panelId);
     }
   });
   onMounted(register);
@@ -509,88 +783,1344 @@ function useDialKit(name, config, options) {
     unsubscribeActions?.();
     DialStore.unregisterPanel(panelId);
   });
-  return computed(() => buildResolvedValues(configRef.value, values.value, ""));
+  const values = computed(() => resolveDialValues(configRef.value, flatValues.value));
+  return {
+    values,
+    setValue(path, value) {
+      DialStore.updateValue(panelId, path, value);
+    },
+    setValues(nextValues) {
+      DialStore.updateValues(panelId, flattenDialValueUpdates(configRef.value, nextValues));
+    },
+    resetValues() {
+      DialStore.resetValues(panelId);
+    },
+    getValues() {
+      return resolveDialValues(configRef.value, DialStore.getValues(panelId));
+    }
+  };
 }
-function buildResolvedValues(config, flatValues, prefix) {
-  const result = {};
-  for (const [key, configValue] of Object.entries(config)) {
-    if (key === "_collapsed") continue;
-    const path = prefix ? `${prefix}.${key}` : key;
-    if (Array.isArray(configValue) && configValue.length <= 4 && typeof configValue[0] === "number") {
-      result[key] = flatValues[path] ?? configValue[0];
-    } else if (typeof configValue === "number" || typeof configValue === "boolean" || typeof configValue === "string") {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isSpringConfig(configValue) || isEasingConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isActionConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue;
-    } else if (isSelectConfig(configValue)) {
-      const defaultValue = configValue.default ?? getFirstOptionValue(configValue.options);
-      result[key] = flatValues[path] ?? defaultValue;
-    } else if (isColorConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue.default ?? "#000000";
-    } else if (isTextConfig(configValue)) {
-      result[key] = flatValues[path] ?? configValue.default ?? "";
-    } else if (typeof configValue === "object" && configValue !== null) {
-      result[key] = buildResolvedValues(configValue, flatValues, path);
+
+// src/vue/useDialTimeline.ts
+import { computed as computed2, onMounted as onMounted2, onUnmounted as onUnmounted2, shallowRef as shallowRef2, watch as watch2 } from "vue";
+
+// 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);
   }
-  return result;
+  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/transition-math.ts
+function round2(value) {
+  return Math.round(value * 100) / 100;
 }
-function hasType(value, type) {
-  return typeof value === "object" && value !== null && "type" in value && value.type === type;
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
 }
-function isSpringConfig(value) {
-  return hasType(value, "spring");
+function isTransitionConfig(value) {
+  return isSpringConfigValue(value) || isEasingConfigValue(value);
 }
-function isEasingConfig(value) {
-  return hasType(value, "easing");
+function isPhysicsSpring(transition) {
+  return transition.type === "spring" && (transition.stiffness !== void 0 || transition.damping !== void 0 || transition.mass !== void 0);
 }
-function isActionConfig(value) {
-  return hasType(value, "action");
+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 isSelectConfig(value) {
-  return hasType(value, "select") && "options" in value && Array.isArray(value.options);
+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 isColorConfig(value) {
-  return hasType(value, "color");
+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 isTextConfig(value) {
-  return hasType(value, "text");
+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 getFirstOptionValue(options) {
-  const first = options[0];
-  return typeof first === "string" ? first : first.value;
+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 {
+    transition: { type: "spring", bounce: raw.bounce ?? 0.2, visualDuration: safeDuration },
+    duration: safeDuration,
+    isPhysics: false
+  };
 }
 
-// src/vue/directives/dialkit.ts
-import {
-  createApp,
-  defineComponent as defineComponent16,
-  h as h16,
-  shallowRef as shallowRef2
-} from "vue";
-
-// src/vue/components/DialRoot.ts
-import { defineComponent as defineComponent15, h as h15, onMounted as onMounted10, onUnmounted as onUnmounted9, ref as ref13, Teleport as Teleport3 } from "vue";
-
-// src/vue/components/Panel.ts
-import { Fragment, defineComponent as defineComponent14, h as h14, onMounted as onMounted9, onUnmounted as onUnmounted8, ref as ref12 } from "vue";
-import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion-v";
-
-// src/icons.ts
-var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
-var ICON_CHECK = "M5 12.75L10 19L19 5";
-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",
-  body: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12"
-};
-var ICON_ADD_PRESET = [
-  "M4 6H20",
-  "M4 12H10",
-  "M15 15L21 15",
-  "M18 12V18",
+// 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 h22 = hex.slice(1);
+  if (h22.length === 3) h22 = h22.split("").map((c) => c + c).join("");
+  return [
+    parseInt(h22.slice(0, 2), 16),
+    parseInt(h22.slice(2, 4), 16),
+    parseInt(h22.slice(4, 6), 16),
+    h22.length === 8 ? parseInt(h22.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/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/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/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/vue/useDialTimeline.ts
+var timelineInstance = 0;
+function useDialTimeline(name, config, options) {
+  const hasStableId = options?.id !== void 0;
+  const panelId = options?.id ?? `${name}-${++timelineInstance}`;
+  const serializedConfig = computed2(() => JSON.stringify(config));
+  const serializedPersist = computed2(() => JSON.stringify(options?.persist));
+  const serializedLoop = computed2(() => JSON.stringify(options?.loop));
+  const parsed = computed2(() => {
+    serializedConfig.value;
+    return parseTimelineConfig(config);
+  });
+  const flatValues = shallowRef2(DialStore.getValues(panelId));
+  const transport = shallowRef2(TimelineStore.getTransport(panelId));
+  const staticTimeline = computed2(() => computeStaticTimeline(parsed.value, flatValues.value));
+  const meta = computed2(() => {
+    serializedLoop.value;
+    return buildTimelineMeta(
+      panelId,
+      name,
+      staticTimeline.value.duration,
+      parsed.value,
+      options?.loop
+    );
+  });
+  let mounted = false;
+  let unsubscribeValues;
+  let unsubscribeTransport;
+  const play = () => TimelineStore.play(panelId);
+  const pause = () => TimelineStore.pause(panelId);
+  const replay = () => TimelineStore.replay(panelId);
+  const seek = (time) => TimelineStore.seek(panelId, time);
+  watch2([serializedConfig, serializedPersist], () => {
+    if (!mounted) return;
+    DialStore.updatePanel(panelId, name, parsed.value.dialConfig, void 0, {
+      retainOnUnmount: hasStableId,
+      persist: options?.persist,
+      kind: "timeline"
+    });
+    flatValues.value = DialStore.getValues(panelId);
+  });
+  watch2(meta, (nextMeta) => {
+    if (mounted) TimelineStore.update(nextMeta);
+  });
+  onMounted2(() => {
+    unsubscribeValues = DialStore.subscribe(panelId, () => {
+      flatValues.value = DialStore.getValues(panelId);
+    });
+    unsubscribeTransport = TimelineStore.subscribe(panelId, () => {
+      transport.value = TimelineStore.getTransport(panelId);
+    });
+    DialStore.registerPanel(panelId, name, parsed.value.dialConfig, void 0, {
+      retainOnUnmount: hasStableId,
+      persist: options?.persist,
+      kind: "timeline"
+    });
+    flatValues.value = DialStore.getValues(panelId);
+    TimelineStore.register(meta.value, { autoplay: options?.autoplay ?? true });
+    transport.value = TimelineStore.getTransport(panelId);
+    mounted = true;
+  });
+  onUnmounted2(() => {
+    mounted = false;
+    unsubscribeValues?.();
+    unsubscribeTransport?.();
+    TimelineStore.unregister(panelId);
+    DialStore.unregisterPanel(panelId);
+  });
+  return computed2(() => {
+    const currentStatic = staticTimeline.value;
+    return buildTimelineValues(
+      currentStatic.clips,
+      transport.value,
+      currentStatic.duration,
+      resolveTimelineLoop(options?.loop).start,
+      { play, pause, replay, seek }
+    );
+  });
+}
+
+// src/vue/directives/dialkit.ts
+import {
+  createApp,
+  defineComponent as defineComponent17,
+  h as h17,
+  shallowRef as shallowRef3
+} from "vue";
+
+// src/vue/components/DialRoot.ts
+import { computed as computed6, defineComponent as defineComponent16, h as h16, nextTick as nextTick3, onMounted as onMounted12, onUnmounted as onUnmounted11, ref as ref14, Teleport as Teleport3 } from "vue";
+
+// src/vue/components/Folder.ts
+import { defineComponent, h, onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref2 } from "vue";
+import { AnimatePresence, motion } from "motion-v";
+
+// src/icons.ts
+var ICON_CHEVRON = "M6 9.5L12 15.5L18 9.5";
+var ICON_CHECK = "M5 12.75L10 19L19 5";
+var ICON_PAUSE = [
+  "M6.75 3C5.23122 3 4 4.23122 4 5.75V18.25C4 19.7688 5.23122 21 6.75 21H7.25C8.76878 21 10 19.7688 10 18.25V5.75C10 4.23122 8.76878 3 7.25 3H6.75Z",
+  "M16.75 3C15.2312 3 14 4.23122 14 5.75V18.25C14 19.7688 15.2312 21 16.75 21H17.25C18.7688 21 20 19.7688 20 18.25V5.75C20 4.23122 18.7688 3 17.25 3H16.75Z"
+];
+var ICON_PLAY = "M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z";
+var ICON_TIMELINE = [
+  "M18.868 10C20.8517 10.0003 22.2886 11.8914 21.7577 13.8027L20.369 18.8027C20.0083 20.1012 18.826 20.9999 17.4784 21H6.51941C5.17179 21 3.98948 20.1012 3.62878 18.8027L2.24011 13.8027C1.7092 11.8913 3.14603 10.0003 5.12976 10H18.868Z",
+  "M18.9989 6.5C19.5511 6.50007 19.9989 6.94776 19.9989 7.5C19.9989 8.05224 19.5511 8.49993 18.9989 8.5H4.9989C4.44661 8.5 3.9989 8.05228 3.9989 7.5C3.9989 6.94772 4.44661 6.5 4.9989 6.5H18.9989Z",
+  "M16.9989 3C17.5511 3.00007 17.9989 3.44776 17.9989 4C17.9989 4.55224 17.5511 4.99993 16.9989 5H6.9989C6.44661 5 5.9989 4.55228 5.9989 4C5.9989 3.44772 6.44661 3 6.9989 3H16.9989Z"
+];
+var ICON_CLIPBOARD = {
+  board: "M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z",
+  sparkle: "M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z",
+  body: "M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12"
+};
+var ICON_ADD_PRESET = [
+  "M4 6H20",
+  "M4 12H10",
+  "M15 15L21 15",
+  "M18 12V18",
   "M4 18H10"
 ];
 var ICON_TRASH = [
@@ -610,8 +2140,6 @@ var ICON_PANEL = {
 };
 
 // src/vue/components/Folder.ts
-import { defineComponent, h, onMounted as onMounted2, onUnmounted as onUnmounted2, ref as ref2 } from "vue";
-import { AnimatePresence, motion } from "motion-v";
 var Folder = defineComponent({
   name: "DialKitFolder",
   props: {
@@ -623,6 +2151,10 @@ var Folder = defineComponent({
       type: null,
       required: false,
       default: null
+    },
+    panelHeightOffset: {
+      type: Number,
+      default: 10
     }
   },
   emits: ["openChange"],
@@ -639,7 +2171,7 @@ var Folder = defineComponent({
       };
       window.addEventListener("resize", resizeHandler);
     }
-    onUnmounted2(() => {
+    onUnmounted3(() => {
       if (resizeHandler) window.removeEventListener("resize", resizeHandler);
     });
     const handleToggle = () => {
@@ -650,7 +2182,7 @@ var Folder = defineComponent({
       emit("openChange", next);
     };
     let ro = null;
-    onMounted2(() => {
+    onMounted3(() => {
       if (!props.isRoot || typeof ResizeObserver === "undefined") return;
       const el = contentRef.value;
       if (!el) return;
@@ -667,7 +2199,7 @@ var Folder = defineComponent({
         contentHeight.value = el.offsetHeight;
       }
     });
-    onUnmounted2(() => {
+    onUnmounted3(() => {
       ro?.disconnect();
     });
     const renderHeader = () => h("div", {
@@ -722,7 +2254,8 @@ var Folder = defineComponent({
     };
     const folderContent = () => h("div", {
       ref: props.isRoot ? contentRef : void 0,
-      class: `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`
+      class: `dialkit-folder ${props.isRoot ? "dialkit-folder-root" : ""}`,
+      "data-open": String(isOpen.value)
     }, [
       renderHeader(),
       renderContent()
@@ -734,7 +2267,7 @@ var Folder = defineComponent({
         }
         const panelStyle = isOpen.value ? {
           width: 280,
-          height: contentHeight.value !== void 0 ? Math.min(contentHeight.value + 10, windowHeight.value - 32) : "auto",
+          height: contentHeight.value !== void 0 ? Math.min(contentHeight.value + props.panelHeightOffset, windowHeight.value - 32) : "auto",
           borderRadius: 14,
           boxShadow: "var(--dial-shadow)",
           cursor: void 0,
@@ -761,8 +2294,12 @@ var Folder = defineComponent({
   }
 });
 
+// src/vue/components/Panel.ts
+import { Fragment, defineComponent as defineComponent14, h as h14, onMounted as onMounted10, onUnmounted as onUnmounted9, ref as ref12 } from "vue";
+import { AnimatePresence as AnimatePresence4, motion as motion4 } from "motion-v";
+
 // src/vue/components/Slider.ts
-import { defineComponent as defineComponent2, h as h2, computed as computed2, nextTick, onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref3, watch as watch2 } from "vue";
+import { defineComponent as defineComponent2, h as h2, computed as computed3, nextTick, onMounted as onMounted4, onUnmounted as onUnmounted4, ref as ref3, watch as watch3 } from "vue";
 import { animate, motionValue } from "motion-v";
 
 // src/shortcut-utils.ts
@@ -869,9 +2406,9 @@ var Slider = defineComponent2({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const min = computed2(() => props.min ?? 0);
-    const max = computed2(() => props.max ?? 1);
-    const step = computed2(() => props.step ?? 0.01);
+    const min = computed3(() => props.min ?? 0);
+    const max = computed3(() => props.max ?? 1);
+    const step = computed3(() => props.step ?? 0.01);
     const wrapperRef = ref3(null);
     const trackRef = ref3(null);
     const fillRef = ref3(null);
@@ -891,9 +2428,9 @@ var Slider = defineComponent2({
     const handleOpacityMv = motionValue(0);
     const handleScaleXMv = motionValue(0.25);
     const handleScaleYMv = motionValue(1);
-    const percentage = computed2(() => (props.value - min.value) / (max.value - min.value) * 100);
-    const isActive = computed2(() => isInteracting.value || isHovered.value);
-    const displayValue = computed2(() => props.value.toFixed(decimalsForStep(step.value)));
+    const percentage = computed3(() => (props.value - min.value) / (max.value - min.value) * 100);
+    const isActive = computed3(() => isInteracting.value || isHovered.value);
+    const displayValue = computed3(() => props.value.toFixed(decimalsForStep(step.value)));
     let pointerDownPos = null;
     let isClickFlag = true;
     let wrapperRect = null;
@@ -1082,15 +2619,15 @@ var Slider = defineComponent2({
         isValueHovered.value = false;
       }
     };
-    watch2(() => props.value, () => {
+    watch3(() => props.value, () => {
       if (!isInteracting.value && !snapAnim) {
         fillPercent.jump(percentage.value);
       }
     });
-    watch2([isInteracting, isHovered, isDragging, () => props.value], () => {
+    watch3([isInteracting, isHovered, isDragging, () => props.value], () => {
       animateHandleState();
     });
-    watch2([isValueHovered, showInput, isValueEditable], () => {
+    watch3([isValueHovered, showInput, isValueEditable], () => {
       if (hoverTimeout) {
         clearTimeout(hoverTimeout);
         hoverTimeout = null;
@@ -1104,14 +2641,14 @@ var Slider = defineComponent2({
         isValueEditable.value = false;
       }
     });
-    watch2(showInput, async (visible) => {
+    watch3(showInput, async (visible) => {
       if (!visible) return;
       await nextTick();
       inputRef.value?.focus();
       inputRef.value?.select();
     });
-    const discreteSteps = computed2(() => (max.value - min.value) / step.value);
-    const hashMarks = computed2(() => {
+    const discreteSteps = computed3(() => (max.value - min.value) / step.value);
+    const hashMarks = computed3(() => {
       const marks = [];
       if (discreteSteps.value <= 10) {
         const count = Math.max(0, Math.floor(discreteSteps.value) - 1);
@@ -1132,7 +2669,7 @@ var Slider = defineComponent2({
     let unsubHandleOpacity = null;
     let unsubHandleScaleX = null;
     let unsubHandleScaleY = null;
-    onMounted3(() => {
+    onMounted4(() => {
       unsubFill = fillPercent.on("change", applyFillStyles);
       unsubRubber = rubberStretchPx.on("change", applyRubberStyles);
       unsubHandleOpacity = handleOpacityMv.on("change", applyHandleVisualStyles);
@@ -1143,7 +2680,7 @@ var Slider = defineComponent2({
       applyHandleVisualStyles();
       animateHandleState();
     });
-    onUnmounted3(() => {
+    onUnmounted4(() => {
       if (hoverTimeout) clearTimeout(hoverTimeout);
       snapAnim?.stop();
       rubberAnim?.stop();
@@ -1232,7 +2769,7 @@ var Slider = defineComponent2({
 import { defineComponent as defineComponent4, h as h4 } from "vue";
 
 // src/vue/components/SegmentedControl.ts
-import { defineComponent as defineComponent3, h as h3, nextTick as nextTick2, onMounted as onMounted4, onUnmounted as onUnmounted4, ref as ref4, watch as watch3 } from "vue";
+import { defineComponent as defineComponent3, h as h3, nextTick as nextTick2, onMounted as onMounted5, onUnmounted as onUnmounted5, ref as ref4, watch as watch4 } from "vue";
 import { animate as animate2 } from "motion";
 var SegmentedControl = defineComponent3({
   name: "DialKitSegmentedControl",
@@ -1303,7 +2840,7 @@ var SegmentedControl = defineComponent3({
       );
     };
     let ro;
-    onMounted4(() => {
+    onMounted5(() => {
       nextTick2(() => {
         updatePill(false);
         hasAnimated = true;
@@ -1313,11 +2850,11 @@ var SegmentedControl = defineComponent3({
         ro.observe(containerRef.value);
       }
     });
-    onUnmounted4(() => {
+    onUnmounted5(() => {
       pillAnim?.stop();
       ro?.disconnect();
     });
-    watch3(
+    watch4(
       () => props.value,
       () => {
         updatePill(true);
@@ -1381,10 +2918,10 @@ var Toggle = defineComponent4({
 });
 
 // src/vue/components/SpringControl.ts
-import { defineComponent as defineComponent6, h as h6, onMounted as onMounted5, onUnmounted as onUnmounted5, ref as ref5 } from "vue";
+import { defineComponent as defineComponent6, h as h6, onMounted as onMounted6, onUnmounted as onUnmounted6, ref as ref5 } from "vue";
 
 // src/vue/components/SpringVisualization.ts
-import { defineComponent as defineComponent5, h as h5, computed as computed3 } from "vue";
+import { defineComponent as defineComponent5, h as h5, computed as computed4 } from "vue";
 function generateSpringCurve(stiffness, damping, mass, duration) {
   const points = [];
   const steps = 100;
@@ -1418,7 +2955,7 @@ var SpringVisualization = defineComponent5({
   setup(props) {
     const width = 256;
     const height = 140;
-    const pathData = computed3(() => {
+    const pathData = computed4(() => {
       let stiffness;
       let damping;
       let mass;
@@ -1494,12 +3031,12 @@ var SpringControl = defineComponent6({
   setup(props, { emit }) {
     const mode = ref5(DialStore.getSpringMode(props.panelId, props.path));
     let unsub;
-    onMounted5(() => {
+    onMounted6(() => {
       unsub = DialStore.subscribe(props.panelId, () => {
         mode.value = DialStore.getSpringMode(props.panelId, props.path);
       });
     });
-    onUnmounted5(() => {
+    onUnmounted6(() => {
       unsub?.();
     });
     const isSimpleMode = () => mode.value === "simple";
@@ -1595,10 +3132,10 @@ var SpringControl = defineComponent6({
 });
 
 // src/vue/components/TransitionControl.ts
-import { defineComponent as defineComponent8, h as h8, onMounted as onMounted6, onUnmounted as onUnmounted6, ref as ref6 } from "vue";
+import { defineComponent as defineComponent8, h as h8, onMounted as onMounted7, onUnmounted as onUnmounted7, ref as ref6 } from "vue";
 
 // src/vue/components/EasingVisualization.ts
-import { defineComponent as defineComponent7, h as h7, computed as computed4 } from "vue";
+import { defineComponent as defineComponent7, h as h7, computed as computed5 } from "vue";
 var EasingVisualization = defineComponent7({
   name: "DialKitEasingVisualization",
   props: {
@@ -1612,7 +3149,7 @@ var EasingVisualization = defineComponent7({
     const pad = 10;
     const inner = size - pad * 2;
     const unit = inner / 2;
-    const curve = computed4(() => {
+    const curve = computed5(() => {
       const [x1, y1, x2, y2] = props.easing.ease;
       const toSvg = (nx, ny) => ({
         x: pad + (nx + 0.5) * unit,
@@ -1715,18 +3252,20 @@ var TransitionControl = defineComponent8({
     value: {
       type: Object,
       required: true
-    }
+    },
+    hideDuration: { type: Boolean, default: false },
+    durationControl: Object
   },
   emits: ["change"],
   setup(props, { emit }) {
     const mode = ref6(DialStore.getTransitionMode(props.panelId, props.path));
     let unsub;
-    onMounted6(() => {
+    onMounted7(() => {
       unsub = DialStore.subscribe(props.panelId, () => {
         mode.value = DialStore.getTransitionMode(props.panelId, props.path);
       });
     });
-    onUnmounted6(() => unsub?.());
+    onUnmounted7(() => unsub?.());
     const cache = {
       easing: props.value.type === "easing" ? { ...props.value } : { type: "easing", duration: 0.3, ease: [1, -0.4, 0.5, 1] },
       simple: props.value.type === "spring" && props.value.visualDuration !== void 0 ? { ...props.value } : { type: "spring", visualDuration: 0.3, bounce: 0.2 },
@@ -1778,6 +3317,18 @@ var TransitionControl = defineComponent8({
       const isSimpleSpring = mode.value === "simple";
       const currentSpring = spring();
       const currentEasing = easing();
+      const durationSlider = !props.hideDuration && (isEasing || isSimpleSpring) ? h8(Slider, {
+        label: "Duration",
+        value: props.durationControl?.value ?? (isEasing ? currentEasing.duration : currentSpring.visualDuration ?? 0.3),
+        min: props.durationControl?.min ?? 0.1,
+        max: props.durationControl?.max ?? (isEasing ? 2 : 1),
+        step: props.durationControl?.step ?? 0.05,
+        unit: "s",
+        onChange: props.durationControl?.onChange ?? ((next) => {
+          if (isEasing) emit("change", { ...currentEasing, duration: next });
+          else handleSpringUpdate("visualDuration", next);
+        })
+      }) : null;
       return h8(Folder, { title: props.label, defaultOpen: true }, {
         default: () => [
           h8("div", { style: { display: "flex", flexDirection: "column", gap: "6px" } }, [
@@ -1799,29 +3350,11 @@ var TransitionControl = defineComponent8({
               h8(Slider, { label: "y1", value: currentEasing.ease[1], min: -1, max: 2, step: 0.01, onChange: (next) => updateEase(1, next) }),
               h8(Slider, { label: "x2", value: currentEasing.ease[2], min: 0, max: 1, step: 0.01, onChange: (next) => updateEase(2, next) }),
               h8(Slider, { label: "y2", value: currentEasing.ease[3], min: -1, max: 2, step: 0.01, onChange: (next) => updateEase(3, next) }),
-              h8(Slider, {
-                label: "Duration",
-                value: currentEasing.duration,
-                min: 0.1,
-                max: 2,
-                step: 0.05,
-                unit: "s",
-                onChange: (next) => emit("change", { ...currentEasing, duration: next })
-              }),
               h8(EaseTextInput, {
                 ease: currentEasing.ease,
                 onChange: (next) => emit("change", { ...currentEasing, ease: next })
               })
             ] : isSimpleSpring ? [
-              h8(Slider, {
-                label: "Duration",
-                value: currentSpring.visualDuration ?? 0.3,
-                min: 0.1,
-                max: 1,
-                step: 0.05,
-                unit: "s",
-                onChange: (next) => handleSpringUpdate("visualDuration", next)
-              }),
               h8(Slider, {
                 label: "Bounce",
                 value: currentSpring.bounce ?? 0.2,
@@ -1855,7 +3388,8 @@ var TransitionControl = defineComponent8({
                 step: 0.1,
                 onChange: (next) => handleSpringUpdate("mass", next)
               })
-            ]
+            ],
+            durationSlider
           ])
         ]
       });
@@ -1891,8 +3425,28 @@ var TextControl = defineComponent9({
 });
 
 // src/vue/components/SelectControl.ts
-import { Teleport, defineComponent as defineComponent10, h as h10, onMounted as onMounted7, ref as ref8, watch as watch4 } from "vue";
+import { Teleport, defineComponent as defineComponent10, h as h10, onMounted as onMounted8, ref as ref8, watch as watch5 } from "vue";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion-v";
+
+// src/dropdown-position.ts
+function getDropdownPosition(trigger, portalRoot, options = {}) {
+  const { dropdownHeight = 0, gap = 4, allowAbove = true } = options;
+  const triggerRect = trigger.getBoundingClientRect();
+  const rootRect = portalRoot.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - triggerRect.bottom - gap;
+  const above = allowAbove && spaceBelow < dropdownHeight && triggerRect.top > spaceBelow;
+  return {
+    top: above ? triggerRect.top - rootRect.top - dropdownHeight - gap : triggerRect.bottom - rootRect.top + gap,
+    left: triggerRect.left - rootRect.left,
+    width: triggerRect.width,
+    above
+  };
+}
+function getDialKitPortalRoot(trigger) {
+  return trigger?.closest(".dialkit-root") ?? null;
+}
+
+// src/vue/components/SelectControl.ts
 function toTitleCase(value) {
   return value.replace(/\b\w/g, (char) => char.toUpperCase());
 }
@@ -1921,17 +3475,9 @@ var SelectControl = defineComponent10({
     const normalizedOptions = () => normalizeOptions(props.options);
     const selectedLabel = () => normalizedOptions().find((option) => option.value === props.value)?.label ?? props.value;
     const updatePos = () => {
-      if (!triggerRef.value) return;
-      const rect = triggerRef.value.getBoundingClientRect();
+      if (!triggerRef.value || !portalTarget.value) return;
       const dropdownHeight = 8 + normalizedOptions().length * 36;
-      const spaceBelow = window.innerHeight - rect.bottom - 4;
-      const above = spaceBelow < dropdownHeight && rect.top > spaceBelow;
-      pos.value = {
-        top: above ? rect.top - 4 : rect.bottom + 4,
-        left: rect.left,
-        width: rect.width,
-        above
-      };
+      pos.value = getDropdownPosition(triggerRef.value, portalTarget.value, { dropdownHeight });
     };
     const openDropdown = () => {
       updatePos();
@@ -1956,7 +3502,7 @@ var SelectControl = defineComponent10({
       if (isOpen.value) closeDropdown();
       else openDropdown();
     };
-    watch4(isOpen, (open, _, onCleanup) => {
+    watch5(isOpen, (open, _, onCleanup) => {
       if (!open) return;
       const handleViewportChange = () => updatePos();
       const handleDocumentClick = (event) => {
@@ -1974,9 +3520,8 @@ var SelectControl = defineComponent10({
         window.removeEventListener("scroll", handleViewportChange, true);
       });
     });
-    onMounted7(() => {
-      const root = triggerRef.value?.closest(".dialkit-root");
-      portalTarget.value = root ?? document.body;
+    onMounted8(() => {
+      portalTarget.value = getDialKitPortalRoot(triggerRef.value) ?? document.body;
     });
     return () => h10("div", { class: "dialkit-select-row" }, [
       h10("button", {
@@ -2012,16 +3557,11 @@ var SelectControl = defineComponent10({
             exit: { opacity: 0, y: pos.value.above ? 8 : -8, scale: 0.95 },
             transition: { type: "spring", visualDuration: 0.15, bounce: 0 },
             style: {
-              position: "fixed",
+              position: "absolute",
               left: `${pos.value.left}px`,
+              top: `${pos.value.top}px`,
               width: `${pos.value.width}px`,
-              ...pos.value.above ? {
-                bottom: `${window.innerHeight - pos.value.top}px`,
-                transformOrigin: "bottom"
-              } : {
-                top: `${pos.value.top}px`,
-                transformOrigin: "top"
-              }
+              transformOrigin: pos.value.above ? "bottom" : "top"
             }
           }, normalizedOptions().map((option) => h10("button", {
             key: option.value,
@@ -2039,7 +3579,7 @@ var SelectControl = defineComponent10({
 });
 
 // src/vue/components/ColorControl.ts
-import { defineComponent as defineComponent11, h as h11, ref as ref9, watch as watch5 } from "vue";
+import { defineComponent as defineComponent11, h as h11, ref as ref9, watch as watch6 } from "vue";
 var HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
 function expandShorthandHex(hex) {
   if (hex.length !== 4) return hex;
@@ -2058,7 +3598,7 @@ var ColorControl = defineComponent11({
     const isEditing = ref9(false);
     const editValue = ref9(props.value);
     const colorInputRef = ref9(null);
-    watch5(() => props.value, (value) => {
+    watch6(() => props.value, (value) => {
       if (!isEditing.value) editValue.value = value;
     });
     const submit = () => {
@@ -2113,7 +3653,7 @@ var ColorControl = defineComponent11({
 });
 
 // src/vue/components/PresetManager.ts
-import { Teleport as Teleport2, defineComponent as defineComponent12, h as h12, ref as ref10, watch as watch6 } from "vue";
+import { Teleport as Teleport2, defineComponent as defineComponent12, h as h12, ref as ref10, watch as watch7 } from "vue";
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion-v";
 var PresetManager = defineComponent12({
   name: "DialKitPresetManager",
@@ -2163,7 +3703,7 @@ var PresetManager = defineComponent12({
       if (isOpen.value) close();
       else open();
     };
-    watch6(isOpen, (open2, _, onCleanup) => {
+    watch7(isOpen, (open2, _, onCleanup) => {
       if (!open2) return;
       const handler = (event) => {
         const target = event.target;
@@ -2261,7 +3801,7 @@ var PresetManager = defineComponent12({
 });
 
 // src/vue/components/ShortcutListener.ts
-import { defineComponent as defineComponent13, inject, onMounted as onMounted8, onUnmounted as onUnmounted7, provide, ref as ref11 } from "vue";
+import { defineComponent as defineComponent13, inject, onMounted as onMounted9, onUnmounted as onUnmounted8, provide, ref as ref11 } from "vue";
 var ShortcutKey = /* @__PURE__ */ Symbol("DialKitShortcut");
 function useShortcutContext() {
   return inject(ShortcutKey, {
@@ -2441,7 +3981,7 @@ var ShortcutListener = defineComponent13({
       activePanelId.value = null;
       activePath.value = null;
     };
-    onMounted8(() => {
+    onMounted9(() => {
       window.addEventListener("keydown", handleKeyDown);
       window.addEventListener("keyup", handleKeyUp);
       window.addEventListener("wheel", handleWheel, { passive: false });
@@ -2450,7 +3990,7 @@ var ShortcutListener = defineComponent13({
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("blur", handleWindowBlur);
     });
-    onUnmounted7(() => {
+    onUnmounted8(() => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("wheel", handleWheel);
@@ -2478,9 +4018,15 @@ var Panel = defineComponent14({
     inline: {
       type: Boolean,
       default: false
-    }
+    },
+    variant: {
+      type: String,
+      default: "root"
+    },
+    toolbarExtra: Function
   },
-  setup(props) {
+  emits: ["openChange"],
+  setup(props, { emit }) {
     const shortcutCtx = useShortcutContext();
     const values = ref12(DialStore.getValues(props.panel.id));
     const presets = ref12(DialStore.getPresets(props.panel.id));
@@ -2489,14 +4035,14 @@ var Panel = defineComponent14({
     const hasShortcuts = () => Object.keys(DialStore.getPanel(props.panel.id)?.shortcuts ?? {}).length > 0;
     let unsubscribe;
     let copiedTimeout = null;
-    onMounted9(() => {
+    onMounted10(() => {
       unsubscribe = DialStore.subscribe(props.panel.id, () => {
         values.value = DialStore.getValues(props.panel.id);
         presets.value = DialStore.getPresets(props.panel.id);
         activePresetId.value = DialStore.getActivePresetId(props.panel.id);
       });
     });
-    onUnmounted8(() => {
+    onUnmounted9(() => {
       unsubscribe?.();
       if (copiedTimeout) {
         window.clearTimeout(copiedTimeout);
@@ -2529,6 +4075,9 @@ Apply these values as the new defaults in the useDialKit call.`;
         copied.value = false;
       }, 1500);
     };
+    const handleOpenChange = (open) => {
+      emit("openChange", open);
+    };
     const renderControl = (control) => {
       const value = values.value[control.path];
       switch (control.type) {
@@ -2695,15 +4244,32 @@ Apply these values as the new defaults in the useDialKit call.`;
             })
           ]),
           "Copy"
-        ])
+        ]),
+        props.toolbarExtra?.()
       ]);
+      if (props.variant === "section") {
+        return h14(Folder, {
+          title: props.panel.name,
+          defaultOpen: props.defaultOpen,
+          onOpenChange: handleOpenChange
+        }, {
+          default: () => [
+            h14("div", {
+              class: "dialkit-panel-section-toolbar",
+              onClick: (event) => event.stopPropagation()
+            }, [toolbarNode]),
+            ...props.panel.controls.map(renderControl)
+          ]
+        });
+      }
       return h14("div", { class: "dialkit-panel-wrapper" }, [
         h14(Folder, {
           title: props.panel.name,
           defaultOpen: props.defaultOpen,
           isRoot: true,
           inline: props.inline,
-          toolbar: () => toolbarNode
+          toolbar: () => toolbarNode,
+          onOpenChange: handleOpenChange
         }, {
           default: () => props.panel.controls.map(renderControl)
         })
@@ -2712,9 +4278,106 @@ Apply these values as the new defaults in the useDialKit call.`;
   }
 });
 
+// src/vue/components/Timeline/TimelineToggleButton.ts
+import { defineComponent as defineComponent15, h as h15, onMounted as onMounted11, onUnmounted as onUnmounted10, ref as ref13 } from "vue";
+var TimelineToggleButton = defineComponent15({
+  name: "DialKitTimelineToggleButton",
+  setup() {
+    const visible = ref13(TimelineUiStore.getVisible());
+    let unsubscribe;
+    onMounted11(() => {
+      unsubscribe = TimelineUiStore.subscribe(() => {
+        visible.value = TimelineUiStore.getVisible();
+      });
+    });
+    onUnmounted10(() => unsubscribe?.());
+    return () => {
+      const label = visible.value ? "Hide timeline" : "Show timeline";
+      return h15("button", {
+        class: "dialkit-toolbar-add dialkit-timeline-toolbar-toggle",
+        "data-active": visible.value || void 0,
+        "aria-pressed": visible.value,
+        "aria-label": label,
+        title: label,
+        onClick: () => TimelineUiStore.toggle()
+      }, [
+        h15(
+          "svg",
+          { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" },
+          ICON_TIMELINE.map((path) => h15("path", { d: path, fill: "currentColor" }))
+        )
+      ]);
+    };
+  }
+});
+
+// src/panel-drag.ts
+var PANEL_DRAG_THRESHOLD = 8;
+var COLLAPSED_PANEL_SIZE = 42;
+var DRAG_EXCLUSION_SELECTOR = [
+  ".dialkit-panel-icon",
+  ".dialkit-panel-toolbar",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "a",
+  '[role="button"]',
+  '[contenteditable="true"]'
+].join(",");
+function getPanelDragHandle(target, panel) {
+  if (!(target instanceof Element) || !panel) return null;
+  const inner = target.closest(".dialkit-panel-inner");
+  if (!inner || !panel.contains(inner)) return null;
+  if (inner.getAttribute("data-collapsed") === "true") {
+    return inner;
+  }
+  const header = target.closest(".dialkit-panel-header");
+  if (!header || !inner.contains(header)) return null;
+  if (target.closest(DRAG_EXCLUSION_SELECTOR)) return null;
+  return header;
+}
+function getPanelDragStart(pointerX, pointerY, panel) {
+  const rect = panel.getBoundingClientRect();
+  return {
+    pointerX,
+    pointerY,
+    elX: rect.left,
+    elY: rect.top
+  };
+}
+function getPanelDragOffset(start, pointerX, pointerY) {
+  return {
+    x: start.elX + pointerX - start.pointerX,
+    y: start.elY + pointerY - start.pointerY
+  };
+}
+function hasPanelDragMoved(start, pointerX, pointerY) {
+  const dx = pointerX - start.pointerX;
+  const dy = pointerY - start.pointerY;
+  return Math.hypot(dx, dy) >= PANEL_DRAG_THRESHOLD;
+}
+function getPanelOriginX(position, offset, viewportWidth = typeof window !== "undefined" ? window.innerWidth : void 0) {
+  if (offset && viewportWidth) {
+    return offset.x + COLLAPSED_PANEL_SIZE / 2 < viewportWidth / 2 ? "left" : "right";
+  }
+  return position.endsWith("left") ? "left" : "right";
+}
+function blockPanelDragClick(handle) {
+  const blocker = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+  };
+  handle.addEventListener("click", blocker, { capture: true, once: true });
+  window.setTimeout(() => {
+    handle.removeEventListener("click", blocker, true);
+  }, 0);
+}
+
 // src/vue/components/DialRoot.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;
-var DialRoot = defineComponent15({
+var isDevDefault2 = typeof process !== "undefined" && process?.env?.NODE_ENV ? process.env.NODE_ENV !== "production" : typeof import.meta !== "undefined" && import.meta.env?.MODE ? import.meta.env.MODE !== "production" : true;
+var DialRoot = defineComponent16({
   name: "DialKitDialRoot",
   props: {
     position: {
@@ -2735,45 +4398,203 @@ var DialRoot = defineComponent15({
     },
     productionEnabled: {
       type: Boolean,
-      default: isDevDefault
+      default: isDevDefault2
     }
   },
-  setup(props) {
-    const panels = ref13([]);
-    const mounted = ref13(false);
-    let unsubscribe;
-    onMounted10(() => {
+  emits: ["openChange"],
+  setup(props, { emit }) {
+    const panels = ref14([]);
+    const timelines = ref14([]);
+    const mounted = ref14(false);
+    const panelRef = ref14(null);
+    const dragOffset = ref14(null);
+    const activePosition = ref14(props.position);
+    let unsubscribePanels;
+    let unsubscribeTimelines;
+    let observer;
+    let lastDragOffset = null;
+    let dragging = false;
+    let dragStart = null;
+    let didDrag = false;
+    let dragTarget = null;
+    let panelOpenStates = /* @__PURE__ */ new Map();
+    let rootOpen;
+    const syncPanelOpenStates = () => {
+      const fallbackOpen = props.mode === "inline" || props.defaultOpen;
+      const nextStates = /* @__PURE__ */ new Map();
+      for (const panel of panels.value) {
+        nextStates.set(panel.id, panelOpenStates.get(panel.id) ?? fallbackOpen);
+      }
+      panelOpenStates = nextStates;
+      rootOpen = Array.from(nextStates.values()).some(Boolean);
+    };
+    const connectObserver = () => {
+      if (observer || props.mode === "inline" || !panelRef.value) return;
+      observer = new MutationObserver(() => {
+        const inners = panelRef.value?.querySelectorAll(".dialkit-panel-inner");
+        if (!inners || inners.length === 0) return;
+        const collapsed = Array.from(inners).every((el) => el.getAttribute("data-collapsed") === "true");
+        const currentDragOffset = dragOffset.value;
+        if (!collapsed) {
+          if (currentDragOffset) {
+            lastDragOffset = currentDragOffset;
+            const bubbleCenterX = currentDragOffset.x + 21;
+            activePosition.value = bubbleCenterX < window.innerWidth / 2 ? "top-left" : "top-right";
+          } else {
+            activePosition.value = props.position;
+          }
+          dragOffset.value = null;
+        } else if (currentDragOffset) {
+          lastDragOffset = currentDragOffset;
+        } else if (lastDragOffset) {
+          dragOffset.value = lastDragOffset;
+        }
+      });
+      observer.observe(panelRef.value, { subtree: true, attributes: true, attributeFilter: ["data-collapsed"] });
+    };
+    const handlePointerDown = (event) => {
+      const panel = panelRef.value;
+      const handle = getPanelDragHandle(event.target, panel);
+      if (!panel || !handle) return;
+      dragTarget = handle;
+      dragStart = getPanelDragStart(event.clientX, event.clientY, panel);
+      didDrag = false;
+      dragging = true;
+      handle.setPointerCapture(event.pointerId);
+    };
+    const handlePointerMove = (event) => {
+      if (!dragging || !dragStart) return;
+      if (!didDrag && !hasPanelDragMoved(dragStart, event.clientX, event.clientY)) return;
+      didDrag = true;
+      dragOffset.value = getPanelDragOffset(dragStart, event.clientX, event.clientY);
+    };
+    const handlePointerUp = (event) => {
+      if (!dragging) return;
+      dragging = false;
+      dragStart = null;
+      const handle = dragTarget;
+      if (handle?.hasPointerCapture(event.pointerId)) {
+        handle.releasePointerCapture(event.pointerId);
+      }
+      if (didDrag) {
+        event.stopPropagation();
+        if (handle) {
+          blockPanelDragClick(handle);
+        }
+      }
+      dragTarget = null;
+    };
+    const handlePanelOpenChange = (panelId, open) => {
+      panelOpenStates.set(panelId, open);
+      const fallbackOpen = props.mode === "inline" || props.defaultOpen;
+      const nextRootOpen = panels.value.some((panel) => panelOpenStates.get(panel.id) ?? fallbackOpen);
+      if (rootOpen === nextRootOpen) return;
+      rootOpen = nextRootOpen;
+      emit("openChange", nextRootOpen);
+    };
+    const handleRootOpenChange = (open) => {
+      if (rootOpen === open) return;
+      rootOpen = open;
+      emit("openChange", open);
+    };
+    const getDragStyle = () => dragOffset.value ? {
+      top: `${dragOffset.value.y}px`,
+      left: `${dragOffset.value.x}px`,
+      right: "auto",
+      bottom: "auto"
+    } : void 0;
+    const originX = computed6(() => props.mode === "inline" ? void 0 : getPanelOriginX(activePosition.value, dragOffset.value));
+    onMounted12(() => {
       mounted.value = true;
-      panels.value = DialStore.getPanels();
-      unsubscribe = DialStore.subscribeGlobal(() => {
-        panels.value = DialStore.getPanels();
+      panels.value = DialStore.getPanels("panel");
+      timelines.value = TimelineStore.getTimelines();
+      syncPanelOpenStates();
+      unsubscribePanels = DialStore.subscribeGlobal(() => {
+        panels.value = DialStore.getPanels("panel");
+        syncPanelOpenStates();
       });
+      unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+        timelines.value = TimelineStore.getTimelines();
+      });
+      nextTick3(connectObserver);
     });
-    onUnmounted9(() => {
-      unsubscribe?.();
+    onUnmounted11(() => {
+      unsubscribePanels?.();
+      unsubscribeTimelines?.();
+      observer?.disconnect();
     });
-    const renderContent = () => h15(ShortcutListener, null, {
-      default: () => h15("div", { class: "dialkit-root", "data-mode": props.mode, "data-theme": props.theme }, [
-        h15("div", {
+    const timelineToggle = () => timelines.value.length > 0 ? h16(TimelineToggleButton) : null;
+    const renderPanels = () => {
+      if (panels.value.length === 0) {
+        return [h16("div", { class: "dialkit-panel-wrapper" }, [
+          h16(Folder, {
+            title: "DialKit",
+            defaultOpen: props.mode === "inline" || props.defaultOpen,
+            isRoot: true,
+            inline: props.mode === "inline",
+            toolbar: timelineToggle,
+            onOpenChange: handleRootOpenChange,
+            panelHeightOffset: 2
+          }, { default: () => [h16("div", { class: "dialkit-timeline-toolkit-only" }, "Timeline")] })
+        ])];
+      }
+      if (panels.value.length > 1) {
+        return [h16("div", { class: "dialkit-panel-wrapper" }, [
+          h16(Folder, {
+            title: "DialKit",
+            defaultOpen: props.mode === "inline" || props.defaultOpen,
+            isRoot: true,
+            inline: props.mode === "inline",
+            toolbar: timelineToggle,
+            onOpenChange: handleRootOpenChange,
+            panelHeightOffset: 2
+          }, {
+            default: () => panels.value.map((panel) => h16(Panel, {
+              key: panel.id,
+              panel,
+              defaultOpen: true,
+              variant: "section"
+            }))
+          })
+        ])];
+      }
+      return panels.value.map((panel) => h16(Panel, {
+        key: panel.id,
+        panel,
+        defaultOpen: props.mode === "inline" || props.defaultOpen,
+        inline: props.mode === "inline",
+        toolbarExtra: timelineToggle,
+        onOpenChange: (open) => handlePanelOpenChange(panel.id, open)
+      }));
+    };
+    const renderContent = () => h16(ShortcutListener, null, {
+      default: () => h16("div", { class: "dialkit-root", "data-mode": props.mode, "data-theme": props.theme }, [
+        h16("div", {
+          ref: (el) => {
+            panelRef.value = el;
+            connectObserver();
+          },
           class: "dialkit-panel",
-          "data-position": props.mode === "inline" ? void 0 : props.position,
-          "data-mode": props.mode
-        }, panels.value.map((panel) => h15(Panel, {
-          key: panel.id,
-          panel,
-          defaultOpen: props.mode === "inline" || props.defaultOpen,
-          inline: props.mode === "inline"
-        })))
+          "data-position": props.mode === "inline" ? void 0 : dragOffset.value ? void 0 : activePosition.value,
+          "data-origin-x": originX.value,
+          "data-mode": props.mode,
+          "data-multiple": panels.value.length > 1 ? "true" : void 0,
+          style: getDragStyle(),
+          onPointerdown: props.mode === "inline" ? void 0 : handlePointerDown,
+          onPointermove: props.mode === "inline" ? void 0 : handlePointerMove,
+          onPointerup: props.mode === "inline" ? void 0 : handlePointerUp,
+          onPointercancel: props.mode === "inline" ? void 0 : handlePointerUp
+        }, renderPanels())
       ])
     });
     return () => {
-      if (!props.productionEnabled || !mounted.value || typeof window === "undefined" || panels.value.length === 0) {
+      if (!props.productionEnabled || !mounted.value || typeof window === "undefined" || panels.value.length === 0 && timelines.value.length === 0) {
         return null;
       }
       if (props.mode === "inline") {
         return renderContent();
       }
-      return h15(Teleport3, { to: "body" }, renderContent());
+      return h16(Teleport3, { to: "body" }, renderContent());
     };
   }
 });
@@ -2791,11 +4612,11 @@ function mountDialRoot(el, value) {
   if (typeof window === "undefined") return;
   const host = document.createElement("div");
   el.appendChild(host);
-  const props = shallowRef2(normalizeDirectiveValue(value));
-  const RootHost = defineComponent16({
+  const props = shallowRef3(normalizeDirectiveValue(value));
+  const RootHost = defineComponent17({
     name: "DialKitDirectiveHost",
     setup() {
-      return () => h16(DialRoot, props.value);
+      return () => h17(DialRoot, props.value);
     }
   });
   const app = createApp(RootHost);
@@ -2826,8 +4647,1129 @@ var vDialKit = {
   }
 };
 
+// src/vue/components/Timeline/DialTimeline.ts
+import {
+  Teleport as Teleport4,
+  computed as computed7,
+  defineComponent as defineComponent19,
+  h as h19,
+  nextTick as nextTick4,
+  onMounted as onMounted13,
+  onUnmounted as onUnmounted12,
+  ref as ref15,
+  watch as watch8
+} from "vue";
+
+// src/vue/components/ControlRenderer.ts
+import { Fragment as Fragment2, defineComponent as defineComponent18, h as h18 } from "vue";
+import { inject as inject2 } from "vue";
+var ControlRenderer = defineComponent18({
+  name: "DialKitControlRenderer",
+  props: {
+    panelId: { type: String, required: true },
+    controls: { type: Array, required: true },
+    values: { type: Object, required: true },
+    transitionDuration: Object
+  },
+  setup(props) {
+    const shortcut = inject2(ShortcutKey, void 0);
+    const renderControl = (control) => {
+      const value = props.values[control.path];
+      switch (control.type) {
+        case "slider":
+          return h18(Slider, {
+            key: control.path,
+            label: control.label,
+            value,
+            min: control.min,
+            max: control.max,
+            step: control.step,
+            shortcut: control.shortcut,
+            shortcutActive: shortcut?.activePanelId.value === props.panelId && shortcut.activePath.value === control.path,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "toggle":
+          return h18(Toggle, {
+            key: control.path,
+            label: control.label,
+            checked: value,
+            shortcut: control.shortcut,
+            shortcutActive: shortcut?.activePanelId.value === props.panelId && shortcut.activePath.value === control.path,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "spring":
+          return h18(SpringControl, {
+            key: control.path,
+            panelId: props.panelId,
+            path: control.path,
+            label: control.label,
+            spring: value,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "transition":
+          return h18(TransitionControl, {
+            key: control.path,
+            panelId: props.panelId,
+            path: control.path,
+            label: control.label,
+            value,
+            durationControl: props.transitionDuration,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "folder":
+          return h18(Folder, {
+            key: control.path,
+            title: control.label,
+            defaultOpen: control.defaultOpen ?? true
+          }, { default: () => (control.children ?? []).map(renderControl) });
+        case "text":
+          return h18(TextControl, {
+            key: control.path,
+            label: control.label,
+            value,
+            placeholder: control.placeholder,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "select":
+          return h18(SelectControl, {
+            key: control.path,
+            label: control.label,
+            value,
+            options: control.options ?? [],
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "color":
+          return h18(ColorControl, {
+            key: control.path,
+            label: control.label,
+            value,
+            onChange: (next) => DialStore.updateValue(props.panelId, control.path, next)
+          });
+        case "action":
+          return h18("button", {
+            key: control.path,
+            class: "dialkit-button",
+            onClick: () => DialStore.triggerAction(props.panelId, control.path)
+          }, control.label);
+        default:
+          return null;
+      }
+    };
+    return () => h18(Fragment2, null, props.controls.map(renderControl));
+  }
+});
+
+// src/vue/components/Timeline/DialTimeline.ts
+var DRAG_THRESHOLD_PX = 3;
+var MAJOR_TICK_TARGET_PX = 140;
+var MILLISECOND_STEP = 1e-3;
+var SECOND_TICK_STEPS = [
+  1e-3,
+  2e-3,
+  5e-3,
+  0.01,
+  0.02,
+  0.05,
+  0.1,
+  0.2,
+  0.5,
+  1,
+  2,
+  5,
+  10,
+  15,
+  30,
+  60,
+  120,
+  300,
+  600
+];
+var MIN_TIMELINE_MAX_ZOOM = 8;
+var PLAYHEAD_FLAG_WIDTH = 52;
+var POPOVER_WIDTH = 280;
+var ZOOM_DRAG_DISTANCE = 180;
+var DialTimeline = defineComponent19({
+  name: "DialKitTimeline",
+  props: {
+    theme: { type: String, default: "system" },
+    defaultVisible: { type: Boolean, default: true },
+    visible: {
+      type: Boolean,
+      default: void 0
+    },
+    onVisibilityChange: Function,
+    defaultOpen: { type: Boolean, default: true },
+    productionEnabled: { type: Boolean, default: isDevDefault }
+  },
+  setup(props) {
+    const timelines = ref15(TimelineStore.getTimelines());
+    const dockVisible = ref15(TimelineUiStore.getVisible());
+    const mounted = ref15(false);
+    const controllerId = /* @__PURE__ */ Symbol("dialkit-timeline-visibility");
+    let unsubscribeTimelines;
+    let unsubscribeVisibility;
+    let unregisterController;
+    onMounted13(() => {
+      mounted.value = true;
+      unsubscribeVisibility = TimelineUiStore.subscribe(() => {
+        dockVisible.value = TimelineUiStore.getVisible();
+      });
+      unregisterController = TimelineUiStore.registerController(controllerId, {
+        visible: props.visible,
+        defaultVisible: props.defaultVisible,
+        onVisibilityChange: props.onVisibilityChange
+      });
+      dockVisible.value = TimelineUiStore.getVisible();
+      unsubscribeTimelines = TimelineStore.subscribeGlobal(() => {
+        timelines.value = TimelineStore.getTimelines();
+      });
+    });
+    watch8(() => [props.visible, props.defaultVisible, props.onVisibilityChange], () => {
+      TimelineUiStore.updateController(controllerId, {
+        visible: props.visible,
+        defaultVisible: props.defaultVisible,
+        onVisibilityChange: props.onVisibilityChange
+      });
+    });
+    onUnmounted12(() => {
+      unregisterController?.();
+      unsubscribeTimelines?.();
+      unsubscribeVisibility?.();
+    });
+    return () => {
+      if (!props.productionEnabled || !mounted.value || timelines.value.length === 0) return null;
+      return h19(Teleport4, { to: "body" }, [
+        h19("div", {
+          class: "dialkit-root dialkit-timeline",
+          "data-theme": props.theme,
+          hidden: !dockVisible.value
+        }, [
+          h19("div", { class: "dialkit-timeline-dock" }, timelines.value.map((meta) => h19(TimelineSection, {
+            key: meta.id,
+            meta,
+            defaultOpen: props.defaultOpen,
+            theme: props.theme,
+            dockVisible: dockVisible.value
+          })))
+        ])
+      ]);
+    };
+  }
+});
+var PlayPauseButton = defineComponent19({
+  props: { id: { type: String, required: true } },
+  setup(props) {
+    const playing = ref15(TimelineStore.getTransport(props.id).playing);
+    let unsubscribe;
+    onMounted13(() => {
+      unsubscribe = TimelineStore.subscribe(props.id, () => {
+        playing.value = TimelineStore.getTransport(props.id).playing;
+      });
+    });
+    onUnmounted12(() => unsubscribe?.());
+    return () => {
+      const label = playing.value ? "Pause" : "Play";
+      const icon = playing.value ? h19(
+        "svg",
+        { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", style: iconStyle },
+        ICON_PAUSE.map((path) => h19("path", { d: path, fill: "currentColor" }))
+      ) : h19("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", style: iconStyle }, [
+        h19("path", { d: ICON_PLAY, fill: "currentColor" })
+      ]);
+      return h19("button", {
+        class: "dialkit-toolbar-add",
+        title: label,
+        "aria-label": label,
+        onClick: () => playing.value ? TimelineStore.pause(props.id) : TimelineStore.play(props.id)
+      }, [h19("span", { style: { position: "relative", width: "16px", height: "16px" } }, [icon])]);
+    };
+  }
+});
+var iconStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "16px",
+  height: "16px",
+  color: "var(--dial-text-label)"
+};
+var TimelineOverview = defineComponent19({
+  props: {
+    id: { type: String, required: true },
+    duration: { type: Number, required: true },
+    viewStart: { type: Number, required: true },
+    viewEnd: { type: Number, required: true },
+    onNavigate: { type: Function, required: true }
+  },
+  setup(props) {
+    const time = ref15(TimelineStore.getTransport(props.id).time);
+    let scrub = null;
+    let unsubscribe;
+    onMounted13(() => {
+      unsubscribe = TimelineStore.subscribe(props.id, () => {
+        time.value = TimelineStore.getTransport(props.id).time;
+      });
+    });
+    onUnmounted12(() => unsubscribe?.());
+    const seek = (clientX) => {
+      if (!scrub || scrub.rect.width <= 0 || props.duration <= 0) return;
+      const next = clamp((clientX - scrub.rect.left) / scrub.rect.width * props.duration, 0, props.duration);
+      TimelineStore.seek(props.id, next);
+      props.onNavigate(next);
+    };
+    const finish = () => {
+      if (scrub?.wasPlaying) TimelineStore.play(props.id);
+      scrub = null;
+    };
+    return () => {
+      const viewportWidth = props.duration > 0 ? (props.viewEnd - props.viewStart) / props.duration * 100 : 100;
+      const playhead = props.duration > 0 ? time.value / props.duration * 100 : 0;
+      return h19("div", {
+        class: "dialkit-timeline-overview",
+        title: "Drag to scrub the full timeline",
+        onPointerdown: (event) => {
+          event.preventDefault();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          scrub = {
+            wasPlaying: TimelineStore.getTransport(props.id).playing,
+            rect: event.currentTarget.getBoundingClientRect()
+          };
+          TimelineStore.pause(props.id);
+          seek(event.clientX);
+        },
+        onPointermove: (event) => scrub && seek(event.clientX),
+        onPointerup: finish,
+        onPointercancel: finish,
+        onLostpointercapture: finish
+      }, [
+        h19("div", {
+          class: "dialkit-timeline-overview-viewport",
+          "data-zoomed": viewportWidth < 99.999 || void 0,
+          style: { left: `${props.duration > 0 ? props.viewStart / props.duration * 100 : 0}%`, width: `${viewportWidth}%` }
+        }),
+        h19("div", { class: "dialkit-timeline-overview-progress", style: { width: `${playhead}%` } }),
+        h19("div", { class: "dialkit-timeline-overview-playhead", style: { left: `${playhead}%` } })
+      ]);
+    };
+  }
+});
+var TimelinePlayheadFlag = defineComponent19({
+  props: {
+    id: { type: String, required: true },
+    duration: { type: Number, required: true },
+    pxPerSecond: { type: Number, required: true },
+    viewStart: { type: Number, required: true },
+    viewEnd: { type: Number, required: true },
+    laneWidth: { type: Number, required: true },
+    ruler: Object,
+    headerClearStart: { type: Number, required: true },
+    headerClearEnd: { type: Number, required: true },
+    onResetView: { type: Function, required: true }
+  },
+  setup(props) {
+    const time = ref15(TimelineStore.getTransport(props.id).time);
+    let unsubscribe;
+    let scrub = null;
+    let cleanup = null;
+    onMounted13(() => {
+      unsubscribe = TimelineStore.subscribe(props.id, () => {
+        time.value = TimelineStore.getTransport(props.id).time;
+      });
+    });
+    onUnmounted12(() => {
+      unsubscribe?.();
+      cleanup?.();
+    });
+    const seek = (clientX) => {
+      if (!scrub || scrub.rect.width <= 0) return;
+      TimelineStore.seek(props.id, clamp(
+        scrub.viewStart + (clientX - scrub.rect.left) / scrub.rect.width * (scrub.viewEnd - scrub.viewStart),
+        scrub.viewStart,
+        scrub.viewEnd
+      ));
+    };
+    return () => {
+      if (time.value < props.viewStart || time.value > props.viewEnd || props.laneWidth <= 0) return null;
+      const x = clamp((time.value - props.viewStart) * props.pxPerSecond, 0, props.laneWidth);
+      const left = x - PLAYHEAD_FLAG_WIDTH / 2;
+      const placement = left >= props.headerClearStart && left + PLAYHEAD_FLAG_WIDTH <= props.headerClearEnd ? "raised" : "lowered";
+      return h19("div", {
+        class: "dialkit-timeline-playhead-control",
+        "data-edge": "center",
+        "data-placement": placement,
+        style: { left: `calc(var(--dial-timeline-label-w) + ${x}px)` },
+        role: "slider",
+        "aria-label": "Timeline current time",
+        "aria-valuemin": 0,
+        "aria-valuemax": props.duration,
+        "aria-valuenow": time.value,
+        title: "Drag to scrub the timeline",
+        onPointerdown: (event) => {
+          const rect = props.ruler?.getBoundingClientRect();
+          if (!rect) return;
+          event.preventDefault();
+          event.stopPropagation();
+          cleanup?.();
+          const reset = event.shiftKey;
+          scrub = {
+            wasPlaying: TimelineStore.getTransport(props.id).playing,
+            rect,
+            viewStart: reset ? 0 : props.viewStart,
+            viewEnd: reset ? props.duration : props.viewEnd
+          };
+          if (reset) props.onResetView();
+          TimelineStore.pause(props.id);
+          seek(event.clientX);
+          const move = (next) => {
+            next.preventDefault();
+            seek(next.clientX);
+          };
+          const finish = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", finish);
+            window.removeEventListener("pointercancel", finish);
+            if (scrub?.wasPlaying) TimelineStore.play(props.id);
+            scrub = null;
+            cleanup = null;
+          };
+          window.addEventListener("pointermove", move, { passive: false });
+          window.addEventListener("pointerup", finish);
+          window.addEventListener("pointercancel", finish);
+          cleanup = finish;
+        }
+      }, [
+        h19("div", { class: "dialkit-timeline-playhead-flag" }, time.value.toFixed(2)),
+        h19("div", { class: "dialkit-timeline-playhead-stem" })
+      ]);
+    };
+  }
+});
+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 = defineComponent19({
+  props: {
+    meta: { type: Object, required: true },
+    defaultOpen: { type: Boolean, required: true },
+    theme: { type: String, required: true },
+    dockVisible: { type: Boolean, required: true }
+  },
+  setup(props) {
+    const open = ref15(props.defaultOpen);
+    const copied = ref15(false);
+    const popover = ref15(null);
+    const collapsedGroups = ref15(/* @__PURE__ */ new Set());
+    const expandedTracks = ref15(/* @__PURE__ */ new Set());
+    const zoom = ref15(1);
+    const viewStart = ref15(0);
+    const values = ref15(DialStore.getValues(props.meta.id));
+    const presets = ref15(DialStore.getPresets(props.meta.id));
+    const activePresetId = ref15(DialStore.getActivePresetId(props.meta.id));
+    const laneAreaRef = ref15(null);
+    const titleRef = ref15(null);
+    const actionsRef = ref15(null);
+    const laneWidth = ref15(0);
+    const flagClearRange = ref15({ start: 0, end: 0 });
+    let unsubscribeValues;
+    let resizeObserver;
+    const measure = () => {
+      if (!laneAreaRef.value || !titleRef.value || !actionsRef.value) return;
+      const ruler = laneAreaRef.value.getBoundingClientRect();
+      const title = titleRef.value.getBoundingClientRect();
+      const actions = actionsRef.value.getBoundingClientRect();
+      laneWidth.value = ruler.width;
+      flagClearRange.value = {
+        start: Math.round(title.right + 10 - ruler.left),
+        end: Math.round(actions.left - 10 - ruler.left)
+      };
+    };
+    const connectMeasure = async () => {
+      resizeObserver?.disconnect();
+      if (!open.value) return;
+      await nextTick4();
+      if (!laneAreaRef.value || !titleRef.value || !actionsRef.value) return;
+      measure();
+      resizeObserver = new ResizeObserver(measure);
+      resizeObserver.observe(laneAreaRef.value);
+      resizeObserver.observe(titleRef.value);
+      resizeObserver.observe(actionsRef.value);
+    };
+    onMounted13(() => {
+      unsubscribeValues = DialStore.subscribe(props.meta.id, () => {
+        values.value = DialStore.getValues(props.meta.id);
+        presets.value = DialStore.getPresets(props.meta.id);
+        activePresetId.value = DialStore.getActivePresetId(props.meta.id);
+      });
+      void connectMeasure();
+    });
+    onUnmounted12(() => {
+      unsubscribeValues?.();
+      resizeObserver?.disconnect();
+    });
+    watch8(open, connectMeasure);
+    watch8(() => props.dockVisible, (visible) => {
+      if (!visible) popover.value = null;
+    });
+    const visibleDuration = computed7(() => props.meta.duration > 0 ? props.meta.duration / zoom.value : props.meta.duration);
+    const safeViewStart = computed7(() => clampViewStart(viewStart.value, props.meta.duration, visibleDuration.value));
+    const viewEnd = computed7(() => safeViewStart.value + visibleDuration.value);
+    const pxPerSecond = computed7(() => visibleDuration.value > 0 && laneWidth.value > 0 ? laneWidth.value / visibleDuration.value : 0);
+    const maxZoom = computed7(() => Math.max(
+      MIN_TIMELINE_MAX_ZOOM,
+      laneWidth.value > 0 && props.meta.duration > 0 ? MAJOR_TICK_TARGET_PX * props.meta.duration / (MILLISECOND_STEP * 10 * laneWidth.value) : MIN_TIMELINE_MAX_ZOOM
+    ));
+    watch8(maxZoom, (next) => {
+      zoom.value = clamp(zoom.value, 1, next);
+    }, { immediate: true });
+    watch8([() => props.meta.duration, zoom], () => {
+      viewStart.value = clampViewStart(viewStart.value, props.meta.duration, props.meta.duration / zoom.value);
+    });
+    const centerViewAt = (time) => {
+      if (zoom.value <= 1 || props.meta.duration <= 0) return;
+      const duration = props.meta.duration / zoom.value;
+      viewStart.value = clampViewStart(time - duration / 2, props.meta.duration, duration);
+    };
+    const resetView = () => {
+      zoom.value = 1;
+      viewStart.value = 0;
+    };
+    let zoomDrag = null;
+    let rulerScrub = null;
+    let trackScrub = null;
+    const seekRuler = (clientX) => {
+      if (!rulerScrub || rulerScrub.rect.width <= 0) return;
+      TimelineStore.seek(props.meta.id, clamp(
+        rulerScrub.viewStart + (clientX - rulerScrub.rect.left) / rulerScrub.rect.width * rulerScrub.visibleDuration,
+        rulerScrub.viewStart,
+        rulerScrub.viewStart + rulerScrub.visibleDuration
+      ));
+    };
+    const seekTrack = (clientX) => {
+      if (!trackScrub || trackScrub.rect.width <= 0) return;
+      TimelineStore.seek(props.meta.id, clamp(
+        trackScrub.viewStart + (clientX - trackScrub.rect.left) / trackScrub.rect.width * trackScrub.visibleDuration,
+        trackScrub.viewStart,
+        trackScrub.viewStart + trackScrub.visibleDuration
+      ));
+    };
+    const finishRuler = () => {
+      if (rulerScrub?.wasPlaying) TimelineStore.play(props.meta.id);
+      rulerScrub = null;
+      zoomDrag = null;
+    };
+    const finishTrack = () => {
+      if (trackScrub?.wasPlaying) TimelineStore.play(props.meta.id);
+      trackScrub = null;
+    };
+    const handleCopy = () => {
+      const normalized = normalizeTimelineValuesForCopy(DialStore.getValues(props.meta.id), props.meta.clips);
+      void navigator.clipboard.writeText(buildCopyInstruction("useDialTimeline", props.meta.name, normalized));
+      copied.value = true;
+      window.setTimeout(() => {
+        copied.value = false;
+      }, 1500);
+    };
+    const handleAddPreset = () => DialStore.savePreset(props.meta.id, `Version ${presets.value.length + 2}`);
+    const closePopover = () => {
+      popover.value = null;
+    };
+    const openClipPopover = (clip, rect, stepKey) => {
+      const target = stepKey ? `${clip.key}.${stepKey}` : clip.key;
+      if (getClipControls(props.meta.id, target, stepKey ? void 0 : clipPopoverExclusions(clip)).length === 0) return;
+      popover.value = popover.value?.clip.key === clip.key && popover.value.stepKey === stepKey ? null : {
+        clip,
+        stepKey,
+        anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom, width: rect.width, height: rect.height }
+      };
+    };
+    const toggleSet = (state, key) => {
+      const next = new Set(state.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      state.value = next;
+    };
+    const toggleTracks = (key) => toggleSet(expandedTracks, key);
+    const toggleGroup = (key) => toggleSet(collapsedGroups, key);
+    const handleBarClick = (clip, rect, stepKey) => {
+      if (!stepKey && clip.tracks?.length) toggleTracks(clip.key);
+      else openClipPopover(clip, rect, stepKey);
+    };
+    const ticks = computed7(() => {
+      const raw = pxPerSecond.value > 0 ? MAJOR_TICK_TARGET_PX / pxPerSecond.value : 1;
+      const adaptive = SECOND_TICK_STEPS.find((step) => step >= raw) ?? SECOND_TICK_STEPS[SECOND_TICK_STEPS.length - 1];
+      const majorStep = zoom.value < 1.5 && props.meta.duration >= 1 ? Math.max(1, adaptive) : adaptive;
+      const fineStep = majorStep / 10;
+      const major = [];
+      const medium = [];
+      const fine = [];
+      for (let time = Math.ceil((safeViewStart.value - 1e-6) / majorStep) * majorStep; time <= viewEnd.value + 1e-6; time += majorStep) {
+        major.push(Number(time.toFixed(4)));
+      }
+      const first = Math.ceil((safeViewStart.value - 1e-6) / fineStep);
+      const last = Math.floor((viewEnd.value + 1e-6) / fineStep);
+      for (let index = first; index <= last; index++) {
+        if (index % 10 === 0) continue;
+        const tick = Number((index * fineStep).toFixed(6));
+        if (index % 5 === 0) medium.push(tick);
+        else fine.push(tick);
+      }
+      return { major, medium, fine, majorStep };
+    });
+    const renderRows = () => {
+      const rows = [];
+      let lastGroup;
+      for (const clip of props.meta.clips) {
+        if (clip.group !== lastGroup) {
+          lastGroup = clip.group;
+          if (clip.group) {
+            const group = clip.group;
+            const collapsed = collapsedGroups.value.has(group);
+            rows.push(h19("div", { key: `group:${group}`, class: "dialkit-timeline-row dialkit-timeline-group-row" }, [
+              h19("div", { class: "dialkit-timeline-label" }, [
+                h19("button", {
+                  class: "dialkit-timeline-group-toggle",
+                  "data-open": !collapsed,
+                  title: collapsed ? "Expand layer" : "Collapse layer",
+                  onClick: () => toggleGroup(group)
+                }, [chevronIcon()]),
+                h19("span", formatLabel(group))
+              ]),
+              h19("div", { class: "dialkit-timeline-lane" })
+            ]));
+          }
+        }
+        if (clip.group && collapsedGroups.value.has(clip.group)) continue;
+        const isProps = Boolean(clip.tracks?.length);
+        const tracksOpen = isProps && expandedTracks.value.has(clip.key);
+        const stat = computeClipStaticFromValues(values.value, clip, props.meta.duration);
+        const selected = popover.value?.clip.key === clip.key;
+        rows.push(h19("div", { key: clip.key, class: "dialkit-timeline-row", "data-grouped": clip.group ? "" : void 0 }, [
+          h19("div", { class: "dialkit-timeline-label" }, [
+            isProps ? h19("button", {
+              class: "dialkit-timeline-group-toggle",
+              "data-open": tracksOpen,
+              title: tracksOpen ? "Collapse properties" : "Expand properties",
+              onClick: (event) => {
+                event.stopPropagation();
+                toggleTracks(clip.key);
+              }
+            }, [chevronIcon()]) : null,
+            clip.label
+          ]),
+          h19("div", { class: "dialkit-timeline-lane" }, [h19(TimelineClip, {
+            timelineId: props.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: pxPerSecond.value,
+            viewStart: safeViewStart.value,
+            timelineDuration: props.meta.duration,
+            selected,
+            selectedStepKey: selected ? popover.value?.stepKey : void 0,
+            onClick: handleBarClick,
+            onDrag: closePopover
+          })])
+        ]));
+        if (!tracksOpen) continue;
+        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
+          };
+          const trackSelected = popover.value?.clip.key === trackKey;
+          rows.push(h19("div", { key: trackKey, class: "dialkit-timeline-row dialkit-timeline-track-row", "data-grouped": clip.group ? "" : void 0 }, [
+            h19("div", { class: "dialkit-timeline-label" }, formatLabel(trackRef.prop)),
+            h19("div", { class: "dialkit-timeline-lane" }, [h19(TimelineClip, {
+              timelineId: props.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: pxPerSecond.value,
+              viewStart: safeViewStart.value,
+              timelineDuration: props.meta.duration,
+              selected: trackSelected,
+              selectedStepKey: trackSelected ? popover.value?.stepKey : void 0,
+              onClick: openClipPopover,
+              onDrag: closePopover
+            })])
+          ]));
+        }
+      }
+      return rows;
+    };
+    return () => h19("div", { class: "dialkit-timeline-section" }, [
+      h19("div", { class: "dialkit-timeline-header", "data-open": open.value || void 0 }, [
+        h19("div", { class: "dialkit-timeline-identity" }, [
+          h19("span", { ref: titleRef, class: "dialkit-timeline-title" }, props.meta.name)
+        ]),
+        !open.value ? h19(TimelineOverview, {
+          id: props.meta.id,
+          duration: props.meta.duration,
+          viewStart: safeViewStart.value,
+          viewEnd: viewEnd.value,
+          onNavigate: centerViewAt
+        }) : null,
+        h19("div", { ref: actionsRef, class: "dialkit-timeline-actions" }, [
+          h19(PlayPauseButton, { id: props.meta.id }),
+          h19("button", { class: "dialkit-toolbar-add", title: "Add timeline version", "aria-label": "Add timeline version", onClick: handleAddPreset }, [
+            h19(
+              "svg",
+              { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" },
+              ICON_ADD_PRESET.map((path) => h19("path", { d: path }))
+            )
+          ]),
+          h19(PresetManager, { panelId: props.meta.id, presets: presets.value, activePresetId: activePresetId.value }),
+          h19("button", {
+            class: "dialkit-toolbar-add",
+            title: "Copy parameters",
+            "aria-label": copied.value ? "Copied parameters" : "Copy parameters",
+            onClick: handleCopy
+          }, [h19("span", { style: { position: "relative", width: "16px", height: "16px" } }, [
+            copied.value ? h19("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", style: iconStyle }, [h19("path", { d: ICON_CHECK })]) : h19("svg", { viewBox: "0 0 24 24", fill: "none", style: iconStyle }, [
+              h19("path", { d: ICON_CLIPBOARD.board, stroke: "currentColor", "stroke-width": "2", "stroke-linejoin": "round" }),
+              h19("path", { d: ICON_CLIPBOARD.sparkle, fill: "currentColor" }),
+              h19("path", { d: ICON_CLIPBOARD.body, stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+            ])
+          ])]),
+          h19("button", {
+            class: "dialkit-timeline-chevron",
+            "data-open": open.value,
+            "aria-expanded": open.value,
+            title: open.value ? "Collapse timeline" : "Expand timeline",
+            onClick: () => {
+              open.value = !open.value;
+            }
+          }, [chevronIcon()])
+        ])
+      ]),
+      open.value ? h19("div", {
+        class: "dialkit-timeline-body",
+        onPointerdown: (event) => {
+          const target = event.target;
+          if (target.closest(".dialkit-timeline-label, button")) return;
+          if (!event.shiftKey && target.closest(".dialkit-timeline-clip")) return;
+          const rect = laneAreaRef.value?.getBoundingClientRect();
+          if (!rect) return;
+          event.preventDefault();
+          event.currentTarget.setPointerCapture(event.pointerId);
+          const reset = event.shiftKey;
+          trackScrub = {
+            wasPlaying: TimelineStore.getTransport(props.meta.id).playing,
+            rect,
+            viewStart: reset ? 0 : safeViewStart.value,
+            visibleDuration: reset ? props.meta.duration : visibleDuration.value
+          };
+          if (reset) resetView();
+          popover.value = null;
+          TimelineStore.pause(props.meta.id);
+          seekTrack(event.clientX);
+        },
+        onPointermove: (event) => trackScrub && seekTrack(event.clientX),
+        onPointerup: finishTrack,
+        onPointercancel: finishTrack,
+        onLostpointercapture: finishTrack
+      }, [h19("div", { class: "dialkit-timeline-grid" }, [
+        h19("div", { class: "dialkit-timeline-row dialkit-timeline-ruler-row" }, [
+          h19("div", { class: "dialkit-timeline-label" }),
+          h19("div", {
+            ref: laneAreaRef,
+            class: "dialkit-timeline-ruler",
+            title: "Drag to seek \xB7 Option-drag to zoom \xB7 Shift-drag to reset zoom",
+            onPointerdown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              const rect = event.currentTarget.getBoundingClientRect();
+              if (rect.width <= 0) return;
+              event.currentTarget.setPointerCapture(event.pointerId);
+              if (!event.altKey) {
+                const reset = event.shiftKey;
+                rulerScrub = {
+                  wasPlaying: TimelineStore.getTransport(props.meta.id).playing,
+                  rect,
+                  viewStart: reset ? 0 : safeViewStart.value,
+                  visibleDuration: reset ? props.meta.duration : visibleDuration.value
+                };
+                if (reset) resetView();
+                TimelineStore.pause(props.meta.id);
+                seekRuler(event.clientX);
+                return;
+              }
+              const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+              zoomDrag = {
+                pointerX: event.clientX,
+                zoom: zoom.value,
+                anchorRatio: ratio,
+                anchorTime: safeViewStart.value + ratio * visibleDuration.value,
+                moved: false
+              };
+            },
+            onPointermove: (event) => {
+              if (rulerScrub) {
+                seekRuler(event.clientX);
+                return;
+              }
+              if (!zoomDrag || props.meta.duration <= 0) return;
+              const dx = event.clientX - zoomDrag.pointerX;
+              if (!zoomDrag.moved && Math.abs(dx) <= DRAG_THRESHOLD_PX) return;
+              zoomDrag.moved = true;
+              const nextZoom = clamp(zoomDrag.zoom * Math.exp(dx / ZOOM_DRAG_DISTANCE), 1, maxZoom.value);
+              const duration = props.meta.duration / nextZoom;
+              zoom.value = nextZoom;
+              viewStart.value = clampViewStart(zoomDrag.anchorTime - zoomDrag.anchorRatio * duration, props.meta.duration, duration);
+            },
+            onPointerup: finishRuler,
+            onPointercancel: finishRuler,
+            onLostpointercapture: finishRuler
+          }, [
+            ...ticks.value.fine.map((time) => h19("div", { key: `fine:${time}`, class: "dialkit-timeline-tick dialkit-timeline-tick-fine", style: { left: `${(time - safeViewStart.value) * pxPerSecond.value}px` } })),
+            ...ticks.value.medium.map((time) => h19("div", { key: `medium:${time}`, class: "dialkit-timeline-tick dialkit-timeline-tick-medium", style: { left: `${(time - safeViewStart.value) * pxPerSecond.value}px` } })),
+            ...ticks.value.major.map((time) => h19("div", { key: time, class: "dialkit-timeline-tick", style: { left: `${(time - safeViewStart.value) * pxPerSecond.value}px` } }, [
+              h19("span", { class: "dialkit-timeline-tick-label" }, formatRulerSeconds(time, ticks.value.majorStep))
+            ]))
+          ])
+        ]),
+        ...renderRows(),
+        pxPerSecond.value > 0 ? h19(TimelinePlayheadFlag, {
+          id: props.meta.id,
+          duration: props.meta.duration,
+          pxPerSecond: pxPerSecond.value,
+          viewStart: safeViewStart.value,
+          viewEnd: viewEnd.value,
+          laneWidth: laneWidth.value,
+          ruler: laneAreaRef.value ?? void 0,
+          headerClearStart: flagClearRange.value.start,
+          headerClearEnd: flagClearRange.value.end,
+          onResetView: resetView
+        }) : null
+      ])]) : null,
+      popover.value ? h19(ClipPopover, {
+        panelId: props.meta.id,
+        popover: popover.value,
+        values: values.value,
+        theme: props.theme,
+        onClose: closePopover
+      }) : null
+    ]);
+  }
+});
+function chevronIcon() {
+  return h19("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, [
+    h19("path", { d: ICON_CHEVRON })
+  ]);
+}
+var ClipPopover = defineComponent19({
+  props: {
+    panelId: { type: String, required: true },
+    popover: { type: Object, required: true },
+    values: { type: Object, required: true },
+    theme: { type: String, required: true },
+    onClose: { type: Function, required: true }
+  },
+  setup(props) {
+    const element = ref15(null);
+    const naturalHeight = ref15(0);
+    const viewport = ref15(readViewport());
+    let observer;
+    const measure = () => {
+      if (element.value) naturalHeight.value = element.value.scrollHeight + 2;
+    };
+    const updateViewport = () => {
+      viewport.value = readViewport();
+    };
+    const outside = (event) => {
+      const target = event.target;
+      if (element.value?.contains(target) || target.closest?.(".dialkit-timeline-clip") || target.closest?.(".dialkit-timeline-label")) return;
+      props.onClose();
+    };
+    const keydown = (event) => {
+      if (event.key === "Escape") props.onClose();
+    };
+    onMounted13(() => {
+      measure();
+      observer = new ResizeObserver(measure);
+      if (element.value) observer.observe(element.value.querySelector(".dialkit-timeline-popover-body") ?? element.value);
+      window.addEventListener("resize", updateViewport);
+      window.visualViewport?.addEventListener("resize", updateViewport);
+      window.visualViewport?.addEventListener("scroll", updateViewport);
+      document.addEventListener("pointerdown", outside, true);
+      document.addEventListener("keydown", keydown);
+    });
+    onUnmounted12(() => {
+      observer?.disconnect();
+      window.removeEventListener("resize", updateViewport);
+      window.visualViewport?.removeEventListener("resize", updateViewport);
+      window.visualViewport?.removeEventListener("scroll", updateViewport);
+      document.removeEventListener("pointerdown", outside, true);
+      document.removeEventListener("keydown", keydown);
+    });
+    return () => {
+      const { clip, stepKey } = props.popover;
+      let controls;
+      let title;
+      if (stepKey) {
+        controls = getClipControls(props.panelId, `${clip.key}.${stepKey}`);
+        if (stepKey === clip.stepKeys?.[0]) {
+          const from = getControlAt(props.panelId, `${clip.key}.from`);
+          if (from) {
+            const index = controls.findIndex((control) => control.path === `${clip.key}.${stepKey}.to`);
+            controls = index >= 0 ? [...controls.slice(0, index), from, ...controls.slice(index)] : [...controls, from];
+          }
+        }
+        title = `${clip.label} \xB7 ${formatStepLabel(stepKey)}`;
+      } else {
+        controls = getClipControls(props.panelId, clip.key, clipPopoverExclusions(clip));
+        title = clip.label;
+      }
+      if (controls.length === 0) return null;
+      const target = stepKey ? `${clip.key}.${stepKey}` : clip.key;
+      const durationMeta = getControlAt(props.panelId, `${target}.duration`);
+      const durationValue = durationMeta ? props.values[durationMeta.path] : void 0;
+      const transitionDuration = durationMeta?.type === "slider" && typeof durationValue === "number" ? {
+        value: durationValue,
+        onChange: (next) => DialStore.updateValue(props.panelId, durationMeta.path, next),
+        min: Math.max(TIMELINE_MIN_CLIP_DURATION, durationMeta.min ?? 0),
+        max: durationMeta.max,
+        step: durationMeta.step
+      } : void 0;
+      const current = viewport.value;
+      const right = current.offsetLeft + current.width;
+      const bottom = current.offsetTop + current.height;
+      const width = Math.min(POPOVER_WIDTH, Math.max(220, current.width - 24));
+      const left = clamp(props.popover.anchor.left + props.popover.anchor.width / 2 - width / 2, current.offsetLeft + 12, Math.max(current.offsetLeft + 12, right - width - 12));
+      const above = Math.max(0, props.popover.anchor.top - current.offsetTop - 22);
+      const below = Math.max(0, bottom - props.popover.anchor.bottom - 22);
+      const placeAbove = naturalHeight.value === 0 ? above >= below : naturalHeight.value <= above || naturalHeight.value > below && above >= below;
+      const availableHeight = placeAbove ? above : below;
+      const renderedHeight = Math.min(naturalHeight.value || availableHeight, availableHeight);
+      const rawTop = placeAbove ? props.popover.anchor.top - 10 - renderedHeight : props.popover.anchor.bottom + 10;
+      const top = clamp(rawTop, current.offsetTop + 12, Math.max(current.offsetTop + 12, bottom - renderedHeight - 12));
+      return h19(Teleport4, { to: "body" }, [h19("div", { class: "dialkit-root", "data-theme": props.theme }, [
+        h19("div", {
+          ref: element,
+          class: "dialkit-timeline-popover",
+          "data-placement": placeAbove ? "above" : "below",
+          style: { left: `${left}px`, top: `${top}px`, width: `${width}px`, maxHeight: `${availableHeight}px`, visibility: naturalHeight.value > 0 ? "visible" : "hidden" },
+          role: "dialog",
+          "aria-label": `Edit ${title}`
+        }, [
+          h19("div", { class: "dialkit-timeline-popover-header" }, [
+            h19("span", { class: "dialkit-timeline-popover-title" }, title),
+            h19("button", { class: "dialkit-timeline-popover-close", title: "Close editor", "aria-label": "Close editor", onClick: props.onClose }, [
+              h19("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, [h19("path", { d: "M6 6L18 18M18 6L6 18" })])
+            ])
+          ]),
+          h19("div", { class: "dialkit-timeline-popover-body" }, [h19(ControlRenderer, {
+            panelId: props.panelId,
+            controls,
+            values: timelinePopoverDisplayValues(props.values, clip.key, clip.stepKeys, stepKey),
+            transitionDuration
+          })])
+        ])
+      ])]);
+    };
+  }
+});
+function readViewport() {
+  return {
+    width: window.visualViewport?.width ?? window.innerWidth,
+    height: window.visualViewport?.height ?? window.innerHeight,
+    offsetLeft: window.visualViewport?.offsetLeft ?? 0,
+    offsetTop: window.visualViewport?.offsetTop ?? 0
+  };
+}
+function clipPopoverExclusions(clip) {
+  return /* @__PURE__ */ new Set([...clip.stepKeys ?? [], ...clip.tracks?.map((track) => track.prop) ?? []]);
+}
+function getClipControls(panelId, path, exclusions) {
+  const panel = DialStore.getPanel(panelId);
+  const folder = panel ? findControl(panel.controls, path) : null;
+  if (!folder?.children) return [];
+  return folder.children.filter((control) => {
+    const key = control.path.slice(path.length + 1);
+    return key !== "at" && key !== "duration" && !exclusions?.has(key);
+  });
+}
+function getControlAt(panelId, path) {
+  const panel = DialStore.getPanel(panelId);
+  return panel ? findControl(panel.controls, path) : null;
+}
+var TimelineClip = defineComponent19({
+  props: {
+    timelineId: { type: String, required: true },
+    clip: { type: Object, required: true },
+    at: { type: Number, required: true },
+    duration: { type: Number, required: true },
+    loop: { type: String, required: true },
+    steps: Array,
+    fixedDuration: { type: Boolean, required: true },
+    composite: Boolean,
+    baseAt: { type: Number, default: 0 },
+    delayMode: Boolean,
+    pxPerSecond: { type: Number, required: true },
+    viewStart: { type: Number, required: true },
+    timelineDuration: { type: Number, required: true },
+    selected: { type: Boolean, required: true },
+    selectedStepKey: String,
+    onClick: { type: Function, required: true },
+    onDrag: { type: Function, required: true }
+  },
+  setup(props) {
+    const dragging = ref15(false);
+    let drag = null;
+    const finish = (event) => {
+      const previous = drag;
+      drag = null;
+      dragging.value = false;
+      if (previous && !previous.moved && event) {
+        const anchor = previous.clickEl ?? event.currentTarget;
+        props.onClick(props.clip, anchor.getBoundingClientRect(), previous.clickEl?.dataset.step);
+      }
+    };
+    return () => {
+      const width = Math.max(props.duration * props.pxPerSecond, 14);
+      const isSteps = Boolean(props.steps?.length);
+      const looping = props.loop === "repeat" && props.duration > 0;
+      const resizable = props.duration > 0 && !props.fixedDuration && !props.composite;
+      const durationText = `${props.fixedDuration && !props.composite ? "~" : ""}${formatSeconds(props.duration)}`;
+      const ghosts = [];
+      if (looping) {
+        const first = Math.max(1, Math.floor((props.viewStart - props.at) / props.duration));
+        for (let offset = 0; offset < 256; offset++) {
+          const index = first + offset;
+          const start = props.at + props.duration * index;
+          if (start >= props.timelineDuration - 1e-6) break;
+          const duration = Math.min(props.duration, props.timelineDuration - start);
+          ghosts.push(h19("div", {
+            key: `ghost:${index}`,
+            class: "dialkit-timeline-clip-ghost",
+            "data-steps": isSteps || void 0,
+            "aria-hidden": "true",
+            style: { left: `${(start - props.viewStart) * props.pxPerSecond + 1}px`, width: `${Math.max(1, duration * props.pxPerSecond - 2)}px`, background: props.clip.color }
+          }, props.steps?.map((step) => h19("span", { class: "dialkit-timeline-clip-ghost-segment", style: { width: `${step.duration * props.pxPerSecond}px` } }))));
+        }
+      }
+      let cumulative = 0;
+      const boundaries = props.steps?.map((step) => cumulative += step.duration) ?? [];
+      const children = [];
+      if (props.composite) {
+        if (width > 56) children.push(h19("span", { class: "dialkit-timeline-clip-duration" }, durationText));
+      } else if (isSteps) {
+        for (const step of props.steps ?? []) {
+          const segmentWidth = step.duration * props.pxPerSecond;
+          children.push(h19("div", {
+            key: step.key ?? "step",
+            class: "dialkit-timeline-clip-segment",
+            "data-step": step.key,
+            "data-selected": props.selectedStepKey === step.key || void 0,
+            style: { width: `${segmentWidth}px` }
+          }, segmentWidth > 52 ? [h19("span", { class: "dialkit-timeline-clip-duration" }, formatSeconds(step.duration))] : []));
+        }
+        (props.steps ?? []).forEach((step, index) => {
+          if (!step.isPhysics) children.push(h19("div", { key: `boundary:${step.key}`, class: "dialkit-timeline-clip-handle", "data-boundary": index, style: { left: `${boundaries[index] * props.pxPerSecond - 4}px` } }));
+        });
+        if (!props.steps?.[0]?.isPhysics) children.push(h19("div", { class: "dialkit-timeline-clip-handle", "data-edge": "start" }));
+      } else {
+        if (resizable) children.push(h19("div", { class: "dialkit-timeline-clip-handle", "data-edge": "start" }));
+        if (width > 56) children.push(h19("span", { class: "dialkit-timeline-clip-duration" }, durationText));
+        if (resizable) children.push(h19("div", { class: "dialkit-timeline-clip-handle", "data-edge": "end" }));
+      }
+      const title = props.composite ? `${props.clip.label} \u2014 composite of its property tracks${looping ? " \xB7 repeats through timeline" : ""} \xB7 click to expand` : `${props.clip.label} \u2014 ${formatSeconds(props.at)} for ${durationText}${props.fixedDuration ? " (duration set by spring physics)" : ""}${looping ? " \xB7 repeats through timeline" : ""}${props.delayMode ? " \xB7 drag to phase-shift" : ""}`;
+      return [...ghosts, h19("div", {
+        class: "dialkit-timeline-clip",
+        "data-steps": isSteps || void 0,
+        "data-composite": props.composite || void 0,
+        "data-selected": props.selected || void 0,
+        "data-dragging": dragging.value || void 0,
+        style: { left: `${(props.at - props.viewStart) * props.pxPerSecond}px`, width: `${width}px`, background: props.composite ? `${props.clip.color}80` : props.clip.color },
+        title,
+        onPointerdown: (event) => {
+          if (event.shiftKey) return;
+          event.stopPropagation();
+          const target = event.target;
+          let mode = "move";
+          let boundaryIndex;
+          if (target.dataset.boundary !== void 0) {
+            mode = "boundary";
+            boundaryIndex = Number(target.dataset.boundary);
+          } else if (!props.fixedDuration) {
+            const edge = target.dataset.edge;
+            if (edge) mode = edge;
+          }
+          drag = {
+            mode,
+            boundaryIndex,
+            pointerX: event.clientX,
+            at: props.at,
+            duration: props.duration,
+            stepDurations: props.steps?.map((step) => step.duration),
+            clickEl: target.closest?.("[data-step]"),
+            moved: false
+          };
+          event.currentTarget.setPointerCapture(event.pointerId);
+        },
+        onPointermove: (event) => {
+          if (!drag || props.pxPerSecond <= 0) return;
+          const dx = event.clientX - drag.pointerX;
+          if (!drag.moved) {
+            if (Math.abs(dx) <= DRAG_THRESHOLD_PX) return;
+            drag.moved = true;
+            dragging.value = true;
+            props.onDrag();
+          }
+          const dt = dx / props.pxPerSecond;
+          if (drag.mode === "boundary" && props.steps && drag.stepDurations) {
+            const index = drag.boundaryIndex ?? 0;
+            const others = drag.stepDurations.reduce((sum, duration, stepIndex) => stepIndex === index ? sum : sum + duration, 0);
+            DialStore.updateValue(props.timelineId, `${props.clip.key}.${props.steps[index].key ?? ""}.duration`, clampStepResize(drag.stepDurations[index] + dt, drag.at, others, props.timelineDuration));
+          } else if (drag.mode === "move") {
+            if (props.delayMode) DialStore.updateValue(props.timelineId, `${props.clip.key}.delay`, clampTrackDelay(drag.at + dt - props.baseAt, props.baseAt, drag.duration, props.timelineDuration));
+            else DialStore.updateValue(props.timelineId, `${props.clip.key}.at`, clampClipMove(drag.at + dt, drag.duration, props.timelineDuration));
+          } else if (drag.mode === "end") {
+            DialStore.updateValue(props.timelineId, `${props.clip.key}.duration`, clampClipResizeEnd(drag.duration + dt, drag.at, props.timelineDuration));
+          } else if (props.steps && drag.stepDurations) {
+            const next = clampClipResizeStart(Math.max(drag.at + dt, Math.max(props.baseAt, 0)), drag.at, drag.stepDurations[0]);
+            DialStore.updateValues(props.timelineId, {
+              [props.delayMode ? `${props.clip.key}.delay` : `${props.clip.key}.at`]: props.delayMode ? Math.max(0, next.at - props.baseAt) : next.at,
+              [`${props.clip.key}.${props.steps[0].key ?? ""}.duration`]: next.duration
+            });
+          } else {
+            const next = clampClipResizeStart(Math.max(drag.at + dt, Math.max(props.baseAt, 0)), drag.at, drag.duration);
+            DialStore.updateValues(props.timelineId, {
+              [props.delayMode ? `${props.clip.key}.delay` : `${props.clip.key}.at`]: props.delayMode ? Math.max(0, next.at - props.baseAt) : next.at,
+              [`${props.clip.key}.duration`]: next.duration
+            });
+          }
+        },
+        onPointerup: finish,
+        onPointercancel: () => finish(),
+        onLostpointercapture: () => finish()
+      }, children), looping ? h19("span", { class: "dialkit-timeline-loop-infinity", "aria-hidden": "true", title: "Repeats indefinitely" }, "\u221E") : null];
+    };
+  }
+});
+
 // src/vue/components/ShortcutsMenu.ts
-import { defineComponent as defineComponent17, h as h17, onUnmounted as onUnmounted10, ref as ref14, Teleport as Teleport4 } from "vue";
+import { defineComponent as defineComponent20, h as h20, onUnmounted as onUnmounted13, ref as ref16, Teleport as Teleport5 } from "vue";
 function formatShortcutKey(sc) {
   if (!sc.key) return "\u2014";
   const mod = sc.modifier === "alt" ? "\u2325" : sc.modifier === "shift" ? "\u21E7" : sc.modifier === "meta" ? "\u2318" : "";
@@ -2846,7 +5788,7 @@ function formatInteraction(sc) {
       return "scroll";
   }
 }
-var ShortcutsMenu = defineComponent17({
+var ShortcutsMenu = defineComponent20({
   name: "DialKitShortcutsMenu",
   props: {
     panelId: {
@@ -2855,10 +5797,10 @@ var ShortcutsMenu = defineComponent17({
     }
   },
   setup(props) {
-    const isOpen = ref14(false);
-    const triggerRef = ref14(null);
-    const dropdownRef = ref14(null);
-    const pos = ref14({ top: 0, right: 0 });
+    const isOpen = ref16(false);
+    const triggerRef = ref16(null);
+    const dropdownRef = ref16(null);
+    const pos = ref16({ top: 0, right: 0 });
     const open = () => {
       const rect = triggerRef.value?.getBoundingClientRect();
       if (rect) {
@@ -2888,7 +5830,7 @@ var ShortcutsMenu = defineComponent17({
         mousedownHandler = null;
       }
     };
-    onUnmounted10(() => {
+    onUnmounted13(() => {
       removeOutsideClickListener();
     });
     return () => {
@@ -2917,13 +5859,13 @@ var ShortcutsMenu = defineComponent17({
         removeOutsideClickListener();
       }
       return [
-        h17("button", {
+        h20("button", {
           ref: triggerRef,
           class: "dialkit-shortcuts-trigger",
           onClick: toggle,
           title: "Keyboard shortcuts"
         }, [
-          h17("svg", {
+          h20("svg", {
             viewBox: "0 0 24 24",
             fill: "none",
             stroke: "currentColor",
@@ -2931,16 +5873,16 @@ var ShortcutsMenu = defineComponent17({
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
           }, [
-            h17("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
-            h17("path", { d: "M6 10H6.01" }),
-            h17("path", { d: "M10 10H10.01" }),
-            h17("path", { d: "M14 10H14.01" }),
-            h17("path", { d: "M18 10H18.01" }),
-            h17("path", { d: "M8 14H16" })
+            h20("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+            h20("path", { d: "M6 10H6.01" }),
+            h20("path", { d: "M10 10H10.01" }),
+            h20("path", { d: "M14 10H14.01" }),
+            h20("path", { d: "M18 10H18.01" }),
+            h20("path", { d: "M8 14H16" })
           ])
         ]),
-        isOpen.value ? h17(Teleport4, { to: "body" }, [
-          h17("div", {
+        isOpen.value ? h20(Teleport5, { to: "body" }, [
+          h20("div", {
             ref: dropdownRef,
             class: "dialkit-root dialkit-shortcuts-dropdown",
             style: {
@@ -2949,19 +5891,19 @@ var ShortcutsMenu = defineComponent17({
               right: `${pos.value.right}px`
             }
           }, [
-            h17("div", { class: "dialkit-shortcuts-title" }, "Keyboard Shortcuts"),
-            h17(
+            h20("div", { class: "dialkit-shortcuts-title" }, "Keyboard Shortcuts"),
+            h20(
               "div",
               { class: "dialkit-shortcuts-list" },
               rows.map(
-                (row) => h17("div", { key: row.path, class: "dialkit-shortcuts-row" }, [
-                  h17("span", { class: "dialkit-shortcuts-row-key" }, formatShortcutKey(row.shortcut)),
-                  h17("span", { class: "dialkit-shortcuts-row-label" }, row.label),
-                  h17("span", { class: "dialkit-shortcuts-row-mode" }, formatInteraction(row.shortcut))
+                (row) => h20("div", { key: row.path, class: "dialkit-shortcuts-row" }, [
+                  h20("span", { class: "dialkit-shortcuts-row-key" }, formatShortcutKey(row.shortcut)),
+                  h20("span", { class: "dialkit-shortcuts-row-label" }, row.label),
+                  h20("span", { class: "dialkit-shortcuts-row-mode" }, formatInteraction(row.shortcut))
                 ])
               )
             ),
-            h17("div", { class: "dialkit-shortcuts-hint" }, "See pill badges on controls for keys")
+            h20("div", { class: "dialkit-shortcuts-hint" }, "See pill badges on controls for keys")
           ])
         ]) : null
       ];
@@ -2970,8 +5912,8 @@ var ShortcutsMenu = defineComponent17({
 });
 
 // src/vue/components/ButtonGroup.ts
-import { defineComponent as defineComponent18, h as h18 } from "vue";
-var ButtonGroup = defineComponent18({
+import { defineComponent as defineComponent21, h as h21 } from "vue";
+var ButtonGroup = defineComponent21({
   name: "DialKitButtonGroup",
   props: {
     buttons: {
@@ -2980,11 +5922,11 @@ var ButtonGroup = defineComponent18({
     }
   },
   setup(props) {
-    return () => h18(
+    return () => h21(
       "div",
       { class: "dialkit-button-group" },
       props.buttons.map(
-        (button) => h18("button", { class: "dialkit-button", onClick: button.onClick }, button.label)
+        (button) => h21("button", { class: "dialkit-button", onClick: button.onClick }, button.label)
       )
     );
   }
@@ -2992,8 +5934,10 @@ var ButtonGroup = defineComponent18({
 export {
   ButtonGroup,
   ColorControl,
+  ControlRenderer,
   DialRoot,
   DialStore,
+  DialTimeline,
   EasingVisualization,
   Folder,
   PresetManager,
@@ -3008,6 +5952,8 @@ export {
   Toggle,
   TransitionControl,
   useDialKit,
+  useDialKitController,
+  useDialTimeline,
   useShortcutContext,
   vDialKit
 };