dialkit 1.0.0 → 1.2.0

package/dist/index.d.cts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -44,6 +43,14 @@ 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 ShortcutMode = 'fine' | 'normal' | 'coarse';
+type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
+type ShortcutConfig = {
+    key?: string;
+    modifier?: 'alt' | 'shift' | 'meta';
+    mode?: ShortcutMode;
+    interaction?: ShortcutInteraction;
+};
 type ControlMeta = {
     type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
     path: string;
@@ -58,12 +65,14 @@ type ControlMeta = {
         label: string;
     })[];
     placeholder?: string;
+    shortcut?: ShortcutConfig;
 };
 type PanelConfig = {
     id: string;
     name: string;
     controls: ControlMeta[];
     values: Record<string, DialValue>;
+    shortcuts: Record<string, ShortcutConfig>;
 };
 type Listener = () => void;
 type ActionListener = (action: string) => void;
@@ -81,8 +90,8 @@ declare class DialStoreClass {
     private presets;
     private activePreset;
     private baseValues;
-    registerPanel(id: string, name: string, config: DialConfig): void;
-    updatePanel(id: string, name: string, config: DialConfig): void;
+    registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
+    updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
     unregisterPanel(id: string): void;
     updateValue(panelId: string, path: string, value: DialValue): void;
     updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
@@ -103,6 +112,18 @@ declare class DialStoreClass {
     getPresets(panelId: string): Preset[];
     getActivePresetId(panelId: string): string | null;
     clearActivePreset(panelId: string): void;
+    resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
+        panelId: string;
+        path: string;
+        control: ControlMeta;
+    } | null;
+    resolveScrollOnlyTargets(): Array<{
+        panelId: string;
+        path: string;
+        control: ControlMeta;
+        shortcut: ShortcutConfig;
+    }>;
+    private findControlByPath;
     private notify;
     private notifyGlobal;
     private initTransitionModes;
@@ -127,15 +148,21 @@ declare const DialStore: DialStoreClass;
 
 interface UseDialOptions {
     onAction?: (action: string) => void;
+    shortcuts?: Record<string, ShortcutConfig>;
 }
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
+type DialTheme = 'light' | 'dark' | 'system';
 interface DialRootProps {
     position?: DialPosition;
     defaultOpen?: boolean;
+    mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
 }
-declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode, theme, productionEnabled }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -145,25 +172,30 @@ interface SliderProps {
     max?: number;
     step?: number;
     unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 }
-declare function Slider({ label, value, onChange, min, max, step, unit, }: SliderProps): react_jsx_runtime.JSX.Element;
+declare function Slider({ label, value, onChange, min, max, step, unit, shortcut, shortcutActive, }: SliderProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleProps {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 }
-declare function Toggle({ label, checked, onChange }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ label, checked, onChange, shortcut, shortcutActive }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface FolderProps {
     title: string;
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -237,4 +269,9 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };
+interface ShortcutsMenuProps {
+    panelId: string;
+}
+declare function ShortcutsMenu({ panelId }: ShortcutsMenuProps): react_jsx_runtime.JSX.Element | null;
+
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, type ShortcutConfig, type ShortcutInteraction, type ShortcutMode, ShortcutsMenu, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };

package/dist/index.d.ts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 type SpringConfig = {
     type: 'spring';
@@ -44,6 +43,14 @@ 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 ShortcutMode = 'fine' | 'normal' | 'coarse';
+type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
+type ShortcutConfig = {
+    key?: string;
+    modifier?: 'alt' | 'shift' | 'meta';
+    mode?: ShortcutMode;
+    interaction?: ShortcutInteraction;
+};
 type ControlMeta = {
     type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
     path: string;
@@ -58,12 +65,14 @@ type ControlMeta = {
         label: string;
     })[];
     placeholder?: string;
+    shortcut?: ShortcutConfig;
 };
 type PanelConfig = {
     id: string;
     name: string;
     controls: ControlMeta[];
     values: Record<string, DialValue>;
+    shortcuts: Record<string, ShortcutConfig>;
 };
 type Listener = () => void;
 type ActionListener = (action: string) => void;
@@ -81,8 +90,8 @@ declare class DialStoreClass {
     private presets;
     private activePreset;
     private baseValues;
-    registerPanel(id: string, name: string, config: DialConfig): void;
-    updatePanel(id: string, name: string, config: DialConfig): void;
+    registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
+    updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
     unregisterPanel(id: string): void;
     updateValue(panelId: string, path: string, value: DialValue): void;
     updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
@@ -103,6 +112,18 @@ declare class DialStoreClass {
     getPresets(panelId: string): Preset[];
     getActivePresetId(panelId: string): string | null;
     clearActivePreset(panelId: string): void;
+    resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
+        panelId: string;
+        path: string;
+        control: ControlMeta;
+    } | null;
+    resolveScrollOnlyTargets(): Array<{
+        panelId: string;
+        path: string;
+        control: ControlMeta;
+        shortcut: ShortcutConfig;
+    }>;
+    private findControlByPath;
     private notify;
     private notifyGlobal;
     private initTransitionModes;
@@ -127,15 +148,21 @@ declare const DialStore: DialStoreClass;
 
 interface UseDialOptions {
     onAction?: (action: string) => void;
+    shortcuts?: Record<string, ShortcutConfig>;
 }
 declare function useDialKit<T extends DialConfig>(name: string, config: T, options?: UseDialOptions): ResolvedValues<T>;
 
 type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type DialMode = 'popover' | 'inline';
+type DialTheme = 'light' | 'dark' | 'system';
 interface DialRootProps {
     position?: DialPosition;
     defaultOpen?: boolean;
+    mode?: DialMode;
+    theme?: DialTheme;
+    productionEnabled?: boolean;
 }
-declare function DialRoot({ position, defaultOpen }: DialRootProps): react.ReactPortal | null;
+declare function DialRoot({ position, defaultOpen, mode, theme, productionEnabled }: DialRootProps): react_jsx_runtime.JSX.Element | null;
 
 interface SliderProps {
     label: string;
@@ -145,25 +172,30 @@ interface SliderProps {
     max?: number;
     step?: number;
     unit?: string;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 }
-declare function Slider({ label, value, onChange, min, max, step, unit, }: SliderProps): react_jsx_runtime.JSX.Element;
+declare function Slider({ label, value, onChange, min, max, step, unit, shortcut, shortcutActive, }: SliderProps): react_jsx_runtime.JSX.Element;
 
 interface ToggleProps {
     label: string;
     checked: boolean;
     onChange: (checked: boolean) => void;
+    shortcut?: ShortcutConfig;
+    shortcutActive?: boolean;
 }
-declare function Toggle({ label, checked, onChange }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ label, checked, onChange, shortcut, shortcutActive }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface FolderProps {
     title: string;
     children: ReactNode;
     defaultOpen?: boolean;
     isRoot?: boolean;
+    inline?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     toolbar?: ReactNode;
 }
-declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ title, children, defaultOpen, isRoot, inline, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonGroupProps {
     buttons: Array<{
@@ -237,4 +269,9 @@ interface PresetManagerProps {
 }
 declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
 
-export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };
+interface ShortcutsMenuProps {
+    panelId: string;
+}
+declare function ShortcutsMenu({ panelId }: ShortcutsMenuProps): react_jsx_runtime.JSX.Element | null;
+
+export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, type DialValue, type EasingConfig, EasingVisualization, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, type ShortcutConfig, type ShortcutInteraction, type ShortcutMode, ShortcutsMenu, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type TransitionConfig, TransitionControl, type UseDialOptions, useDialKit };