@floegence/floe-webapp-init 0.84.0 → 0.85.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.
- package/package.json +1 -1
- package/skills/floe-webapp/references/playbooks.md +21 -1
- package/templates/full/_package.json +6 -4
- package/templates/full/skills/floe-webapp/references/playbooks.md +21 -1
- package/templates/minimal/_package.json +6 -4
- package/templates/minimal/skills/floe-webapp/references/playbooks.md +21 -1
package/package.json
CHANGED
|
@@ -33,14 +33,18 @@ rg "FloeApp|FloeRegistryRuntime|const components|FloeComponent\[]|useCommandCont
|
|
|
33
33
|
|
|
34
34
|
1. Find the registration flow in the correct workspace surface.
|
|
35
35
|
2. Keep every component contribution aligned:
|
|
36
|
+
|
|
36
37
|
- Stable `id` string.
|
|
37
38
|
- `sidebar` metadata (`order`, `renderIn`, `fullScreen`, `hiddenOnMobile`, optional `badge`, optional `collapseBehavior`).
|
|
38
39
|
- `commands` targets using the same registered ids.
|
|
39
40
|
- `statusBar` ordering and placement when applicable.
|
|
41
|
+
|
|
40
42
|
3. Validate the shell wiring still renders through the intended runtime:
|
|
43
|
+
|
|
41
44
|
- `FloeApp` for the standard shell.
|
|
42
45
|
- `FloeRegistryRuntime` for custom shell assembly.
|
|
43
46
|
- `ActivityAppsMain` or `KeepAliveStack` for main-view keep-alive flows.
|
|
47
|
+
|
|
44
48
|
4. If you touch manual registry lifecycle, keep `ComponentRegistry.registerAll()` cleanup symmetry intact.
|
|
45
49
|
|
|
46
50
|
## Playbook C: Add Commands And Lifecycle Hooks
|
|
@@ -55,8 +59,10 @@ done
|
|
|
55
59
|
```
|
|
56
60
|
|
|
57
61
|
2. Use the right command pattern:
|
|
62
|
+
|
|
58
63
|
- `FloeComponent.commands[].execute(ctx)` for component-owned commands.
|
|
59
64
|
- `useCommandContributions()` for app-level command groups that are not tied to a `FloeComponent`.
|
|
65
|
+
|
|
60
66
|
3. Ensure command labels, ids, categories, keybinds, and navigation targets remain consistent.
|
|
61
67
|
4. If protocol/config context is involved, trace it through `wrapAfterTheme`, `getProtocol`, and component context docs before editing.
|
|
62
68
|
|
|
@@ -64,6 +70,7 @@ done
|
|
|
64
70
|
|
|
65
71
|
1. Treat `packages/core/package.json` `exports` as the source of truth.
|
|
66
72
|
2. Prefer the most specific public subpath that matches the feature:
|
|
73
|
+
|
|
67
74
|
- `@floegence/floe-webapp-core/app`
|
|
68
75
|
- `@floegence/floe-webapp-core/layout`
|
|
69
76
|
- `@floegence/floe-webapp-core/ui`
|
|
@@ -88,6 +95,7 @@ done
|
|
|
88
95
|
- `@floegence/floe-webapp-core/tailwind`
|
|
89
96
|
- `@floegence/floe-webapp-core/standalone.css`
|
|
90
97
|
- `@floegence/floe-webapp-core/input-focus.css`
|
|
98
|
+
|
|
91
99
|
3. Do not import `@floegence/floe-webapp-core/src/...`.
|
|
92
100
|
4. Prefer `@floegence/floe-webapp-core/tailwind` for Tailwind v4 apps; use `@floegence/floe-webapp-core/styles` only as the no-Tailwind fallback.
|
|
93
101
|
|
|
@@ -103,18 +111,23 @@ done
|
|
|
103
111
|
```
|
|
104
112
|
|
|
105
113
|
2. Apply the current guardrails from `docs/interaction-architecture.md`:
|
|
114
|
+
|
|
106
115
|
- UI first for click/open/selection flows.
|
|
107
116
|
- Classify modal overlays separately from non-modal anchored companions.
|
|
108
117
|
- `useOverlayMask()` for modal overlays and modal drawers.
|
|
109
118
|
- `BottomBarCompanion` from `@floegence/floe-webapp-core/layout` for a persistent Bottom Bar disclosure that grows from one explicit anchor into one stable shell. Keep `retained`, `visible`, and `open` orthogonal, provide an explicit mount, and do not wrap it with `FloatingWindow`, `SurfaceFloatingLayer`, or `useOverlayMask()`.
|
|
110
119
|
- `startHotInteraction()` plus preview/commit separation for drag or resize flows.
|
|
111
120
|
- No hot-path `transition-all` or geometry-following animation regressions.
|
|
121
|
+
|
|
112
122
|
3. Validate responsive behavior manually in browser devtools at:
|
|
123
|
+
|
|
113
124
|
- `390x844`
|
|
114
125
|
- `430x932`
|
|
115
126
|
- `768x1024`
|
|
116
127
|
- `>=1280px`
|
|
128
|
+
|
|
117
129
|
4. Verify interaction behavior on touch-like flows:
|
|
130
|
+
|
|
118
131
|
- Navigation still reachable without hover.
|
|
119
132
|
- Buttons, menus, and toggles remain usable on small screens.
|
|
120
133
|
- No clipped text or horizontal overflow in primary views.
|
|
@@ -144,6 +157,7 @@ pnpm verify
|
|
|
144
157
|
```
|
|
145
158
|
|
|
146
159
|
4. If a command fails:
|
|
160
|
+
|
|
147
161
|
- Capture the first actionable error.
|
|
148
162
|
- Fix the nearest root cause.
|
|
149
163
|
- Re-run from the failed command onward.
|
|
@@ -161,7 +175,6 @@ Standalone first-party documents may use `@floegence/floe-webapp-core/standalone
|
|
|
161
175
|
|
|
162
176
|
Whole-window status pages opt into `@floegence/floe-webapp-core/window-status.css`. Use the opaque default for access gates. Only retained, inert workspaces may use `data-backdrop="workspace"`; never put this glass on a draggable window or canvas widget. `@floegence/floe-webapp-core/window-status` exports fixed, scriptless illustration and retry SVG markup. `@floegence/floe-webapp-core/progress-shimmer.css` supplies the same opt-in working text as the main style entries. Hosts own state, locale, accessible names, and actions.
|
|
163
177
|
|
|
164
|
-
|
|
165
178
|
## Compound graph layout positions
|
|
166
179
|
|
|
167
180
|
Use the `/graph` entry and `/graph.css` for a graph canvas. The worker layout
|
|
@@ -172,5 +185,12 @@ orthogonal visibility search around entity cards. Invalid identities, impossible
|
|
|
172
185
|
containment, obstructed ports, or exhausted routing budgets fail explicitly;
|
|
173
186
|
keep the last valid layout and show the failure rather than dropping relations.
|
|
174
187
|
When positions are present they take precedence over the transient anchor.
|
|
188
|
+
For authored or generated hints, opt into `positionMode: 'preferred'` instead
|
|
189
|
+
of fixed coordinates. Floe separates overlapping siblings deterministically,
|
|
190
|
+
fits groups around their children, and routes every relationship over the
|
|
191
|
+
resulting geometry. Clear positions are retained. Requested spacing and padding
|
|
192
|
+
are minima (at least 16 units between siblings and 12 units within groups).
|
|
193
|
+
Invalid position identities or numbers and genuine worker/routing failures
|
|
194
|
+
remain errors; no fallback layout or relationship dropping is performed.
|
|
175
195
|
Numeric edge labels remain visible as bundle counts. Other labels appear on
|
|
176
196
|
focus, selection, or hover; callers retain all original relationship identities.
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"preview": "vite preview"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@floegence/floe-webapp-core": "^0.
|
|
13
|
-
"solid-js": "^1.9.
|
|
12
|
+
"@floegence/floe-webapp-core": "^0.85.1",
|
|
13
|
+
"solid-js": "^1.9.17"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@tailwindcss/vite": "^4.0.0",
|
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
"vite-plugin-solid": "^2.11.0"
|
|
21
21
|
},
|
|
22
22
|
"overrides": {
|
|
23
|
-
"dompurify": "^3.4.16"
|
|
23
|
+
"dompurify": "^3.4.16",
|
|
24
|
+
"katex": "0.18.10"
|
|
24
25
|
},
|
|
25
26
|
"pnpm": {
|
|
26
27
|
"overrides": {
|
|
27
|
-
"dompurify": "^3.4.16"
|
|
28
|
+
"dompurify": "^3.4.16",
|
|
29
|
+
"katex": "0.18.10"
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
}
|
|
@@ -33,14 +33,18 @@ rg "FloeApp|FloeRegistryRuntime|const components|FloeComponent\[]|useCommandCont
|
|
|
33
33
|
|
|
34
34
|
1. Find the registration flow in the correct workspace surface.
|
|
35
35
|
2. Keep every component contribution aligned:
|
|
36
|
+
|
|
36
37
|
- Stable `id` string.
|
|
37
38
|
- `sidebar` metadata (`order`, `renderIn`, `fullScreen`, `hiddenOnMobile`, optional `badge`, optional `collapseBehavior`).
|
|
38
39
|
- `commands` targets using the same registered ids.
|
|
39
40
|
- `statusBar` ordering and placement when applicable.
|
|
41
|
+
|
|
40
42
|
3. Validate the shell wiring still renders through the intended runtime:
|
|
43
|
+
|
|
41
44
|
- `FloeApp` for the standard shell.
|
|
42
45
|
- `FloeRegistryRuntime` for custom shell assembly.
|
|
43
46
|
- `ActivityAppsMain` or `KeepAliveStack` for main-view keep-alive flows.
|
|
47
|
+
|
|
44
48
|
4. If you touch manual registry lifecycle, keep `ComponentRegistry.registerAll()` cleanup symmetry intact.
|
|
45
49
|
|
|
46
50
|
## Playbook C: Add Commands And Lifecycle Hooks
|
|
@@ -55,8 +59,10 @@ done
|
|
|
55
59
|
```
|
|
56
60
|
|
|
57
61
|
2. Use the right command pattern:
|
|
62
|
+
|
|
58
63
|
- `FloeComponent.commands[].execute(ctx)` for component-owned commands.
|
|
59
64
|
- `useCommandContributions()` for app-level command groups that are not tied to a `FloeComponent`.
|
|
65
|
+
|
|
60
66
|
3. Ensure command labels, ids, categories, keybinds, and navigation targets remain consistent.
|
|
61
67
|
4. If protocol/config context is involved, trace it through `wrapAfterTheme`, `getProtocol`, and component context docs before editing.
|
|
62
68
|
|
|
@@ -64,6 +70,7 @@ done
|
|
|
64
70
|
|
|
65
71
|
1. Treat `packages/core/package.json` `exports` as the source of truth.
|
|
66
72
|
2. Prefer the most specific public subpath that matches the feature:
|
|
73
|
+
|
|
67
74
|
- `@floegence/floe-webapp-core/app`
|
|
68
75
|
- `@floegence/floe-webapp-core/layout`
|
|
69
76
|
- `@floegence/floe-webapp-core/ui`
|
|
@@ -88,6 +95,7 @@ done
|
|
|
88
95
|
- `@floegence/floe-webapp-core/tailwind`
|
|
89
96
|
- `@floegence/floe-webapp-core/standalone.css`
|
|
90
97
|
- `@floegence/floe-webapp-core/input-focus.css`
|
|
98
|
+
|
|
91
99
|
3. Do not import `@floegence/floe-webapp-core/src/...`.
|
|
92
100
|
4. Prefer `@floegence/floe-webapp-core/tailwind` for Tailwind v4 apps; use `@floegence/floe-webapp-core/styles` only as the no-Tailwind fallback.
|
|
93
101
|
|
|
@@ -103,18 +111,23 @@ done
|
|
|
103
111
|
```
|
|
104
112
|
|
|
105
113
|
2. Apply the current guardrails from `docs/interaction-architecture.md`:
|
|
114
|
+
|
|
106
115
|
- UI first for click/open/selection flows.
|
|
107
116
|
- Classify modal overlays separately from non-modal anchored companions.
|
|
108
117
|
- `useOverlayMask()` for modal overlays and modal drawers.
|
|
109
118
|
- `BottomBarCompanion` from `@floegence/floe-webapp-core/layout` for a persistent Bottom Bar disclosure that grows from one explicit anchor into one stable shell. Keep `retained`, `visible`, and `open` orthogonal, provide an explicit mount, and do not wrap it with `FloatingWindow`, `SurfaceFloatingLayer`, or `useOverlayMask()`.
|
|
110
119
|
- `startHotInteraction()` plus preview/commit separation for drag or resize flows.
|
|
111
120
|
- No hot-path `transition-all` or geometry-following animation regressions.
|
|
121
|
+
|
|
112
122
|
3. Validate responsive behavior manually in browser devtools at:
|
|
123
|
+
|
|
113
124
|
- `390x844`
|
|
114
125
|
- `430x932`
|
|
115
126
|
- `768x1024`
|
|
116
127
|
- `>=1280px`
|
|
128
|
+
|
|
117
129
|
4. Verify interaction behavior on touch-like flows:
|
|
130
|
+
|
|
118
131
|
- Navigation still reachable without hover.
|
|
119
132
|
- Buttons, menus, and toggles remain usable on small screens.
|
|
120
133
|
- No clipped text or horizontal overflow in primary views.
|
|
@@ -144,6 +157,7 @@ pnpm verify
|
|
|
144
157
|
```
|
|
145
158
|
|
|
146
159
|
4. If a command fails:
|
|
160
|
+
|
|
147
161
|
- Capture the first actionable error.
|
|
148
162
|
- Fix the nearest root cause.
|
|
149
163
|
- Re-run from the failed command onward.
|
|
@@ -161,7 +175,6 @@ Standalone first-party documents may use `@floegence/floe-webapp-core/standalone
|
|
|
161
175
|
|
|
162
176
|
Whole-window status pages opt into `@floegence/floe-webapp-core/window-status.css`. Use the opaque default for access gates. Only retained, inert workspaces may use `data-backdrop="workspace"`; never put this glass on a draggable window or canvas widget. `@floegence/floe-webapp-core/window-status` exports fixed, scriptless illustration and retry SVG markup. `@floegence/floe-webapp-core/progress-shimmer.css` supplies the same opt-in working text as the main style entries. Hosts own state, locale, accessible names, and actions.
|
|
163
177
|
|
|
164
|
-
|
|
165
178
|
## Compound graph layout positions
|
|
166
179
|
|
|
167
180
|
Use the `/graph` entry and `/graph.css` for a graph canvas. The worker layout
|
|
@@ -172,5 +185,12 @@ orthogonal visibility search around entity cards. Invalid identities, impossible
|
|
|
172
185
|
containment, obstructed ports, or exhausted routing budgets fail explicitly;
|
|
173
186
|
keep the last valid layout and show the failure rather than dropping relations.
|
|
174
187
|
When positions are present they take precedence over the transient anchor.
|
|
188
|
+
For authored or generated hints, opt into `positionMode: 'preferred'` instead
|
|
189
|
+
of fixed coordinates. Floe separates overlapping siblings deterministically,
|
|
190
|
+
fits groups around their children, and routes every relationship over the
|
|
191
|
+
resulting geometry. Clear positions are retained. Requested spacing and padding
|
|
192
|
+
are minima (at least 16 units between siblings and 12 units within groups).
|
|
193
|
+
Invalid position identities or numbers and genuine worker/routing failures
|
|
194
|
+
remain errors; no fallback layout or relationship dropping is performed.
|
|
175
195
|
Numeric edge labels remain visible as bundle counts. Other labels appear on
|
|
176
196
|
focus, selection, or hover; callers retain all original relationship identities.
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"preview": "vite preview"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@floegence/floe-webapp-core": "^0.
|
|
13
|
-
"solid-js": "^1.9.
|
|
12
|
+
"@floegence/floe-webapp-core": "^0.85.1",
|
|
13
|
+
"solid-js": "^1.9.17"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@tailwindcss/vite": "^4.0.0",
|
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
"vite-plugin-solid": "^2.11.0"
|
|
21
21
|
},
|
|
22
22
|
"overrides": {
|
|
23
|
-
"dompurify": "^3.4.16"
|
|
23
|
+
"dompurify": "^3.4.16",
|
|
24
|
+
"katex": "0.18.10"
|
|
24
25
|
},
|
|
25
26
|
"pnpm": {
|
|
26
27
|
"overrides": {
|
|
27
|
-
"dompurify": "^3.4.16"
|
|
28
|
+
"dompurify": "^3.4.16",
|
|
29
|
+
"katex": "0.18.10"
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
}
|
|
@@ -33,14 +33,18 @@ rg "FloeApp|FloeRegistryRuntime|const components|FloeComponent\[]|useCommandCont
|
|
|
33
33
|
|
|
34
34
|
1. Find the registration flow in the correct workspace surface.
|
|
35
35
|
2. Keep every component contribution aligned:
|
|
36
|
+
|
|
36
37
|
- Stable `id` string.
|
|
37
38
|
- `sidebar` metadata (`order`, `renderIn`, `fullScreen`, `hiddenOnMobile`, optional `badge`, optional `collapseBehavior`).
|
|
38
39
|
- `commands` targets using the same registered ids.
|
|
39
40
|
- `statusBar` ordering and placement when applicable.
|
|
41
|
+
|
|
40
42
|
3. Validate the shell wiring still renders through the intended runtime:
|
|
43
|
+
|
|
41
44
|
- `FloeApp` for the standard shell.
|
|
42
45
|
- `FloeRegistryRuntime` for custom shell assembly.
|
|
43
46
|
- `ActivityAppsMain` or `KeepAliveStack` for main-view keep-alive flows.
|
|
47
|
+
|
|
44
48
|
4. If you touch manual registry lifecycle, keep `ComponentRegistry.registerAll()` cleanup symmetry intact.
|
|
45
49
|
|
|
46
50
|
## Playbook C: Add Commands And Lifecycle Hooks
|
|
@@ -55,8 +59,10 @@ done
|
|
|
55
59
|
```
|
|
56
60
|
|
|
57
61
|
2. Use the right command pattern:
|
|
62
|
+
|
|
58
63
|
- `FloeComponent.commands[].execute(ctx)` for component-owned commands.
|
|
59
64
|
- `useCommandContributions()` for app-level command groups that are not tied to a `FloeComponent`.
|
|
65
|
+
|
|
60
66
|
3. Ensure command labels, ids, categories, keybinds, and navigation targets remain consistent.
|
|
61
67
|
4. If protocol/config context is involved, trace it through `wrapAfterTheme`, `getProtocol`, and component context docs before editing.
|
|
62
68
|
|
|
@@ -64,6 +70,7 @@ done
|
|
|
64
70
|
|
|
65
71
|
1. Treat `packages/core/package.json` `exports` as the source of truth.
|
|
66
72
|
2. Prefer the most specific public subpath that matches the feature:
|
|
73
|
+
|
|
67
74
|
- `@floegence/floe-webapp-core/app`
|
|
68
75
|
- `@floegence/floe-webapp-core/layout`
|
|
69
76
|
- `@floegence/floe-webapp-core/ui`
|
|
@@ -88,6 +95,7 @@ done
|
|
|
88
95
|
- `@floegence/floe-webapp-core/tailwind`
|
|
89
96
|
- `@floegence/floe-webapp-core/standalone.css`
|
|
90
97
|
- `@floegence/floe-webapp-core/input-focus.css`
|
|
98
|
+
|
|
91
99
|
3. Do not import `@floegence/floe-webapp-core/src/...`.
|
|
92
100
|
4. Prefer `@floegence/floe-webapp-core/tailwind` for Tailwind v4 apps; use `@floegence/floe-webapp-core/styles` only as the no-Tailwind fallback.
|
|
93
101
|
|
|
@@ -103,18 +111,23 @@ done
|
|
|
103
111
|
```
|
|
104
112
|
|
|
105
113
|
2. Apply the current guardrails from `docs/interaction-architecture.md`:
|
|
114
|
+
|
|
106
115
|
- UI first for click/open/selection flows.
|
|
107
116
|
- Classify modal overlays separately from non-modal anchored companions.
|
|
108
117
|
- `useOverlayMask()` for modal overlays and modal drawers.
|
|
109
118
|
- `BottomBarCompanion` from `@floegence/floe-webapp-core/layout` for a persistent Bottom Bar disclosure that grows from one explicit anchor into one stable shell. Keep `retained`, `visible`, and `open` orthogonal, provide an explicit mount, and do not wrap it with `FloatingWindow`, `SurfaceFloatingLayer`, or `useOverlayMask()`.
|
|
110
119
|
- `startHotInteraction()` plus preview/commit separation for drag or resize flows.
|
|
111
120
|
- No hot-path `transition-all` or geometry-following animation regressions.
|
|
121
|
+
|
|
112
122
|
3. Validate responsive behavior manually in browser devtools at:
|
|
123
|
+
|
|
113
124
|
- `390x844`
|
|
114
125
|
- `430x932`
|
|
115
126
|
- `768x1024`
|
|
116
127
|
- `>=1280px`
|
|
128
|
+
|
|
117
129
|
4. Verify interaction behavior on touch-like flows:
|
|
130
|
+
|
|
118
131
|
- Navigation still reachable without hover.
|
|
119
132
|
- Buttons, menus, and toggles remain usable on small screens.
|
|
120
133
|
- No clipped text or horizontal overflow in primary views.
|
|
@@ -144,6 +157,7 @@ pnpm verify
|
|
|
144
157
|
```
|
|
145
158
|
|
|
146
159
|
4. If a command fails:
|
|
160
|
+
|
|
147
161
|
- Capture the first actionable error.
|
|
148
162
|
- Fix the nearest root cause.
|
|
149
163
|
- Re-run from the failed command onward.
|
|
@@ -161,7 +175,6 @@ Standalone first-party documents may use `@floegence/floe-webapp-core/standalone
|
|
|
161
175
|
|
|
162
176
|
Whole-window status pages opt into `@floegence/floe-webapp-core/window-status.css`. Use the opaque default for access gates. Only retained, inert workspaces may use `data-backdrop="workspace"`; never put this glass on a draggable window or canvas widget. `@floegence/floe-webapp-core/window-status` exports fixed, scriptless illustration and retry SVG markup. `@floegence/floe-webapp-core/progress-shimmer.css` supplies the same opt-in working text as the main style entries. Hosts own state, locale, accessible names, and actions.
|
|
163
177
|
|
|
164
|
-
|
|
165
178
|
## Compound graph layout positions
|
|
166
179
|
|
|
167
180
|
Use the `/graph` entry and `/graph.css` for a graph canvas. The worker layout
|
|
@@ -172,5 +185,12 @@ orthogonal visibility search around entity cards. Invalid identities, impossible
|
|
|
172
185
|
containment, obstructed ports, or exhausted routing budgets fail explicitly;
|
|
173
186
|
keep the last valid layout and show the failure rather than dropping relations.
|
|
174
187
|
When positions are present they take precedence over the transient anchor.
|
|
188
|
+
For authored or generated hints, opt into `positionMode: 'preferred'` instead
|
|
189
|
+
of fixed coordinates. Floe separates overlapping siblings deterministically,
|
|
190
|
+
fits groups around their children, and routes every relationship over the
|
|
191
|
+
resulting geometry. Clear positions are retained. Requested spacing and padding
|
|
192
|
+
are minima (at least 16 units between siblings and 12 units within groups).
|
|
193
|
+
Invalid position identities or numbers and genuine worker/routing failures
|
|
194
|
+
remain errors; no fallback layout or relationship dropping is performed.
|
|
175
195
|
Numeric edge labels remain visible as bundle counts. Other labels appear on
|
|
176
196
|
focus, selection, or hover; callers retain all original relationship identities.
|