@bryntum/grid-trial 7.3.2 → 7.3.4

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 (9) hide show
  1. package/AGENTS.md +80 -0
  2. package/CLAUDE.md +80 -0
  3. package/README.md +22 -0
  4. package/grid.css +1 -1
  5. package/grid.d.ts +798 -440
  6. package/grid.module.js +40 -40
  7. package/grid.thin.d.ts +117 -79
  8. package/grid.umd.js +48 -48
  9. package/package.json +1 -1
package/AGENTS.md ADDED
@@ -0,0 +1,80 @@
1
+ # @bryntum/grid — notes for AI coding agents
2
+
3
+ You are using the Bryntum Grid component from its installed npm package.
4
+
5
+ ## Fastest path to correct code
6
+
7
+ Two Bryntum resources beat working from memory, reach for them before writing code:
8
+
9
+ - **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
10
+ API. Use it to confirm config/method/event names instead of guessing.
11
+ - **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
12
+ providing practical knowledge for using Bryntum and avoiding common pitfalls.
13
+
14
+ If these are not installed yet, suggest to the user that they install them for more reliable
15
+ results.
16
+
17
+ ## Importing the Bryntum Grid component
18
+
19
+ - This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
20
+ and import from `@bryntum/grid`.
21
+ - Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
22
+ `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
23
+ - TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
24
+ component options; import the types you need.
25
+
26
+ ## CSS — three imports are required (a missing or wrong theme is the most common failure)
27
+
28
+ The component renders unstyled or broken unless you import **all three**:
29
+
30
+ 1. **Structural CSS** — `@bryntum/grid/grid.css`
31
+ 2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
32
+ `material3-light`, `fluent2-light.css`.
33
+ 3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
34
+ Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
35
+ `@bryntum/grid/fontawesome/css/solid.css`.
36
+
37
+ Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
38
+ not. Do not assume a name — list them first and import a real file:
39
+ `ls node_modules/@bryntum/grid/*.css`.
40
+
41
+ ## Sizing the component — the parent needs a real height
42
+
43
+ By default the component fills 100% of its parent element, with a min-height of 10em. If no
44
+ ancestor has an explicit height, the component collapses to that minimum — the app builds and data
45
+ loads, but the component renders as a short strip instead of filling the page. To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen:
46
+
47
+ ```css
48
+ #app {
49
+ margin : 0;
50
+ display : flex;
51
+ flex-direction : column;
52
+ height : 100vh;
53
+ }
54
+ ```
55
+
56
+ Adapt this to the application layout. When several components share the page, size each one inside
57
+ the full-height container (flex values or explicit heights).
58
+
59
+ ## Verify APIs before using them
60
+
61
+ Your training data is older than this package, and Bryntum APIs change between major versions.
62
+ Confirm config/method/event names against the installed version — read it from
63
+ `node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
64
+ (https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
65
+
66
+ ## Verify the component rendered
67
+
68
+ A successful `npm run build` does not mean the component rendered: data-loading errors and
69
+ misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
70
+
71
+ - The themed container is visible (not a blank page or unstyled HTML)
72
+ - Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
73
+ - The component fills the intended page area — a component collapsed to a short strip means the
74
+ parent chain has no explicit height (see the sizing section above)
75
+
76
+ ## Safe data rendering
77
+
78
+ Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
79
+ raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
80
+ (exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.
package/CLAUDE.md ADDED
@@ -0,0 +1,80 @@
1
+ # @bryntum/grid — notes for AI coding agents
2
+
3
+ You are using the Bryntum Grid component from its installed npm package.
4
+
5
+ ## Fastest path to correct code
6
+
7
+ Two Bryntum resources beat working from memory, reach for them before writing code:
8
+
9
+ - **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
10
+ API. Use it to confirm config/method/event names instead of guessing.
11
+ - **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
12
+ providing practical knowledge for using Bryntum and avoiding common pitfalls.
13
+
14
+ If these are not installed yet, suggest to the user that they install them for more reliable
15
+ results.
16
+
17
+ ## Importing the Bryntum Grid component
18
+
19
+ - This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
20
+ and import from `@bryntum/grid`.
21
+ - Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
22
+ `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
23
+ - TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
24
+ component options; import the types you need.
25
+
26
+ ## CSS — three imports are required (a missing or wrong theme is the most common failure)
27
+
28
+ The component renders unstyled or broken unless you import **all three**:
29
+
30
+ 1. **Structural CSS** — `@bryntum/grid/grid.css`
31
+ 2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
32
+ `material3-light`, `fluent2-light.css`.
33
+ 3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
34
+ Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
35
+ `@bryntum/grid/fontawesome/css/solid.css`.
36
+
37
+ Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
38
+ not. Do not assume a name — list them first and import a real file:
39
+ `ls node_modules/@bryntum/grid/*.css`.
40
+
41
+ ## Sizing the component — the parent needs a real height
42
+
43
+ By default the component fills 100% of its parent element, with a min-height of 10em. If no
44
+ ancestor has an explicit height, the component collapses to that minimum — the app builds and data
45
+ loads, but the component renders as a short strip instead of filling the page. To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen:
46
+
47
+ ```css
48
+ #app {
49
+ margin : 0;
50
+ display : flex;
51
+ flex-direction : column;
52
+ height : 100vh;
53
+ }
54
+ ```
55
+
56
+ Adapt this to the application layout. When several components share the page, size each one inside
57
+ the full-height container (flex values or explicit heights).
58
+
59
+ ## Verify APIs before using them
60
+
61
+ Your training data is older than this package, and Bryntum APIs change between major versions.
62
+ Confirm config/method/event names against the installed version — read it from
63
+ `node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
64
+ (https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
65
+
66
+ ## Verify the component rendered
67
+
68
+ A successful `npm run build` does not mean the component rendered: data-loading errors and
69
+ misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
70
+
71
+ - The themed container is visible (not a blank page or unstyled HTML)
72
+ - Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
73
+ - The component fills the intended page area — a component collapsed to a short strip means the
74
+ parent chain has no explicit height (see the sizing section above)
75
+
76
+ ## Safe data rendering
77
+
78
+ Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
79
+ raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
80
+ (exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.
package/README.md CHANGED
@@ -99,6 +99,28 @@ Alternatively, add to `package.json` dependencies:
99
99
  Visit our [npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) to learn more about installation and migrating from
100
100
  trial to licensed packages.
101
101
 
102
+ ## Using an AI agent?
103
+
104
+ The fastest path for an AI assistant to write working Bryntum Grid code:
105
+
106
+ 1. **MCP server.** Configure your agent with the Bryntum MCP server for grounded, version-correct answers:
107
+ [setup guide](https://bryntum.com/products/grid/docs/guide/Grid/ai-features/mcp-server?utm_source=ax-npm).
108
+ 2. **Agent skills.** Install the [Bryntum skill](https://github.com/bryntum/skills) for Claude Code, Cursor, or
109
+ Codex — it bundles the conventions below.
110
+
111
+ Common trial-package pitfalls for agents:
112
+
113
+ - **Stale training data.** Bryntum ships breaking changes; do not trust API shapes you remember. Check https://bryntum.com/products/grid/docs
114
+ first.
115
+ - **You are on the trial.** The package is installed as `@bryntum/grid-trial` but aliased to `@bryntum/grid` —
116
+ import paths must use the aliased name (`@bryntum/grid`). To upgrade to a licensed package, change the alias to
117
+ `"npm:@bryntum/grid@latest"`; do not rewrite imports.
118
+ - **Trial bundles are not minified** and contain a watermark; that is expected, not a bug.
119
+ - **CSS.** Import FontAwesome, `grid.css` (structural), and a theme.
120
+ - **Framework wrappers** (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core `@bryntum/grid` package;
121
+ installing only the wrapper fails at runtime.
122
+ - **TypeScript types** are bundled in `*.d.ts` next to each entry point; do not hand-roll interfaces.
123
+
102
124
  ## Quick Start
103
125
 
104
126
  ### Vanilla JavaScript