@dfosco/storyboard-core 3.3.2 → 3.4.0

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 (50) hide show
  1. package/dist/storyboard-ui.css +9 -1
  2. package/dist/storyboard-ui.js +14659 -11413
  3. package/dist/storyboard-ui.js.map +1 -1
  4. package/dist/tailwind.css +1 -1
  5. package/package.json +1 -1
  6. package/scaffold/toolbar.config.json +2 -2
  7. package/src/CanvasCreateMenu.svelte +1 -1
  8. package/src/CanvasZoomControl.svelte +105 -0
  9. package/src/CommandMenu.svelte +87 -25
  10. package/src/CoreUIBar.svelte +350 -347
  11. package/src/CreateMenuButton.svelte +6 -2
  12. package/src/InspectorPanel.svelte +87 -37
  13. package/src/SidePanel.svelte +1 -1
  14. package/src/ThemeMenuButton.svelte +35 -3
  15. package/src/commandActions.js +14 -0
  16. package/src/core-ui-colors.css +30 -2
  17. package/src/devtools.js +7 -1
  18. package/src/index.js +10 -1
  19. package/src/inspector/fiberWalker.js +49 -6
  20. package/src/inspector/highlighter.js +143 -32
  21. package/src/lib/components/ui/button/button.svelte +1 -1
  22. package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
  23. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  24. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +1 -1
  25. package/src/lib/components/ui/trigger-button/trigger-button.svelte +31 -3
  26. package/src/modes.css +8 -0
  27. package/src/mountStoryboardCore.js +15 -1
  28. package/src/stores/themeStore.ts +66 -0
  29. package/src/svelte-plugin-ui/components/Viewfinder.svelte +16 -11
  30. package/src/toolRegistry.js +226 -0
  31. package/src/toolStateStore.js +180 -0
  32. package/src/toolStateStore.test.js +204 -0
  33. package/src/toolbarConfigStore.js +135 -0
  34. package/src/tools/handlers/canvasAddWidget.js +11 -0
  35. package/src/tools/handlers/canvasZoom.js +34 -0
  36. package/src/tools/handlers/comments.js +16 -0
  37. package/src/tools/handlers/create.js +39 -0
  38. package/src/tools/handlers/devtools.js +80 -0
  39. package/src/tools/handlers/docs.js +11 -0
  40. package/src/tools/handlers/featureFlags.js +21 -0
  41. package/src/tools/handlers/flows.js +59 -0
  42. package/src/tools/handlers/inspector.js +19 -0
  43. package/src/tools/handlers/theme.js +9 -0
  44. package/src/tools/registry.js +21 -0
  45. package/src/tools/surfaces/canvasToolbar.js +10 -0
  46. package/src/tools/surfaces/commandList.js +10 -0
  47. package/src/tools/surfaces/mainToolbar.js +11 -0
  48. package/src/tools/surfaces/registry.js +19 -0
  49. package/src/vite/server-plugin.js +36 -6
  50. package/toolbar.config.json +106 -48
package/toolbar.config.json CHANGED
@@ -5,86 +5,144 @@
5
5
  { "name": "present", "label": "Collaborate", "hue": "#2a9d8f" }
6
6
  ],
7
7
 
8
+ "command": {
9
+ "icon": "iconoir/key-command",
10
+ "meta": { "strokeWeight": 2 },
11
+ "shortcut": { "key": "k", "label": "⌘ + K to open" }
12
+ },
13
+
8
14
  "shortcuts": {
9
- "openCommandMenu": { "key": "k", "label": "⌘ + K to open" },
10
15
  "hideChrome": { "key": ".", "label": "⌘ + . to hide" }
11
16
  },
12
17
 
