@protobase/ui 0.0.0-stage → 0.1.0

package/dist/mocks/products.js

@@ -0,0 +1,167 @@
+//#region src/mocks/products.ts
+const catalog = [
+	[
+		"M8 hex bolt A2, 100 pcs",
+		"FST",
+		1890
+	],
+	[
+		"M10 hex nut A2, 100 pcs",
+		"FST",
+		1240
+	],
+	[
+		"Stainless washer 8 mm, 250 pcs",
+		"FST",
+		990
+	],
+	[
+		"Cable tie 300 mm, 100 pcs",
+		"ELC",
+		650
+	],
+	[
+		"Cable gland M20, 25 pcs",
+		"ELC",
+		2340
+	],
+	[
+		"Junction box IP65",
+		"ELC",
+		1480
+	],
+	[
+		"Hydraulic hose 1/2 in, 5 m",
+		"HYD",
+		8650
+	],
+	[
+		"Hydraulic coupling 3/8 in",
+		"HYD",
+		1895
+	],
+	[
+		"Pallet wrap 500 mm",
+		"PKG",
+		740
+	],
+	[
+		"Corrugated box 400 x 300",
+		"PKG",
+		215
+	],
+	[
+		"Bubble wrap roll 50 m",
+		"PKG",
+		1990
+	],
+	[
+		"Safety gloves, size L",
+		"PPE",
+		395
+	],
+	[
+		"Safety glasses, clear",
+		"PPE",
+		450
+	],
+	[
+		"Ear defenders SNR 31",
+		"PPE",
+		1295
+	],
+	[
+		"Ball bearing 6204-2RS",
+		"BRG",
+		685
+	],
+	[
+		"Taper roller bearing 30205",
+		"BRG",
+		1420
+	],
+	[
+		"Timing belt HTD 5M, 600 mm",
+		"BLT",
+		2780
+	],
+	[
+		"V-belt SPA 1250",
+		"BLT",
+		1360
+	],
+	[
+		"Grease cartridge, 400 g",
+		"LUB",
+		920
+	],
+	[
+		"Machine oil ISO 68, 5 l",
+		"LUB",
+		3950
+	],
+	[
+		"Angle grinder disc 125 mm, 10 pcs",
+		"ABR",
+		1880
+	],
+	[
+		"Drill bit set HSS, 19 pcs",
+		"TLS",
+		3490
+	],
+	[
+		"Torque wrench 20-100 Nm",
+		"TLS",
+		14900
+	],
+	[
+		"Pneumatic cylinder 40 x 100",
+		"PNE",
+		6120
+	],
+	[
+		"Air hose PU 8 mm, 20 m",
+		"PNE",
+		2475
+	],
+	[
+		"LED panel 600 x 600, 40 W",
+		"LGT",
+		3290
+	],
+	[
+		"Pallet label roll 100 x 150",
+		"LBL",
+		1175
+	],
+	[
+		"Thermal printer ribbon",
+		"LBL",
+		890
+	],
+	[
+		"Euro pallet EPAL, used",
+		"PLT",
+		1150
+	],
+	[
+		"Roll container, galvanised",
+		"PLT",
+		9800
+	]
+];
+catalog.length;
+const productAt = (index) => {
+	const [name, category, priceCents] = catalog[index % catalog.length];
+	const slot = index % catalog.length;
+	return {
+		id: `P-${200 + slot}`,
+		sku: `${category}-${String(1e3 + slot * 7).padStart(4, "0")}`,
+		name,
+		category,
+		priceCents
+	};
+};
+//#endregion
+export { productAt };

package/dist/mocks/rng.js

