@genesislcap/foundation-react-utils 15.46.6-alpha-606571609.0 → 15.48.0-alpha-830388687.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.
Files changed (11) hide show
  1. package/README.md +8 -4
  2. package/dist/custom-elements.json +25 -25
  3. package/dist/dts/error-boundary/error-boundary-styles.d.ts +3 -3
  4. package/dist/dts/error-boundary/error-boundary-styles.d.ts.map +1 -1
  5. package/dist/dts/error-boundary/error-boundary.d.ts +1 -1
  6. package/dist/dts/error-boundary/error-boundary.d.ts.map +1 -1
  7. package/dist/esm/error-boundary/error-boundary-styles.js +40 -24
  8. package/dist/esm/error-boundary/error-boundary.js +3 -7
  9. package/dist/foundation-react-utils.api.json +1 -1
  10. package/dist/foundation-react-utils.d.ts +1 -1
  11. package/package.json +12 -12
package/README.md CHANGED
@@ -84,7 +84,8 @@ takes it as a fourth argument.
84
84
  Pass `onCaughtError` to `createRoot`. By default React 19 logs every error a boundary catches to
85
85
  `console.error` before the boundary runs, so a console-capturing monitoring tool reports the bare
86
86
  error first and can drop or duplicate the boundary's own report. `onCaughtError` skips that log
87
- for these boundaries, and still logs errors caught by any other boundary.
87
+ for these boundaries, and still logs errors caught by any other boundary, with their component
88
+ stack.
88
89
 
89
90
  Without `onError`, a boundary logs each caught error through a foundation logger named
90
91
  `ERROR_BOUNDARY_LOGGER_NAME`: the error, then an object with its reference ID, scope, title, tile
