dialkit 1.2.1 → 1.4.0

package/dist/panel-drag.d.ts

@@ -0,0 +1,19 @@
+type PanelDragOffset = {
+    x: number;
+    y: number;
+};
+type PanelDragStart = {
+    pointerX: number;
+    pointerY: number;
+    elX: number;
+    elY: number;
+};
+type PanelDragOriginX = 'left' | 'right';
+declare function getPanelDragHandle(target: EventTarget | null, panel: HTMLElement | null): HTMLElement | null;
+declare function getPanelDragStart(pointerX: number, pointerY: number, panel: HTMLElement): PanelDragStart;
+declare function getPanelDragOffset(start: PanelDragStart, pointerX: number, pointerY: number): PanelDragOffset;
+declare function hasPanelDragMoved(start: PanelDragStart, pointerX: number, pointerY: number): boolean;
+declare function getPanelOriginX(position: string, offset: PanelDragOffset | null, viewportWidth?: number | undefined): PanelDragOriginX;
+declare function blockPanelDragClick(handle: HTMLElement): void;
+
+export { type PanelDragOffset, type PanelDragOriginX, type PanelDragStart, blockPanelDragClick, getPanelDragHandle, getPanelDragOffset, getPanelDragStart, getPanelOriginX, hasPanelDragMoved };

package/dist/panel-drag.js

@@ -0,0 +1,72 @@
+// 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);
+}
+export {
+  blockPanelDragClick,
+  getPanelDragHandle,
+  getPanelDragOffset,
+  getPanelDragStart,
+  getPanelOriginX,
+  hasPanelDragMoved
+};
+//# sourceMappingURL=panel-drag.js.map