@@ -0,0 +1,20 @@
+//#region src/mocks/rng.ts
+const mockNow = Date.UTC(2026, 9, 6, 9, 41);
+const hash = (seed, index) => {
+	let h = (seed ^ Math.imul(index + 2654435769, 2246822507)) >>> 0;
+	h = Math.imul(h ^ h >>> 16, 2246822507);
+	h = Math.imul(h ^ h >>> 13, 3266489909);
+	return (h ^ h >>> 16) >>> 0;
+};
+const rngAt = (seed, index) => {
+	let state = hash(seed, index);
+	return () => {
+		state = state + 1831565813 >>> 0;
+		let t = state;
+		t = Math.imul(t ^ t >>> 15, t | 1);
+		t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+		return ((t ^ t >>> 14) >>> 0) / 4294967296;
+	};
+};
+//#endregion
+export { hash, mockNow, rngAt };

package/dist/mocks/users.js

@@ -0,0 +1,63 @@
+//#region src/mocks/users.ts
+const users = [
+	{
+		id: "u1",
+		name: "Sanne M.",
+		initials: "SM",
+		hue: 250,
+		role: "Admin"
+	},
+	{
+		id: "u2",
+		name: "Jonas K.",
+		initials: "JK",
+		hue: 160,
+		role: "Sales"
+	},
+	{
+		id: "u3",
+		name: "Lieke D.",
+		initials: "LD",
+		hue: 20,
+		role: "Finance"
+	},
+	{
+		id: "u4",
+		name: "Tobias R.",
+		initials: "TR",
+		hue: 310,
+		role: "Warehouse"
+	},
+	{
+		id: "u5",
+		name: "Imke V.",
+		initials: "IV",
+		hue: 200,
+		role: "Sales"
+	},
+	{
+		id: "u6",
+		name: "Marek W.",
+		initials: "MW",
+		hue: 80,
+		role: "Warehouse"
+	},
+	{
+		id: "u7",
+		name: "Hanna B.",
+		initials: "HB",
+		hue: 350,
+		role: "Finance"
+	},
+	{
+		id: "u8",
+		name: "Daan P.",
+		initials: "DP",
+		hue: 120,
+		role: "Sales"
+	}
+];
+const userById = (id) => users.find((user) => user.id === id) ?? users[0];
+users.filter((user) => user.role === "Sales");
+//#endregion
+export { userById, users };

package/dist/primitives/avatar.js

@@ -0,0 +1,22 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/avatar.tsx
+const sizes = {
+	xs: "size-5 text-[9px]",
+	sm: "size-6 text-[10px]",
+	md: "size-8 text-xs"
+};
+const Avatar = ({ initials, hue, size = "sm", className }) => /* @__PURE__ */ jsx("span", {
+	className: cn("inline-flex shrink-0 select-none items-center justify-center rounded-full font-semibold text-white ring-2 ring-background", sizes[size], className),
+	style: { background: `oklch(0.58 0.13 ${hue})` },
+	children: initials
+});
+const AvatarStack = ({ people, size = "sm" }) => /* @__PURE__ */ jsx("span", {
+	className: "inline-flex -space-x-1",
+	children: people.map((person) => /* @__PURE__ */ jsx(Avatar, {
+		...person,
+		size
+	}, person.initials))
+});
+//#endregion
+export { Avatar, AvatarStack };

package/dist/primitives/badge.d.ts

@@ -0,0 +1 @@
+import { ReactNode } from "react";

package/dist/primitives/badge.js

@@ -0,0 +1,25 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/badge.tsx
+const tones = {
+	neutral: "bg-muted text-muted-foreground",
+	blue: "bg-primary-soft text-primary-text",
+	green: "bg-success-soft text-success-text",
+	amber: "bg-warning-soft text-warning-text",
+	red: "bg-danger-soft text-danger-text",
+	violet: "bg-violet-soft text-violet-text"
+};
+const dots = {
+	neutral: "bg-faint-foreground",
+	blue: "bg-primary",
+	green: "bg-success",
+	amber: "bg-warning",
+	red: "bg-danger",
+	violet: "bg-violet"
+};
+const Badge = ({ tone = "neutral", dot = true, children, className }) => /* @__PURE__ */ jsxs("span", {
+	className: cn("inline-flex h-5 items-center gap-1.5 rounded-full px-2 text-xs font-medium whitespace-nowrap", tones[tone], className),
+	children: [dot && /* @__PURE__ */ jsx("span", { className: cn("size-1.5 rounded-full", dots[tone]) }), children]
+});
+//#endregion
+export { Badge };

