@cratis/pi 7.57.0 → 7.59.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.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: cratis-screenplay-ui-composition
3
- description: Compose the user interface of a Cratis Screenplay `.play` model — `layout` and responsive `arrangement`, screen/dialog templates, component data-context bindings, exposed template configuration, command forms and columns, navigation contributions, hierarchical outlets/routes, toolbar dialogs, package/icon selection, interaction `behavior`/`on`/`uses` wiring, `ui profile`, `theme`, localized `$strings`, and `file` references. Use when declaring the application shell, reusable screen shapes, component/package configuration, command forms, navigation/toolbars, click or submit behavior, or theming. Do not use for a screen's own data and actions.
3
+ description: Compose the user interface of a Cratis Screenplay `.play` model — `layout` and responsive `arrangement`, screen/dialog templates, component data-context bindings, exposed template configuration, command forms and columns, navigation contributions, application navigation regions (topbar/sidebar, module inherit/extend/override), toolbar slice buttons, blueprint template references, sample data packs, hierarchical outlets/routes, toolbar dialogs, package/icon selection, interaction `behavior`/`on`/`uses` wiring, `ui profile`, `theme`, localized `$strings`, and `file` references. Use when declaring the application shell, reusable screen shapes, component/package configuration, command forms, navigation/toolbars, click or submit behavior, or theming. Do not use for a screen's own data and actions.
4
4
  license: MIT
5
5
  ---
6
6
 
@@ -28,7 +28,7 @@ Markdown in project documentation; `.play` is the single flow model.
28
28
  ## Product sources
29
29
 
30
30
  Tool versions: toolchain `SKILL.md`. UI statements come from Screenplay
31
- `screens.md`, `contributions.md`, `forms.md`, `templates.md`, `ui-profile.md`,
31
+ `screens.md`, `contributions.md`, `navigation.md`, `sample-data.md`, `forms.md`, `templates.md`, `ui-profile.md`,
32
32
  `fixtures/screen-release-ui.play`, `layout-arrangement.md`, `interactions.md`, `theme.md`,
33
33
  `internationalization.md` and `file-references.md` under `Documentation/screenplay/`. Scene
34
34
  runtime sources: scaffold Scene tag, `Source/JavaScript/**`. This guidance does not verify
@@ -86,6 +86,7 @@ A complete example:
86
86
 
