@genesislcap/foundation-react-utils 15.50.3 → 15.51.0

package/README.md

@@ -47,6 +47,61 @@ resolving a second copy of the library, which breaks the `instanceof` checks `fl
 relies on internally; the entry point logs a warning when the version it loads differs from the one
 the theme was generated against.
 
+## Error boundaries
+
+`AppErrorBoundary` wraps the whole app, and `TileErrorBoundary` (or the `withTileErrorBoundary`
+HOC) wraps a single tile, so a crash replaces only that tile. Both render a fallback with a
+reference ID, copyable diagnostics and a Retry button that remounts the children.
+
+With `setupErrorMonitoring` from `@genesislcap/foundation-utils`, caught errors are reported with
+their reference ID, scope, title, tile registration and component stack, and nothing else is
+needed:
+
+```tsx
+import { AppErrorBoundary, onCaughtError } from '@genesislcap/foundation-react-utils';
+
+createRoot(el, { onCaughtError }).render(
+  <AppErrorBoundary>
+    <App />
+  </AppErrorBoundary>,
+);
+```
+
+```tsx
+import { TileErrorBoundary, withTileErrorBoundary } from '@genesislcap/foundation-react-utils';
+
+<TileErrorBoundary title="Trade Blotter" tileRegistration="tradeBlotter">
+  <TradeBlotter />
+</TileErrorBoundary>;
+
+export const TradeBlotterTile = withTileErrorBoundary(TradeBlotter, 'Trade Blotter', 'tradeBlotter');
+```
+
+To handle caught errors yourself, pass `onError`. It receives an `ErrorBoundaryReport` (`error`,
+`componentStack`, `referenceId`, `scope`, `title`, `tileRegistration`). `withTileErrorBoundary`
+takes it as a fourth argument.
+
+Pass `onCaughtError` to `createRoot`. By default React 19 logs every error a boundary catches to
+`console.error` before the boundary runs, so a console-capturing monitoring tool reports the bare
+error first and can drop or duplicate the boundary's own report. `onCaughtError` skips that log
+for these boundaries, and still logs errors caught by any other boundary, with their component
+stack.
+
+Without `onError`, a boundary logs each caught error through a foundation logger named
+`ERROR_BOUNDARY_LOGGER_NAME`, with a message that names its scope, title, tile registration and
+reference ID and gives its component stack. A global log reporter (`addGlobalLogReporter` from
+`@genesislcap/foundation-logger`) receives it, which is how `setupErrorMonitoring` reports it. With
+`onError` set, the boundary doesn't log the error, so it isn't reported twice. If `onError` throws,
+the boundary logs the original error and the handler's error, so neither is lost.
+
+The fallback takes its colours, font and corner radius from the design system's tokens
+(`--neutral-layer-1`, `--neutral-foreground-rest`, `--accent-fill-rest`, `--error-color`,
+`--body-font`, `--control-corner-radius` and others), so it follows the app's theme, including light
+and dark mode. To override them, set `--eb-*` custom properties (`--eb-bg`, `--eb-surface`,
+`--eb-text`, `--eb-text-muted`, `--eb-border`, `--eb-accent`, `--eb-error`, `--eb-font`, and others)
+on an ancestor. Without a design system it uses its own light palette. The last 20 reports are also kept
+on `window.__GENESIS_ERROR_BOUNDARY_REPORTS__` for dev tooling such as the Genesis Create preview.
+
 ## License
 
 Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

package/dist/custom-elements.json

@@ -254,6 +254,14 @@
             "module": "./create-grid-pro-cell-renderer"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./error-boundary"
+          }
+        },
         {
           "kind": "js",
           "name": "RendererControlProps",
@@ -264,6 +272,115 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/error-boundary/error-boundary-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "errorBoundaryStyles",
+          "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`",
+          "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."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "errorBoundaryStyles",
+          "declaration": {
+            "name": "errorBoundaryStyles",
+            "module": "src/error-boundary/error-boundary-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/error-boundary/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AppErrorBoundary",
+          "declaration": {
+            "name": "AppErrorBoundary",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ERROR_BOUNDARY_LOGGER_NAME",
+          "declaration": {
+            "name": "ERROR_BOUNDARY_LOGGER_NAME",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "onCaughtError",
+          "declaration": {
+            "name": "onCaughtError",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TileErrorBoundary",
+          "declaration": {
+            "name": "TileErrorBoundary",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "withTileErrorBoundary",
+          "declaration": {
+            "name": "withTileErrorBoundary",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AppErrorBoundaryProps",
+          "declaration": {
+            "name": "AppErrorBoundaryProps",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ErrorBoundaryErrorHandler",
+          "declaration": {
+            "name": "ErrorBoundaryErrorHandler",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ErrorBoundaryReport",
+          "declaration": {
+            "name": "ErrorBoundaryReport",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ErrorBoundaryScope",
+          "declaration": {
+            "name": "ErrorBoundaryScope",
+            "module": "./error-boundary"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TileErrorBoundaryProps",
+          "declaration": {
+            "name": "TileErrorBoundaryProps",
+            "module": "./error-boundary"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/flexlayout/index.ts",

package/dist/dts/error-boundary/error-boundary-styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Fallback UI styles. Each colour and font resolves from an `--eb-*` override set on any ancestor,
+ * then the matching design token, then a built-in value for apps without a design system.
+ */
+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";
+//# sourceMappingURL=error-boundary-styles.d.ts.map

package/dist/dts/error-boundary/error-boundary-styles.d.ts.map

@@ -0,0 +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

@@ -0,0 +1,105 @@
+import type { ComponentType, FC, ReactNode } from 'react';
+import type { RootOptions } from 'react-dom/client';
+/**
+ * Name of the logger the error boundaries log through. They log a caught error, with a message
+ * naming its scope, title, tile registration and reference ID and giving its component stack, only
+ * when no `onError` handler is set or when the handler throws. `setupErrorMonitoring` from foundation-utils reports
+ * these logs, so apps using it don't need an `onError`.
+ * @public
+ */
+export declare const ERROR_BOUNDARY_LOGGER_NAME = "foundation-react-utils:error-boundary";
+/**
+ * Where a boundary sits: around the whole app, or around a single tile.
+ * @public
+ */
+export type ErrorBoundaryScope = 'application' | 'tile';
+/**
+ * What an error boundary passes to `onError` when it catches an error.
+ * @public
+ */
+export type ErrorBoundaryReport = {
+    error: Error;
+    componentStack: string;
+    /** Shown in the fallback UI, so support can match a user's screen to a reported event. */
+    referenceId: string;
+    scope: ErrorBoundaryScope;
+    title: string;
+    tileRegistration?: string;
+};
+/**
+ * Callback that receives every error a boundary catches, for example to send it to an
+ * error-monitoring service.
+ * @public
+ */
+export type ErrorBoundaryErrorHandler = (report: ErrorBoundaryReport) => void;
+/**
+ * Props for {@link AppErrorBoundary}.
+ * @public
+ */
+export type AppErrorBoundaryProps = {
+    onError?: ErrorBoundaryErrorHandler;
+    children: ReactNode;
+};
+/**
+ * Props for {@link TileErrorBoundary}.
+ * @public
+ */
+export type TileErrorBoundaryProps = {
+    /** Human-readable tile name shown in the fallback UI. */
+    title: string;
+    /** The tile's key in the layout. */
+    tileRegistration: string;
+    onError?: ErrorBoundaryErrorHandler;
+    children: ReactNode;
+};
+/**
+ * Top-level error boundary. Wrap the whole app in one instance; use {@link TileErrorBoundary}
+ * inside it.
+ *
+ * @remarks
+ * Renders a fallback with a reference ID, copyable diagnostics and a Retry button that remounts
+ * the children. Each caught error is passed to `onError`. Without one, it's logged through the
+ * {@link ERROR_BOUNDARY_LOGGER_NAME} logger instead, which a global log reporter receives. Pair with {@link onCaughtError} on the root so React doesn't log the
+ * error a second time.
+ *
+ * @example
+ * ```tsx
+ * createRoot(el, { onCaughtError }).render(
+ *   <AppErrorBoundary onError={({ error, ...extra }) => Sentry.captureException(error, { extra })}>
+ *     <App />
+ *   </AppErrorBoundary>,
+ * );
+ * ```
+ * @public
+ */
+export declare const AppErrorBoundary: FC<AppErrorBoundaryProps>;
+/**
+ * Error boundary for a single tile, so a crash replaces only that tile with the fallback UI and
+ * the rest of the app keeps running.
+ * @public
+ */
+export declare const TileErrorBoundary: FC<TileErrorBoundaryProps>;
+/**
+ * Wraps a component in a {@link TileErrorBoundary}.
+ *
+ * @param WrappedComponent - The tile component.
+ * @param title - Human-readable tile name shown in the fallback UI.
+ * @param tileRegistration - The tile's key in the layout.
+ * @param onError - Optional callback for caught errors.
+ * @public
+ */
+export declare const withTileErrorBoundary: <P extends object>(WrappedComponent: ComponentType<P>, title: string, tileRegistration: string, onError?: ErrorBoundaryErrorHandler) => FC<P>;
+/**
+ * Root `onCaughtError` for `createRoot`.
+ *
+ * @remarks
+ * 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.
+ *
+ * @public
+ */
+export declare const onCaughtError: NonNullable<RootOptions['onCaughtError']>;
+//# sourceMappingURL=error-boundary.d.ts.map

package/dist/dts/error-boundary/error-boundary.d.ts.map

@@ -0,0 +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;AAkPF;;;;;;;;;;;;;;;;;;;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/dts/error-boundary/index.d.ts

@@ -0,0 +1,3 @@
+export { AppErrorBoundary, ERROR_BOUNDARY_LOGGER_NAME, onCaughtError, TileErrorBoundary, withTileErrorBoundary, } from './error-boundary';
+export type { AppErrorBoundaryProps, ErrorBoundaryErrorHandler, ErrorBoundaryReport, ErrorBoundaryScope, TileErrorBoundaryProps, } from './error-boundary';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/error-boundary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/error-boundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,0BAA0B,EAC1B,aAAa,EACb,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EACV,qBAAqB,EACrB,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/dts/index.d.ts

@@ -12,6 +12,8 @@
  *   grid's `gridComponents` property).
  * - `reactFactory` / `reactFactoryWithProvider` — mount React component trees into
  *   Genesis Foundation layout regions.
+ * - `AppErrorBoundary` / `TileErrorBoundary` / `withTileErrorBoundary` — error boundaries with a
+ *   fallback UI and an `onError` reporting hook; pair with `onCaughtError` on the React root.
  *
  * Subpath entry points:
  * - `./flexlayout` — `flexlayout-react` at the version this package pins, re-exported with the
@@ -25,5 +27,6 @@ export { createGridProCellRenderer } from './create-grid-pro-cell-renderer';
 export { createGridProCellPortals } from './create-grid-pro-cell-portals';
 export type { GridProCellPortals } from './create-grid-pro-cell-portals';
 export type { GridProCellRendererOptions, GridProCellRendererProps, GridProReactCellRenderer, } from './create-grid-pro-cell-renderer';
+export * from './error-boundary';
 export type { RendererControlProps } from '@genesislcap/foundation-forms';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/error-boundary/error-boundary-styles.js

@@ -0,0 +1,149 @@
+/**
+ * Fallback UI styles. Each colour and font resolves from an `--eb-*` override set on any ancestor,
+ * then the matching design token, then a built-in value for apps without a design system.
+ */
+export const errorBoundaryStyles = `
+.error-boundary {
+  --_eb-bg: var(--eb-bg, var(--neutral-layer-1, #f6f8fb));
+  --_eb-surface: var(--eb-surface, var(--neutral-layer-2, #ffffff));
+  --_eb-surface-hover: var(--eb-surface-hover, var(--neutral-fill-stealth-hover, #eef2f8));
+  --_eb-text: var(--eb-text, var(--neutral-foreground-rest, #18212f));
+  --_eb-text-muted: var(--eb-text-muted, var(--neutral-foreground-hint, #5f6f84));
+  --_eb-border: var(--eb-border, var(--neutral-stroke-rest, #d3dae6));
+  --_eb-accent: var(--eb-accent, var(--accent-fill-rest, #2f6fed));
+  --_eb-accent-hover: var(--eb-accent-hover, var(--accent-fill-hover, #255dcc));
+  --_eb-accent-foreground: var(--eb-accent-foreground, var(--foreground-on-accent-rest, #ffffff));
+  --_eb-error: var(--eb-error, var(--error-color, #c53d3d));
+  --_eb-error-bg: var(--eb-error-bg, color-mix(in srgb, var(--_eb-error) 8%, var(--_eb-surface)));
+  --_eb-error-text: var(--eb-error-text, color-mix(in srgb, var(--_eb-error) 50%, var(--_eb-text)));
+  --_eb-focus: var(--eb-focus, var(--focus-stroke-outer, #2f6fed));
+  --_eb-font: var(--eb-font, var(--body-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif));
+  --_eb-mono-font: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background: var(--_eb-bg);
+  color: var(--_eb-text);
+  font-family: var(--_eb-font);
+}
+
+.error-boundary__top,
+.error-boundary__title,
+.error-boundary__subtitle,
+.error-boundary__details,
+.error-boundary__actions,
+.error-boundary__manual-copy-help {
+  width: 100%;
+}
+
+.error-boundary__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.error-boundary__status {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--_eb-error);
+  border-radius: 999px;
+  padding: 5px 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--_eb-error-text);
+  background: var(--_eb-error-bg);
+}
+
+.error-boundary__reference {
+  font-family: var(--_eb-mono-font);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: var(--_eb-text-muted);
+  text-transform: uppercase;
+}
+
+.error-boundary__title {
+  margin: 0;
+  font-size: clamp(22px, 3vw, 30px);
+  line-height: 1.15;
+  font-weight: 700;
+  text-wrap: balance;
+}
+
+.error-boundary__subtitle {
+  margin: 0;
+  max-width: 80ch;
+  line-height: 1.45;
+}
+
+.error-boundary__details {
+  box-sizing: border-box;
+  min-height: 190px;
+  max-height: 360px;
+  padding: 12px;
+  border: 1px solid var(--_eb-border);
+  border-radius: calc(var(--control-corner-radius, 10) * 1px);
+  background: var(--_eb-surface);
+  color: inherit;
+  font-family: var(--_eb-mono-font);
+  font-size: 12px;
+  line-height: 1.5;
+  resize: vertical;
+}
+
+.error-boundary__actions {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.error-boundary__button {
+  border: 1px solid var(--_eb-accent);
+  border-radius: calc(var(--control-corner-radius, 999) * 1px);
+  background: var(--_eb-accent);
+  color: var(--_eb-accent-foreground);
+  cursor: pointer;
+  padding: 9px 16px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.error-boundary__button:hover {
+  background: var(--_eb-accent-hover);
+}
+
+.error-boundary__button--secondary {
+  border-color: var(--_eb-border);
+  background: var(--_eb-surface);
+  color: inherit;
+}
+
+.error-boundary__button--secondary:hover {
+  background: var(--_eb-surface-hover);
+}
+
+.error-boundary__button:focus-visible {
+  outline: 2px solid var(--_eb-focus);
+  outline-offset: 2px;
+}
+
+.error-boundary__manual-copy-help {
+  margin: 2px 0 0;
+  font-size: 13px;
+  color: var(--_eb-text-muted);
+  line-height: 1.4;
+}
+`;