package/dist/primitives/button.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/button.tsx
+const variants = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary-hover shadow-sm",
+	secondary: "bg-background text-foreground border border-border-strong hover:bg-muted shadow-sm",
+	ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+	danger: "bg-background text-danger-text border border-border-strong hover:bg-danger-soft shadow-sm"
+};
+const sizes = {
+	sm: "h-7 px-2.5 text-xs gap-1.5",
+	md: "h-8 px-3 text-[13px] gap-2"
+};
+const Button = ({ variant = "secondary", size = "md", loading, className, children, disabled, ...rest }) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	disabled: disabled || loading,
+	className: cn("inline-flex shrink-0 items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:opacity-60 disabled:cursor-default", variants[variant], sizes[size], className),
+	...rest,
+	children: [loading && /* @__PURE__ */ jsx(Spinner, { className: "size-3.5" }), children]
+});
+//#endregion
+export { Button };

package/dist/primitives/checkbox.js

@@ -0,0 +1,21 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Check, Minus } from "lucide-react";
+//#region src/primitives/checkbox.tsx
+const Checkbox = ({ checked, indeterminate, onChange, label, className }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	role: "checkbox",
+	"aria-checked": indeterminate ? "mixed" : checked,
+	"aria-label": label,
+	onClick: () => onChange?.(!checked),
+	className: cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded border transition-colors after:absolute after:-inset-1 after:content-[\"\"] pointer-coarse:after:-inset-3.5", checked || indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-border-strong bg-background hover:border-faint-foreground", className),
+	children: indeterminate ? /* @__PURE__ */ jsx(Minus, {
+		className: "size-3",
+		strokeWidth: 3
+	}) : checked && /* @__PURE__ */ jsx(Check, {
+		className: "size-3",
+		strokeWidth: 3
+	})
+});
+//#endregion
+export { Checkbox };

package/dist/primitives/dialog.js

@@ -0,0 +1,41 @@
+import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/dialog.tsx
+/** A modal with a title, optional body and action buttons. Closes on Escape and on a click outside. */
+const Dialog = ({ title, description, onClose, actions, children }) => {
+	const panel = useRef(null);
+	useFocusTrap(panel, true, onClose);
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-[90] flex items-center justify-center bg-foreground/30 p-4",
+		onMouseDown: (event) => event.target === event.currentTarget && onClose(),
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: panel,
+			tabIndex: -1,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			className: "outline-none max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border bg-background p-4 shadow-pop sm:p-5",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-semibold",
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-[13px] text-muted-foreground",
+					children: description
+				}),
+				children && /* @__PURE__ */ jsx("div", {
+					className: "mt-4",
+					children
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>button]:min-h-11 sm:[&>button]:min-h-0",
+					children: actions
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { Dialog };

package/dist/primitives/input.js

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/input.tsx
+const Input = ({ leading, trailing, invalid, className, wrapperClassName, ...rest }) => /* @__PURE__ */ jsxs("span", {
+	className: cn("flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-muted-foreground shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20", invalid ? "border-danger" : "border-border-strong", wrapperClassName),
+	children: [
+		leading,
+		/* @__PURE__ */ jsx("input", {
+			className: cn("min-w-0 flex-1 bg-transparent text-[13px] text-foreground outline-none placeholder:text-faint-foreground", className),
+			...rest
+		}),
+		trailing
+	]
+});
+//#endregion
+export { Input };

package/dist/primitives/kbd.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/kbd.tsx
+const Kbd = ({ children }) => /* @__PURE__ */ jsx("kbd", {
+	className: "inline-flex h-5 items-center rounded border border-border-strong bg-background px-1.5 font-sans text-[11px] font-medium text-muted-foreground",
+	children
+});
+//#endregion
+export { Kbd };

package/dist/primitives/segmented.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/segmented.tsx
+const Segmented = ({ value, options, onChange }) => /* @__PURE__ */ jsx("span", {
+	className: "inline-flex h-7 rounded-md bg-muted p-0.5",
+	children: options.map((option) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => onChange(option.value),
+		className: cn("rounded px-2.5 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children: option.label
+	}, option.value))
+});
+//#endregion
+export { Segmented };