87
87
  ```screenplay
88
88
  layout AppShell
89
+ category application
89
90
  topbar
90
91
  navigation contributes Navigation
91
92
  content
@@ -197,6 +198,36 @@ not in the language. The screens-release vector
197
198
  renderer that admits it renders it and passes the browser run. Report a refused form as a
198
199
  capability gap, never a flat-list fallback; Studio production proof is separate.
199
200
 
201
+ ## The application shell: regions, slice buttons, blueprint references, sample data
202
+
203
+ The shell's navigation is declared in the `layout` (`navigation topbar` / `navigation sidebar`, with `logo` and nested
204
+ `item` lines) and each `module` states how it relates to a region: **inherit** (the default), **extend** (the
205
+ application's items plus its own) or **override** (its own only). Toolbars gain `button <id> title "<text>" slice
206
+ <Module>.<Feature>.<Slice>`, which opens a **State Change** slice as a dialog (a State View or Automation slice is
207
+ `PLAY0762`). A screen takes a template from a blueprint with `template blueprint <Blueprint> <Name> version "<range>"`,
208
+ and the `ui profile` selects the one active sample data pack (design and preview only, never in production).
209
+
210
+ ```screenplay
211
+ layout AppShell
212
+ category application
213
+ content
214
+
215
+ navigation sidebar
216
+ item sales title "Sales" target Sales
217
+ item orders title "Orders" target Sales.Orders
218
+
219
+ module Sales
220
+ navigation sidebar extends
221
+ item customers title "Customers" target Sales.Customers
222
+
223
+ feature Orders
224
+ feature Customers
225
+ ```
226
+
227
+ Read [references/application-shell.md](references/application-shell.md) before writing any of it: the inherit/extend/override
228
+ choice, item target and slot, the module-only target rule (`PLAY0750`), buttons, blueprint ranges, sample data, MCP editing
229
+ and the review checklist. `contribute to Navigation` stays the flat contribution; a new application uses regions.
230
+
200
231
  ## Interactions — what a click does
201
232
 
202
233
  A screen can say what it shows; an interaction says what happens when someone
@@ -310,6 +341,7 @@ Localized text lives in companion `.strings` files and is referenced unquoted as
310
341
  - [ ] No `file` reference is doing work the declaration should be doing.
311
342
  - [ ] Every click, submit and screen entry that does something has an `on` or
312
343
  `uses`; continuations sit only on actions that can fail.
344
+ - [ ] Navigation regions, slice buttons, blueprint references and sample data follow `references/application-shell.md`: each module's mode is deliberate, no module item targets another module, every button names a State Change slice, every template has a `category`, and the active sample data pack is chosen once in the `ui profile`.
313
345
  - [ ] Component bindings, exposed template values, manual form columns, toolbar items, outlets and routes all trace to typed data; no runtime fallback counts as delivery. Report authoring acceptance, executable admission and runtime
314
346
  implementation separately.
315
347
 
@@ -0,0 +1,301 @@
1
+ # The application shell: navigation regions, toolbar buttons, template references and sample data
2
+
3
+ ## Contents
4
+
5
+ - One complete shell
6
+ - Navigation regions: inherit, extend or override
7
+ - Toolbar buttons that invoke a State Change slice
8
+ - Template references, categories and blueprints
9
+ - Sample data packs
10
+ - Shapes the compiler refuses
11
+ - Editing the shell through MCP
12
+ - Render and verify
13
+ - Review checklist
14
+
15
+ Requires Screenplay 4.180.0 or later (`screenplay --version`) for regions, slice buttons, blueprint references and sample
16
+ data packs, and Cratis CLI 3.67.0 or later (`cratis --version`) for `cratis render` and `cratis run` to carry them. An
17
+ older compiler answers `PLAY0001`, `PLAY0022` or `PLAY0103` for the lines below; that is the version, not the model.
18
+
19
+ Every construct here is authoring syntax. The executable model defers it (`PLAY0269`), Stage plans it from the syntax
20
+ tree, and none of it changes a backend. The Scene designer, the Stage runtime and Studio read the same lines, so the
21
+ Screenplay is the one place to write them.
22
+
23
+ ## One complete shell
24
+
25
+ ```screenplay
26
+ layout AppShell
27
+ category application
28
+ topbar
29
+ side
30
+ content
31
+
32
+ navigation topbar
33
+ logo image "/assets/acme.svg" title "Acme"
34
+ item sales title "Sales" icon receipt target Sales
35
+ item support title "Support" target Support slot content
36
+ navigation sidebar
37
+ item sales title "Sales" icon receipt target Sales
38
+ item orders title "Orders" target Sales.Orders
39
+ item returns title "Returns" target Sales.Orders.Returns slot side
40
+ item support title "Support" target Support
41
+
42
+ ui profile Desktop
43
+ target platform web
44
+ layout AppShell
45
+
46
+ packages
47
+ core
48
+ Crm
49
+
50
+ sample data
51
+ active NordicDemo
52
+ shape Customer maps to CustomerRow
53
+
54
+ sample data NordicDemo
55
+ title "CRM · Nordic SMB"
56
+ locale nb-NO
57
+ shape Customer
58
+ row
59
+ name = "Fjordline AS"
60
+ revenue = 125000.5
61
+ row
62
+ name = "Nordlys AS"
63
+ revenue = 98000
64
+
65
+ module Sales
66
+ navigation sidebar extends
67
+ item customers title "Customers" icon people target Sales.Customers
68
+ navigation topbar inherits
69
+
70
+ template blueprint Crm Workspace version "^1.4"
71
+
72
+ feature Orders
73
+ feature Returns
74
+
75
+ slice StateChange PlaceOrder
76
+ command PlaceOrder
77
+ orderId Uuid identifier
78
+ reason String
79
+ produces OrderPlaced
80
+ for orderId
81
+ reason = reason
82
+ event OrderPlaced
83
+ reason String
84
+
85
+ slice StateView OrderList
86
+ readmodel OrderRow
87
+ orderId Uuid
88
+ title String
89
+
90
+ screen OrderList
91
+ template blueprint Crm CustomerDetail version "~1.4.2"
92
+ body
93
+ title "Orders"
94
+ toolbar actions
95
+ button place title "New order" slice Sales.Orders.PlaceOrder emphasis primary icon plus
96
+
97
+ feature Customers
98
+ slice StateView CustomerList
99
+ readmodel CustomerRow
100
+ name String
101
+ revenue Decimal
102
+
103
+ module Support
104
+ navigation sidebar overrides
105
+ item tickets title "Tickets" target Support.Tickets
106
+ navigation topbar inherits
107
+
108
+ feature Tickets
109
+ slice StateView TicketList
110
+ readmodel TicketRow
111
+ title String
112
+
113
+ module Reports
114
+ feature Monthly
115
+ slice StateView MonthlyTotals
116
+ readmodel Totals
117
+ total Decimal
118
+ ```
119
+
120
+ This is the canonical shell vector (`screen-shell-navigation-positive` in `Cratis.Screenplay.CanonicalCorpus`),
121
+ rendered by Stage with its sidebar, topbar, slice dialog and deep links. Start from it; do not invent the syntax.
122
+
123
+ ## Navigation regions: inherit, extend or override
124
+
125
+ The `layout` declares the application's `navigation topbar` and `navigation sidebar`; a `module` states how it relates to
126
+ each region it changes. A region a module does not mention **inherits** the application's items.
127
+
128
+ | Module says | Items the module shows | Choose it when |
129
+ | --- | --- | --- |
130
+ | nothing, or `navigation <region> inherits` | The application's items | The module needs no navigation of its own (the default) |
131
+ | `navigation <region> extends` | The application's items, then the module's own | The module adds items (a sales sidebar that also lists Customers) and keeps the application's |
132
+ | `navigation <region> overrides` | The module's own items only | The module replaces the whole region (a support area with its own sidebar) |
133
+
134
+ - Each region has its own mode: a module can extend the sidebar and inherit the topbar.
135
+ - The application has no mode, and the layout never says `inherits`, `extends` or `overrides` (`PLAY0745`).
136
+ - `logo image "<path>" title "<text>"` belongs to the layout's region only; a module that declares one is `PLAY0744`.
137
+ - An item is `item <id> title "<text>" [icon <name>] [target <Module>[.<Feature>]] [slot <name>]`. The id is unique in
138
+ its region, and an extending module never repeats an application id (`PLAY0747`). The title is a quoted string or
139
+ `$strings.<key>`.
140
+ - `target` names a module (the module's first feature) or a feature path. An item with no target needs sub-items, and a
141
+ target the document does not declare is `PLAY0748`. A module with no feature warns (`PLAY0751`).
142
+ - `slot` names a layout slot the target renders into; without it the target renders into the primary content slot. A slot
143
+ no layout declares is `PLAY0749`.
144
+ - **Hierarchy is sidebar only.** Top-level items target modules and their sub-items target features of that module. A
145
+ topbar item with sub-items is `PLAY0746`.
146
+ - **A module's own items may only target that module** (`PLAY0750`). To link elsewhere, put the item in the layout. This
147
+ matters when switching a module from inherit to override: the copy of the application's items must be retargeted to
148
+ the module's own features, or it is refused.
149
+ - An `overrides` region with no items leaves the region empty and warns (`PLAY0752`).
150
+
151
+ ⚠️ `navigation topbar|sidebar` is a **region**; `navigation contributes Navigation` in a layout is a **slot**, and
152
+ `contribute to Navigation` in a module is a flat **contribution** (see `SKILL.md`). They are independent: a new
153
+ application models its navigation with regions and does not also generate contributions for the same entries.
154
+
155
+ ## Toolbar buttons that invoke a State Change slice
156
+
157
+ A `button` is a toolbar entry that opens a State Change slice as a dialog over the page; the button needs no command of its
158
+ own.
159
+
160
+ - `button <id> title "<text>" [slice <Module>.<Feature>.<Slice>] [emphasis primary|secondary|quiet] [icon <name>]`.
161
+ - `slice` is a dotted path or any unambiguous suffix (`PLAY0764` when it matches several). It must name a slice the
162
+ document declares (`PLAY0761`) and a **State Change** slice. A State View, Automation or Translate slice is `PLAY0762`;
163
+ a button invokes State Change slices only.
164
+ - A button without a `slice` is legal while designing and warns (`PLAY0763`); never ship one.
165
+ - A button id is unique within the toolbar and shared with `item` names (`PLAY0765`).
166
+ - `item` entries (`action`, `navigate to`, `dialog`) stay valid beside buttons. Use `button` to start a slice, and
167
+ `item ... navigate to` to go to a screen.
168
+
169
+ ⚠️ When a screen uses a `template`, put the `toolbar` inside a slot body (`body` above). Stage refuses a screen that
170
+ mixes a top-level `template` directive with other top-level directives.
171
+
172
+ ## Template references, categories and blueprints
173
+
174
+ - Every `layout`, `screen template` and `dialog template` declares a `category`; a template picker groups by it, and a
175
+ missing one is `PLAY0720` (an error in a blueprint package build).
176
+ - A template is **own** (`template <Name>`) or from a **blueprint** (`template blueprint <Blueprint> <Name> [version "<range>"]`),
177
+ assigned at a module, feature, slice or screen. The nearest assignment wins.
178
+ - `version` is `*`, an exact version, or a `^`, `~`, `>=`, `>`, `<=` or `<` range such as `"^1.4"`; anything else
179
+ (`"latest"`) is `PLAY0721`.
180
+ - The blueprint must be listed under a `ui profile`'s `packages` (`PLAY0722`). Prefer a blueprint's template over copying
181
+ its layout into the model: the reference stays in step with the blueprint's releases, a copy does not.
182
+ - `scopes slice statechange|stateview` narrows a template to one slice kind; a template outside its scope is `PLAY0631`.
183
+
184
+ ## Sample data packs
185
+
186
+ - A `sample data <Name>` pack holds rows per shape (`shape <ReadModel>` then `row` with `<field> = <literal>`), and an
187
+ optional `title` and `locale`. Fields must be properties of the read model (`PLAY0710`) and literals must fit
188
+ their types (`PLAY0711`).
189
+ - **The active pack is chosen once, in the `ui profile`** (`sample data` then `active <Pack>` or `active blueprint <id>`),
190
+ never per screen, slice or component. A pack the document does not declare is `PLAY0714`. `shape <Shape> maps to
191
+ <ReadModel>` maps a differently named shape; `bind <ReadModel> to <Pack>` is a rare per-read-model override.
192
+ - Sample data is **design and preview only**: the executable model defers it and a production build, a backend or
193
+ Chronicle never sees it. Never put sample values in a component or a screen, and never describe sample data as test data
194
+ for specifications.
195
+ - Without a selected pack the preview uses the blueprint's default pack and then deterministic generated data.
196
+
197
+ ## Shapes the compiler refuses
198
+
199
+ Each block below is compiled by the verification and must report exactly the code beside it.
200
+
201
+ A module that overrides a region may not link to another module:
202
+
203
+ ```screenplay expect PLAY0750
204
+ layout AppShell
205
+ category application
206
+ content
207
+
208
+ module Sales
209
+ feature Orders
210
+
211
+ module Support
212
+ navigation sidebar overrides
213
+ item sales title "Sales" target Sales
214
+ feature Tickets
215
+ ```
216
+
217
+ An extending module may not reuse an application item id:
218
+
219
+ ```screenplay expect PLAY0747
220
+ layout AppShell
221
+ category application
222
+ content
223
+
224
+ navigation sidebar
225
+ item sales title "Sales" target Sales
226
+
227
+ module Sales
228
+ navigation sidebar extends
229
+ item sales title "Sales again" target Sales.Orders
230
+
231
+ feature Orders
232
+ ```
233
+
234
+ A button may not invoke a State View slice:
235
+
236
+ ```screenplay expect PLAY0762
237
+ module Shop
238
+ feature Orders
239
+ slice StateView OrderList
240
+ readmodel OrderRow
241
+ title String
242
+
243
+ screen OrderList
244
+ toolbar actions
245
+ button refresh title "Refresh" slice OrderList
246
+ ```
247
+
248
+ A blueprint reference needs a readable range and a blueprint a profile lists:
249
+
250
+ ```screenplay expect PLAY0721,PLAY0722
251
+ module Sales
252
+ feature Orders
253
+ slice StateView OrderList
254
+ readmodel OrderRow
255
+ title String
256
+
257
+ screen OrderList
258
+ template blueprint Hr Workspace version "latest"
259
+ body
260
+ title "Orders"
261
+
262
+ ui profile Desktop
263
+ target platform web
264
+ packages
265
+ Crm
266
+ ```
267
+
268
+ ## Editing the shell through MCP
269
+
270
+ The shell is typed syntax. `read-ast` returns `NavigationRegionSyntax`, `NavigationItemSyntax`, `ToolbarButtonSyntax`,
271
+ `TemplateAssignmentSyntax`, `ScreenTemplateReferenceSyntax` and `SampleDataPackSyntax`; `propose-ast` edits them; a
272
+ proposal against a revision that moved is refused with `StaleRevision`; `apply` writes only after the diagnostics above
273
+ pass. Propose, show the difference, apply, reopen. Details: `cratis-screenplay-model-authoring`,
274
+ `references/screen-authoring-workflow.md`.
275
+
276
+ - **Switch a region's mode** with a `replace` of the region. Inherit to extend adds the module's own items; inherit to
277
+ override copies the application's items, retargeted to the module's features; override or extend to inherit clears the
278
+ items.
279
+ - **Add the first child** of a region, toolbar or item with `add` to `navigation`, `buttons` or `children` (Screenplay
280
+ 4.188.0 or later; an older MCP server refuses it as an unknown member).
281
+ - A refusal (`PLAY0750`, `PLAY0762`, `PLAY0722`, `PLAY0714`) is the compiler's own answer: change the proposal, never the
282
+ rule.
283
+
284
+ ## Render and verify
285
+
286
+ - `screenplay <model> --warnaserror` must report no error and no warning first; absent highlighting proves nothing.
287
+ - `cratis render <model> --name <App> --destination <out>` and `cratis run <model>` carry the shell: the topbar and sidebar
288
+ render, a module's sidebar replaces or extends the application's, a button opens the slice's command form as a dialog,
289
+ and the address reflects the active module and feature. The sample data pack is not served.
290
+ - Report authoring acceptance, executable admission and runtime rendering separately (see `SKILL.md`).
291
+
292
+ ## Review checklist
293
+
294
+ - [ ] Each module's region mode is deliberate: inherit by default, extend to add, override only to replace.
295
+ - [ ] No module item targets another module; no id repeats between an extending module and the application.
296
+ - [ ] The logo is declared once, in the layout.
297
+ - [ ] Hierarchy is in the sidebar; sub-items target features of the parent's module.
298
+ - [ ] Every button names a State Change slice; none is left without a slice.
299
+ - [ ] A screen with a `template` keeps its toolbar inside a slot body.
300
+ - [ ] Every template has a `category`; every blueprint reference has a valid range and is listed in a profile's `packages`.
301
+ - [ ] The active sample data pack is selected once, in the `ui profile`, and no sample value sits in a component.
@@ -3,12 +3,34 @@
3
3
  "input": "Declare the application shell, a screen template and a command form.",
4
4
  "fixtures": [],
5
5
  "assertions": [
6
- { "kind": "skill-contains", "value": "PLAY0685", "file": "references/response-continuations.md" },
7
- { "kind": "skill-contains", "value": "PLAY0485", "file": "references/response-continuations.md" },
8
- { "kind": "skill-contains", "value": "Form fields and behavior parameters\nwin", "file": "references/response-continuations.md" },
9
- { "kind": "skill-contains", "value": "outer successful response remains available", "file": "references/response-continuations.md" },
10
- { "kind": "skill-contains", "value": "binding/navigation remains blocked in Scene", "file": "references/response-continuations.md" },
11
- { "kind": "play-compiles" },
6
+ {
7
+ "kind": "skill-contains",
8
+ "value": "PLAY0685",
9
+ "file": "references/response-continuations.md"
10
+ },
11
+ {
12
+ "kind": "skill-contains",
13
+ "value": "PLAY0485",
14
+ "file": "references/response-continuations.md"
15
+ },
16
+ {
17
+ "kind": "skill-contains",
18
+ "value": "Form fields and behavior parameters\nwin",
19
+ "file": "references/response-continuations.md"
20
+ },
21
+ {
22
+ "kind": "skill-contains",
23
+ "value": "outer successful response remains available",
24
+ "file": "references/response-continuations.md"
25
+ },
26
+ {
27
+ "kind": "skill-contains",
28
+ "value": "binding/navigation remains blocked in Scene",
29
+ "file": "references/response-continuations.md"
30
+ },
31
+ {
32
+ "kind": "play-compiles"
33
+ },
12
34
  {
13
35
  "kind": "skill-contains",
14
36
  "value": "produces event InvoiceCancelled"
@@ -104,6 +126,87 @@
104
126
  {
105
127
  "kind": "skill-contains",
106
128
  "value": "authoring acceptance, executable admission and runtime\n implementation separately"
129
+ },
130
+ {
131
+ "kind": "skill-contains",
132
+ "value": "application navigation regions (topbar/sidebar, module inherit/extend/override)"
133
+ },
134
+ {
135
+ "kind": "skill-contains",
136
+ "value": "toolbar slice buttons"
137
+ },
138
+ {
139
+ "kind": "skill-contains",
140
+ "value": "## The application shell: regions, slice buttons, blueprint references, sample data"
141
+ },
142
+ {
143
+ "kind": "skill-contains",
144
+ "value": "references/application-shell.md"
145
+ },
146
+ {
147
+ "kind": "skill-contains",
148
+ "value": "A module's own items may only target that module",
149
+ "file": "references/application-shell.md"
150
+ },
151
+ {
152
+ "kind": "skill-contains",
153
+ "value": "`navigation <region> extends`",
154
+ "file": "references/application-shell.md"
155
+ },
156
+ {
157
+ "kind": "skill-contains",
158
+ "value": "`navigation <region> overrides`",
159
+ "file": "references/application-shell.md"
160
+ },
161
+ {
162
+ "kind": "skill-contains",
163
+ "value": "Hierarchy is sidebar only",
164
+ "file": "references/application-shell.md"
165
+ },
166
+ {
167
+ "kind": "skill-contains",
168
+ "value": "retargeted to\n the module's own features",
169
+ "file": "references/application-shell.md"
170
+ },
171
+ {
172
+ "kind": "skill-contains",
173
+ "value": "A State View, Automation or Translate slice is `PLAY0762`",
174
+ "file": "references/application-shell.md"
175
+ },
176
+ {
177
+ "kind": "skill-contains",
178
+ "value": "Stage refuses a screen that\nmixes a top-level `template` directive with other top-level directives",
179
+ "file": "references/application-shell.md"
180
+ },
181
+ {
182
+ "kind": "skill-contains",
183
+ "value": "`\"latest\"`) is `PLAY0721`",
184
+ "file": "references/application-shell.md"
185
+ },
186
+ {
187
+ "kind": "skill-contains",
188
+ "value": "**The active pack is chosen once, in the `ui profile`**",
189
+ "file": "references/application-shell.md"
190
+ },
191
+ {
192
+ "kind": "skill-contains",
193
+ "value": "Sample data is **design and preview only**",
194
+ "file": "references/application-shell.md"
195
+ },
196
+ {
197
+ "kind": "skill-contains",
198
+ "value": "Never put sample values in a component or a screen",
199
+ "file": "references/application-shell.md"
200
+ },
201
+ {
202
+ "kind": "skill-contains",
203
+ "value": "`StaleRevision`",
204
+ "file": "references/application-shell.md"
205
+ },
206
+ {
207
+ "kind": "skill-contains",
208
+ "value": "screen-shell-navigation-positive",
209
+ "file": "references/application-shell.md"
107
210
  }
108
211
  ]
109
212
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cratis/pi",
3
- "version": "7.57.0",
3
+ "version": "7.59.0",
4
4
  "description": "Configuration-aware Cratis AI integration for Pi",
5
5
  "type": "module",
6
6
  "files": [