@diwauhris/ui 1.6.0 → 1.7.1

package/lib/assets/ui.css

@@ -482,6 +482,11 @@
   margin: auto;
 }
 
+.-mx-5 {
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+}
+
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -510,6 +515,10 @@
   margin-top: -0.125rem;
 }
 
+.-mt-4 {
+  margin-top: -1rem;
+}
+
 .mb-0\.5 {
   margin-bottom: 0.125rem;
 }
@@ -610,10 +619,6 @@
   margin-top: 2.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -3310,6 +3315,10 @@
   line-height: 1;
 }
 
+.text-\[100px\] {
+  font-size: 100px;
+}
+
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -3350,6 +3359,10 @@
   font-size: 7px;
 }
 
+.text-\[80px\] {
+  font-size: 80px;
+}
+
 .text-\[8px\] {
   font-size: 8px;
 }
@@ -3798,6 +3811,14 @@
   text-decoration-line: line-through;
 }
 
+.decoration-amber-500\/60 {
+  text-decoration-color: rgb(245 158 11 / 0.6);
+}
+
+.underline-offset-2 {
+  text-underline-offset: 2px;
+}
+
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -3813,6 +3834,10 @@
   color: rgb(148 163 184 / var(--tw-placeholder-opacity, 1));
 }
 
+.accent-brand-blue {
+  accent-color: #034EA2;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -3853,6 +3878,14 @@
   opacity: 0.8;
 }
 
+.opacity-\[0\.07\] {
+  opacity: 0.07;
+}
+
+.opacity-\[0\.12\] {
+  opacity: 0.12;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -4673,6 +4706,9 @@ body {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.hover\:decoration-amber-700:hover {
+  text-decoration-color: #b45309;
+}
 .hover\:opacity-100:hover {
   opacity: 1;
 }
@@ -4784,6 +4820,10 @@ body {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
 }
+.focus-visible\:ring-amber-600:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity, 1));
+}
 .focus-visible\:ring-brand-blue\/15:focus-visible {
   --tw-ring-color: rgb(3 78 162 / 0.15);
 }
@@ -5052,6 +5092,9 @@ body {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+  .sm\:text-\[120px\] {
+    font-size: 120px;
+  }
 }
 @media (min-width: 768px) {
   .md\:relative {
@@ -5180,3 +5223,9 @@ body {
     grid-template-columns: 340px minmax(0,1fr);
   }
 }
+.\[\&\>svg\]\:h-24>svg {
+  height: 6rem;
+}
+.\[\&\>svg\]\:w-24>svg {
+  width: 6rem;
+}

package/lib/index.cjs

@@ -1475,7 +1475,17 @@ function SegmentedControl({ options, defaultValue, value: controlledValue, onVal
 }
 //#endregion
 //#region src/ui-library/gallery/validation-summary/ValidationSummary.tsx
-function ValidationSummary({ issues, heading = "Review these fields before saving", className = "" }) {
+function scrollToField(domId) {
+	const el = document.getElementById(domId);
+	if (!el) return;
+	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	el.scrollIntoView({
+		behavior: prefersReducedMotion ? "auto" : "smooth",
+		block: "center"
+	});
+	(el.querySelector("input,select,textarea,[tabindex]") ?? el).focus();
+}
+function ValidationSummary({ issues, heading = "Review these fields before saving", fieldIds, fieldLabels, className = "" }) {
 	if (issues.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "alert",
@@ -1485,14 +1495,24 @@ function ValidationSummary({ issues, heading = "Review these fields before savin
 			children: heading
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
 			className: "mt-2 list-disc space-y-1 pl-5",
-			children: issues.map((issue) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "font-semibold",
-					children: [issue.field, ":"]
-				}),
-				" ",
-				issue.message
-			] }, `${issue.field}:${issue.message}`))
+			children: issues.map((issue) => {
+				const displayLabel = fieldLabels?.[issue.field] ?? issue.field;
+				const domId = fieldIds?.[issue.field];
+				const label = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "font-semibold",
+						children: [displayLabel, ":"]
+					}),
+					" ",
+					issue.message
+				] });
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: domId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => scrollToField(domId),
+					className: "underline decoration-amber-500/60 underline-offset-2 hover:decoration-amber-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-amber-600 rounded text-left",
+					children: label
+				}) : label }, `${issue.field}:${issue.message}`);
+			})
 		})]
 	});
 }
@@ -2879,53 +2899,72 @@ function getPageNumbers(current, total) {
 	pages.push(total);
 	return pages;
 }