package/dist/primitives/sheet.js

@@ -0,0 +1,44 @@
+import { useFocusTrap } from "../lib/use-focus-trap.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/primitives/sheet.tsx
+/** A panel that rises from the bottom of the screen, for the filter panel on phones. */
+const Sheet = ({ title, open, onClose, children }) => {
+	const panel = useRef(null);
+	useFocusTrap(panel, open, onClose);
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fixed inset-0 z-[80]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 bg-foreground/40",
+			onClick: onClose,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panel,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": title,
+			tabIndex: -1,
+			className: "absolute inset-x-0 bottom-0 flex max-h-[85vh] flex-col rounded-t-xl border-t bg-background shadow-pop outline-none",
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex shrink-0 items-center justify-between border-b px-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-[15px] font-semibold",
+					children: title
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": "Close",
+					onClick: onClose,
+					className: "-mr-2 inline-flex size-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
+					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-6",
+				children
+			})]
+		})]
+	});
+};
+//#endregion
+export { Sheet };

package/dist/primitives/skeleton.js

@@ -0,0 +1,6 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/skeleton.tsx
+const Skeleton = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("block h-3 rounded bg-muted [animation:pb-shimmer_1.4s_ease-in-out_infinite]", className) });
+//#endregion
+export { Skeleton };

package/dist/primitives/spinner.js

@@ -0,0 +1,10 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+//#region src/primitives/spinner.tsx
+const Spinner = ({ className }) => /* @__PURE__ */ jsx(Loader2, {
+	"aria-label": "Loading",
+	className: cn("size-4 animate-spin", className)
+});
+//#endregion
+export { Spinner };

package/dist/primitives/switch.js

@@ -0,0 +1,14 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/switch.tsx
+const Switch = ({ checked, onChange, label }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	role: "switch",
+	"aria-checked": checked,
+	"aria-label": label,
+	onClick: () => onChange?.(!checked),
+	className: cn("relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors", checked ? "bg-primary" : "bg-border-strong"),
+	children: /* @__PURE__ */ jsx("span", { className: cn("size-4 rounded-full bg-white shadow transition-transform", checked ? "translate-x-[18px]" : "translate-x-0.5") })
+});
+//#endregion
+export { Switch };

package/dist/primitives/tooltip.js

@@ -0,0 +1,13 @@
+import { cn } from "../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/tooltip.tsx
+const Tooltip = ({ label, side = "right", visible, children }) => /* @__PURE__ */ jsxs("span", {
+	className: "group/tooltip relative inline-flex",
+	children: [children, /* @__PURE__ */ jsx("span", {
+		role: "tooltip",
+		className: cn("pointer-events-none absolute z-50 whitespace-nowrap rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background opacity-0 shadow-md transition-opacity group-hover/tooltip:opacity-100", visible && "opacity-100", side === "right" && "left-full top-1/2 ml-2 -translate-y-1/2", side === "top" && "bottom-full left-1/2 mb-2 -translate-x-1/2", side === "bottom" && "left-1/2 top-full mt-2 -translate-x-1/2"),
+		children: label
+	})]
+});
+//#endregion
+export { Tooltip };

