@genesislcap/foundation-react-utils 15.46.5 → 15.46.6-alpha-6d1bd2f25.0

package/README.md

@@ -47,6 +47,52 @@ 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.
+
+Every caught error is passed to the optional `onError` callback as an `ErrorBoundaryReport`
+(`error`, `componentStack`, `referenceId`, `scope`, `title`, `tileRegistration`). Use it to send
+errors to a monitoring service; this package takes no dependency on one.
+
+```tsx
+import { AppErrorBoundary, onCaughtError } from '@genesislcap/foundation-react-utils';
+
+createRoot(el, { onCaughtError }).render(
+  <AppErrorBoundary onError={({ error, ...extra }) => Sentry.captureException(error, { extra })}>
+    <App />
+  </AppErrorBoundary>,
+);
+```
+
+```tsx
+import { TileErrorBoundary, withTileErrorBoundary } from '@genesislcap/foundation-react-utils';
+
+<TileErrorBoundary title="Trade Blotter" tileRegistration="tradeBlotter" onError={report}>
+  <TradeBlotter />
+</TileErrorBoundary>;
+
+export const TradeBlotterTile = withTileErrorBoundary(TradeBlotter, 'Trade Blotter', 'tradeBlotter', report);
+```
+
+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.
+
+Without `onError`, a boundary logs each caught error through a foundation logger named
+`ERROR_BOUNDARY_LOGGER_NAME`, which a global log reporter (`addGlobalLogReporter` from
+`@genesislcap/foundation-logger`) receives. With `onError` set, the boundary doesn't log the error,
+so an app that reports through both `onError` and a global reporter gets each error once. If
+`onError` throws, the boundary logs the original error and the handler's error, so neither is lost.
+
+The fallback reads its colours and fonts from `--eb-*` CSS custom properties (`--eb-bg`,
+`--eb-surface`, `--eb-text`, `--eb-text-muted`, `--eb-border`, `--eb-accent`, `--eb-error`,
+`--eb-font`, and others), so set them on an ancestor to theme it. 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  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`",
+          "description": "Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the\nfallback by setting them on any ancestor."
+        }
+      ],
+      "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. Colours and fonts read `--eb-*` custom properties, so an app can theme the
+ * fallback by setting them on any ancestor.
+ */
+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";
+//# 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,o4FAgI/B,CAAC"}

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

@@ -0,0 +1,103 @@
+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 only when no
+ * `onError` handler is set, or when the handler throws.
+ * @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`.
+ *
+ * @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;;;;GAIG;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;AAsPF;;;;;;;;;;;;;;;;;;;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"}

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,133 @@
+/**
+ * Fallback UI styles. Colours and fonts read `--eb-*` custom properties, so an app can theme the
+ * fallback by setting them on any ancestor.
+ */
+export const errorBoundaryStyles = `
+.error-boundary {
+  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, #f6f8fb);
+  color: var(--eb-text, #18212f);
+  font-family: var(--eb-font, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
+}
+
+.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, #c53d3d);
+  border-radius: 999px;
+  padding: 5px 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.13em;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--eb-error, #c53d3d);
+  background: var(--eb-error-bg, #fff4f4);
+}
+
+.error-boundary__reference {
+  font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  color: var(--eb-text-muted, #5f6f84);
+  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, #d3dae6);
+  border-radius: 10px;
+  background: var(--eb-surface, #ffffff);
+  color: inherit;
+  font-family: var(--eb-mono-font, 'Menlo', 'Consolas', 'Liberation Mono', monospace);
+  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, #2f6fed);
+  border-radius: 999px;
+  background: var(--eb-accent, #2f6fed);
+  color: var(--eb-accent-foreground, #ffffff);
+  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, #255dcc);
+}
+
+.error-boundary__button--secondary {
+  border-color: var(--eb-border, #d3dae6);
+  background: var(--eb-surface, #ffffff);
+  color: inherit;
+}
+
+.error-boundary__button--secondary:hover {
+  background: var(--eb-surface-hover, #eef2f8);
+}
+
+.error-boundary__button:focus-visible {
+  outline: 2px solid var(--eb-focus, #2f6fed);
+  outline-offset: 2px;
+}
+
+.error-boundary__manual-copy-help {
+  margin: 2px 0 0;
+  font-size: 13px;
+  color: var(--eb-text-muted, #5f6f84);
+  line-height: 1.4;
+}
+`;