@bryntum/grid-thin-trial 7.3.2 → 7.3.4

package/AGENTS.md

@@ -0,0 +1,130 @@
+# @bryntum/grid-thin-trial — notes for AI coding agents
+
+You are using the Bryntum Grid component from its **thin trial** npm package
+(`@bryntum/grid-thin-trial`). Thin packages ship only product-specific code and styling and share
+a common core, so several Bryntum products can run in the same app. The rules below are not obvious
+from the source tree and must be followed for the component to render and work correctly.
+
+## 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.
+
+## Install trial thin packages with npm aliasing
+
+Trial thin packages must be installed with npm aliasing so imports resolve to the plain `-thin`
+names. Thin packages do **not** bundle their Bryntum dependencies and do **not** declare them in
+their own `package.json` — alias every one this product needs, all pinned to the **exact same
+version**. For Bryntum Grid, install:
+
+```shell
+npm install @bryntum/core-thin@npm:@bryntum/core-thin-trial@7.3.4 \
+  @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@7.3.4
+```
+
+The framework wrapper packages below are installed **in addition to** the thin packages above —
+they wrap them, not replace them. Wrappers have no trial variants, so install them by their real
+names with no aliasing.
+
+If using React, additionally install:
+
+```shell
+npm install @bryntum/core-react-thin @bryntum/grid-react-thin
+```
+
+If using Angular, additionally install:
+
+```shell
+npm install @bryntum/core-angular-thin @bryntum/grid-angular-thin
+```
+
+If using Vue, additionally install:
+
+```shell
+npm install @bryntum/core-vue-3-thin @bryntum/grid-vue-3-thin
+```
+
+- **Import from `@bryntum/grid-thin`** (not `-thin-trial`):
+  `import { ... } from '@bryntum/grid-thin'`. Aliasing means the licensed swap is a one-line
+  `package.json` change with no source edits.
+- **Never mix regular and thin packages.** Do not combine `@bryntum/grid` (regular) and
+  `@bryntum/grid-thin` in one project — the bundle loads twice and fails at runtime with "bundle
+  was loaded multiple times". To use several Bryntum products together, every one must be the
+  `-thin` variant; regular packages cannot be combined.
+- TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
+  component options; import the types you need.
+
+## CSS — theme, FontAwesome and core styling come from @bryntum/core-thin
+
+Thin styling is split: the theme, FontAwesome and core structural CSS live in `@bryntum/core-thin`,
+and each product ships only its own structural stylesheet. Structural CSS follows the same rule as
+the packages: import it for **every** thin package aliased above (`@bryntum/engine-thin` has no
+CSS) — importing only `grid.css` renders the component as broken, unstyled HTML. Thanks to the
+aliasing, the import paths use the plain `-thin` names. For Bryntum Grid, import:
+
+```css
+/* FontAwesome is used for icons */
+@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
+@import '@bryntum/core-thin/fontawesome/css/solid.css';
+/* Structural CSS */
+@import '@bryntum/core-thin/core.css';
+@import '@bryntum/grid-thin/grid.css';
+/* Theme */
+@import '@bryntum/core-thin/svalbard-light.css';
+```
+
+FontAwesome is required — icons, expanders and arrows are blank without it. Import **exactly one**
+theme: `stockholm-light`, `svalbard-light`, `visby-light`, `material3-light` or `fluent2-light`.
+Theme file names are exact and not guessable: `svalbard-light.css` exists, `svalbard.css` does not.
+List them first: `ls node_modules/@bryntum/core-thin/*.css`.
+
+When combining products, additionally import each product's `@bryntum/{product}-thin/{product}.css`,
+but keep one core-thin theme.
+
+## 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-thin/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-thin`), or return plain text and let the widget set `textContent`.

package/CLAUDE.md

@@ -0,0 +1,130 @@
+# @bryntum/grid-thin-trial — notes for AI coding agents
+
+You are using the Bryntum Grid component from its **thin trial** npm package
+(`@bryntum/grid-thin-trial`). Thin packages ship only product-specific code and styling and share
+a common core, so several Bryntum products can run in the same app. The rules below are not obvious
+from the source tree and must be followed for the component to render and work correctly.
+
+## 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.
+
+## Install trial thin packages with npm aliasing
+
+Trial thin packages must be installed with npm aliasing so imports resolve to the plain `-thin`
+names. Thin packages do **not** bundle their Bryntum dependencies and do **not** declare them in
+their own `package.json` — alias every one this product needs, all pinned to the **exact same
+version**. For Bryntum Grid, install:
+
+```shell
+npm install @bryntum/core-thin@npm:@bryntum/core-thin-trial@7.3.4 \
+  @bryntum/grid-thin@npm:@bryntum/grid-thin-trial@7.3.4
+```
+
+The framework wrapper packages below are installed **in addition to** the thin packages above —
+they wrap them, not replace them. Wrappers have no trial variants, so install them by their real
+names with no aliasing.
+
+If using React, additionally install:
+
+```shell
+npm install @bryntum/core-react-thin @bryntum/grid-react-thin
+```
+
+If using Angular, additionally install:
+
+```shell
+npm install @bryntum/core-angular-thin @bryntum/grid-angular-thin
+```
+
+If using Vue, additionally install:
+
+```shell
+npm install @bryntum/core-vue-3-thin @bryntum/grid-vue-3-thin
+```
+
+- **Import from `@bryntum/grid-thin`** (not `-thin-trial`):
+  `import { ... } from '@bryntum/grid-thin'`. Aliasing means the licensed swap is a one-line
+  `package.json` change with no source edits.
+- **Never mix regular and thin packages.** Do not combine `@bryntum/grid` (regular) and
+  `@bryntum/grid-thin` in one project — the bundle loads twice and fails at runtime with "bundle
+  was loaded multiple times". To use several Bryntum products together, every one must be the
+  `-thin` variant; regular packages cannot be combined.
+- TypeScript types ship as `*.d.ts` files inside the package. Do **not** redeclare interfaces or
+  component options; import the types you need.
+
+## CSS — theme, FontAwesome and core styling come from @bryntum/core-thin
+
+Thin styling is split: the theme, FontAwesome and core structural CSS live in `@bryntum/core-thin`,
+and each product ships only its own structural stylesheet. Structural CSS follows the same rule as
+the packages: import it for **every** thin package aliased above (`@bryntum/engine-thin` has no
+CSS) — importing only `grid.css` renders the component as broken, unstyled HTML. Thanks to the
+aliasing, the import paths use the plain `-thin` names. For Bryntum Grid, import:
+
+```css
+/* FontAwesome is used for icons */
+@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
+@import '@bryntum/core-thin/fontawesome/css/solid.css';
+/* Structural CSS */
+@import '@bryntum/core-thin/core.css';
+@import '@bryntum/grid-thin/grid.css';
+/* Theme */
+@import '@bryntum/core-thin/svalbard-light.css';
+```
+
+FontAwesome is required — icons, expanders and arrows are blank without it. Import **exactly one**
+theme: `stockholm-light`, `svalbard-light`, `visby-light`, `material3-light` or `fluent2-light`.
+Theme file names are exact and not guessable: `svalbard-light.css` exists, `svalbard.css` does not.
+List them first: `ls node_modules/@bryntum/core-thin/*.css`.
+
+When combining products, additionally import each product's `@bryntum/{product}-thin/{product}.css`,
+but keep one core-thin theme.
+
+## 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-thin/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-thin`), or return plain text and let the widget set `textContent`.