dialkit 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +174 -2
  2. package/dist/icons.d.ts +19 -0
  3. package/dist/icons.js +39 -0
  4. package/dist/icons.js.map +1 -0
  5. package/dist/index.cjs +876 -337
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.d.cts +41 -6
  8. package/dist/index.d.ts +41 -6
  9. package/dist/index.js +878 -341
  10. package/dist/index.js.map +1 -1
  11. package/dist/shortcut-utils.d.ts +39 -0
  12. package/dist/shortcut-utils.js +100 -0
  13. package/dist/shortcut-utils.js.map +1 -0
  14. package/dist/solid/index.cjs +1011 -544
  15. package/dist/solid/index.cjs.map +1 -1
  16. package/dist/solid/index.d.cts +33 -3
  17. package/dist/solid/index.d.ts +33 -3
  18. package/dist/solid/index.js +864 -398
  19. package/dist/solid/index.js.map +1 -1
  20. package/dist/store/index.cjs +52 -12
  21. package/dist/store/index.cjs.map +1 -1
  22. package/dist/store/index.d.cts +25 -3
  23. package/dist/store/index.d.ts +25 -3
  24. package/dist/store/index.js +52 -12
  25. package/dist/store/index.js.map +1 -1
  26. package/dist/styles.css +256 -25
  27. package/dist/svelte/components/ControlRenderer.svelte +12 -0
  28. package/dist/svelte/components/ControlRenderer.svelte.d.ts.map +1 -1
  29. package/dist/svelte/components/DialRoot.svelte +22 -8
  30. package/dist/svelte/components/DialRoot.svelte.d.ts +3 -0
  31. package/dist/svelte/components/DialRoot.svelte.d.ts.map +1 -1
  32. package/dist/svelte/components/Folder.svelte +17 -8
  33. package/dist/svelte/components/Folder.svelte.d.ts.map +1 -1
  34. package/dist/svelte/components/Panel.svelte +14 -9
  35. package/dist/svelte/components/Panel.svelte.d.ts.map +1 -1
  36. package/dist/svelte/components/PresetManager.svelte +7 -6
  37. package/dist/svelte/components/PresetManager.svelte.d.ts.map +1 -1
  38. package/dist/svelte/components/SegmentedControl.svelte +30 -74
  39. package/dist/svelte/components/SegmentedControl.svelte.d.ts.map +1 -1
  40. package/dist/svelte/components/SelectControl.svelte +2 -1
  41. package/dist/svelte/components/SelectControl.svelte.d.ts.map +1 -1
  42. package/dist/svelte/components/ShortcutListener.svelte +265 -0
  43. package/dist/svelte/components/ShortcutListener.svelte.d.ts +13 -0
  44. package/dist/svelte/components/ShortcutListener.svelte.d.ts.map +1 -0
  45. package/dist/svelte/components/ShortcutsMenu.svelte +128 -0
  46. package/dist/svelte/components/ShortcutsMenu.svelte.d.ts +7 -0
  47. package/dist/svelte/components/ShortcutsMenu.svelte.d.ts.map +1 -0
  48. package/dist/svelte/components/Slider.svelte +16 -29
  49. package/dist/svelte/components/Slider.svelte.d.ts +3 -0
  50. package/dist/svelte/components/Slider.svelte.d.ts.map +1 -1
  51. package/dist/svelte/components/SpringControl.svelte +17 -15
  52. package/dist/svelte/components/SpringControl.svelte.d.ts.map +1 -1
  53. package/dist/svelte/components/Toggle.svelte +13 -2
  54. package/dist/svelte/components/Toggle.svelte.d.ts +3 -0
  55. package/dist/svelte/components/Toggle.svelte.d.ts.map +1 -1
  56. package/dist/svelte/components/TransitionControl.svelte +28 -25
  57. package/dist/svelte/components/TransitionControl.svelte.d.ts.map +1 -1
  58. package/dist/svelte/createDialKit.svelte.d.ts +2 -1
  59. package/dist/svelte/createDialKit.svelte.d.ts.map +1 -1
  60. package/dist/svelte/createDialKit.svelte.js +1 -1
  61. package/dist/svelte/index.d.ts +6 -2
  62. package/dist/svelte/index.d.ts.map +1 -1
  63. package/dist/svelte/index.js +4 -0
  64. package/dist/svelte/theme-css.d.ts +1 -1
  65. package/dist/svelte/theme-css.d.ts.map +1 -1
  66. package/dist/svelte/theme-css.js +257 -26
  67. package/dist/vue/index.cjs +3056 -0
  68. package/dist/vue/index.cjs.map +1 -0
  69. package/dist/vue/index.d.cts +675 -0
  70. package/dist/vue/index.d.ts +675 -0
  71. package/dist/vue/index.js +3014 -0
  72. package/dist/vue/index.js.map +1 -0
  73. package/package.json +24 -4