-function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination" }) {
-	if (totalPages <= 1) return null;
+function Pagination({ page, totalPages, onPageChange, ariaLabel = "Pagination", totalItems, pageSize, itemLabel = "items" }) {
+	if (totalPages <= 1 && !totalItems) return null;
+	const showRecordCount = typeof totalItems === "number" && typeof pageSize === "number";
+	const rangeStart = showRecordCount ? (page - 1) * pageSize + 1 : null;
+	const rangeEnd = showRecordCount ? Math.min(page * pageSize, totalItems) : null;
 	const pageNumbers = getPageNumbers(page, totalPages);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
-		"aria-label": ariaLabel,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
-			className: "list-none flex items-center gap-1",
-			role: "list",
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-1.5",
+		children: [totalPages > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+			"aria-label": ariaLabel,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ol", {
+				className: "list-none flex items-center gap-1",
+				role: "list",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(page - 1),
+						disabled: page <= 1,
+						"aria-label": "Previous page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) }),
+					pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
+							children: "…"
+						})
+					}, `ellipsis-${idx}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(n),
+						"aria-label": `Page ${n}`,
+						"aria-current": n === page ? "page" : void 0,
+						className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
+						children: n
+					}) }, n)),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => onPageChange(page + 1),
+						disabled: page >= totalPages,
+						"aria-label": "Next page",
+						className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
+							size: 16,
+							"aria-hidden": "true"
+						})
+					}) })
+				]
+			})
+		}), showRecordCount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+			className: "text-[11px] font-bold tabular-nums text-slate-400",
+			"aria-live": "polite",
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(page - 1),
-					disabled: page <= 1,
-					"aria-label": "Previous page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) }),
-				pageNumbers.map((n, idx) => n === "ellipsis" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "flex h-9 w-9 items-center justify-center text-xs font-bold text-slate-300",
-						children: "…"
-					})
-				}, `ellipsis-${idx}`) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(n),
-					"aria-label": `Page ${n}`,
-					"aria-current": n === page ? "page" : void 0,
-					className: ["flex h-9 w-9 items-center justify-center rounded-md text-xs font-bold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30", n === page ? "bg-brand-blue text-white shadow-md shadow-brand-blue/20" : "border border-slate-200 bg-white text-slate-500 hover:border-slate-300 hover:text-slate-800"].filter(Boolean).join(" "),
-					children: n
-				}) }, n)),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => onPageChange(page + 1),
-					disabled: page >= totalPages,
-					"aria-label": "Next page",
-					className: "flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-slate-500 transition hover:border-slate-300 hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30 disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, {
-						size: 16,
-						"aria-hidden": "true"
-					})
-				}) })
+				"Showing ",
+				rangeStart,
+				"–",
+				rangeEnd,
+				" of ",
+				totalItems,
+				" ",
+				itemLabel
 			]
-		})
+		})]
 	});
 }
 //#endregion
@@ -3846,6 +3885,100 @@ function EmptyState({ title, hint, icon, action, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/status-page/StatusPage.tsx
+/**
+* Named presets for the three common status states.
+* Each preset supplies code, eyebrow, title, and description.
+* Consumer always provides actions — presets never include navigation.
+*
+* Usage:
+*   <StatusPage
+*     {...STATUS_PAGE_PRESETS.notFound}
+*     primaryAction={{ label: 'Go to Dashboard', onClick: () => navigate('/dashboard') }}
+*     secondaryAction={{ label: 'Go Back', onClick: () => navigate(-1) }}
+*   />
+*/
+var STATUS_PAGE_PRESETS = {
+	notFound: {
+		code: "404",
+		eyebrow: "404 — Not Found",
+		title: "Page Not Found",
+		description: "The page you're looking for doesn't exist or may have been moved."
+	},
+	forbidden: {
+		code: "403",
+		eyebrow: "403 — Access Restricted",
+		title: "Access Restricted",
+		description: "You don't have permission to view this page. Contact your system administrator if you need access."
+	},
+	serverError: {
+		code: "500",
+		eyebrow: "500 — Server Error",
+		title: "Something Went Wrong",
+		description: "We encountered an unexpected problem. Please try again or return to the dashboard."
+	}
+};
+var BASE_ANCHOR = "inline-flex items-center justify-center transition-all duration-150 ease-out active:scale-[.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 select-none h-10 gap-2 rounded-md px-4 text-sm";
+var ANCHOR_PRIMARY = `${BASE_ANCHOR} font-bold bg-brand-blue text-white shadow-lg shadow-brand-blue/25 hover:bg-brand-navy hover:shadow-xl hover:shadow-brand-blue/30 focus-visible:ring-brand-blue/30`;
+var ANCHOR_OUTLINE = `${BASE_ANCHOR} font-semibold border border-slate-300 bg-white text-slate-700 shadow-sm hover:border-brand-blue/40 hover:bg-blue-50/40 hover:text-brand-blue focus-visible:ring-brand-blue/20`;
+function ActionButton({ action, variant }) {
+	if (action.href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		href: action.href,
+		className: variant === "primary" ? ANCHOR_PRIMARY : ANCHOR_OUTLINE,
+		children: action.label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+		variant,
+		onClick: action.onClick,
+		children: action.label
+	});
+}
+function StatusPage({ eyebrow, title, description, code, icon, primaryAction, secondaryAction, className = "" }) {
+	const hasActions = primaryAction || secondaryAction;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `relative flex min-h-screen items-center justify-center bg-surface-page px-6 py-16 overflow-hidden ${className}`,
+		children: [code ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none font-heading font-bold text-brand-navy opacity-[0.07] text-[80px] sm:text-[120px] leading-none",
+			children: code
+		}) : icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute select-none text-brand-navy opacity-[0.12]",
+			style: { fontSize: 0 },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "block [&>svg]:h-24 [&>svg]:w-24",
+				children: icon
+			})
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "relative z-10 max-w-sm w-full os-slide-up",
+			children: [
+				eyebrow && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mb-3 text-[11px] font-bold uppercase tracking-[0.18em] text-brand-sky",
+					children: eyebrow
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+					className: "font-heading text-3xl font-bold text-brand-navy leading-tight",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-3 text-sm font-medium text-slate-500 leading-relaxed",
+					children: description
+				}),
+				hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-8 flex flex-wrap items-center gap-3",
+					children: [primaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+						action: primaryAction,
+						variant: "primary"
+					}), secondaryAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+						action: secondaryAction,
+						variant: "outline"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/employee-card/EmployeeCard.tsx
 function EmployeeCard({ name, role, avatarSrc, status, meta, actions, className = "" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
@@ -7434,6 +7567,211 @@ function StatusDot({ status, label, className = "" }) {
 	});
 }
 //#endregion
+//#region src/ui-library/gallery/column-manager/ColumnManager.tsx
+/**
+* ColumnManager — Design System Component
+*
+* A dropdown panel for managing table column visibility and order.
+* Provides checkboxes to show/hide individual columns and up/down
+* buttons to reorder them. Includes a reset action.
+*
+* Purely presentational — all state is owned by the caller.
+*
+* Usage:
+*   const [hidden, setHidden] = useState<string[]>([]);
+*   const [order, setOrder] = useState<string[] | null>(null);
+*
+*   <ColumnManager
+*     columns={[{ key: 'name', label: 'Name' }, { key: 'dept', label: 'Department' }]}
+*     hiddenColumnKeys={hidden}
+*     columnOrder={order}
+*     onHiddenColumnKeysChange={setHidden}
+*     onColumnOrderChange={setOrder}
+*     onReset={() => { setHidden([]); setOrder(null); }}
+*   />
+*
+* Accessibility:
+*   - Trigger button has aria-expanded and aria-controls.
+*   - Panel has role="region" and aria-label.
+*   - Each checkbox is labelled via htmlFor + id.
+*   - Reorder buttons have descriptive aria-labels.
+*   - Panel closes on Escape, focus returns to the trigger.
+*/
+/**
+* Apply a stored column order to the runtime column array.
+*
+* Rules:
+* - Keys in `order` that don't exist in `columns` are silently ignored
+*   (forward compatibility when columns are removed).
+* - Columns not present in `order` are appended at the end in their
+*   original relative order (forward compatibility when columns are added).
+* - When `order` is null the original array is returned unchanged.
+*/
+function applyColumnOrder(columns, order) {
+	if (!order) return columns;
+	const byKey = new Map(columns.map((c) => [c.key, c]));
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const key of order) {
+		const col = byKey.get(key);
+		if (col) {
+			result.push(col);
+			seen.add(key);
+		}
+	}
+	for (const col of columns) if (!seen.has(col.key)) result.push(col);
+	return result;
+}
+function ColumnManager({ columns, hiddenColumnKeys, columnOrder, onHiddenColumnKeysChange, onColumnOrderChange, onReset, triggerLabel = "Columns" }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const triggerRef = (0, react.useRef)(null);
+	const panelRef = (0, react.useRef)(null);
+	const panelId = "cm-panel";
+	const orderedColumns = applyColumnOrder(columns, columnOrder);
+	const hiddenSet = new Set(hiddenColumnKeys);
+	const hiddenCount = hiddenColumnKeys.length;
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handlePointerDown = (e) => {
+			if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) return;
+			setOpen(false);
+		};
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				setOpen(false);
+				triggerRef.current?.focus();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open]);
+	function toggleColumn(key) {
+		onHiddenColumnKeysChange(hiddenSet.has(key) ? hiddenColumnKeys.filter((k) => k !== key) : [...hiddenColumnKeys, key]);
+	}
+	function moveUp(index) {
+		if (index === 0) return;
+		const next = [...orderedColumns];
+		[next[index - 1], next[index]] = [next[index], next[index - 1]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	function moveDown(index) {
+		if (index === orderedColumns.length - 1) return;
+		const next = [...orderedColumns];
+		[next[index], next[index + 1]] = [next[index + 1], next[index]];
+		onColumnOrderChange(next.map((c) => c.key));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative inline-block",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			ref: triggerRef,
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": open ? panelId : void 0,
+			onClick: () => setOpen((v) => !v),
+			className: "inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-600 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+			children: [
+				triggerLabel,
+				hiddenCount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "rounded-full bg-brand-blue/10 px-1.5 py-0.5 font-bold text-brand-blue",
+					children: [hiddenCount, " hidden"]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, {
+					size: 13,
+					className: `transition-transform ${open ? "rotate-180" : ""}`,
+					"aria-hidden": "true"
+				})
+			]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id: panelId,
+			ref: panelRef,
+			role: "region",
+			"aria-label": "Manage columns",
+			className: "absolute right-0 top-full z-30 mt-1 flex w-64 flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-xl",
+			style: { maxHeight: 400 },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex shrink-0 items-center justify-between border-b border-slate-100 px-4 py-2.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs font-bold text-slate-700",
+					children: "Columns"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						onReset();
+						setOpen(false);
+					},
+					className: "rounded-md px-2 py-1 text-[11px] font-bold text-slate-400 hover:bg-slate-100 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+					children: "Reset"
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "overflow-y-auto",
+				role: "list",
+				children: orderedColumns.map((col, idx) => {
+					const visible = !hiddenSet.has(col.key);
+					const checkboxId = `cm-col-${col.key}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+						className: "flex items-center gap-2 border-b border-slate-50 px-3 py-2 last:border-0",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								type: "checkbox",
+								id: checkboxId,
+								checked: visible,
+								onChange: () => toggleColumn(col.key),
+								className: "h-3.5 w-3.5 rounded accent-brand-blue focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+								htmlFor: checkboxId,
+								className: `flex-1 cursor-pointer text-xs font-medium ${visible ? "text-slate-700" : "text-slate-400"}`,
+								children: col.label
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex shrink-0 gap-0.5",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} up`,
+									disabled: idx === 0,
+									onClick: () => moveUp(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▲"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"aria-label": `Move ${col.label} down`,
+									disabled: idx === orderedColumns.length - 1,
+									onClick: () => moveDown(idx),
+									className: "rounded p-1 text-slate-300 hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-blue/30 transition",
+									children: "▼"
+								})]
+							})
+						]
+					}, col.key);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/ui-library/gallery/status-dot/MaskedValue.tsx
+function MaskedValue({ value, masked, maskText = "••••• •••••", maskLabel = "Value restricted", className = "" }) {
+	if (!masked) return className ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className,
+		children: value
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: value });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-label": maskLabel,
+		title: maskLabel,
+		className: [
+			"inline-flex select-none items-center rounded-md bg-slate-100 px-2 py-0.5",
+			"font-mono text-xs font-medium text-slate-400 tracking-wider",
+			className
+		].filter(Boolean).join(" "),
+		children: maskText
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -7638,6 +7976,7 @@ exports.CardContent = CardContent;
 exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Checkbox = Checkbox;
