@chan.run/ui 0.3.1 → 0.3.2

package/dist/index.d.mts

@@ -1,6 +1,31 @@
 import { FlexProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
+interface ErrorContent {
+  /** Small orange label above the code, e.g. "// not found". */
+  eyebrow: string;
+  /** Big display code: the HTTP status or "err". */
+  code: string;
+  /** The page heading (rendered as the h1). */
+  title: string;
+  /** One sentence on what happened and what to do. */
+  detail: string;
+  /** Raw error text, shown in a box below the detail. */
+  diagnostic?: string;
+  /** Whether to offer a "retry" action (reloads the page). */
+  showRetry?: boolean;
+}
+/** Any value caught by an error boundary → the content for <ErrorView>. */
+export declare const classifyError: (err: unknown) => ErrorContent;
 export declare function ColorModeButton(props: FlexProps): import("react").JSX.Element;
+interface ErrorViewProps extends ErrorContent {
+  /** Where the "home" action goes. */
+  homeHref?: string;
+}
+export declare function ErrorView({ eyebrow, code, title, detail, diagnostic, showRetry, homeHref }: ErrorViewProps): import("react").JSX.Element;
+/** Route error boundary (React Router's `ErrorBoundary` export): caught error → <ErrorView>. */
+export declare function ErrorBoundary({ error }: {
+  error: unknown;
+}): import("react").JSX.Element;
 interface SplashProps {
   /** While true, the splash covers the screen. Flip to false to reveal. */
   open: boolean;
@@ -21,4 +46,4 @@ interface TopbarProps {
   onMenuOpen?: () => void;
 }
 export declare function Topbar({ onMenuOpen }: TopbarProps): import("react").JSX.Element;
-export type { SplashProps, TopbarProps };
+export type { ErrorContent, ErrorViewProps, SplashProps, TopbarProps };

package/dist/index.mjs

@@ -1,9 +1,81 @@
-import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
+import { allPass, has, includes, is, isEmpty, isNil, pipe, propIs, replace, test, toLower, toUpper } from "ramda";
+import { Alert, Box, Button, ButtonGroup, EmptyState, Flex, chakra, useRecipe, useSlotRecipe } from "@chakra-ui/react";
 import { useTheme } from "next-themes";
 import { useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, RotateCw } from "lucide-react";
 import { useTimeout } from "@mantine/hooks";
 import { Wordmark } from "@chan.run/brand";
+// src/classifyError.ts
+const UNREACHABLE_STATUSES = [
+	502,
+	503,
+	504
+];
+/** Browser / runtime messages of a rejected fetch (Firefox, Chrome, Node, Safari, …). */
+const NETWORK_FAILURE = /networkerror|failed to fetch|fetch failed|load failed|err_connection|connection refused/i;
+/** { status: 404, statusText: "Not Found", data: … } → true; new Error() → false */
+const isHttpErrorResponse = allPass([
+	propIs(Number, "status"),
+	propIs(String, "statusText"),
+	has("data")
+]);
+/** "text" → "text"; { a: 1 } → '{"a":1}'; null → undefined */
+const dataText = (data) => isNil(data) ? void 0 : is(String, data) ? data : JSON.stringify(data);
+/** new Error("boom") → "boom"; "boom" → "boom" */
+const messageOf = (err) => err instanceof Error ? err.message : String(err);
+/** "Failed to fetch" → true; "x is undefined" → false */
+const isNetworkFailure = test(NETWORK_FAILURE);
+/** 503 → true; 500 → false */
+const isUnreachableStatus = (status) => includes(status, UNREACHABLE_STATUSES);
+/** "Not Found" → "Not found"; "" → "Something went wrong" */
+const sentenceCase = (text) => isEmpty(text) ? "Something went wrong" : pipe(toLower, replace(/^./, toUpper))(text);
+const unreachable = (diagnostic) => ({
+	eyebrow: "// signal lost",
+	code: "502",
+	title: "Server unreachable",
+	detail: "The server isn't responding. It may be starting up or offline. Wait a moment and retry.",
+	diagnostic,
+	showRetry: true
+});
+const notFound = (diagnostic) => ({
+	eyebrow: "// not found",
+	code: "404",
+	title: "Page not found",
+	detail: "This page doesn't exist or has moved. Check the address, or go back home.",
+	diagnostic,
+	showRetry: false
+});
+const httpError = ({ status, statusText }, diagnostic) => ({
+	eyebrow: "// error",
+	code: String(status),
+	title: sentenceCase(statusText),
+	detail: "The request failed. Retry, or go back home.",
+	diagnostic,
+	showRetry: true
+});
+const crash = (diagnostic) => ({
+	eyebrow: "// error",
+	code: "err",
+	title: "Something went wrong",
+	detail: "An unexpected error occurred. Retry, or go back home.",
+	diagnostic,
+	showRetry: true
+});
+/** { status: 404 } → not found; { status: 503 } → unreachable; other statuses → their own page */
+function classifyResponse(res) {
+	const data = dataText(res.data);
+	if (res.status === 404) return notFound(data);
+	if (isUnreachableStatus(res.status)) return unreachable(data ?? `${res.status} ${res.statusText}`);
+	return httpError(res, data);
+}
+/** TypeError("Failed to fetch") → unreachable; Error("boom") → crash */
+const classifyThrown = (err) => {
+	const message = messageOf(err);
+	return isNetworkFailure(message) ? unreachable(message) : crash(message);
+};
+/** Any value caught by an error boundary → the content for <ErrorView>. */
+const classifyError = (err) => isHttpErrorResponse(err) ? classifyResponse(err) : classifyThrown(err);
 // src/ColorModeButton.tsx
 const noopSubscribe = () => () => void 0;
 function ColorModeButton(props) {
@@ -81,6 +153,63 @@ function MoonIcon() {
 		children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
 	});
 }
+// src/ErrorView.tsx
+/** Reload the current page (the "retry" action). */
+const reload = () => window.location.reload();
+function ErrorView({ eyebrow, code, title, detail, diagnostic, showRetry = false, homeHref = "/" }) {
+	const lbl = useRecipe({ key: "lbl" });
+	return /* @__PURE__ */ jsx(EmptyState.Root, {
+		variant: "chan",
+		"data-testid": "error-view",
+		children: /* @__PURE__ */ jsxs(EmptyState.Content, { children: [
+			/* @__PURE__ */ jsxs(chakra.span, {
+				css: lbl({ tone: "dim" }),
+				children: [
+					"[",
+					eyebrow,
+					"]"
+				]
+			}),
+			/* @__PURE__ */ jsx(EmptyState.Indicator, {
+				"aria-hidden": "true",
+				children: code
+			}),
+			/* @__PURE__ */ jsx(EmptyState.Title, {
+				as: "h1",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(EmptyState.Description, { children: detail }),
+			diagnostic ? /* @__PURE__ */ jsx(Alert.Root, {
+				variant: "chan",
+				status: "error",
+				"data-testid": "error-diagnostic",
+				children: /* @__PURE__ */ jsxs(Alert.Content, { children: [/* @__PURE__ */ jsx(Alert.Title, { children: "Diagnostic" }), /* @__PURE__ */ jsx(Alert.Description, { children: diagnostic })] })
+			}) : null,
+			/* @__PURE__ */ jsxs(ButtonGroup, {
+				size: "sm",
+				gap: "2.5",
+				children: [showRetry ? /* @__PURE__ */ jsxs(Button, {
+					variant: "chanGhost",
+					onClick: reload,
+					"data-testid": "error-retry",
+					children: [/* @__PURE__ */ jsx(RotateCw, {}), " Retry"]
+				}) : null, /* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					variant: "chan",
+					children: /* @__PURE__ */ jsxs("a", {
+						href: homeHref,
+						"data-testid": "error-home",
+						children: [/* @__PURE__ */ jsx(ArrowLeft, {}), " Home"]
+					})
+				})]
+			})
+		] })
+	});
+}
+/** Route error boundary (React Router's `ErrorBoundary` export): caught error → <ErrorView>. */
+function ErrorBoundary({ error }) {
+	return /* @__PURE__ */ jsx(ErrorView, { ...classifyError(error) });
+}
 // src/Splash.tsx
 function Splash({ open, children, orientation = "vertical", size = "md", holdMs = 0, revealMs = 1e3 }) {
 	const recipe = useSlotRecipe({ key: "splash" });
@@ -202,4 +331,4 @@ function Topbar({ onMenuOpen }) {
 		})]
 	});
 }