@@ -93,9 +94,12 @@ registration and component stack. A global log reporter (`addGlobalLogReporter`
93
94
  `onError` set, the boundary doesn't log the error, so it isn't reported twice. If `onError` throws,
94
95
  the boundary logs the original error and the handler's error, so neither is lost.
95
96
 
96
- The fallback reads its colours and fonts from `--eb-*` CSS custom properties (`--eb-bg`,
97
- `--eb-surface`, `--eb-text`, `--eb-text-muted`, `--eb-border`, `--eb-accent`, `--eb-error`,
98
- `--eb-font`, and others), so set them on an ancestor to theme it. The last 20 reports are also kept
97
+ The fallback takes its colours, font and corner radius from the design system's tokens
98
+ (`--neutral-layer-1`, `--neutral-foreground-rest`, `--accent-fill-rest`, `--error-color`,
99
+ `--body-font`, `--control-corner-radius` and others), so it follows the app's theme, including light
100
+ and dark mode. To override them, set `--eb-*` custom properties (`--eb-bg`, `--eb-surface`,
101
+ `--eb-text`, `--eb-text-muted`, `--eb-border`, `--eb-accent`, `--eb-error`, `--eb-font`, and others)
102
+ on an ancestor. Without a design system it uses its own light palette. The last 20 reports are also kept
99
103
  on `window.__GENESIS_ERROR_BOUNDARY_REPORTS__` for dev tooling such as the Genesis Create preview.
100
104
 
101
105
  ## License
package/dist/custom-elements.json CHANGED
@@ -279,8 +279,8 @@
279
279
  {
280
280
  "kind": "variable",
281
281
  "name": "errorBoundaryStyles",
282
- "default": "`\n.error-boundary {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: var(--eb-bg, #f6f8fb);\n color: var(--eb-text, #18212f);\n font-family: var(--eb-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n}\n\n.error-boundary__top,\n.error-boundary__title,\n.error-boundary__subtitle,\n.error-boundary__details,\n.error-boundary__actions,\n.error-boundary__manual-copy-help {\n width: 100%;\n}\n\n.error-boundary__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__status {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--eb-error, #c53d3d);\n border-radius: 999px;\n padding: 5px 10px;\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-size: 11px;\n font-weight: 700;\n color: var(--eb-error, #c53d3d);\n background: var(--eb-error-bg, #fff4f4);\n}\n\n.error-boundary__reference {\n font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--eb-text-muted, #5f6f84);\n text-transform: uppercase;\n}\n\n.error-boundary__title {\n margin: 0;\n font-size: clamp(22px, 3vw, 30px);\n line-height: 1.15;\n font-weight: 700;\n text-wrap: balance;\n}\n\n.error-boundary__subtitle {\n margin: 0;\n max-width: 80ch;\n line-height: 1.45;\n}\n\n.error-boundary__details {\n box-sizing: border-box;\n min-height: 190px;\n max-height: 360px;\n padding: 12px;\n border: 1px solid var(--eb-border, #d3dae6);\n border-radius: 10px;\n background: var(--eb-surface, #ffffff);\n color: inherit;\n font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n font-size: 12px;\n line-height: 1.5;\n resize: vertical;\n}\n\n.error-boundary__actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__button {\n border: 1px solid var(--eb-accent, #2f6fed);\n border-radius: 999px;\n background: var(--eb-accent, #2f6fed);\n color: var(--eb-accent-foreground, #ffffff);\n cursor: pointer;\n padding: 9px 16px;\n font: inherit;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.error-boundary__button:hover {\n background: var(--eb-accent-hover, #255dcc);\n}\n\n.error-boundary__button--secondary {\n border-color: var(--eb-border, #d3dae6);\n background: var(--eb-surface, #ffffff);\n color: inherit;\n}\n\n.error-boundary__button--secondary:hover {\n background: var(--eb-surface-hover, #eef2f8);\n}\n\n.error-boundary__button:focus-visible {\n outline: 2px solid var(--eb-focus, #2f6fed);\n outline-offset: 2px;\n}\n\n.error-boundary__manual-copy-help {\n margin: 2px 0 0;\n font-size: 13px;\n color: var(--eb-text-muted, #5f6f84);\n line-height: 1.4;\n}\n`",
283
- "description": "Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the\nfallback by setting them on any ancestor."
282
+ "default": "`\n.error-boundary {\n --_eb-bg: var(--eb-bg, var(--neutral-layer-1, #f6f8fb));\n --_eb-surface: var(--eb-surface, var(--neutral-layer-2, #ffffff));\n --_eb-surface-hover: var(--eb-surface-hover, var(--neutral-fill-stealth-hover, #eef2f8));\n --_eb-text: var(--eb-text, var(--neutral-foreground-rest, #18212f));\n --_eb-text-muted: var(--eb-text-muted, var(--neutral-foreground-hint, #5f6f84));\n --_eb-border: var(--eb-border, var(--neutral-stroke-rest, #d3dae6));\n --_eb-accent: var(--eb-accent, var(--accent-fill-rest, #2f6fed));\n --_eb-accent-hover: var(--eb-accent-hover, var(--accent-fill-hover, #255dcc));\n --_eb-accent-foreground: var(--eb-accent-foreground, var(--foreground-on-accent-rest, #ffffff));\n --_eb-error: var(--eb-error, var(--error-color, #c53d3d));\n --_eb-error-bg: var(--eb-error-bg, color-mix(in srgb, var(--_eb-error) 8%, var(--_eb-surface)));\n --_eb-error-text: var(--eb-error-text, color-mix(in srgb, var(--_eb-error) 50%, var(--_eb-text)));\n --_eb-focus: var(--eb-focus, var(--focus-stroke-outer, #2f6fed));\n --_eb-font: var(--eb-font, var(--body-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif));\n --_eb-mono-font: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: var(--_eb-bg);\n color: var(--_eb-text);\n font-family: var(--_eb-font);\n}\n\n.error-boundary__top,\n.error-boundary__title,\n.error-boundary__subtitle,\n.error-boundary__details,\n.error-boundary__actions,\n.error-boundary__manual-copy-help {\n width: 100%;\n}\n\n.error-boundary__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__status {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--_eb-error);\n border-radius: 999px;\n padding: 5px 10px;\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-size: 11px;\n font-weight: 700;\n color: var(--_eb-error-text);\n background: var(--_eb-error-bg);\n}\n\n.error-boundary__reference {\n font-family: var(--_eb-mono-font);\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--_eb-text-muted);\n text-transform: uppercase;\n}\n\n.error-boundary__title {\n margin: 0;\n font-size: clamp(22px, 3vw, 30px);\n line-height: 1.15;\n font-weight: 700;\n text-wrap: balance;\n}\n\n.error-boundary__subtitle {\n margin: 0;\n max-width: 80ch;\n line-height: 1.45;\n}\n\n.error-boundary__details {\n box-sizing: border-box;\n min-height: 190px;\n max-height: 360px;\n padding: 12px;\n border: 1px solid var(--_eb-border);\n border-radius: calc(var(--control-corner-radius, 10) * 1px);\n background: var(--_eb-surface);\n color: inherit;\n font-family: var(--_eb-mono-font);\n font-size: 12px;\n line-height: 1.5;\n resize: vertical;\n}\n\n.error-boundary__actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__button {\n border: 1px solid var(--_eb-accent);\n border-radius: calc(var(--control-corner-radius, 999) * 1px);\n background: var(--_eb-accent);\n color: var(--_eb-accent-foreground);\n cursor: pointer;\n padding: 9px 16px;\n font: inherit;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.error-boundary__button:hover {\n background: var(--_eb-accent-hover);\n}\n\n.error-boundary__button--secondary {\n border-color: var(--_eb-border);\n background: var(--_eb-surface);\n color: inherit;\n}\n\n.error-boundary__button--secondary:hover {\n background: var(--_eb-surface-hover);\n}\n\n.error-boundary__button:focus-visible {\n outline: 2px solid var(--_eb-focus);\n outline-offset: 2px;\n}\n\n.error-boundary__manual-copy-help {\n margin: 2px 0 0;\n font-size: 13px;\n color: var(--_eb-text-muted);\n line-height: 1.4;\n}\n`",
283
+ "description": "Fallback UI styles. Each colour and font resolves from an `--eb-*` override set on any ancestor,\nthen the matching design token, then a built-in value for apps without a design system."
284
284
  }
285
285
  ],
