@rebasepro/ui 0.14.1 → 0.14.2-canary.gca521e9

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./views";
 export * from "./icons";
 export * from "./styles";
 export { cls } from "./util/cls";
+export { lazyChunk, loadChunk, isChunkLoadError } from "./util/lazy_chunk";
 export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
 export type { ChipHue, ChipTone } from "./util/chip_colors";
 export { useOutsideAlerter } from "./hooks/useOutsideAlerter";

package/dist/index.es.js

@@ -3126,8 +3126,107 @@ function CircularProgressCenter({ text, ...props }) {
 	});
 }
 //#endregion
+//#region src/util/lazy_chunk.ts
+/**
+* Dynamic imports that survive a redeploy.
+*
+* A built SPA names its chunks by content hash and a deploy replaces the whole
+* `assets/` directory, so a tab opened before the deploy still holds the *old*
+* entry chunk. The first lazy route that tab opens asks for a hash that no
+* longer exists on the server, the import rejects, and the view is dead until
+* the user thinks to reload — which nothing on screen tells them to do. The
+* browser's own wording ("Failed to fetch dynamically imported module: …") reads
+* like a build bug, so this is usually reported as one.
+*
+* `loadChunk` retries once — that covers a transient network failure — and then
+* gives up with an error tagged as a chunk load failure, so `ErrorBoundary` can
+* offer a reload instead of printing the browser's message.
+*/
+/**
+* Marker property set on the error thrown after a failed retry. Read by
+* `isChunkLoadError`, which is what the UI matches on.
+*/
+var CHUNK_LOAD_ERROR_FLAG = "rebaseChunkLoadError";
+/**
+* Each engine words this differently, and the message is the only signal — none
+* of them use a distinguishable error type. The MIME variants matter as much as
+* the fetch ones: a server whose SPA fallback answers a missing `/assets/x.js`
+* with `index.html` returns 200 HTML, and the browser rejects it as a module.
+*/
+var CHUNK_ERROR_PATTERNS = [
+	"failed to fetch dynamically imported module",
+	"error loading dynamically imported module",
+	"importing a module script failed",
+	"failed to load module script",
+	"expected a javascript",
+	"unable to preload css"
+];
+/**
+* Does this error mean a chunk could not be loaded — rather than the chunk's
+* own code throwing once it did load?
+*
+* Errors raised anywhere are matched, not just ones `loadChunk` produced: React
+* `lazy()` calls that still import directly, and Vite's own CSS preloads, fail
+* the same way and deserve the same recovery.
+*/
+function isChunkLoadError(error) {
+	if (!error || typeof error !== "object") return false;
+	if (error[CHUNK_LOAD_ERROR_FLAG] === true) return true;
+	const message = error.message;
+	if (typeof message !== "string") return false;
+	const lower = message.toLowerCase();
+	return CHUNK_ERROR_PATTERNS.some((pattern) => lower.includes(pattern));
+}
+function chunkLoadError(cause) {
+	const error = /* @__PURE__ */ new Error("This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.");
+	Object.assign(error, {
+		[CHUNK_LOAD_ERROR_FLAG]: true,
+		cause
+	});
+	return error;
+}
+/**
+* Run a dynamic import, retrying once before declaring the chunk unreachable.
+*
+* Errors that are not chunk load failures — the imported module throwing while
+* it evaluates, say — are re-thrown untouched and never retried: running a
+* module's side effects twice is worse than the original failure.
+*/
+async function loadChunk(loader) {
+	try {
+		return await loader();
+	} catch (error) {
+		if (!isChunkLoadError(error)) throw error;
+		await new Promise((resolve) => setTimeout(resolve, 250));
+		try {
+			return await loader();
+		} catch (retryError) {
+			throw chunkLoadError(retryError);
+		}
+	}
+}
+/**
+* `React.lazy` with the retry above. A drop-in replacement — use it for every
+* lazy route or dialog, since any one of them can be the first chunk a stale
+* tab reaches for.
+*
+* Note that React caches the rejection: once a lazy component has failed, later
+* renders re-throw without calling the loader again. Resetting an error boundary
+* therefore cannot recover it, which is why the boundary offers a reload.
+*/
+function lazyChunk(loader) {
+	return React.lazy(() => loadChunk(loader));
+}
+//#endregion
 //#region src/components/ErrorBoundary.tsx
 /**
+* The one error a user can fix themselves. A deploy replaces the hashed chunk
+* files, so a tab opened before it cannot load any lazy view it has not already
+* fetched — with the browser's raw message ("Failed to fetch dynamically
+* imported module: …") this reads as a broken build rather than a stale tab.
+*/
+var CHUNK_ERROR_DESCRIPTION = "This app was updated while the tab was open, so part of it could not be loaded. Reload to continue.";
+/**
 * Checks whether the error message relates to missing permissions or
 * authorization failures. Used to show a friendlier message in fullPage mode.
 */