package/dist/panel-drag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/panel-drag.ts"],"sourcesContent":["export type PanelDragOffset = {\n  x: number;\n  y: number;\n};\n\nexport type PanelDragStart = {\n  pointerX: number;\n  pointerY: number;\n  elX: number;\n  elY: number;\n};\n\nexport type PanelDragOriginX = 'left' | 'right';\n\nconst PANEL_DRAG_THRESHOLD = 8;\nconst COLLAPSED_PANEL_SIZE = 42;\n\nconst DRAG_EXCLUSION_SELECTOR = [\n  '.dialkit-panel-icon',\n  '.dialkit-panel-toolbar',\n  'button',\n  'input',\n  'select',\n  'textarea',\n  'a',\n  '[role=\"button\"]',\n  '[contenteditable=\"true\"]',\n].join(',');\n\nexport function getPanelDragHandle(target: EventTarget | null, panel: HTMLElement | null): HTMLElement | null {\n  if (!(target instanceof Element) || !panel) return null;\n\n  const inner = target.closest<HTMLElement>('.dialkit-panel-inner');\n  if (!inner || !panel.contains(inner)) return null;\n\n  if (inner.getAttribute('data-collapsed') === 'true') {\n    return inner;\n  }\n\n  const header = target.closest<HTMLElement>('.dialkit-panel-header');\n  if (!header || !inner.contains(header)) return null;\n\n  if (target.closest(DRAG_EXCLUSION_SELECTOR)) return null;\n\n  return header;\n}\n\nexport function getPanelDragStart(pointerX: number, pointerY: number, panel: HTMLElement): PanelDragStart {\n  const rect = panel.getBoundingClientRect();\n  return {\n    pointerX,\n    pointerY,\n    elX: rect.left,\n    elY: rect.top,\n  };\n}\n\nexport function getPanelDragOffset(start: PanelDragStart, pointerX: number, pointerY: number): PanelDragOffset {\n  return {\n    x: start.elX + pointerX - start.pointerX,\n    y: start.elY + pointerY - start.pointerY,\n  };\n}\n\nexport function hasPanelDragMoved(start: PanelDragStart, pointerX: number, pointerY: number): boolean {\n  const dx = pointerX - start.pointerX;\n  const dy = pointerY - start.pointerY;\n  return Math.hypot(dx, dy) >= PANEL_DRAG_THRESHOLD;\n}\n\nexport function getPanelOriginX(\n  position: string,\n  offset: PanelDragOffset | null,\n  viewportWidth = typeof window !== 'undefined' ? window.innerWidth : undefined\n): PanelDragOriginX {\n  if (offset && viewportWidth) {\n    return offset.x + COLLAPSED_PANEL_SIZE / 2 < viewportWidth / 2 ? 'left' : 'right';\n  }\n\n  return position.endsWith('left') ? 'left' : 'right';\n}\n\nexport function blockPanelDragClick(handle: HTMLElement) {\n  const blocker = (event: Event) => {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    event.stopPropagation();\n  };\n\n  handle.addEventListener('click', blocker, { capture: true, once: true });\n  window.setTimeout(() => {\n    handle.removeEventListener('click', blocker, true);\n  }, 0);\n}\n"],"mappings":";AAcA,IAAM,uBAAuB;AAC7B,IAAM,uBAAuB;AAE7B,IAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEH,SAAS,mBAAmB,QAA4B,OAA+C;AAC5G,MAAI,EAAE,kBAAkB,YAAY,CAAC,MAAO,QAAO;AAEnD,QAAM,QAAQ,OAAO,QAAqB,sBAAsB;AAChE,MAAI,CAAC,SAAS,CAAC,MAAM,SAAS,KAAK,EAAG,QAAO;AAE7C,MAAI,MAAM,aAAa,gBAAgB,MAAM,QAAQ;AACnD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,OAAO,QAAqB,uBAAuB;AAClE,MAAI,CAAC,UAAU,CAAC,MAAM,SAAS,MAAM,EAAG,QAAO;AAE/C,MAAI,OAAO,QAAQ,uBAAuB,EAAG,QAAO;AAEpD,SAAO;AACT;AAEO,SAAS,kBAAkB,UAAkB,UAAkB,OAAoC;AACxG,QAAM,OAAO,MAAM,sBAAsB;AACzC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,KAAK,KAAK;AAAA,EACZ;AACF;AAEO,SAAS,mBAAmB,OAAuB,UAAkB,UAAmC;AAC7G,SAAO;AAAA,IACL,GAAG,MAAM,MAAM,WAAW,MAAM;AAAA,IAChC,GAAG,MAAM,MAAM,WAAW,MAAM;AAAA,EAClC;AACF;AAEO,SAAS,kBAAkB,OAAuB,UAAkB,UAA2B;AACpG,QAAM,KAAK,WAAW,MAAM;AAC5B,QAAM,KAAK,WAAW,MAAM;AAC5B,SAAO,KAAK,MAAM,IAAI,EAAE,KAAK;AAC/B;AAEO,SAAS,gBACd,UACA,QACA,gBAAgB,OAAO,WAAW,cAAc,OAAO,aAAa,QAClD;AAClB,MAAI,UAAU,eAAe;AAC3B,WAAO,OAAO,IAAI,uBAAuB,IAAI,gBAAgB,IAAI,SAAS;AAAA,EAC5E;AAEA,SAAO,SAAS,SAAS,MAAM,IAAI,SAAS;AAC9C;AAEO,SAAS,oBAAoB,QAAqB;AACvD,QAAM,UAAU,CAAC,UAAiB;AAChC,UAAM,eAAe;AACrB,UAAM,yBAAyB;AAC/B,UAAM,gBAAgB;AAAA,EACxB;AAEA,SAAO,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,MAAM,KAAK,CAAC;AACvE,SAAO,WAAW,MAAM;AACtB,WAAO,oBAAoB,SAAS,SAAS,IAAI;AAAA,EACnD,GAAG,CAAC;AACN;","names":[]}

package/dist/solid/index.d.ts