286
286
  "exports": [
@@ -381,6 +381,29 @@
381
381
  }
382
382
  ]
383
383
  },
384
+ {
385
+ "kind": "javascript-module",
386
+ "path": "src/flexlayout/index.ts",
387
+ "declarations": [],
388
+ "exports": [
389
+ {
390
+ "kind": "js",
391
+ "name": "*",
392
+ "declaration": {
393
+ "name": "*",
394
+ "package": "flexlayout-react"
395
+ }
396
+ },
397
+ {
398
+ "kind": "js",
399
+ "name": "installRapidFlexLayoutReactStyles",
400
+ "declaration": {
401
+ "name": "installRapidFlexLayoutReactStyles",
402
+ "module": "src/flexlayout/index.ts"
403
+ }
404
+ }
405
+ ]
406
+ },
384
407
  {
385
408
  "kind": "javascript-module",
386
409
  "path": "src/router/index.ts",
@@ -625,29 +648,6 @@
625
648
  }
626
649
  }
627
650
  ]
628
- },
629
- {
630
- "kind": "javascript-module",
631
- "path": "src/flexlayout/index.ts",
632
- "declarations": [],
633
- "exports": [
634
- {
635
- "kind": "js",
636
- "name": "*",
637
- "declaration": {
638
- "name": "*",
639
- "package": "flexlayout-react"
640
- }
641
- },
642
- {
643
- "kind": "js",
644
- "name": "installRapidFlexLayoutReactStyles",
645
- "declaration": {
646
- "name": "installRapidFlexLayoutReactStyles",
647
- "module": "src/flexlayout/index.ts"
648
- }
649
- }
650
- ]
651
651
  }
652
652
  ]
653
653
  }
package/dist/dts/error-boundary/error-boundary-styles.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
- * Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the
3
- * fallback by setting them on any ancestor.
2
+ * Fallback UI styles. Each colour and font resolves from an `--eb-*` override set on any ancestor,
3
+ * then the matching design token, then a built-in value for apps without a design system.
4
4
  */
