@rebasepro/ui 0.14.1 → 0.14.2-canary.g27a129e

package/dist/components/Typography.d.ts

@@ -31,6 +31,10 @@ declare const typographyVariants: {
     inherit: string;
     caption: string;
     button: string;
+    lead: string;
+    micro: string;
+    mono: string;
+    stat: string;
 };
 export declare function Typography<C extends React.ElementType = "span">({ align, color, children, className, component, gutterBottom, noWrap, paragraph, variant, variantMapping, style, onClick, ...other }: TypographyProps<C>): React.JSX.Element;
 export {};

package/dist/index.css

@@ -36,26 +36,40 @@ html.dark {
    size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
    and holding 600 all the way down to text-sm made every heading shout equally
    — a heading stops being a headline somewhere, and the scale should say where.
-   600 is display-scale only; the small end carries 500.
+
+   The ladder now spans three weights rather than two. 600 everywhere at the top
+   meant a page title and the section heading inside it were the same voice at
+   two sizes, so a screen had no clear first thing to read. 700 is the *display*
+   tier only — h1 and h2, page titles and stat numbers — and nothing in the UI
+   chrome (nav, labels, buttons, table headers) goes above 600.
+
+   This costs nothing on the wire: both faces are loaded as VARIABLE fonts
+   (@fontsource-variable/inter, @fontsource-variable/instrument-sans), so the
+   whole weight axis is already in the file that ships. The earlier "never above
+   600" rule was written when static weights meant every step was another
+   download; that constraint no longer exists.
 
    With a single face carrying both headings and body, weight and tracking are
    the only things separating a heading from the copy around it — so the tiers
    have to actually differ, rather than all sitting at 600. */
 
 .typography-h1 {
-    @apply text-4xl font-headers font-semibold tracking-display;
+    @apply text-4xl font-headers font-bold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-semibold tracking-display;
+    @apply text-3xl font-headers font-bold tracking-display;
 }
 
 .typography-h3 {
     @apply text-2xl font-headers font-semibold tracking-title;
 }
 
+/* Semibold, not medium: h4 is the section heading inside a page, and at 20px
+   medium sits close enough to body copy that a long page reads as one
+   undifferentiated column. */
 .typography-h4 {
-    @apply text-xl font-headers font-medium tracking-title;
+    @apply text-xl font-headers font-semibold tracking-title;
 }
 
 .typography-h5 {
@@ -98,6 +112,44 @@ html.dark {
     @apply text-sm font-semibold tracking-wide;
 }
 
+/* ---------------------------------------------------------------------------
+ * Three tiers the product kept improvising because the system had no name for
+ * them. Each existed as hand-written utilities in several places before it
+ * existed here, which is the definition of a missing token.
+ * ------------------------------------------------------------------------- */
+
+/* The sentence under a page title. `body2` (12px) was standing in for it, which
+   made the one line explaining what a page is FOR smaller than the page's own
+   table rows. A lead is read once, deliberately, and it gets room to be read. */
+.typography-lead {
+    @apply text-base leading-relaxed;
+}
+
+/* The micro-label above a value: SCANNED, KEPT, TOOK, WHEN. Uppercase and
+   tracked so it reads as a field name rather than as copy, and small enough
+   that it never competes with the value it names.
+
+   This is the one product tier below `text-xs`. It earns the exception by never
+   carrying a sentence — it is always one or two words naming the thing directly
+   underneath it, and at 11px uppercase with this tracking it stays legible
+   where 11px prose would not. */
+.typography-micro {
+    @apply text-2xs font-medium uppercase tracking-[0.08em];
+}
+
+/* A measured value: a count, a duration, a timestamp, an id, a size.
+   `tabular-nums` is the point — proportional digits make a column of numbers
+   ragged and a live-updating counter jitter as its glyphs change width. */
+.typography-mono {
+    @apply font-mono tabular-nums;
+}
+
+/* The headline number on a stat tile. Display weight, display tracking, and
+   tabular figures so a row of tiles shares a baseline grid. */
+.typography-stat {
+    @apply text-3xl font-headers font-bold tracking-display tabular-nums;
+}
+
 :focus-visible {
     @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
 }

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

@@ -68,7 +68,35 @@ var fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03
 var fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
 var defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 var paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
-var cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+var cardMixin = "bg-white dark:bg-surface-900 rounded-xl border border-surface-200 dark:border-surface-700/60";
+/**
+* An inset well: code, a query, a log tail, a connection string.
+*
+* It must read as *recessed into* the surface holding it, which means darker
+* than that surface in dark mode — `surface-950` under a `surface-900` card.
+* The obvious-looking `surface-800` is a trap: `#111111` is LIGHTER than the
+* `#0a0a0a` card around it, so the well appears to float above the thing it is
+* set into. Pair with `font-mono`; this mixin carries the surface only.
+*/
+var codeSurfaceMixin = "bg-surface-100 dark:bg-surface-950 rounded-md";
+/**
+* The accent, used as TEXT.
+*
+* `--color-primary` (#0070F4) is tuned to be a fill — white text on it, it on
+* white. Read as text on our dark surfaces it lands at **4.36:1 on a
+* `surface-900` card** (measured), which is below AA for body-sized text, and
+* every accent link in the product sits on exactly that surface. On the page's
+* `surface-950` it only reaches 4.62:1, so the margin was never real.
+*
+* `--color-primary-light` is the same hue lifted 0.15 in OKLCH lightness and
+* measures **7.34:1** on the same card. It is indistinguishable as "the blue"
+* and comfortably legible, so dark mode swaps to it for text.
+*
+* Use this for links, accent labels and any accent-coloured type. It is NOT for
+* fills — a filled button keeps `bg-primary`, where the contrast question runs
+* the other way and #0070F4 is already correct.
+*/
+var accentTextMixin = "text-primary dark:text-primary-light";
 var cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 var cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
 //#endregion
@@ -110,6 +138,64 @@ function hashString(str) {
 }
 //#endregion
 //#region src/util/chip_colors.ts
+/** WCAG floor, plus a little margin so rounding cannot drop a pair below 4.5. */
+var CONTRAST_TARGET = 4.6;
+/** Page backgrounds the outlined variant sits on: `bg-white` and `surface-950`. */
+var PAGE_LIGHT = "#ffffff";
+var PAGE_DARK = "#0a0a0a";
+function toRgb(hex) {
+	let h = hex.replace("#", "");
+	if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+	return [
+		0,
+		2,
+		4
+	].map((i) => parseInt(h.slice(i, i + 2), 16));
+}
+function toHex(rgb) {
+	return "#" + rgb.map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
+}
+function relativeLuminance(hex) {
+	const [r, g, b] = toRgb(hex).map((v) => {
+		const c = v / 255;
+		return c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrastRatio(a, b) {
+	const x = relativeLuminance(a);
+	const y = relativeLuminance(b);
+	const [hi, lo] = x > y ? [x, y] : [y, x];
+	return (hi + .05) / (lo + .05);
+}
+function mixHex(from, to, t) {
+	const A = toRgb(from);
+	const B = toRgb(to);
+	return toHex([
+		0,
+		1,
+		2
+	].map((i) => A[i] + (B[i] - A[i]) * t));
+}
+/**
+* Walk a tinted ink toward black or white until it clears the floor on `bg`.
+*
+* Stops at the first passing step rather than going all the way, so the ink
+* keeps as much of its hue as legibility allows.
+*/
+function push(base, toward, bg) {
+	for (let t = 0; t <= 1.0001; t += .02) {
+		const candidate = mixHex(base, toward, t);
+		if (contrastRatio(candidate, bg) >= CONTRAST_TARGET) return candidate;
+	}
+	return toward;
+}
+/** The ink for a chip filled with `bg`: whichever direction has more headroom. */
+function inkOn(stops, bg) {
+	const dark = push(stops.text, "#000000", bg);
+	const light = push(stops.onDeep ?? stops.pale, "#ffffff", bg);
+	return contrastRatio(dark, bg) >= contrastRatio(light, bg) ? dark : light;
+}
 var CHIP_HUES = [
 	"blue",
 	"cyan",
@@ -235,33 +321,30 @@ var HUE_STOPS = {
 		text: "#064e3b"
 	}
 };
+/**
+* One tone of one hue.
+*
+* Backgrounds are the palette's, unchanged — the stops were not the problem and
+* moving them would have restyled every chip in the product. Only the ink moved,
+* and it moved to wherever the measurement says it has to be.
+*/
 function tone(stops, chipTone) {
-	const onDeep = stops.onDeep ?? stops.pale;
+	const outline = {
+		outlineText: push(stops.text, "#000000", PAGE_LIGHT),
+		darkOutlineText: push(stops.onDeep ?? stops.pale, "#ffffff", PAGE_DARK)
+	};
+	const filled = (light, dark) => ({
+		color: light,
+		text: inkOn(stops, light),
+		darkColor: dark,
+		darkText: inkOn(stops, dark),
+		...outline
+	});
 	switch (chipTone) {
-		case "Light": return {
-			color: stops.mid,
-			text: stops.text,
-			darkColor: stops.solid,
-			darkText: "#fff"
-		};
-		case "Dark": return {
-			color: stops.solid,
-			text: "#fff",
-			darkColor: stops.solid,
-			darkText: "#fff"
-		};
-		case "Darker": return {
-			color: stops.deep,
-			text: onDeep,
-			darkColor: stops.deep,
-			darkText: onDeep
-		};
-		default: return {
-			color: stops.pale,
-			text: stops.text,
-			darkColor: stops.deep,
-			darkText: onDeep
-		};
+		case "Light": return filled(stops.mid, stops.solid);
+		case "Dark": return filled(stops.solid, stops.solid);
+		case "Darker": return filled(stops.deep, stops.deep);
+		default: return filled(stops.pale, stops.deep);
 	}
 }
 var CHIP_TONES = [
@@ -3051,7 +3134,11 @@ var typographyVariants = {
 	body2: "p",
 	inherit: "p",
 	caption: "p",
-	button: "span"
+	button: "span",
+	lead: "p",
+	micro: "span",
+	mono: "span",
+	stat: "span"
 };
 var colorToClasses = {
 	inherit: "text-inherit",
@@ -3075,7 +3162,11 @@ var gutterBottomClasses = {
 	inherit: "mb-3",
 	caption: "mb-2",
 	button: "mb-2",
-	label: "mb-2"
+	label: "mb-2",
+	lead: "mb-4",
+	micro: "mb-1",
+	mono: "mb-2",
+	stat: "mb-1"
 };
 var variantToClasses = {
 	h1: "typography-h1",
@@ -3091,7 +3182,11 @@ var variantToClasses = {
 	label: "typography-label",
 	inherit: "typography-inherit",
 	caption: "typography-caption",
-	button: "typography-button"
+	button: "typography-button",
+	lead: "typography-lead",
+	micro: "typography-micro",
+	mono: "typography-mono",
+	stat: "typography-stat"
 };
 function Typography({ align = "inherit", color = "primary", children, className, component, gutterBottom = false, noWrap = false, paragraph = false, variant = "body1", variantMapping = typographyVariants, style, onClick, ...other }) {
 	return /* @__PURE__ */ jsx(component || (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) || "span", {
@@ -3126,8 +3221,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 +3366,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 +3429,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 +3443,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,
@@ -3341,6 +3551,10 @@ function Chip({ children, colorScheme, error, outlined, onClick, icon, size = "m
 	else if (usedColorScheme) textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
 	if (hasScheme) {
 		if (outlined) {
+			if (!error && usedColorScheme) {
+				const outlineInk = dark ? usedColorScheme.darkOutlineText ?? usedColorScheme.darkText : usedColorScheme.outlineText;
+				if (outlineInk) textColor = outlineInk;
+			}
 			bgColor = getRgba(textColor, dark ? .1 : .06);
 			border = `1px solid ${getRgba(textColor, dark ? .2 : .14)}`;
 		} else if (error) {
@@ -7566,13 +7780,16 @@ function CollectionViewToolbar({ viewMode, onViewModeChange, enabledViews = [
 	"table",
 	"cards",
 	"kanban"
-], size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
+], customViews, size = "m", onSizeChange, searchString, onSearchChange, loading, actionsStart, actionsEnd, compact, kanbanPropertyOptions, selectedKanbanProperty, onKanbanPropertyChange }) {
 	const [popoverOpen, setPopoverOpen] = useState(false);
-	const viewOptions = enabledViews.map((mode) => ({
-		value: mode,
-		label: VIEW_MODE_LABELS[mode],
-		icon: VIEW_MODE_ICONS[mode]
-	}));
+	const viewOptions = enabledViews.map((mode) => {
+		const custom = customViews?.find((entry) => entry.key === mode);
+		return {
+			value: mode,
+			label: VIEW_MODE_LABELS[mode] ?? custom?.name ?? mode,
+			icon: VIEW_MODE_ICONS[mode] ?? custom?.icon ?? /* @__PURE__ */ jsx(LayoutList, { size: iconSize.small })
+		};
+	});
 	const handleViewModeChange = useCallback((mode) => {
 		onViewModeChange?.(mode);
 	}, [onViewModeChange]);
@@ -8651,7 +8868,7 @@ var DEFAULT_ENABLED_VIEWS = [
 *
 * @group Collection View
 */
-function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
+function CollectionView({ dataController, properties, propertiesOrder, displayedColumnIds, idProperty = "id", titleProperty, title, viewMode: viewModeProp, defaultViewMode = "list", enabledViews = DEFAULT_ENABLED_VIEWS, onViewModeChange: onViewModeChangeProp, size: sizeProp, defaultSize = "m", onSizeChange: onSizeChangeProp, kanbanProperty: kanbanPropertyProp, kanbanPropertyOptions, onKanbanPropertyChange: onKanbanPropertyChangeProp, onRowClick, onRowCreate, canCreate = true, selectionEnabled, selectionController, highlightedItems, onMultipleDelete, cellRenderer, emptyComponent, customViews, toolbarActionsStart, toolbarActionsEnd, hideToolbar, hoverRow = true, onColumnResize, onColumnsOrderChange, className }) {
 	const [internalViewMode, setInternalViewMode] = useState(defaultViewMode);
 	const viewMode = viewModeProp ?? internalViewMode;
 	const onViewModeChange = useCallback((mode) => {
@@ -8712,7 +8929,29 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 		highlightedItems,
 		emptyComponent
 	};
+	const customViewEntries = useMemo(() => {
+		if (!customViews) return [];
+		return Object.entries(customViews).filter(([key]) => !DEFAULT_ENABLED_VIEWS.includes(key)).map(([key, entry]) => {
+			const isBare = typeof entry === "function";
+			return {
+				key,
+				name: isBare ? key : entry.name ?? key,
+				icon: isBare ? void 0 : entry.icon,
+				Component: isBare ? entry : entry.Component
+			};
+		});
+	}, [customViews]);
 	function renderView() {
+		const custom = customViewEntries.find((entry) => entry.key === viewMode);
+		if (custom) {
+			const { Component } = custom;
+			return /* @__PURE__ */ jsx(Component, {
+				...sharedProps,
+				onRowCreate: canCreate ? onRowCreate : void 0,
+				canCreate,
+				size
+			});
+		}
 		switch (viewMode) {
 			case "table": return /* @__PURE__ */ jsx(CollectionTableView, {
 				...sharedProps,
@@ -8763,6 +9002,7 @@ function CollectionView({ dataController, properties, propertiesOrder, displayed
 				viewMode,
 				onViewModeChange: enabledViews.length > 1 ? onViewModeChange : void 0,
 				enabledViews,
+				customViews: customViewEntries,
 				size,
 				onSizeChange,
 				searchString: dataController.searchString,
@@ -8782,6 +9022,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, accentTextMixin, cardClickableMixin, cardMixin, cardSelectedMixin, cls, codeSurfaceMixin, 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