+exports.ColumnManager = ColumnManager;
 exports.Combobox = Combobox;
 exports.CommandPalette = CommandPalette;
 exports.ConfirmAction = ConfirmAction;
@@ -7665,6 +8004,7 @@ exports.Input = Input;
 exports.IsoCubeBlock = IsoCubeBlock;
 exports.Kanban = Kanban;
 exports.LineChart = LineChart;
+exports.MaskedValue = MaskedValue;
 exports.Menu = Menu;
 exports.Modal = Modal;
 exports.OrgChart = OrgChart;
@@ -7682,6 +8022,7 @@ exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;
 exports.RadioItem = RadioItem;
 exports.ReportTemplate = ReportTemplate;
+exports.STATUS_PAGE_PRESETS = STATUS_PAGE_PRESETS;
 exports.Section = Section;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
@@ -7698,6 +8039,7 @@ exports.Spinner = Spinner;
 exports.Statistic = Statistic;
 exports.StatusBadge = StatusBadge;
 exports.StatusDot = StatusDot;
+exports.StatusPage = StatusPage;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tab = Tab;
@@ -7722,6 +8064,7 @@ exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
 exports.TreeView = TreeView;
 exports.ValidationSummary = ValidationSummary;
+exports.applyColumnOrder = applyColumnOrder;
 Object.defineProperty(exports, "colors", {
 	enumerable: true,
 	get: function() {