@@ -43,6 +43,14 @@ type DialConfig = {
43
43
  type ResolvedValues<T extends DialConfig> = {
44
44
  [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];
45
45
  };
46
+ type ShortcutMode = 'fine' | 'normal' | 'coarse';
47
+ type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
48
+ type ShortcutConfig = {
49
+ key?: string;
50
+ modifier?: 'alt' | 'shift' | 'meta';
51
+ mode?: ShortcutMode;
52
+ interaction?: ShortcutInteraction;
53
+ };
46
54
  type ControlMeta = {
47
55
  type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
48
56
  path: string;
@@ -57,12 +65,14 @@ type ControlMeta = {
57
65
  label: string;
58
66
  })[];
59
67
  placeholder?: string;
68
+ shortcut?: ShortcutConfig;
60
69
  };
61
70
  type PanelConfig = {
62
71
  id: string;
63
72
  name: string;
64
73
  controls: ControlMeta[];
65
74
  values: Record<string, DialValue>;
75
+ shortcuts: Record<string, ShortcutConfig>;
66
76
  };
67
77
  type Listener = () => void;
68
78
  type ActionListener = (action: string) => void;
@@ -80,8 +90,8 @@ declare class DialStoreClass {
80
90
  private presets;
81
91
  private activePreset;
82
92
  private baseValues;
83
- registerPanel(id: string, name: string, config: DialConfig): void;
84
- updatePanel(id: string, name: string, config: DialConfig): void;
93
+ registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
94
+ updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
85
95
  unregisterPanel(id: string): void;
86
96
  updateValue(panelId: string, path: string, value: DialValue): void;
87
97
  updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
@@ -102,6 +112,18 @@ declare class DialStoreClass {
102
112
  getPresets(panelId: string): Preset[];
103
113
  getActivePresetId(panelId: string): string | null;
104
114
  clearActivePreset(panelId: string): void;
115
+ resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
116
+ panelId: string;
117
+ path: string;
118
+ control: ControlMeta;
119
+ } | null;
120
+ resolveScrollOnlyTargets(): Array<{
121
+ panelId: string;
122
+ path: string;
123
+ control: ControlMeta;
124
+ shortcut: ShortcutConfig;
125
+ }>;
126
+ private findControlByPath;
105
127
  private notify;
106
128
  private notifyGlobal;
107
129
  private initTransitionModes;
@@ -126,15 +148,19 @@ declare const DialStore: DialStoreClass;
126
148
 
127
149
  interface CreateDialOptions {
128
150
  onAction?: (action: string) => void;
151
+ shortcuts?: Record<string, ShortcutConfig>;
129
152
  }
130
153
  declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): Accessor<ResolvedValues<T>>;
131
154
 
132
155
  type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
133
156
  type DialMode = 'popover' | 'inline';
157
+ type DialTheme = 'light' | 'dark' | 'system';
134
158
  interface DialRootProps {
135
159
  position?: DialPosition;
136
160
  defaultOpen?: boolean;
137
161
  mode?: DialMode;
162
+ theme?: DialTheme;
163
+ productionEnabled?: boolean;
138
164
  }
139
165
  declare function DialRoot(props: DialRootProps): solid_js.JSX.Element;
140
166
 
@@ -146,6 +172,8 @@ interface SliderProps {
146
172
  max?: number;
147
173
  step?: number;
148
174
  unit?: string;
175
+ shortcut?: ShortcutConfig;
176
+ shortcutActive?: boolean;
149
177
  }
150
178
  declare function Slider(props: SliderProps): solid_js.JSX.Element;
151
179
 
@@ -153,6 +181,8 @@ interface ToggleProps {
153
181
  label: string;
154
182
  checked: boolean;
155
183
  onChange: (checked: boolean) => void;
184
+ shortcut?: ShortcutConfig;
185
+ shortcutActive?: boolean;
156
186
  }
157
187
  declare function Toggle(props: ToggleProps): solid_js.JSX.Element;
158
188
 