@@ -43,6 +43,9 @@ type DialConfig = {
 type ResolvedValues<T extends DialConfig> = {
     [K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? TransitionConfig : T[K] extends EasingConfig ? TransitionConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
 };
+type DialKitValueUpdates<T extends DialConfig> = {
+    [K in keyof T as K extends '_collapsed' ? never : K]?: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig | EasingConfig ? TransitionConfig : T[K] extends ActionConfig ? never : T[K] extends SelectConfig | ColorConfig | TextConfig ? string : T[K] extends DialConfig ? DialKitValueUpdates<T[K]> : T[K];
+};
 type ShortcutMode = 'fine' | 'normal' | 'coarse';
 type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
 type ShortcutConfig = {
@@ -73,6 +76,7 @@ type PanelConfig = {
     controls: ControlMeta[];
     values: Record<string, DialValue>;
     shortcuts: Record<string, ShortcutConfig>;
+    kind?: 'timeline';
 };
 type Listener = () => void;
 type ActionListener = (action: string) => void;
@@ -81,8 +85,21 @@ type Preset = {
     name: string;
     values: Record<string, DialValue>;
 };
+type DialKitPersistOptions = boolean | {
+    key?: string;
+    storage?: 'localStorage' | 'sessionStorage';
+    presets?: boolean;
+};
+type DialStorePanelOptions = {
+    retainOnUnmount?: boolean;
+    persist?: DialKitPersistOptions;
+    kind?: 'timeline';
+};
 declare class DialStoreClass {
     private panels;
+    private panelsSnapshot;
+    private standardPanelsSnapshot;
+    private timelinePanelsSnapshot;
     private listeners;
     private globalListeners;
     private snapshots;
@@ -90,17 +107,23 @@ declare class DialStoreClass {
     private presets;
     private activePreset;
     private baseValues;
-    registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
-    updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
+    private defaultValues;
+    private registrationCounts;
+    private retainedPanels;
+    private persistConfigs;
+    registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>, options?: DialStorePanelOptions): void;
+    updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>, options?: DialStorePanelOptions): void;
     unregisterPanel(id: string): void;
     updateValue(panelId: string, path: string, value: DialValue): void;
+    updateValues(panelId: string, updates: Record<string, DialValue>): void;
+    resetValues(panelId: string): void;
     updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
     getSpringMode(panelId: string, path: string): 'simple' | 'advanced';
     updateTransitionMode(panelId: string, path: string, mode: 'easing' | 'simple' | 'advanced'): void;
     getTransitionMode(panelId: string, path: string): 'easing' | 'simple' | 'advanced';
     getValue(panelId: string, path: string): DialValue | undefined;
     getValues(panelId: string): Record<string, DialValue>;
-    getPanels(): PanelConfig[];
+    getPanels(kind?: 'panel' | 'timeline'): PanelConfig[];
     getPanel(id: string): PanelConfig | undefined;
     subscribe(panelId: string, listener: Listener): () => void;
     subscribeGlobal(listener: Listener): () => void;
@@ -123,6 +146,13 @@ declare class DialStoreClass {
         control: ControlMeta;
         shortcut: ShortcutConfig;
     }>;
+    private configurePanelRetention;
+    private reconcileValues;
+    private reconcilePresets;
+    private normalizePersistConfig;
+    private loadPersistedPanel;
+    private persistPanel;
+    private getStorage;
     private findControlByPath;
     private notify;
     private notifyGlobal;
@@ -147,10 +177,176 @@ declare class DialStoreClass {
 declare const DialStore: DialStoreClass;
 
 interface CreateDialOptions {
+    id?: string;
+    persist?: DialKitPersistOptions;
     onAction?: (action: string) => void;
     shortcuts?: Record<string, ShortcutConfig>;
 }
+interface DialKitController<T extends DialConfig> {
+    values: Accessor<ResolvedValues<T>>;
+    setValue: (path: string, value: DialValue) => void;
+    setValues: (values: DialKitValueUpdates<T>) => void;
+    resetValues: () => void;
+    getValues: () => ResolvedValues<T>;
+}
 declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): Accessor<ResolvedValues<T>>;
+declare function createDialKitController<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): DialKitController<T>;
+
+type TimelineClipLoop = 'off' | 'repeat';
+type TimelineStepValues = {
+    [key: string]: DialConfig[string] | undefined;
+};
+type TimelineStepConfig = {
+    duration?: number;
+    to?: TimelineStepValues;
+    transition?: TransitionConfig;
+};
+type TimelinePropStepConfig = {
+    duration?: number;
+    to?: number | string;
+    transition?: TransitionConfig;
+};
+type TimelinePropConfig = {
+    from?: number | string;
+    to?: number | string;
+    duration?: number;
+    /** Offset from the clip's `at` in seconds. */
+    delay?: number;
+    transition?: TransitionConfig;
+    steps?: TimelinePropStepConfig[];
+};
+type TimelineClipBase = {
+    at: number;
+    duration?: number;
+    transition?: TransitionConfig;
+    loop?: boolean | TimelineClipLoop;
+};
+type TimelineClipConfig = TimelineClipBase & ({
+    from?: DialConfig;
+    to?: DialConfig;
+    steps?: never;
+    props?: never;
+} | {
+    from?: DialConfig;
+    to?: never;
+    /** Sequential legs on one row — a segmented bar; boundaries retime legs. */
+    steps: TimelineStepConfig[];
+    props?: never;
+} | {
+    from?: never;
+    to?: never;
+    steps?: never;
+    /** Independent per-property tracks — mutually exclusive with from/to/steps. */
+    props: {
+        [prop: string]: TimelinePropConfig;
+    };
+});
+/** Nested keys group clips into a collapsible layer — purely presentational. */
+type TimelineGroupConfig = {
+    [key: string]: TimelineClipConfig;
+};
+type TimelineConfig = {
+    /** Total timeline length in seconds. Inferred from the last clip when omitted. */
+    duration?: number;
+} & {
+    [key: string]: TimelineClipConfig | TimelineGroupConfig | number | undefined;
+};
+/** CSS-friendly output for consumers not using Motion — spread into a style. */
+type TimelineClipCss = {
+    transitionDuration: string;
+    transitionTimingFunction: string;
+};
+type TimelineClipValues<C extends TimelineClipConfig = TimelineClipConfig> = {
+    at: number;
+    duration: number;
+    /** Effective code-defined loop mode. */
+    loop: TimelineClipLoop;
+    /** Playhead is at or past the clip start. */
+    started: boolean;
+    /** Playhead is inside the clip — for looping clips, inside any cycle. */
+    active: boolean;
+    /** Playhead is past the clip end (for looping clips, past the timeline end). */
+    done: boolean;
+    /**
+     * 0–1 position of the playhead within the clip — cycle progress (a
+     * sawtooth) for looping clips, sequence progress for steps clips.
+     */
+    progress: number;
+    /** Index of the leg under the playhead, for sequence clips. */
+    step: C['steps'] extends TimelineStepConfig[] ? number : undefined;
+    from: C['props'] extends Record<string, TimelinePropConfig> ? {
+        [K in keyof C['props']]: number | string;
+    } : C['from'] extends DialConfig ? ResolvedValues<C['from']> : undefined;
+    to: C['props'] extends Record<string, TimelinePropConfig> ? {
+        [K in keyof C['props']]: number | string;
+    } : C['steps'] extends TimelineStepConfig[] ? C['from'] extends DialConfig ? ResolvedValues<C['from']> : Record<string, number | string> : C['to'] extends DialConfig ? ResolvedValues<C['to']> : undefined;
+    /** `to` once the clip has started, `from` before — hand it to Motion's animate.
+     * For sequences this is the final merged state; for props clips, per-track
+     * endpoint records. */
+    animate: C['props'] extends Record<string, TimelinePropConfig> ? {
+        [K in keyof C['props']]: number | string;
+    } : C['steps'] extends TimelineStepConfig[] ? C['from'] extends DialConfig ? ResolvedValues<C['from']> : Record<string, number | string> | undefined : C['to'] extends DialConfig ? C['from'] extends DialConfig ? ResolvedValues<C['from']> | ResolvedValues<C['to']> : ResolvedValues<C['to']> | undefined : undefined;
+    /** The clip's editable curve — single-curve clips only. */
+    transition: C['props'] extends Record<string, TimelinePropConfig> ? undefined : C['steps'] extends TimelineStepConfig[] ? undefined : C extends {
+        transition: TransitionConfig;
+    } | {
+        from: DialConfig;
+    } | {
+        to: DialConfig;
+    } ? TransitionConfig : undefined;
+    /** Duration + timing-function for native CSS transitions — single-curve clips only. */
+    css: C['props'] extends Record<string, TimelinePropConfig> ? undefined : C['steps'] extends TimelineStepConfig[] ? undefined : C extends {
+        transition: TransitionConfig;
+    } | {
+        from: DialConfig;
+    } | {
+        to: DialConfig;
+    } ? TimelineClipCss : undefined;
+    /**
+     * Values interpolated through the clip's curves at the current playhead —
+     * bind to style for true scrubbing: the element is exactly at this point
+     * in time whether playing, paused, or scrubbing. Sequence clips report the
+     * merged state of all legs (declare every animated property in `from`);
+     * props clips report every track's value.
+     */
+    current: C['props'] extends Record<string, TimelinePropConfig> ? {
+        [K in keyof C['props']]: number | string;
+    } : C['steps'] extends TimelineStepConfig[] ? C['from'] extends DialConfig ? ResolvedValues<C['from']> : Record<string, number | string> : C['to'] extends DialConfig ? C['from'] extends DialConfig ? ResolvedValues<C['from']> | ResolvedValues<C['to']> : undefined : undefined;
+};
+type TimelineGroupValues<G extends TimelineGroupConfig> = {
+    [K in keyof G as G[K] extends TimelineClipConfig ? K : never]: TimelineClipValues<Extract<G[K], TimelineClipConfig>>;
+};
+type DialTimelineValues<T extends TimelineConfig> = {
+    time: number;
+    playing: boolean;
+    duration: number;
+    play: () => void;
+    pause: () => void;
+    replay: () => void;
+    seek: (time: number) => void;
+} & {
+    [K in keyof T as T[K] extends TimelineClipConfig ? K : never]: TimelineClipValues<Extract<T[K], TimelineClipConfig>>;
+} & {
+    [K in keyof T as T[K] extends TimelineClipConfig ? never : T[K] extends TimelineGroupConfig ? K : never]: TimelineGroupValues<Extract<T[K], TimelineGroupConfig>>;
+};
+
+interface DialTimelineOptions {
+    id?: string;
+    persist?: DialKitPersistOptions;
+    /** Start playing on mount. Defaults to true. */
+    autoplay?: boolean;
+    /**
+     * Loop when the playhead reaches the end. `true` restarts the whole
+     * timeline; `{ from }` wraps back to that time instead, so clips before it
+     * play once and looping clips keep cycling forever. Defaults to false.
+     */
+    loop?: boolean | {
+        from: number;
+    };
+}
+
+type CreateDialTimelineOptions = DialTimelineOptions;
+declare function createDialTimeline<T extends TimelineConfig>(name: string, config: T, options?: CreateDialTimelineOptions): Accessor<DialTimelineValues<T>>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 type DialMode = 'popover' | 'inline';
@@ -161,9 +357,20 @@ interface DialRootProps {
     mode?: DialMode;
     theme?: DialTheme;
     productionEnabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
 declare function DialRoot(props: DialRootProps): solid_js.JSX.Element;
 
+interface DialTimelineProps {
+    theme?: DialTheme;
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibilityChange?: (visible: boolean) => void;
+    defaultOpen?: boolean;
+    productionEnabled?: boolean;
+}
+declare function DialTimeline(props: DialTimelineProps): JSX.Element;
+
 interface SliderProps {
     label: string;
     value: number;
@@ -190,13 +397,35 @@ interface FolderProps {
     title: string;
     children: JSX.Element;
     defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** @deprecated Use RootPanel instead; kept for backwards compatibility. */
     isRoot?: boolean;
+    /** @deprecated Only meaningful with isRoot. */
     inline?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
+    /** @deprecated Only meaningful with isRoot. */
     toolbar?: JSX.Element;
+    /** @deprecated Only meaningful with isRoot. */
+    panelHeightOffset?: number;
 }
+/** Collapsible section with animated height/opacity and rotating chevron. */
 declare function Folder(props: FolderProps): JSX.Element;
 
+interface RootPanelProps {
+    title: string;
+    children: JSX.Element;
+    defaultOpen?: boolean;
+    inline?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    toolbar?: JSX.Element;
+    panelHeightOffset?: number;
+}
+/**
+ * The top-level panel shell: header with panel icon and toolbar, and (in
+ * popover mode) the bubble-to-panel morph animation with drag-friendly
+ * collapsed state. Section folding lives in Folder.
+ */
+declare function RootPanel(props: RootPanelProps): JSX.Element;
+
 interface ButtonGroupProps {
     buttons: Array<{
         label: string;
@@ -220,6 +449,28 @@ interface SpringVisualizationProps {
 }
 declare function SpringVisualization(props: SpringVisualizationProps): solid_js.JSX.Element;
 
+interface TransitionDurationControl {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface TransitionControlProps {
+    panelId: string;
+    path: string;
+    label: string;
+    value: TransitionConfig;
+    onChange: (value: TransitionConfig) => void;
+    hideDuration?: boolean;
+    durationControl?: TransitionDurationControl;
+}
+declare function TransitionControl(props: TransitionControlProps): solid_js.JSX.Element;
+
+declare function EasingVisualization(props: {
+    easing: EasingConfig;
+}): solid_js.JSX.Element;
+
 interface TextControlProps {
     label: string;
     value: string;
@@ -255,4 +506,12 @@ interface PresetManagerProps {
 }
 declare function PresetManager(props: PresetManagerProps): solid_js.JSX.Element;
 
-export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, type ShortcutConfig, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, createDialKit };
+interface ControlRendererProps {
+    panelId: string;
+    controls: ControlMeta[];
+    values: Record<string, DialValue>;
+    transitionDuration?: TransitionDurationControl;
+}
+declare function ControlRenderer(props: ControlRendererProps): solid_js.JSX.Element;
+
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, ControlRenderer, type CreateDialOptions, type CreateDialTimelineOptions, type DialConfig, type DialKitController, type DialKitPersistOptions, type DialKitValueUpdates, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, DialTimeline, type DialTimelineProps, type DialTimelineValues, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, RootPanel, type SelectConfig, SelectControl, type ShortcutConfig, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, type TimelineClipConfig, type TimelineClipCss, type TimelineClipLoop, type TimelineClipValues, type TimelineConfig, type TimelineGroupConfig, type TimelineGroupValues, type TimelinePropConfig, type TimelinePropStepConfig, type TimelineStepConfig, type TimelineStepValues, Toggle, type TransitionConfig, TransitionControl, createDialKit, createDialKitController, createDialTimeline };