5
- export declare const errorBoundaryStyles = "\n.error-boundary {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: var(--eb-bg, #f6f8fb);\n color: var(--eb-text, #18212f);\n font-family: var(--eb-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n}\n\n.error-boundary__top,\n.error-boundary__title,\n.error-boundary__subtitle,\n.error-boundary__details,\n.error-boundary__actions,\n.error-boundary__manual-copy-help {\n width: 100%;\n}\n\n.error-boundary__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__status {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--eb-error, #c53d3d);\n border-radius: 999px;\n padding: 5px 10px;\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-size: 11px;\n font-weight: 700;\n color: var(--eb-error, #c53d3d);\n background: var(--eb-error-bg, #fff4f4);\n}\n\n.error-boundary__reference {\n font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--eb-text-muted, #5f6f84);\n text-transform: uppercase;\n}\n\n.error-boundary__title {\n margin: 0;\n font-size: clamp(22px, 3vw, 30px);\n line-height: 1.15;\n font-weight: 700;\n text-wrap: balance;\n}\n\n.error-boundary__subtitle {\n margin: 0;\n max-width: 80ch;\n line-height: 1.45;\n}\n\n.error-boundary__details {\n box-sizing: border-box;\n min-height: 190px;\n max-height: 360px;\n padding: 12px;\n border: 1px solid var(--eb-border, #d3dae6);\n border-radius: 10px;\n background: var(--eb-surface, #ffffff);\n color: inherit;\n font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n font-size: 12px;\n line-height: 1.5;\n resize: vertical;\n}\n\n.error-boundary__actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__button {\n border: 1px solid var(--eb-accent, #2f6fed);\n border-radius: 999px;\n background: var(--eb-accent, #2f6fed);\n color: var(--eb-accent-foreground, #ffffff);\n cursor: pointer;\n padding: 9px 16px;\n font: inherit;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.error-boundary__button:hover {\n background: var(--eb-accent-hover, #255dcc);\n}\n\n.error-boundary__button--secondary {\n border-color: var(--eb-border, #d3dae6);\n background: var(--eb-surface, #ffffff);\n color: inherit;\n}\n\n.error-boundary__button--secondary:hover {\n background: var(--eb-surface-hover, #eef2f8);\n}\n\n.error-boundary__button:focus-visible {\n outline: 2px solid var(--eb-focus, #2f6fed);\n outline-offset: 2px;\n}\n\n.error-boundary__manual-copy-help {\n margin: 2px 0 0;\n font-size: 13px;\n color: var(--eb-text-muted, #5f6f84);\n line-height: 1.4;\n}\n";
5
+ export declare const errorBoundaryStyles = "\n.error-boundary {\n --_eb-bg: var(--eb-bg, var(--neutral-layer-1, #f6f8fb));\n --_eb-surface: var(--eb-surface, var(--neutral-layer-2, #ffffff));\n --_eb-surface-hover: var(--eb-surface-hover, var(--neutral-fill-stealth-hover, #eef2f8));\n --_eb-text: var(--eb-text, var(--neutral-foreground-rest, #18212f));\n --_eb-text-muted: var(--eb-text-muted, var(--neutral-foreground-hint, #5f6f84));\n --_eb-border: var(--eb-border, var(--neutral-stroke-rest, #d3dae6));\n --_eb-accent: var(--eb-accent, var(--accent-fill-rest, #2f6fed));\n --_eb-accent-hover: var(--eb-accent-hover, var(--accent-fill-hover, #255dcc));\n --_eb-accent-foreground: var(--eb-accent-foreground, var(--foreground-on-accent-rest, #ffffff));\n --_eb-error: var(--eb-error, var(--error-color, #c53d3d));\n --_eb-error-bg: var(--eb-error-bg, color-mix(in srgb, var(--_eb-error) 8%, var(--_eb-surface)));\n --_eb-error-text: var(--eb-error-text, color-mix(in srgb, var(--_eb-error) 50%, var(--_eb-text)));\n --_eb-focus: var(--eb-focus, var(--focus-stroke-outer, #2f6fed));\n --_eb-font: var(--eb-font, var(--body-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif));\n --_eb-mono-font: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);\n\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 12px;\n align-items: flex-start;\n width: 100%;\n height: 100%;\n padding: 16px;\n background: var(--_eb-bg);\n color: var(--_eb-text);\n font-family: var(--_eb-font);\n}\n\n.error-boundary__top,\n.error-boundary__title,\n.error-boundary__subtitle,\n.error-boundary__details,\n.error-boundary__actions,\n.error-boundary__manual-copy-help {\n width: 100%;\n}\n\n.error-boundary__top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__status {\n display: inline-flex;\n align-items: center;\n border: 1px solid var(--_eb-error);\n border-radius: 999px;\n padding: 5px 10px;\n text-transform: uppercase;\n letter-spacing: 0.13em;\n font-size: 11px;\n font-weight: 700;\n color: var(--_eb-error-text);\n background: var(--_eb-error-bg);\n}\n\n.error-boundary__reference {\n font-family: var(--_eb-mono-font);\n font-size: 11px;\n letter-spacing: 0.08em;\n color: var(--_eb-text-muted);\n text-transform: uppercase;\n}\n\n.error-boundary__title {\n margin: 0;\n font-size: clamp(22px, 3vw, 30px);\n line-height: 1.15;\n font-weight: 700;\n text-wrap: balance;\n}\n\n.error-boundary__subtitle {\n margin: 0;\n max-width: 80ch;\n line-height: 1.45;\n}\n\n.error-boundary__details {\n box-sizing: border-box;\n min-height: 190px;\n max-height: 360px;\n padding: 12px;\n border: 1px solid var(--_eb-border);\n border-radius: calc(var(--control-corner-radius, 10) * 1px);\n background: var(--_eb-surface);\n color: inherit;\n font-family: var(--_eb-mono-font);\n font-size: 12px;\n line-height: 1.5;\n resize: vertical;\n}\n\n.error-boundary__actions {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.error-boundary__button {\n border: 1px solid var(--_eb-accent);\n border-radius: calc(var(--control-corner-radius, 999) * 1px);\n background: var(--_eb-accent);\n color: var(--_eb-accent-foreground);\n cursor: pointer;\n padding: 9px 16px;\n font: inherit;\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.error-boundary__button:hover {\n background: var(--_eb-accent-hover);\n}\n\n.error-boundary__button--secondary {\n border-color: var(--_eb-border);\n background: var(--_eb-surface);\n color: inherit;\n}\n\n.error-boundary__button--secondary:hover {\n background: var(--_eb-surface-hover);\n}\n\n.error-boundary__button:focus-visible {\n outline: 2px solid var(--_eb-focus);\n outline-offset: 2px;\n}\n\n.error-boundary__manual-copy-help {\n margin: 2px 0 0;\n font-size: 13px;\n color: var(--_eb-text-muted);\n line-height: 1.4;\n}\n";
6
6
  //# sourceMappingURL=error-boundary-styles.d.ts.map