-export { ColorModeButton, Splash, Topbar };
+export { ColorModeButton, ErrorBoundary, ErrorView, Splash, Topbar, classifyError };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chan.run/ui",
-  "version": "0.3.1",
-  "description": "Shared chan.run app chrome: Topbar, Splash, ColorModeButton",
+  "version": "0.3.2",
+  "description": "Shared chan.run app chrome: Topbar, Splash, ColorModeButton, ErrorView",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.mjs",
@@ -19,9 +19,11 @@
     "dist"
   ],
   "dependencies": {
-    "@chan.run/brand": "^0.3.0",
-    "@chan.run/theme": "^0.3.1",
-    "@mantine/hooks": "9.7.3"
+    "@chan.run/brand": "^0.3.1",
+    "@chan.run/theme": "^0.3.2",
+    "@mantine/hooks": "9.7.3",
+    "lucide-react": "1.63.0",
+    "ramda": "0.32.0"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.35.0",
@@ -30,11 +32,17 @@
   },
   "devDependencies": {
     "@chakra-ui/react": "3.37.0",
+    "@testing-library/react": "^16.3.3",
+    "@types/ramda": "0.32.0",
     "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jsdom": "^30.1.3",
     "next-themes": "0.4.6",
     "react": "19.3.1",
+    "react-dom": "19.3.1",
     "tsdown": "0.23.2",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "vitest": "5.0.5"
   },
   "repository": {
     "type": "git",