@ossido-labs/ossido-ui 0.1.0

package/dist/esm/components/DevErrorOverlay.js

@@ -0,0 +1,53 @@
+import { BaseStyles } from "./BaseStyles.js";
+import { DevErrorContent } from "./DevErrorContent.js";
+import { DEV_ERROR_STYLES } from "./devErrorStyles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DevErrorOverlay.tsx
+/**
+* Standalone single-error overlay window, presented as a floating window over a
+* dimmed backdrop. The live dev app uses {@link DevErrorOverlayHost} instead —
+* it is store-driven and browses every kind of dev error with a pager — but
+* this renders a single error directly, which is handy for stories and any
+* caller that already has one `Error` in hand.
+*
+* Never used in production: {@link RouteMatch} selects the detail-free
+* production fallback, so source and internals are not leaked to end users.
+*/
+function DevErrorOverlay({ error, reset }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ossido-err-backdrop",
+		role: "alertdialog",
+		"aria-modal": "true",
+		children: [
+			/* @__PURE__ */ jsx(BaseStyles, {}),
+			/* @__PURE__ */ jsx("style", { children: DEV_ERROR_STYLES }),
+			/* @__PURE__ */ jsx("div", {
+				className: "ossido-err-window",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "ossido-err-body",
+					children: [
+						/* @__PURE__ */ jsx(DevErrorContent, { error }),
+						/* @__PURE__ */ jsx("div", {
+							className: "ossido-err-actions",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ossido-err-btn",
+								onClick: reset,
+								children: "Try again"
+							})
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "ossido-err-hint",
+							children: "This overlay is only shown in development."
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { DevErrorOverlay };
+//# sourceMappingURL=DevErrorOverlay.js.map

package/dist/esm/components/DevErrorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorOverlay.js","names":[],"sources":["../../../src/components/DevErrorOverlay.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport type { OssidoErrorProps } from '../types';\n\nimport { BaseStyles } from './BaseStyles';\nimport { DevErrorContent } from './DevErrorContent';\nimport { DEV_ERROR_STYLES } from './devErrorStyles';\n\n/**\n * Standalone single-error overlay window, presented as a floating window over a\n * dimmed backdrop. The live dev app uses {@link DevErrorOverlayHost} instead —\n * it is store-driven and browses every kind of dev error with a pager — but\n * this renders a single error directly, which is handy for stories and any\n * caller that already has one `Error` in hand.\n *\n * Never used in production: {@link RouteMatch} selects the detail-free\n * production fallback, so source and internals are not leaked to end users.\n */\nexport function DevErrorOverlay({\n  error,\n  reset,\n}: OssidoErrorProps): JSX.Element {\n  return (\n    <div className=\"ossido-err-backdrop\" role=\"alertdialog\" aria-modal=\"true\">\n      <BaseStyles />\n      <style>{DEV_ERROR_STYLES}</style>\n      <div className=\"ossido-err-window\">\n        <div className=\"ossido-err-body\">\n          <DevErrorContent error={error} />\n          <div className=\"ossido-err-actions\">\n            <button type=\"button\" className=\"ossido-err-btn\" onClick={reset}>\n              Try again\n            </button>\n          </div>\n          <p className=\"ossido-err-hint\">\n            This overlay is only shown in development.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,SAAgB,gBAAgB,EAC9B,OACA,SACgC;CAChC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAsB,MAAK;EAAc,cAAW;YAAnE;GACE,oBAAC,YAAD,CAAa;GACb,oBAAC,SAAD,YAAQ,iBAAwB;GAChC,oBAAC,OAAD;IAAK,WAAU;cACb,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,iBAAD,EAAwB,MAAQ;MAChC,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,UAAD;QAAQ,MAAK;QAAS,WAAU;QAAiB,SAAS;kBAAO;OAEzD;MACL;MACL,oBAAC,KAAD;OAAG,WAAU;iBAAkB;MAE5B;KACA;;GACF;EACF;;AAET"}

package/dist/esm/components/DevErrorOverlayHost.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function DevErrorOverlayHost(): JSX.Element | null;

package/dist/esm/components/DevErrorOverlayHost.js

@@ -0,0 +1,295 @@
+import { BaseStyles } from "./BaseStyles.js";
+import { DevErrorContent } from "./DevErrorContent.js";
+import { DEV_ERROR_STYLES } from "./devErrorStyles.js";
+import { DevBuildErrorContent } from "./DevBuildErrorContent.js";
+import { DEV_OVERLAY_CORNERS, devErrorStore } from "./devErrorStore.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+
+//#region src/components/DevErrorOverlayHost.tsx
+/**
+* Development-only host for the unified error overlay and its persistent dev
+* indicator. Mounted once at the router root (dev only), it subscribes to
+* {@link devErrorStore} and renders:
+*
+* - a persistent corner **indicator** (always visible in dev) whose menu offers
+*   "View errors", a corner picker (persisted), and "Hide until reload", and
+* - the **error overlay** itself — a browsable window for every kind of dev
+*   error (React render errors, SSR/Rust panics, uncaught errors, unhandled
+*   rejections, Vite build errors), auto-opened when a new error arrives.
+*
+* Never rendered in production: {@link RouteMatch} only mounts it in dev, so no
+* source or internals leak to end users.
+*/
+const KIND_LABEL = {
+	runtime: "Runtime error",
+	uncaught: "Uncaught error",
+	unhandledrejection: "Unhandled rejection",
+	build: "Build error"
+};
+const CORNER_LABEL = {
+	"top-left": "Top left",
+	"top-right": "Top right",
+	"bottom-left": "Bottom left",
+	"bottom-right": "Bottom right"
+};
+/**
+* React dispatches these to `window` when server rendering fails and it recovers
+* by client-rendering (or when hydration falls back). They carry no stack and
+* aren't actionable — the underlying error is already reported by the route
+* boundary — so they are dropped to avoid a duplicate, contentless entry.
+*/
+const IGNORED_UNCAUGHT_MESSAGES = [
+	"could not finish this Suspense boundary",
+	"Switched to client rendering",
+	"error during server rendering",
+	"hydrating but received"
+];
+function isIgnorableUncaught(error) {
+	return IGNORED_UNCAUGHT_MESSAGES.some((needle) => error.message.includes(needle));
+}
+/** Normalize an unhandled rejection reason into an `Error`. */
+function toError(reason) {
+	if (reason instanceof Error) return reason;
+	const error = new Error(typeof reason === "string" ? reason : JSON.stringify(reason));
+	error.name = "UnhandledRejection";
+	return error;
+}
+function Styles() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BaseStyles, {}), /* @__PURE__ */ jsx("style", { children: DEV_ERROR_STYLES })] });
+}
+function EntryBody({ entry }) {
+	if (entry.kind === "build" && entry.build) return /* @__PURE__ */ jsx(DevBuildErrorContent, { build: entry.build });
+	if (entry.error) return /* @__PURE__ */ jsx(DevErrorContent, { error: entry.error }, entry.id);
+	return null;
+}
+function ChevronLeftIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", { d: "M15 18l-6-6 6-6" })
+	});
+}
+function ChevronRightIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", { d: "M9 6l6 6-6 6" })
+	});
+}
+/** The same lightning bolt Ossido prints in the console. */
+function BoltIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", { d: "M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z" })
+	});
+}
+function DevErrorOverlay({ count }) {
+	const state = devErrorStore.getSnapshot();
+	const activeIndex = Math.min(state.activeIndex, count - 1);
+	const entry = state.entries[activeIndex];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ossido-err-backdrop",
+		role: "alertdialog",
+		"aria-modal": "true",
+		onClick: () => devErrorStore.closeOverlay(),
+		children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsxs("div", {
+			className: "ossido-err-window",
+			onClick: (event) => event.stopPropagation(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "ossido-err-pager",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ossido-err-nav",
+						"aria-label": "Previous error",
+						disabled: count < 2,
+						onClick: () => devErrorStore.prev(),
+						children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ossido-err-nav",
+						"aria-label": "Next error",
+						disabled: count < 2,
+						onClick: () => devErrorStore.next(),
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "ossido-err-pager-count",
+						children: [
+							activeIndex + 1,
+							" of ",
+							count
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "ossido-err-pager-kind",
+						children: KIND_LABEL[entry.kind]
+					}),
+					entry.occurrences > 1 && /* @__PURE__ */ jsxs("span", {
+						className: "ossido-err-pager-occurrences",
+						title: `Reported ${entry.occurrences} times`,
+						children: ["×", entry.occurrences]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "ossido-err-pager-spacer" }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ossido-err-dismiss",
+						"aria-label": "Dismiss",
+						onClick: () => devErrorStore.closeOverlay(),
+						children: "✕"
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "ossido-err-body",
+				children: [
+					/* @__PURE__ */ jsx(EntryBody, { entry }),
+					entry.reset && /* @__PURE__ */ jsx("div", {
+						className: "ossido-err-actions",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "ossido-err-btn",
+							onClick: entry.reset,
+							children: "Try again"
+						})
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: "ossido-err-hint",
+						children: [
+							"This overlay is only shown in development. Press ",
+							/* @__PURE__ */ jsx("kbd", { children: "Esc" }),
+							" or click outside to dismiss."
+						]
+					})
+				]
+			})]
+		})]
+	});
+}
+function DevIndicator({ count, menuOpen, position }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [menuOpen && /* @__PURE__ */ jsx("div", {
+		className: "ossido-err-menu-scrim",
+		onClick: () => devErrorStore.closeMenu()
+	}), /* @__PURE__ */ jsxs("div", {
+		className: `ossido-err-indicator ossido-err-indicator--${position}`,
+		children: [menuOpen && /* @__PURE__ */ jsxs("div", {
+			className: `ossido-err-menu ossido-err-menu--${position}`,
+			role: "menu",
+			children: [
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitem",
+					className: "ossido-err-menu-item",
+					disabled: count === 0,
+					onClick: () => devErrorStore.openOverlay(),
+					children: [/* @__PURE__ */ jsx("span", { children: "View errors" }), count > 0 ? /* @__PURE__ */ jsx("span", {
+						className: "ossido-err-menu-count",
+						children: count
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "ossido-err-menu-muted",
+						children: "None"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "ossido-err-menu-sep" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ossido-err-menu-section",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "ossido-err-menu-label",
+						children: "Position"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "ossido-err-menu-corners",
+						children: DEV_OVERLAY_CORNERS.map((corner) => /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: corner === position ? "ossido-err-corner ossido-err-corner--active" : "ossido-err-corner",
+							"aria-label": CORNER_LABEL[corner],
+							"aria-pressed": corner === position,
+							onClick: () => devErrorStore.setPosition(corner),
+							children: /* @__PURE__ */ jsx("span", { className: `ossido-err-corner-dot ossido-err-corner-dot--${corner}` })
+						}, corner))
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "ossido-err-menu-sep" }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitem",
+					className: "ossido-err-menu-item",
+					onClick: () => devErrorStore.hideBadge(),
+					children: /* @__PURE__ */ jsx("span", { children: "Hide until reload" })
+				})
+			]
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "ossido-err-fab",
+			"aria-label": "Ossido dev tools",
+			"aria-haspopup": "menu",
+			"aria-expanded": menuOpen,
+			onClick: () => devErrorStore.toggleMenu(),
+			children: [/* @__PURE__ */ jsx(BoltIcon, {}), count > 0 && /* @__PURE__ */ jsx("span", {
+				className: "ossido-err-fab-count",
+				children: count
+			})]
+		})]
+	})] });
+}
+function DevErrorOverlayHost() {
+	const state = useSyncExternalStore(devErrorStore.subscribe, devErrorStore.getSnapshot, devErrorStore.getServerSnapshot);
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		const onError = (event) => {
+			const error = event.error instanceof Error ? event.error : new Error(event.message);
+			if (isIgnorableUncaught(error)) return;
+			devErrorStore.addJsError("uncaught", error);
+		};
+		const onRejection = (event) => {
+			devErrorStore.addJsError("unhandledrejection", toError(event.reason));
+		};
+		window.addEventListener("error", onError);
+		window.addEventListener("unhandledrejection", onRejection);
+		return () => {
+			window.removeEventListener("error", onError);
+			window.removeEventListener("unhandledrejection", onRejection);
+		};
+	}, []);
+	useEffect(() => {
+		if (!state.overlayOpen && !state.menuOpen) return;
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape") return;
+			if (state.overlayOpen) devErrorStore.closeOverlay();
+			else devErrorStore.closeMenu();
+		};
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}, [state.overlayOpen, state.menuOpen]);
+	if (typeof document === "undefined" || !mounted) return null;
+	const count = state.entries.length;
+	if (state.overlayOpen && count > 0) return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(DevErrorOverlay, { count })] }), document.body);
+	if (state.badgeHidden && count === 0) return null;
+	return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(DevIndicator, {
+		count,
+		menuOpen: state.menuOpen,
+		position: state.position
+	})] }), document.body);
+}
+
+//#endregion
+export { DevErrorOverlayHost };
+//# sourceMappingURL=DevErrorOverlayHost.js.map