package/dist/record-view/action-rail.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/action-rail.tsx
+/** Named actions with one-line descriptions; on phones a row of buttons, from `md` a list. */
+const ActionRail = ({ actions }) => /* @__PURE__ */ jsxs("div", {
+	className: "overflow-hidden rounded-lg border border-border bg-background",
+	children: [/* @__PURE__ */ jsx("h3", {
+		className: "hidden border-b border-border px-4 py-2.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground md:block",
+		children: "Actions"
+	}), /* @__PURE__ */ jsx("ul", {
+		className: "flex flex-wrap gap-2 p-2 md:block md:divide-y md:divide-border md:p-0",
+		children: actions.map(({ name, description, icon: Icon, onRun, blocked, running }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: onRun,
+			disabled: Boolean(blocked) || running,
+			title: blocked,
+			className: "flex min-h-11 items-center gap-2 rounded-md border border-border-strong px-3 text-left hover:bg-surface disabled:cursor-default disabled:opacity-60 md:min-h-0 md:w-full md:items-start md:gap-3 md:rounded-none md:border-0 md:px-4 md:py-3",
+			children: [/* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground md:mt-0.5" }), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+				className: "block text-[13px] font-medium text-foreground",
+				children: name
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 hidden text-xs leading-snug text-muted-foreground md:block",
+				children: description
+			})] })]
+		}) }, name))
+	})]
+});
+//#endregion
+export { ActionRail };

package/dist/record-view/field.js

@@ -0,0 +1,62 @@
+import { Avatar } from "../primitives/avatar.js";
+import { Button } from "../primitives/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from "lucide-react";
+//#region src/record-view/field.tsx
+const Field = ({ label, required, help, example, error, conflict, children }) => /* @__PURE__ */ jsxs("div", { children: [
+	/* @__PURE__ */ jsxs("div", {
+		className: "mb-1.5 flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "text-[13px] font-medium text-foreground",
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "ml-0.5 text-danger-text",
+				"aria-label": "required",
+				children: "*"
+			})]
+		}), conflict && /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5 text-warning-text",
+			title: `${conflict.user.name} saved a different value`,
+			children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
+				initials: conflict.user.initials,
+				hue: conflict.user.hue,
+				size: "xs"
+			})]
+		})]
+	}),
+	children,
+	help && /* @__PURE__ */ jsx("p", {
+		className: "mt-1.5 text-xs text-muted-foreground",
+		children: help
+	}),
+	example && /* @__PURE__ */ jsxs("p", {
+		className: "mt-0.5 text-xs text-faint-foreground",
+		children: ["Example: ", example]
+	}),
+	error && /* @__PURE__ */ jsx("p", {
+		className: "mt-1.5 text-xs font-medium text-danger-text",
+		children: error
+	}),
+	conflict && /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
+		children: [/* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
+			" saved this ",
+			conflict.ago,
+			": ",
+			/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
+		] }), /* @__PURE__ */ jsxs("span", {
+			className: "flex gap-1.5",
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: conflict.onKeepMine,
+				children: "Keep mine"
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: conflict.onUseTheirs,
+				children: "Use theirs"
+			})]
+		})]
+	})
+] });
+//#endregion
+export { Field };

package/dist/record-view/record-header.js

@@ -0,0 +1,50 @@
+import { AvatarStack } from "../primitives/avatar.js";
+import { Badge } from "../primitives/badge.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/record-view/record-header.tsx
+const RecordHeader = ({ collection, title, status, lastEditedBy, presence = [], actions }) => /* @__PURE__ */ jsxs("header", {
+	className: "flex flex-col gap-4 border-b border-border pb-6 md:flex-row md:items-end md:justify-between md:gap-6",
+	children: [/* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-xs text-muted-foreground",
+			children: collection
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-xl font-semibold tracking-tight text-foreground md:text-2xl",
+				children: title
+			}), /* @__PURE__ */ jsx(Badge, {
+				tone: status.tone,
+				children: status.label
+			})]
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "mt-1.5 text-xs text-muted-foreground",
+			children: lastEditedBy.name ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Last edited by ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: lastEditedBy.name
+				}),
+				" ",
+				lastEditedBy.ago
+			] }) : /* @__PURE__ */ jsxs(Fragment, { children: ["Last updated ", lastEditedBy.ago] })
+		})
+	] }), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4",
+		children: [presence.length > 0 && /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2 text-xs text-muted-foreground",
+			children: [
+				/* @__PURE__ */ jsx(AvatarStack, {
+					people: presence,
+					size: "md"
+				}),
+				presence.length,
+				" viewing"
+			]
+		}), actions]
+	})]
+});
+//#endregion
+export { RecordHeader };