13
- "menus": {
14
- "command": {
15
- "ariaLabel": "Command Menu",
16
- "trigger": "command",
17
- "icon": "iconoir/key-command",
18
+ "highlighting": {
19
+ "dark": "night owl",
20
+ "light": "night owl light"
21
+ },
22
+
23
+ "tools": {
24
+ "inspector": {
25
+ "ariaLabel": "Inspect components",
26
+ "icon": "iconoir/square-dashed",
27
+ "render": "sidepanel",
28
+ "surface": "main-toolbar",
29
+ "sidepanel": "inspector",
30
+ "handler": "core:inspector",
31
+ "modes": ["*"],
32
+ "excludeRoutes": ["^/$", "/viewfinder", "/canvas/"],
33
+ "meta": { "strokeWeight": 2, "scale": 1.1 },
34
+ "shortcut": { "key": "i", "label": "⌘I" }
35
+ },
36
+ "flows": {
37
+ "label": "Flows",
38
+ "ariaLabel": "Switch flow",
39
+ "icon": "feather/fast-forward",
40
+ "render": "menu",
41
+ "surface": "main-toolbar",
42
+ "modes": ["*"],
43
+ "menuWidth": "260px",
44
+ "handler": "core:flows"
45
+ },
46
+ "theme": {
47
+ "label": "Theme",
48
+ "ariaLabel": "Switch theme",
49
+ "icon": "primer/sun",
18
50
  "meta": { "strokeWeight": 2 },
19
- "default": true,
51
+ "render": "menu",
52
+ "surface": "main-toolbar",
53
+ "handler": "core:theme",
20
54
  "modes": ["*"],
21
- "actions": [
22
- { "type": "header", "label": "Command Menu" },
23
- { "id": "core/viewfinder", "label": "Index page", "type": "link", "url": "/", "modes": ["*"] },
24
- { "id": "core/repository", "label": "Go to repository", "type": "link", "url": "https://github.com/dfosco/storyboard", "modes": ["*"] },
25
- { "type": "separator" },
26
- { "id": "core/devtools", "label": "Devtools", "type": "submenu", "modes": ["*"] },
27
- { "id": "core/feature-flags", "label": "Feature Flags", "type": "submenu", "modes": ["*"] }
28
- ]
55
+ "menuWidth": "220px"
56
+ },
57
+ "comments": {
58
+ "ariaLabel": "Comments",
59
+ "icon": "primer/comment",
60
+ "render": "button",
61
+ "surface": "main-toolbar",
62
+ "handler": "core:comments",
63
+ "modes": ["*"],
64
+ "excludeRoutes": ["^/$", "/viewfinder"]
65
+ },
66
+ "sep-actions": {
67
+ "render": "separator",
68
+ "surface": "command-list",
69
+ "modes": ["*"]
29
70
  },
30
71
  "create": {
31
72
  "label": "Create",
32
73
  "ariaLabel": "Create",
33
- "trigger": "button",
34
74
  "icon": "iconoir/plus-circle",
35
75
  "meta": { "strokeWeight": 2, "scale": 1.1 },
76
+ "render": "menu",
77
+ "surface": "main-toolbar",
78
+ "handler": "core:create",
36
79
  "modes": ["*"],
37
80
  "localOnly": true,
38
- "menuWidth": "260px",
81
+ "menuWidth": "290px",
39
82
  "actions": [
40
83
  { "type": "header", "label": "Create" },
41
84
  { "id": "workshop/create-prototype", "label": "New prototype", "type": "default", "modes": ["*"], "feature": "createPrototype" },
42
85
  { "id": "workshop/create-flow", "label": "New flow", "type": "default", "modes": ["*"], "feature": "createFlow" },
43
86
  { "id": "workshop/create-canvas", "label": "New canvas", "type": "default", "modes": ["*"], "feature": "createCanvas" },
44
- { "type": "footer", "label": "Supported in local development" }
87
+ { "type": "footer", "label": "Only available in dev environment" }
45
88
  ]
46
89
  },
47
- "flows": {
48
- "label": "Flows",
49
- "ariaLabel": "Switch flow",
50
- "icon": "feather/fast-forward",
51
- "menuWidth": "260px",
90
+ "canvas-add-widget": {
91
+ "ariaLabel": "Add widget",
92
+ "icon": "iconoir/grid-plus",
93
+ "render": "menu",
94
+ "surface": "canvas-toolbar",
95
+ "handler": "core:canvas-add-widget",
52
96
  "modes": ["*"],
53
- "action": "core/flows"
97
+ "localOnly": true,
98
+ "meta": { "strokeWeight": 2, "scale": 1.2 },
99
+ "menuWidth": "300px"
54
100
  },
55
- "comments": {
56
- "ariaLabel": "Comments",
57
- "icon": "primer/comment",
58
- "excludeRoutes": ["^/$", "/viewfinder"],
101
+ "canvas-zoom": {
102
+ "ariaLabel": "Zoom controls",
103
+ "render": "zoom-control",
104
+ "surface": "canvas-toolbar",
105
+ "handler": "core:canvas-zoom",
59
106
  "modes": ["*"]
60
107
  },
108
+ "viewfinder": {
109
+ "label": "Index page",
110
+ "render": "link",
111
+ "surface": "command-list",
112
+ "modes": ["*"],
113
+ "url": "/"
114
+ },
115
+ "repository": {
116
+ "label": "Go to repository",
117
+ "render": "link",
118
+ "surface": "command-list",
119
+ "modes": ["*"],
120
+ "url": "https://github.com/dfosco/storyboard"
121
+ },
61
122
  "docs": {
123
+ "label": "Documentation",
62
124
  "ariaLabel": "Documentation",
63
125
  "icon": "primer/book",
126
+ "render": "sidepanel",
127
+ "surface": "command-list",
128
+ "sidepanel": "docs",
129
+ "handler": "core:docs",
64
130
  "modes": ["*"],
65
- "sidepanel": "docs"
66
- },
67
- "theme": {
68
- "label": "Theme",
69
- "ariaLabel": "Switch theme",
70
- "icon": "primer/sun",
71
- "meta": { "strokeWeight": 2 },
131
+ "shortcut": { "key": "d", "label": "⌘D" }
132
+ },
133
+ "devtools": {
134
+ "label": "Devtools",
135
+ "render": "submenu",
136
+ "surface": "command-list",
72
137
  "modes": ["*"],
73
- "menuWidth": "220px"
138
+ "handler": "core:devtools"
74
139
  },
75
- "inspector": {
76
- "ariaLabel": "Inspect components",
77
- "icon": "iconoir/square-dashed",
78
- "excludeRoutes": ["^/$", "/viewfinder", "/canvas/"],
79
- "meta": { "strokeWeight": 2, "scale": 1.1 },
140
+ "feature-flags": {
141
+ "label": "Feature Flags",
142
+ "render": "submenu",
143
+ "surface": "command-list",
80
144
  "modes": ["*"],
81
- "sidepanel": "inspector"
145
+ "handler": "core:feature-flags"
82
146
  }
83
- },
84
-
85
- "canvasToolbar": {
86
- "icon": "iconoir/grid-plus",
87
- "meta": { "strokeWeight": 2, "scale": 1.2 },
88
- "menuWidth": "220px"
89
147
  }
90
148
  }