package/dist/dts/error-boundary/error-boundary-styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"error-boundary-styles.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/error-boundary-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,o4FAgI/B,CAAC"}
1
+ {"version":3,"file":"error-boundary-styles.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/error-boundary-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,w4HAgJ/B,CAAC"}
package/dist/dts/error-boundary/error-boundary.d.ts CHANGED
@@ -97,7 +97,7 @@ export declare const withTileErrorBoundary: <P extends object>(WrappedComponent:
97
97
  * boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare
98
98
  * error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and
99
99
  * {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by
100
- * any other boundary are still logged to `console.error`.
100
+ * any other boundary are still logged to `console.error`, with their component stack.
101
101
  *
102
102
  * @public
103
103
  */
package/dist/dts/error-boundary/error-boundary.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAa,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,0CAA0C,CAAC;AAIlF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAwPF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAItD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAcxD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACpD,kBAAkB,aAAa,CAAC,CAAC,CAAC,EAClC,OAAO,MAAM,EACb,kBAAkB,MAAM,EACxB,UAAU,yBAAyB,KAClC,EAAE,CAAC,CAAC,CAUN,CAAC;AAOF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,CAKnE,CAAC"}
1
+ {"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAa,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,0CAA0C,CAAC;AAIlF;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,0FAA0F;IAC1F,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAAG,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAmPF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAItD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAcxD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACpD,kBAAkB,aAAa,CAAC,CAAC,CAAC,EAClC,OAAO,MAAM,EACb,kBAAkB,MAAM,EACxB,UAAU,yBAAyB,KAClC,EAAE,CAAC,CAAC,CAUN,CAAC;AAOF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,CASnE,CAAC"}
package/dist/esm/error-boundary/error-boundary-styles.js CHANGED
@@ -1,9 +1,25 @@
1
1
  /**
2
- * Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the
3
- * fallback by setting them on any ancestor.
2
+ * Fallback UI styles. Each colour and font resolves from an `--eb-*` override set on any ancestor,
3
+ * then the matching design token, then a built-in value for apps without a design system.
4
4
  */
5
5
  export const errorBoundaryStyles = `
6
6
  .error-boundary {
7
+ --_eb-bg: var(--eb-bg, var(--neutral-layer-1, #f6f8fb));
8
+ --_eb-surface: var(--eb-surface, var(--neutral-layer-2, #ffffff));
9
+ --_eb-surface-hover: var(--eb-surface-hover, var(--neutral-fill-stealth-hover, #eef2f8));
10
+ --_eb-text: var(--eb-text, var(--neutral-foreground-rest, #18212f));
11
+ --_eb-text-muted: var(--eb-text-muted, var(--neutral-foreground-hint, #5f6f84));
12
+ --_eb-border: var(--eb-border, var(--neutral-stroke-rest, #d3dae6));
13
+ --_eb-accent: var(--eb-accent, var(--accent-fill-rest, #2f6fed));
14
+ --_eb-accent-hover: var(--eb-accent-hover, var(--accent-fill-hover, #255dcc));
15
+ --_eb-accent-foreground: var(--eb-accent-foreground, var(--foreground-on-accent-rest, #ffffff));
16
+ --_eb-error: var(--eb-error, var(--error-color, #c53d3d));
17
+ --_eb-error-bg: var(--eb-error-bg, color-mix(in srgb, var(--_eb-error) 8%, var(--_eb-surface)));
18
+ --_eb-error-text: var(--eb-error-text, color-mix(in srgb, var(--_eb-error) 50%, var(--_eb-text)));
19
+ --_eb-focus: var(--eb-focus, var(--focus-stroke-outer, #2f6fed));
20
+ --_eb-font: var(--eb-font, var(--body-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif));
21
+ --_eb-mono-font: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
22
+
7
23
  box-sizing: border-box;
8
24
  display: flex;
9
25
  flex-direction: column;
@@ -12,9 +28,9 @@ export const errorBoundaryStyles = `
12
28
  width: 100%;
13
29
  height: 100%;
14
30
  padding: 16px;
15
- background: var(--eb-bg, #f6f8fb);
16
- color: var(--eb-text, #18212f);
17
- font-family: var(--eb-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
31
+ background: var(--_eb-bg);
32
+ color: var(--_eb-text);
33
+ font-family: var(--_eb-font);
18
34
  }
19
35
 
20
36
  .error-boundary__top,
@@ -37,22 +53,22 @@ export const errorBoundaryStyles = `
37
53
  .error-boundary__status {
38
54
  display: inline-flex;
39
55
  align-items: center;
40
- border: 1px solid var(--eb-error, #c53d3d);
56
+ border: 1px solid var(--_eb-error);
41
57
  border-radius: 999px;
42
58
  padding: 5px 10px;
43
59
  text-transform: uppercase;
44
60
  letter-spacing: 0.13em;
45
61
  font-size: 11px;
46
62
  font-weight: 700;
47
- color: var(--eb-error, #c53d3d);
48
- background: var(--eb-error-bg, #fff4f4);
63
+ color: var(--_eb-error-text);
64
+ background: var(--_eb-error-bg);
49
65
  }
50
66
 
51
67
  .error-boundary__reference {
52
- font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
68
+ font-family: var(--_eb-mono-font);
53
69
  font-size: 11px;
54
70
  letter-spacing: 0.08em;
55
- color: var(--eb-text-muted, #5f6f84);
71
+ color: var(--_eb-text-muted);
56
72
  text-transform: uppercase;
57
73
  }
58
74
 
@@ -75,11 +91,11 @@ export const errorBoundaryStyles = `
75
91
  min-height: 190px;
76
92
  max-height: 360px;
77
93
  padding: 12px;
78
- border: 1px solid var(--eb-border, #d3dae6);
79
- border-radius: 10px;
80
- background: var(--eb-surface, #ffffff);
94
+ border: 1px solid var(--_eb-border);
95
+ border-radius: calc(var(--control-corner-radius, 10) * 1px);
96
+ background: var(--_eb-surface);
81
97
  color: inherit;
82
- font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
98
+ font-family: var(--_eb-mono-font);
83
99
  font-size: 12px;
84
100
  line-height: 1.5;
85
101
  resize: vertical;
@@ -92,10 +108,10 @@ export const errorBoundaryStyles = `
92
108
  }
93
109
 
94
110
  .error-boundary__button {
95
- border: 1px solid var(--eb-accent, #2f6fed);
96
- border-radius: 999px;
97
- background: var(--eb-accent, #2f6fed);
98
- color: var(--eb-accent-foreground, #ffffff);
111
+ border: 1px solid var(--_eb-accent);
112
+ border-radius: calc(var(--control-corner-radius, 999) * 1px);
113
+ background: var(--_eb-accent);
114
+ color: var(--_eb-accent-foreground);
99
115
  cursor: pointer;
100
116
  padding: 9px 16px;
101
117
  font: inherit;
@@ -106,28 +122,28 @@ export const errorBoundaryStyles = `
106
122
  }
107
123
 
108
124
  .error-boundary__button:hover {
109
- background: var(--eb-accent-hover, #255dcc);
125
+ background: var(--_eb-accent-hover);
110
126
  }
111
127
 
112
128
  .error-boundary__button--secondary {
113
- border-color: var(--eb-border, #d3dae6);
114
- background: var(--eb-surface, #ffffff);
129
+ border-color: var(--_eb-border);
130
+ background: var(--_eb-surface);
115
131
  color: inherit;
116
132
  }
117
133
 
118
134
  .error-boundary__button--secondary:hover {
119
- background: var(--eb-surface-hover, #eef2f8);
135
+ background: var(--_eb-surface-hover);
120
136
  }
121
137
 
122
138
  .error-boundary__button:focus-visible {
123
- outline: 2px solid var(--eb-focus, #2f6fed);
139
+ outline: 2px solid var(--_eb-focus);
124
140
  outline-offset: 2px;
125
141
  }
126
142
 
127
143
  .error-boundary__manual-copy-help {
128
144
  margin: 2px 0 0;
129
145
  font-size: 13px;
130
- color: var(--eb-text-muted, #5f6f84);
146
+ color: var(--_eb-text-muted);
131
147
  line-height: 1.4;
132
148
  }
133
149
  `;
package/dist/esm/error-boundary/error-boundary.js CHANGED
@@ -108,8 +108,6 @@ class BaseErrorBoundary extends Component {
108
108
  const { referenceId } = this.state;
109
109
  this.setState({ componentStack });
110
110
  recordReport(normalized, componentStack);
111
- // The error comes first so a global log reporter can report it as an exception, with the
112
- // context object attached (see `setupErrorMonitoring` in foundation-utils).
113
111
  const logCaughtError = () => logger.error(`[${scope}] error boundary captured an error`, normalized, {
114
112
  referenceId,
115
113
  scope,
@@ -117,8 +115,6 @@ class BaseErrorBoundary extends Component {
117
115
  tileRegistration,
118
116
  componentStack,
119
117
  });
120
- // With a handler set, the handler reports the error, so logging it as well would send it to
121
- // any global log reporter a second time.
122
118
  if (!onError) {
123
119
  logCaughtError();
124
120
  return;
@@ -127,7 +123,6 @@ class BaseErrorBoundary extends Component {
127
123
  onError({ error: normalized, componentStack, referenceId, scope, title, tileRegistration });
128
124
  }
129
125
  catch (handlerError) {
130
- // A failing reporter must not take down the fallback UI, or lose the original error.
131
126
  logCaughtError();
132
127
  logger.error(`[${scope}] error boundary onError handler threw`, handlerError);
133
128
  }
@@ -213,13 +208,14 @@ const isFoundationBoundary = (boundary) => typeof boundary === 'object' &&
213
208
  * boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare
214
209
  * error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and
215
210
  * {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by
216
- * any other boundary are still logged to `console.error`.
211
+ * any other boundary are still logged to `console.error`, with their component stack.
217
212
  *
218
213
  * @public
219
214
  */
220
215
  export const onCaughtError = (error, errorInfo) => {
216
+ var _b;
221
217
  if (isFoundationBoundary(errorInfo.errorBoundary)) {
222
218
  return;
223
219
  }
224
- console.error(error);
220
+ console.error(error, '\n\nThe above error was caught by an error boundary.', (_b = errorInfo.componentStack) !== null && _b !== void 0 ? _b : '');
225
221
  };
package/dist/foundation-react-utils.api.json CHANGED
@@ -1263,7 +1263,7 @@
1263
1263
  {
1264
1264
  "kind": "Variable",
1265
1265
  "canonicalReference": "@genesislcap/foundation-react-utils!onCaughtError:var",
1266
- "docComment": "/**\n * Root `onCaughtError` for `createRoot`.\n *\n * @remarks\n *\n * By default React 19 logs every error a boundary catches to `console.error`, before the boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by any other boundary are still logged to `console.error`.\n *\n * @public\n */\n",
1266
+ "docComment": "/**\n * Root `onCaughtError` for `createRoot`.\n *\n * @remarks\n *\n * By default React 19 logs every error a boundary catches to `console.error`, before the boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by any other boundary are still logged to `console.error`, with their component stack.\n *\n * @public\n */\n",
1267
1267
  "excerptTokens": [
1268
1268
  {
1269
1269
  "kind": "Content",
package/dist/foundation-react-utils.d.ts CHANGED
@@ -399,7 +399,7 @@ export declare interface GridProReactCellRenderer {
399
399
  * boundary's `componentDidCatch` runs. Console-capturing monitoring tools then report that bare
400
400
  * error first, and can drop or duplicate the boundary's own report. {@link AppErrorBoundary} and
401
401
  * {@link TileErrorBoundary} report or log errors themselves, so this skips them. Errors caught by
402
- * any other boundary are still logged to `console.error`.
402
+ * any other boundary are still logged to `console.error`, with their component stack.
403
403
  *
404
404
  * @public
405
405
  */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-react-utils",
3
3
  "description": "Genesis Foundation React Utils",
4
- "version": "15.46.6-alpha-606571609.0",
4
+ "version": "15.48.0-alpha-830388687.0",
5
5
  "sideEffects": [
6
6
  "./dist/esm/flexlayout/index.js"
7
7
  ],
@@ -56,12 +56,12 @@
56
56
  }
57
57
  },
58
58
  "devDependencies": {
59
- "@genesislcap/foundation-testing": "15.46.6-alpha-606571609.0",
60
- "@genesislcap/genx": "15.46.6-alpha-606571609.0",
61
- "@genesislcap/ts-builder": "15.46.6-alpha-606571609.0",
62
- "@genesislcap/uvu-playwright-builder": "15.46.6-alpha-606571609.0",
63
- "@genesislcap/vite-builder": "15.46.6-alpha-606571609.0",
64
- "@genesislcap/webpack-builder": "15.46.6-alpha-606571609.0",
59
+ "@genesislcap/foundation-testing": "15.48.0-alpha-830388687.0",
60
+ "@genesislcap/genx": "15.48.0-alpha-830388687.0",
61
+ "@genesislcap/ts-builder": "15.48.0-alpha-830388687.0",
62
+ "@genesislcap/uvu-playwright-builder": "15.48.0-alpha-830388687.0",
63
+ "@genesislcap/vite-builder": "15.48.0-alpha-830388687.0",
64
+ "@genesislcap/webpack-builder": "15.48.0-alpha-830388687.0",
65
65
  "react-router-dom": "^7.1.3"
66
66
  },
67
67
  "peerDependencies": {
@@ -75,11 +75,11 @@
75
75
  }
76
76
  },
77
77
  "dependencies": {
78
- "@genesislcap/foundation-forms": "15.46.6-alpha-606571609.0",
79
- "@genesislcap/foundation-layout": "15.46.6-alpha-606571609.0",
80
- "@genesislcap/foundation-logger": "15.46.6-alpha-606571609.0",
81
- "@genesislcap/rapid-design-system": "15.46.6-alpha-606571609.0",
82
- "@genesislcap/web-core": "15.46.6-alpha-606571609.0",
78
+ "@genesislcap/foundation-forms": "15.48.0-alpha-830388687.0",
79
+ "@genesislcap/foundation-layout": "15.48.0-alpha-830388687.0",
80
+ "@genesislcap/foundation-logger": "15.48.0-alpha-830388687.0",
81
+ "@genesislcap/rapid-design-system": "15.48.0-alpha-830388687.0",
82
+ "@genesislcap/web-core": "15.48.0-alpha-830388687.0",
83
83
  "@jsonforms/core": "^3.2.1",
84
84
  "@r2wc/core": "1.3.1",
85
85
  "@r2wc/react-to-web-component": "^2.0.2",