package/dist/esm/components/DevErrorOverlayHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorOverlayHost.js","names":[],"sources":["../../../src/components/DevErrorOverlayHost.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from 'react';\nimport type { JSX } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { BaseStyles } from './BaseStyles';\nimport { DevErrorContent } from './DevErrorContent';\nimport { DevBuildErrorContent } from './DevBuildErrorContent';\nimport { DEV_ERROR_STYLES } from './devErrorStyles';\nimport type {\n  DevErrorEntry,\n  DevErrorKind,\n  DevOverlayCorner,\n} from './devErrorStore';\nimport { DEV_OVERLAY_CORNERS, devErrorStore } from './devErrorStore';\n\n/**\n * Development-only host for the unified error overlay and its persistent dev\n * indicator. Mounted once at the router root (dev only), it subscribes to\n * {@link devErrorStore} and renders:\n *\n * - a persistent corner **indicator** (always visible in dev) whose menu offers\n *   \"View errors\", a corner picker (persisted), and \"Hide until reload\", and\n * - the **error overlay** itself — a browsable window for every kind of dev\n *   error (React render errors, SSR/Rust panics, uncaught errors, unhandled\n *   rejections, Vite build errors), auto-opened when a new error arrives.\n *\n * Never rendered in production: {@link RouteMatch} only mounts it in dev, so no\n * source or internals leak to end users.\n */\n\nconst KIND_LABEL: Record<DevErrorKind, string> = {\n  runtime: 'Runtime error',\n  uncaught: 'Uncaught error',\n  unhandledrejection: 'Unhandled rejection',\n  build: 'Build error',\n};\n\nconst CORNER_LABEL: Record<DevOverlayCorner, string> = {\n  'top-left': 'Top left',\n  'top-right': 'Top right',\n  'bottom-left': 'Bottom left',\n  'bottom-right': 'Bottom right',\n};\n\n/**\n * React dispatches these to `window` when server rendering fails and it recovers\n * by client-rendering (or when hydration falls back). They carry no stack and\n * aren't actionable — the underlying error is already reported by the route\n * boundary — so they are dropped to avoid a duplicate, contentless entry.\n */\nconst IGNORED_UNCAUGHT_MESSAGES = [\n  'could not finish this Suspense boundary',\n  'Switched to client rendering',\n  'error during server rendering',\n  'hydrating but received',\n];\n\nfunction isIgnorableUncaught(error: Error): boolean {\n  return IGNORED_UNCAUGHT_MESSAGES.some((needle) =>\n    error.message.includes(needle),\n  );\n}\n\n/** Normalize an unhandled rejection reason into an `Error`. */\nfunction toError(reason: unknown): Error {\n  if (reason instanceof Error) return reason;\n  const error = new Error(\n    typeof reason === 'string' ? reason : JSON.stringify(reason),\n  );\n  error.name = 'UnhandledRejection';\n  return error;\n}\n\nfunction Styles(): JSX.Element {\n  return (\n    <>\n      <BaseStyles />\n      <style>{DEV_ERROR_STYLES}</style>\n    </>\n  );\n}\n\nfunction EntryBody({ entry }: { entry: DevErrorEntry }): JSX.Element | null {\n  if (entry.kind === 'build' && entry.build) {\n    return <DevBuildErrorContent build={entry.build} />;\n  }\n  if (entry.error) {\n    // Keyed by entry id so paging to a different error remounts with fresh\n    // resolution state (but a re-render of the same entry does not).\n    return <DevErrorContent key={entry.id} error={entry.error} />;\n  }\n  return null;\n}\n\nfunction ChevronLeftIcon(): JSX.Element {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"M15 18l-6-6 6-6\" />\n    </svg>\n  );\n}\n\nfunction ChevronRightIcon(): JSX.Element {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"M9 6l6 6-6 6\" />\n    </svg>\n  );\n}\n\n/** The same lightning bolt Ossido prints in the console. */\nfunction BoltIcon(): JSX.Element {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden>\n      <path d=\"M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z\" />\n    </svg>\n  );\n}\n\nfunction DevErrorOverlay({ count }: { count: number }): JSX.Element {\n  const state = devErrorStore.getSnapshot();\n  const activeIndex = Math.min(state.activeIndex, count - 1);\n  const entry = state.entries[activeIndex] as DevErrorEntry;\n\n  return (\n    <div\n      className=\"ossido-err-backdrop\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      onClick={(): void => devErrorStore.closeOverlay()}\n    >\n      <Styles />\n      {/* Clicks inside the window must not fall through to the backdrop. */}\n      <div\n        className=\"ossido-err-window\"\n        onClick={(event): void => event.stopPropagation()}\n      >\n        <div className=\"ossido-err-pager\">\n          <button\n            type=\"button\"\n            className=\"ossido-err-nav\"\n            aria-label=\"Previous error\"\n            disabled={count < 2}\n            onClick={(): void => devErrorStore.prev()}\n          >\n            <ChevronLeftIcon />\n          </button>\n          <button\n            type=\"button\"\n            className=\"ossido-err-nav\"\n            aria-label=\"Next error\"\n            disabled={count < 2}\n            onClick={(): void => devErrorStore.next()}\n          >\n            <ChevronRightIcon />\n          </button>\n          <span className=\"ossido-err-pager-count\">\n            {activeIndex + 1} of {count}\n          </span>\n          <span className=\"ossido-err-pager-kind\">\n            {KIND_LABEL[entry.kind]}\n          </span>\n          {entry.occurrences > 1 && (\n            <span\n              className=\"ossido-err-pager-occurrences\"\n              title={`Reported ${entry.occurrences} times`}\n            >\n              ×{entry.occurrences}\n            </span>\n          )}\n          <span className=\"ossido-err-pager-spacer\" />\n          <button\n            type=\"button\"\n            className=\"ossido-err-dismiss\"\n            aria-label=\"Dismiss\"\n            onClick={(): void => devErrorStore.closeOverlay()}\n          >\n            ✕\n          </button>\n        </div>\n\n        <div className=\"ossido-err-body\">\n          <EntryBody entry={entry} />\n\n          {entry.reset && (\n            <div className=\"ossido-err-actions\">\n              <button\n                type=\"button\"\n                className=\"ossido-err-btn\"\n                onClick={entry.reset}\n              >\n                Try again\n              </button>\n            </div>\n          )}\n          <p className=\"ossido-err-hint\">\n            This overlay is only shown in development. Press <kbd>Esc</kbd> or\n            click outside to dismiss.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction DevIndicator({\n  count,\n  menuOpen,\n  position,\n}: {\n  count: number;\n  menuOpen: boolean;\n  position: DevOverlayCorner;\n}): JSX.Element {\n  return (\n    <>\n      {menuOpen && (\n        <div\n          className=\"ossido-err-menu-scrim\"\n          onClick={(): void => devErrorStore.closeMenu()}\n        />\n      )}\n      <div className={`ossido-err-indicator ossido-err-indicator--${position}`}>\n        {menuOpen && (\n          <div\n            className={`ossido-err-menu ossido-err-menu--${position}`}\n            role=\"menu\"\n          >\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              className=\"ossido-err-menu-item\"\n              disabled={count === 0}\n              onClick={(): void => devErrorStore.openOverlay()}\n            >\n              <span>View errors</span>\n              {count > 0 ? (\n                <span className=\"ossido-err-menu-count\">{count}</span>\n              ) : (\n                <span className=\"ossido-err-menu-muted\">None</span>\n              )}\n            </button>\n\n            <div className=\"ossido-err-menu-sep\" />\n\n            <div className=\"ossido-err-menu-section\">\n              <span className=\"ossido-err-menu-label\">Position</span>\n              <div className=\"ossido-err-menu-corners\">\n                {DEV_OVERLAY_CORNERS.map((corner) => (\n                  <button\n                    key={corner}\n                    type=\"button\"\n                    className={\n                      corner === position\n                        ? 'ossido-err-corner ossido-err-corner--active'\n                        : 'ossido-err-corner'\n                    }\n                    aria-label={CORNER_LABEL[corner]}\n                    aria-pressed={corner === position}\n                    onClick={(): void => devErrorStore.setPosition(corner)}\n                  >\n                    <span\n                      className={`ossido-err-corner-dot ossido-err-corner-dot--${corner}`}\n                    />\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"ossido-err-menu-sep\" />\n\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              className=\"ossido-err-menu-item\"\n              onClick={(): void => devErrorStore.hideBadge()}\n            >\n              <span>Hide until reload</span>\n            </button>\n          </div>\n        )}\n\n        <button\n          type=\"button\"\n          className=\"ossido-err-fab\"\n          aria-label=\"Ossido dev tools\"\n          aria-haspopup=\"menu\"\n          aria-expanded={menuOpen}\n          onClick={(): void => devErrorStore.toggleMenu()}\n        >\n          <BoltIcon />\n          {count > 0 && <span className=\"ossido-err-fab-count\">{count}</span>}\n        </button>\n      </div>\n    </>\n  );\n}\n\nexport function DevErrorOverlayHost(): JSX.Element | null {\n  const state = useSyncExternalStore(\n    devErrorStore.subscribe,\n    devErrorStore.getSnapshot,\n    devErrorStore.getServerSnapshot,\n  );\n\n  // The indicator is a client-only portal, so it renders nothing until after\n  // mount. This keeps the hydration render identical to the server (which\n  // renders nothing), avoiding a hydration mismatch now that the badge is shown\n  // even with zero errors.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Collect uncaught errors and unhandled rejections (React render errors and\n  // build errors arrive through their own channels). The source-highlighting\n  // libraries are prefetched at dev bootstrap (see the hydration entry).\n  useEffect(() => {\n    const onError = (event: ErrorEvent): void => {\n      const error =\n        event.error instanceof Error ? event.error : new Error(event.message);\n      if (isIgnorableUncaught(error)) return;\n      devErrorStore.addJsError('uncaught', error);\n    };\n    const onRejection = (event: PromiseRejectionEvent): void => {\n      devErrorStore.addJsError('unhandledrejection', toError(event.reason));\n    };\n    window.addEventListener('error', onError);\n    window.addEventListener('unhandledrejection', onRejection);\n    return (): void => {\n      window.removeEventListener('error', onError);\n      window.removeEventListener('unhandledrejection', onRejection);\n    };\n  }, []);\n\n  // Esc closes the overlay (or the indicator menu).\n  useEffect(() => {\n    if (!state.overlayOpen && !state.menuOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== 'Escape') return;\n      if (state.overlayOpen) devErrorStore.closeOverlay();\n      else devErrorStore.closeMenu();\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return (): void => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [state.overlayOpen, state.menuOpen]);\n\n  if (typeof document === 'undefined' || !mounted) return null;\n\n  const count = state.entries.length;\n\n  // A new error auto-opens the full overlay.\n  if (state.overlayOpen && count > 0) {\n    return createPortal(\n      <>\n        <Styles />\n        <DevErrorOverlay count={count} />\n      </>,\n      document.body,\n    );\n  }\n\n  // Otherwise the persistent indicator — hidden only when the user hid it for\n  // this session AND there are no errors to surface.\n  if (state.badgeHidden && count === 0) return null;\n\n  return createPortal(\n    <>\n      <Styles />\n      <DevIndicator\n        count={count}\n        menuOpen={state.menuOpen}\n        position={state.position}\n      />\n    </>,\n    document.body,\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/DevErrorReporter.d.ts

@@ -0,0 +1,13 @@
+import type { OssidoErrorProps } from '../types';
+/**
+ * Development-only error-boundary fallback. Instead of rendering the overlay in
+ * place of the failed subtree (which reads as a full-page replacement), it
+ * reports the caught render error — including SSR/Rust panics surfaced through
+ * a rejected data resource — to the shared {@link devErrorStore}. The floating
+ * {@link DevErrorOverlayHost} then shows it over the app, with the boundary's
+ * `reset` wired to the overlay's "Try again".
+ *
+ * Renders nothing itself; the route area stays blank behind the overlay until
+ * the error is fixed or retried (matching Vite/Next).
+ */
+export declare function DevErrorReporter({ error, reset }: OssidoErrorProps): null;

package/dist/esm/components/DevErrorReporter.js

@@ -0,0 +1,28 @@
+import { devErrorStore } from "./devErrorStore.js";
+import { useEffect } from "react";
+
+//#region src/components/DevErrorReporter.tsx
+/**
+* Development-only error-boundary fallback. Instead of rendering the overlay in
+* place of the failed subtree (which reads as a full-page replacement), it
+* reports the caught render error — including SSR/Rust panics surfaced through
+* a rejected data resource — to the shared {@link devErrorStore}. The floating
+* {@link DevErrorOverlayHost} then shows it over the app, with the boundary's
+* `reset` wired to the overlay's "Try again".
+*
+* Renders nothing itself; the route area stays blank behind the overlay until
+* the error is fixed or retried (matching Vite/Next).
+*/
+function DevErrorReporter({ error, reset }) {
+	useEffect(() => {
+		const id = devErrorStore.addJsError("runtime", error, reset);
+		return () => {
+			devErrorStore.removeById(id);
+		};
+	}, [error, reset]);
+	return null;
+}
+
+//#endregion
+export { DevErrorReporter };
+//# sourceMappingURL=DevErrorReporter.js.map

package/dist/esm/components/DevErrorReporter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevErrorReporter.js","names":[],"sources":["../../../src/components/DevErrorReporter.tsx"],"sourcesContent":["import { useEffect } from 'react';\n\nimport type { OssidoErrorProps } from '../types';\n\nimport { devErrorStore } from './devErrorStore';\n\n/**\n * Development-only error-boundary fallback. Instead of rendering the overlay in\n * place of the failed subtree (which reads as a full-page replacement), it\n * reports the caught render error — including SSR/Rust panics surfaced through\n * a rejected data resource — to the shared {@link devErrorStore}. The floating\n * {@link DevErrorOverlayHost} then shows it over the app, with the boundary's\n * `reset` wired to the overlay's \"Try again\".\n *\n * Renders nothing itself; the route area stays blank behind the overlay until\n * the error is fixed or retried (matching Vite/Next).\n */\nexport function DevErrorReporter({ error, reset }: OssidoErrorProps): null {\n  useEffect(() => {\n    const id = devErrorStore.addJsError('runtime', error, reset);\n    return (): void => {\n      devErrorStore.removeById(id);\n    };\n  }, [error, reset]);\n\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,SAAgB,iBAAiB,EAAE,OAAO,SAAiC;CACzE,gBAAgB;EACd,MAAM,KAAK,cAAc,WAAW,WAAW,OAAO,KAAK;EAC3D,aAAmB;GACjB,cAAc,WAAW,EAAE;EAC7B;CACF,GAAG,CAAC,OAAO,KAAK,CAAC;CAEjB,OAAO;AACT"}

package/dist/esm/components/base.js

@@ -0,0 +1,6 @@
+//#region src/components/base.css?raw-css
+var base_default = "/*\n * Design tokens shared by the framework's default screens (the dev error\n * overlay, the production error fallback, the not-found page, …). Injected as a\n * `<style>` element by `BaseStyles` — the router library has no CSS bundling\n * step, so styles ship as strings.\n *\n * The Google Fonts import MUST stay the first rule in the sheet (CSS ignores\n * `@import` that follows other rules). Noto Sans is the default body font;\n * JetBrains Mono is used for code and stack traces.\n */\n@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans:wght@400;500;600;700&display=swap');\n\n:root {\n  /* Typography ------------------------------------------------------------ */\n  --ossido-font-sans:\n    'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,\n    sans-serif;\n  --ossido-font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,\n    'Liberation Mono', monospace;\n\n  --ossido-font-size-xs: 12px;\n  --ossido-font-size-sm: 13px;\n  --ossido-font-size: 14px;\n  --ossido-font-size-lg: 18px;\n  --ossido-font-size-xl: 22px;\n\n  --ossido-font-weight-regular: 400;\n  --ossido-font-weight-medium: 500;\n  --ossido-font-weight-semibold: 600;\n  --ossido-font-weight-bold: 700;\n\n  --ossido-line-height: 1.5;\n  --ossido-line-height-tight: 1.25;\n  --ossido-letter-spacing-wide: 0.04em;\n\n  /* Colours (dark theme) -------------------------------------------------- */\n  --ossido-color-bg: #0a0a0e;\n  --ossido-color-surface: #101014;\n  --ossido-color-surface-hover: #1c1c22;\n  --ossido-color-surface-raised: #151519;\n  --ossido-color-border: rgba(255, 255, 255, 0.1);\n  --ossido-color-border-strong: #3a3a42;\n\n  --ossido-color-text: #e6e6e6;\n  --ossido-color-text-muted: #c7c7cf;\n  --ossido-color-text-subtle: #8a8a94;\n  --ossido-color-text-faint: #6f6f78;\n\n  --ossido-color-accent: #f43f5e;\n  --ossido-color-accent-text: #ff8fa3;\n  --ossido-color-on-accent: #ffffff;\n  --ossido-color-danger-surface: #4a1d27;\n\n  --ossido-color-success: #22c55e;\n  --ossido-color-success-text: #4ade80;\n  --ossido-color-success-surface: #16331f;\n\n  /* Radii ----------------------------------------------------------------- */\n  --ossido-radius-sm: 6px;\n  --ossido-radius: 8px;\n  --ossido-radius-pill: 999px;\n\n  /* Spacing --------------------------------------------------------------- */\n  --ossido-space-1: 0.25rem;\n  --ossido-space-2: 0.5rem;\n  --ossido-space-3: 0.75rem;\n  --ossido-space-4: 1rem;\n  --ossido-space-6: 1.5rem;\n  --ossido-space-8: 2rem;\n}\n";
+
+//#endregion
+export { base_default as default };
+//# sourceMappingURL=base.js.map

package/dist/esm/components/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../../src/components/base.css?raw-css"],"sourcesContent":["export default \"/*\\n * Design tokens shared by the framework's default screens (the dev error\\n * overlay, the production error fallback, the not-found page, …). Injected as a\\n * `<style>` element by `BaseStyles` — the router library has no CSS bundling\\n * step, so styles ship as strings.\\n *\\n * The Google Fonts import MUST stay the first rule in the sheet (CSS ignores\\n * `@import` that follows other rules). Noto Sans is the default body font;\\n * JetBrains Mono is used for code and stack traces.\\n */\\n@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans:wght@400;500;600;700&display=swap');\\n\\n:root {\\n  /* Typography ------------------------------------------------------------ */\\n  --ossido-font-sans:\\n    'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,\\n    sans-serif;\\n  --ossido-font-mono:\\n    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,\\n    'Liberation Mono', monospace;\\n\\n  --ossido-font-size-xs: 12px;\\n  --ossido-font-size-sm: 13px;\\n  --ossido-font-size: 14px;\\n  --ossido-font-size-lg: 18px;\\n  --ossido-font-size-xl: 22px;\\n\\n  --ossido-font-weight-regular: 400;\\n  --ossido-font-weight-medium: 500;\\n  --ossido-font-weight-semibold: 600;\\n  --ossido-font-weight-bold: 700;\\n\\n  --ossido-line-height: 1.5;\\n  --ossido-line-height-tight: 1.25;\\n  --ossido-letter-spacing-wide: 0.04em;\\n\\n  /* Colours (dark theme) -------------------------------------------------- */\\n  --ossido-color-bg: #0a0a0e;\\n  --ossido-color-surface: #101014;\\n  --ossido-color-surface-hover: #1c1c22;\\n  --ossido-color-surface-raised: #151519;\\n  --ossido-color-border: rgba(255, 255, 255, 0.1);\\n  --ossido-color-border-strong: #3a3a42;\\n\\n  --ossido-color-text: #e6e6e6;\\n  --ossido-color-text-muted: #c7c7cf;\\n  --ossido-color-text-subtle: #8a8a94;\\n  --ossido-color-text-faint: #6f6f78;\\n\\n  --ossido-color-accent: #f43f5e;\\n  --ossido-color-accent-text: #ff8fa3;\\n  --ossido-color-on-accent: #ffffff;\\n  --ossido-color-danger-surface: #4a1d27;\\n\\n  --ossido-color-success: #22c55e;\\n  --ossido-color-success-text: #4ade80;\\n  --ossido-color-success-surface: #16331f;\\n\\n  /* Radii ----------------------------------------------------------------- */\\n  --ossido-radius-sm: 6px;\\n  --ossido-radius: 8px;\\n  --ossido-radius-pill: 999px;\\n\\n  /* Spacing --------------------------------------------------------------- */\\n  --ossido-space-1: 0.25rem;\\n  --ossido-space-2: 0.5rem;\\n  --ossido-space-3: 0.75rem;\\n  --ossido-space-4: 1rem;\\n  --ossido-space-6: 1.5rem;\\n  --ossido-space-8: 2rem;\\n}\\n\""],"mappings":";AAAA,mBAAe"}

package/dist/esm/components/devErrorSource.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Dev-only pipeline for the error overlay. Resolves a browser stack trace to
+ * original source locations (via each module's sourcemap), then extracts and
+ * syntax-highlights (Shiki) the source excerpt around the throwing expression.
+ * Everything here is dynamically imported so it never ships in the production
+ * client bundle.
+ */
+interface RawFrame {
+    fn?: string;
+    file?: string;
+    line?: number;
+    column?: number;
+}
+export interface ResolvedFrame {
+    fn?: string;
+    file?: string;
+    line?: number;
+    column?: number;
+    isApp: boolean;
+}
+export interface HighlightedLine {
+    number: number;
+    /** Pre-highlighted HTML for the line (from Shiki, inline-styled). */
+    html: string;
+    isErrorLine: boolean;
+}
+/** A single source line as plain text — shown before highlighting is ready. */
+export interface PlainLine {
+    number: number;
+    text: string;
+    isErrorLine: boolean;
+}
+export interface SourceExcerpt {
+    file: string;
+    line: number;
+    column: number;
+    lines: Array<HighlightedLine>;
+}
+/** The excerpt in plain text, before Shiki has highlighted it. */
+export interface PlainExcerpt {
+    file: string;
+    line: number;
+    column: number;
+    lines: Array<PlainLine>;
+}
+/** Source content around a throwing location — the input to an excerpt. */
+export interface RawExcerptSource {
+    content: string;
+    file: string;
+    line: number;
+    column: number;
+}
+export declare function parseStack(stack: string | undefined): Array<RawFrame>;
+/**
+ * The most specific label for an error: its constructor (class) name when it is
+ * more descriptive than the generic `Error`. A subclass like `TestError` keeps
+ * `error.name === 'Error'` unless it explicitly sets `name`, but its
+ * constructor name is still `TestError`.
+ */
+export declare function errorLabel(error: Error): string;
+/** Strip origin and query for a readable path. */
+export declare function prettyPath(file: string): string;
+/** Immediate (unmapped) frames for the first paint before async resolution. */
+export declare function initialFrames(stack: string | undefined): Array<ResolvedFrame>;
+/**
+ * Slice the source into the context window around the throwing line, as plain
+ * text. Synchronous and dependency-free, so the excerpt can render immediately;
+ * syntax highlighting then swaps in over the same layout (see
+ * {@link highlightExcerpt}).
+ */
+export declare function extractExcerpt(src: RawExcerptSource): PlainExcerpt;
+/**
+ * Eagerly kick off the heavy, dev-only imports (Shiki core + engine + grammars,
+ * trace-mapping, hast-util-to-html) so the first error's source excerpt renders
+ * without waiting on library loading. Safe to call repeatedly — the imports are
+ * cached. Call it when the overlay host mounts.
+ */
+export declare function warmDevErrorSource(): void;
+/**
+ * Syntax-highlight a source excerpt (Shiki picks the grammar from the file
+ * extension, e.g. `.tsx` or `.rs`). Returns `null` if the dev-only libraries
+ * fail to load — the caller keeps showing the plain excerpt.
+ */
+export declare function highlightExcerpt(src: RawExcerptSource): Promise<SourceExcerpt | null>;
+/**
+ * Resolve stack frames to original locations (via each module's sourcemap) and
+ * return the raw source content of the top application frame — WITHOUT
+ * highlighting it, so the caller can render a plain excerpt immediately and
+ * highlight it asynchronously. Falls back to unmapped frames if trace-mapping
+ * fails to load.
+ */
+export declare function resolveDevErrorFrames(stack: string | undefined): Promise<{
+    frames: Array<ResolvedFrame>;
+    source: RawExcerptSource | null;
+}>;
+export {};