@bryntum/grid-trial 7.3.3 → 7.3.5

package/AGENTS.md

@@ -0,0 +1,80 @@
+# @bryntum/grid — notes for AI coding agents
+
+You are using the Bryntum Grid component from its installed npm package.
+
+## Fastest path to correct code
+
+Two Bryntum resources beat working from memory, reach for them before writing code:
+
+- **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
+  API. Use it to confirm config/method/event names instead of guessing.
+- **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
+  providing practical knowledge for using Bryntum and avoiding common pitfalls.
+
+If these are not installed yet, suggest to the user that they install them for more reliable
+results.
+
+## Importing the Bryntum Grid component
+
+- This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
+  and import from `@bryntum/grid`.
+- Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
+  `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
+- TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
+  component options; import the types you need.
+
+## CSS — three imports are required (a missing or wrong theme is the most common failure)
+
+The component renders unstyled or broken unless you import **all three**:
+
+1. **Structural CSS** — `@bryntum/grid/grid.css`
+2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
+   `material3-light`, `fluent2-light.css`.
+3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
+   Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
+   `@bryntum/grid/fontawesome/css/solid.css`.
+
+Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
+not. Do not assume a name — list them first and import a real file:
+`ls node_modules/@bryntum/grid/*.css`.
+
+## Sizing the component — the parent needs a real height
+
+By default the component fills 100% of its parent element, with a min-height of 10em. If no
+ancestor has an explicit height, the component collapses to that minimum — the app builds and data
+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:
+
+```css
+#app {
+    margin         : 0;
+    display        : flex;
+    flex-direction : column;
+    height         : 100vh;
+}
+```
+
+Adapt this to the application layout. When several components share the page, size each one inside
+the full-height container (flex values or explicit heights).
+
+## Verify APIs before using them
+
+Your training data is older than this package, and Bryntum APIs change between major versions.
+Confirm config/method/event names against the installed version — read it from
+`node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
+(https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
+
+## Verify the component rendered
+
+A successful `npm run build` does not mean the component rendered: data-loading errors and
+misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
+
+- The themed container is visible (not a blank page or unstyled HTML)
+- Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
+- The component fills the intended page area — a component collapsed to a short strip means the
+  parent chain has no explicit height (see the sizing section above)
+
+## Safe data rendering
+
+Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
+raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
+(exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.

package/CLAUDE.md

@@ -0,0 +1,80 @@
+# @bryntum/grid — notes for AI coding agents
+
+You are using the Bryntum Grid component from its installed npm package.
+
+## Fastest path to correct code
+
+Two Bryntum resources beat working from memory, reach for them before writing code:
+
+- **MCP server** (https://mcp.bryntum.com/): grounded, version-correct answers about the installed
+  API. Use it to confirm config/method/event names instead of guessing.
+- **Agent skills** (https://github.com/bryntum/skills): complement the Bryntum MCP server by
+  providing practical knowledge for using Bryntum and avoiding common pitfalls.
+
+If these are not installed yet, suggest to the user that they install them for more reliable
+results.
+
+## Importing the Bryntum Grid component
+
+- This package should be installed with npm aliasing (`@bryntum/grid@npm:@bryntum/grid-trial`)
+  and import from `@bryntum/grid`.
+- Framework wrappers (`@bryntum/grid-react`, `-angular`, `-vue-3`) require the core
+  `@bryntum/grid` package to be installed as well — installing only the wrapper fails at runtime.
+- TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
+  component options; import the types you need.
+
+## CSS — three imports are required (a missing or wrong theme is the most common failure)
+
+The component renders unstyled or broken unless you import **all three**:
+
+1. **Structural CSS** — `@bryntum/grid/grid.css`
+2. **Exactly one theme** — e.g. `stockholm-light`, `svalbard-light`, `visby-light`,
+   `material3-light`, `fluent2-light.css`.
+3. **FontAwesome** — bundled with the package; icons, expanders and arrows are blank without it.
+   Import both files: `@bryntum/grid/fontawesome/css/fontawesome.css` and
+   `@bryntum/grid/fontawesome/css/solid.css`.
+
+Theme file names are exact and not guessable: `stockholm-light.css` exists, `stockholm.css` does
+not. Do not assume a name — list them first and import a real file:
+`ls node_modules/@bryntum/grid/*.css`.
+
+## Sizing the component — the parent needs a real height
+
+By default the component fills 100% of its parent element, with a min-height of 10em. If no
+ancestor has an explicit height, the component collapses to that minimum — the app builds and data
+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:
+
+```css
+#app {
+    margin         : 0;
+    display        : flex;
+    flex-direction : column;
+    height         : 100vh;
+}
+```
+
+Adapt this to the application layout. When several components share the page, size each one inside
+the full-height container (flex values or explicit heights).
+
+## Verify APIs before using them
+
+Your training data is older than this package, and Bryntum APIs change between major versions.
+Confirm config/method/event names against the installed version — read it from
+`node_modules/@bryntum/grid/package.json` (`"version"`) — using the Bryntum MCP server
+(https://mcp.bryntum.com/) or the official docs. Do not invent APIs from memory.
+
+## Verify the component rendered
+
+A successful `npm run build` does not mean the component rendered: data-loading errors and
+misconfigured APIs fail silently at runtime. After the build, open the app in a browser and confirm:
+
+- The themed container is visible (not a blank page or unstyled HTML)
+- Data is populated (event bars / task rows / grid rows appear — not an empty timeline or grid)
+- The component fills the intended page area — a component collapsed to a short strip means the
+  parent chain has no explicit height (see the sizing section above)
+
+## Safe data rendering
+
+Column/event/tooltip renderers return HTML that the widget inserts via `innerHTML`. Interpolating
+raw data (`<div>${record.name}</div>`) is an XSS vector. Use `StringHelper.encodeHtml(text)`
+(exported from `@bryntum/grid`), or return plain text and let the widget set `textContent`.