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