@@ -3172,39 +3271,55 @@ var ErrorBoundary = class extends React.Component {
 		return this.props.children;
 	}
 	renderInline() {
+		const isStaleChunk = isChunkLoadError(this.state.error);
 		return /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col m-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center m-2",
-				children: [/* @__PURE__ */ jsx(AlertCircleIcon$1, {
-					className: "text-red-500 dark:text-red-400",
-					size: iconSize.small
-				}), /* @__PURE__ */ jsx("div", {
-					className: "ml-4",
-					children: "Error"
-				})]
-			}), /* @__PURE__ */ jsx(Typography, {
-				variant: "caption",
-				children: this.state.error?.message ?? "See the error in the console"
-			})]
+			className: "flex flex-col m-2 items-start",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center m-2",
+					children: [isStaleChunk ? /* @__PURE__ */ jsx(RefreshCwIcon$1, {
+						className: "text-text-secondary dark:text-text-secondary-dark",
+						size: iconSize.small
+					}) : /* @__PURE__ */ jsx(AlertCircleIcon$1, {
+						className: "text-red-500 dark:text-red-400",
+						size: iconSize.small
+					}), /* @__PURE__ */ jsx("div", {
+						className: "ml-4",
+						children: isStaleChunk ? "New version available" : "Error"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					children: isStaleChunk ? CHUNK_ERROR_DESCRIPTION : this.state.error?.message ?? "See the error in the console"
+				}),
+				isStaleChunk && /* @__PURE__ */ jsxs(Button, {
+					variant: "outlined",
+					color: "neutral",
+					size: "small",
+					className: "mt-3 ml-2",
+					onClick: this.handleReload,
+					children: [/* @__PURE__ */ jsx(RefreshCwIcon$1, { size: 16 }), "Reload"]
+				})
+			]
 		});
 	}
 	renderFullPage() {
 		const { error, showDetails } = this.state;
 		const isPermission = isPermissionError(error);
-		const Icon = isPermission ? ShieldAlertIcon : AlertCircleIcon$1;
-		const title = isPermission ? "Access denied" : "Something went wrong";
-		const description = isPermission ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator." : "An unexpected error occurred. You can try reloading the page or going back.";
+		const isStaleChunk = !isPermission && isChunkLoadError(error);
+		const Icon = isPermission ? ShieldAlertIcon : isStaleChunk ? RefreshCwIcon$1 : AlertCircleIcon$1;
+		const title = isPermission ? "Access denied" : isStaleChunk ? "New version available" : "Something went wrong";
+		const description = isPermission ? "You don't have permission to access this resource. Please check your account permissions or contact your administrator." : isStaleChunk ? CHUNK_ERROR_DESCRIPTION : "An unexpected error occurred. You can try reloading the page or going back.";
 		return /* @__PURE__ */ jsx("div", {
 			className: cls("flex items-center justify-center min-h-[400px] h-full w-full", "bg-surface-50 dark:bg-surface-950"),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center max-w-md px-6 py-10 text-center",
 				children: [
 					/* @__PURE__ */ jsx("div", {
-						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : "bg-red-100 dark:bg-red-900/30"),
+						className: cls("flex items-center justify-center w-14 h-14 rounded-xl mb-6", isPermission ? "bg-amber-100 dark:bg-amber-900/30" : isStaleChunk ? "bg-surface-100 dark:bg-surface-800" : "bg-red-100 dark:bg-red-900/30"),
 						children: /* @__PURE__ */ jsx(Icon, {
 							size: 28,
-							className: isPermission ? "text-amber-600 dark:text-amber-400" : "text-red-500 dark:text-red-400"
+							className: isPermission ? "text-amber-600 dark:text-amber-400" : isStaleChunk ? "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-400"
 						})
 					}),
 					/* @__PURE__ */ jsx(Typography, {
@@ -3219,7 +3334,7 @@ var ErrorBoundary = class extends React.Component {
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex gap-3",
-						children: [/* @__PURE__ */ jsxs(Button, {
+						children: [!isStaleChunk && /* @__PURE__ */ jsxs(Button, {
 							variant: "outlined",
 							color: "neutral",
 							size: "medium",
@@ -3233,7 +3348,7 @@ var ErrorBoundary = class extends React.Component {
 							children: [/* @__PURE__ */ jsx(RefreshCwIcon$1, { size: 16 }), "Reload page"]
 						})]
 					}),
-					error?.message && /* @__PURE__ */ jsxs("div", {
+					!isStaleChunk && error?.message && /* @__PURE__ */ jsxs("div", {
 						className: "mt-8 w-full",
 						children: [/* @__PURE__ */ jsxs("button", {
 							onClick: this.toggleDetails,
@@ -8782,6 +8897,6 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 	});
 }
 //#endregion
-export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
+export { Alert, AlertCircleIcon, AlertTriangleIcon, AlignLeftIcon, AppWindow, ArrowDownIcon, ArrowDownToLineIcon, ArrowLeftIcon, ArrowRightFromLineIcon, ArrowRightIcon, ArrowRightLeftIcon, ArrowRightToLineIcon, ArrowUpDownIcon, ArrowUpIcon, ArrowUpToLineIcon, Autocomplete, AutocompleteItem, Avatar, Badge, BoldIcon, BookOpenIcon, BooleanSwitch, BooleanSwitchWithLabel, Button, CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, CONTROL_HEIGHT, CalendarIcon, Card, CardView, CenteredView, CheckCircle2Icon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, Chip, CircleDotIcon, CircleIcon, CircleUserIcon, CircularProgress, CircularProgressCenter, CodeIcon, Collapse, CollectionView, ColorPicker, ColumnsIcon, Container, CopyIcon, DatabaseIcon, DateTimeField, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, DollarSignIcon, DownloadIcon, ErrorBoundary, ExpandablePanel, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileSearchIcon, FileTextIcon, FileUpload, FilterChip, FilterIcon, FilterXIcon, FlagIcon, FolderIcon, FolderKanbanIcon, FolderPlusIcon, FolderUpIcon, FunctionSquareIcon, GitBranchIcon, GitHubIcon, GlobeIcon, HandleIcon, HashIcon, Heading1Icon, Heading2Icon, Heading3Icon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, ImageIcon, ImageOffIcon, InfoIcon, InfoLabel, InputLabel, ItalicIcon, KanbanIcon, KanbanView, KeyIcon, KeyRoundIcon, Label, LanguagesIcon, LayoutGridIcon, Link2Icon, LinkIcon, ListIcon, ListOrderedIcon, ListPlusIcon, ListTodoIcon, ListView, LoaderIcon, LoadingButton, LockIcon, LogOutIcon, LucideIconByName, MailIcon, Markdown, Maximize2Icon, Menu, MenuIcon, MenuItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger, MessageCircleIcon, MinusCircleIcon, MinusIcon, MoonIcon, MoreVerticalIcon, MultiSelect, MultiSelectContext, MultiSelectItem, Music2Icon, PanelLeftCloseIcon, PanelLeftIcon, PanelLeftOpenIcon, Paper, PauseIcon, PenLineIcon, PencilIcon, PhoneIcon, PinIcon, PlayIcon, PlusIcon, Popover, PopoverPrimitive, Portal, PortalContainerProvider, QuoteIcon, RadioGroup, RadioGroupItem, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, ResizablePanels, Rows3Icon, SaveIcon, SearchBar, SearchIcon, Select, SelectGroup, SelectItem, SendIcon, Separator, SettingsIcon, Sheet, ShieldIcon, ShoppingCartIcon, Skeleton, Slider, SlidersHorizontalIcon, Slot, SquareIcon, StarIcon, StickyNoteIcon, StrikethroughIcon, SunIcon, SunMoonIcon, Tab, Table, TableBody, TableCell, TableHeader, TableIcon, TableRow, Tabs, TagIcon, TerminalIcon, TextField, TextIcon, TextareaAutosize, ToggleButtonGroup, Tooltip, Trash2Icon, TrendingUpIcon, TypeIcon, Typography, UnderlineIcon, UndoIcon, Unlink2Icon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserPlus, UsersIcon, VideoIcon, VirtualTable, VirtualTableDateField, VirtualTableInput, VirtualTableNumberInput, VirtualTableSelect, VirtualTableSelectionProvider, VirtualTableSwitch, VoteIcon, Wand2Icon, WrenchIcon, XCircleIcon, XIcon, cardClickableMixin, cardMixin, cardSelectedMixin, cls, colorClassesMapping, controlHeightMixin, controlPaddingMixin, coolIconKeys, createVirtualTableSelectionStore, debounce, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedClasses, focusedDisabled, focusedInvisibleMixin, getColorSchemeForKey, getColorSchemeForSeed, getLoadedLucideIcons, iconKeys, iconSize, isChunkLoadError, lazyChunk, loadChunk, loadLucideIcons, lucideIcons, paperMixin, resolveLucideIcon, useAutoComplete, useDebounceCallback, useDebounceValue, useDebouncedCallback, useInjectStyles, useLucideIcons, useOutsideAlerter, usePortalContainer, useVirtualTableCellSelected, useVirtualTableSelection };
 
 //# sourceMappingURL=index.es.js.map