@@ -225,4 +255,4 @@ interface PresetManagerProps {
225
255
  }
226
256
  declare function PresetManager(props: PresetManagerProps): solid_js.JSX.Element;
227
257
 
228
- export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, createDialKit };
258
+ 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 };
@@ -43,6 +43,14 @@ type DialConfig = {
43
43
  type ResolvedValues<T extends DialConfig> = {
44
44
  [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];
45
45
  };
46
+ type ShortcutMode = 'fine' | 'normal' | 'coarse';
47
+ type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
48
+ type ShortcutConfig = {
49
+ key?: string;
50
+ modifier?: 'alt' | 'shift' | 'meta';
51
+ mode?: ShortcutMode;
52
+ interaction?: ShortcutInteraction;
53
+ };
46
54
  type ControlMeta = {
47
55
  type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
48
56
  path: string;
@@ -57,12 +65,14 @@ type ControlMeta = {
57
65
  label: string;
58
66
  })[];
59
67
  placeholder?: string;
68
+ shortcut?: ShortcutConfig;
60
69
  };
61
70
  type PanelConfig = {
62
71
  id: string;
63
72
  name: string;
64
73
  controls: ControlMeta[];
65
74
  values: Record<string, DialValue>;
75
+ shortcuts: Record<string, ShortcutConfig>;
66
76
  };
67
77
  type Listener = () => void;
68
78
  type ActionListener = (action: string) => void;
@@ -80,8 +90,8 @@ declare class DialStoreClass {
80
90
  private presets;
81
91
  private activePreset;
82
92
  private baseValues;
83
- registerPanel(id: string, name: string, config: DialConfig): void;
84
- updatePanel(id: string, name: string, config: DialConfig): void;
93
+ registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
94
+ updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
85
95
  unregisterPanel(id: string): void;
86
96
  updateValue(panelId: string, path: string, value: DialValue): void;
87
97
  updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
@@ -102,6 +112,18 @@ declare class DialStoreClass {
102
112
  getPresets(panelId: string): Preset[];
103
113
  getActivePresetId(panelId: string): string | null;
104
114
  clearActivePreset(panelId: string): void;
115
+ resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
116
+ panelId: string;
117
+ path: string;
118
+ control: ControlMeta;
119
+ } | null;
120
+ resolveScrollOnlyTargets(): Array<{
121
+ panelId: string;
122
+ path: string;
123
+ control: ControlMeta;
124
+ shortcut: ShortcutConfig;
125
+ }>;
126
+ private findControlByPath;
105
127
  private notify;
106
128
  private notifyGlobal;
107
129
  private initTransitionModes;
@@ -126,15 +148,19 @@ declare const DialStore: DialStoreClass;
126
148
 
127
149
  interface CreateDialOptions {
128
150
  onAction?: (action: string) => void;
151
+ shortcuts?: Record<string, ShortcutConfig>;
129
152
  }
130
153
  declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): Accessor<ResolvedValues<T>>;
131
154
 
132
155
  type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
133
156
  type DialMode = 'popover' | 'inline';
157
+ type DialTheme = 'light' | 'dark' | 'system';
134
158
  interface DialRootProps {
135
159
  position?: DialPosition;
136
160
  defaultOpen?: boolean;
137
161
  mode?: DialMode;
162
+ theme?: DialTheme;
163
+ productionEnabled?: boolean;
138
164
  }
139
165
  declare function DialRoot(props: DialRootProps): solid_js.JSX.Element;
140
166
 
@@ -146,6 +172,8 @@ interface SliderProps {
146
172
  max?: number;
147
173
  step?: number;
148
174
  unit?: string;
175
+ shortcut?: ShortcutConfig;
176
+ shortcutActive?: boolean;
149
177
  }
150
178
  declare function Slider(props: SliderProps): solid_js.JSX.Element;
151
179
 
@@ -153,6 +181,8 @@ interface ToggleProps {
153
181
  label: string;
154
182
  checked: boolean;
155
183
  onChange: (checked: boolean) => void;
184
+ shortcut?: ShortcutConfig;
185
+ shortcutActive?: boolean;
156
186
  }
157
187
  declare function Toggle(props: ToggleProps): solid_js.JSX.Element;
158
188
 
@@ -225,4 +255,4 @@ interface PresetManagerProps {
225
255
  }
226
256
  declare function PresetManager(props: PresetManagerProps): solid_js.JSX.Element;
227
257
 
228
- export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, createDialKit };
258
+ 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 };