@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/dashboard/PageTabsManager/PageTabsManager.js

@@ -1,217 +1,226 @@
-import { BIGCONSOLE_PERMISSIONS as e } from "../../../../constants/permissions.js";
-import { SEMANTIC_COLORS as t } from "../../../utils/semanticTokens.js";
-import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { usePermissions as o } from "@burdenoff/fe-libs/shared/providers/shell";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { createPortal as u } from "react-dom";
+import { SECTION_FOCUS_RING as e } from "../../common/sectionStyles.js";
+import "../../common/index.js";
+import { BIGCONSOLE_PERMISSIONS as t } from "../../../../constants/permissions.js";
+import { SEMANTIC_COLORS as n } from "../../../utils/semanticTokens.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { usePermissions as s } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
 //#region src/bigconsole/components/dashboard/PageTabsManager/PageTabsManager.tsx
-function d({ pages: d, activePageId: f, onPageSelect: p, onPageCreate: m, onPageRename: h, onPageDuplicate: g, onPageDelete: _, onPagesReorder: v, editable: y = !0, className: b = "" }) {
-	let { hasPermission: x } = o(), S = x(e.DASHBOARD_PAGE_CREATE), C = x(e.DASHBOARD_PAGE_UPDATE), w = x(e.DASHBOARD_PAGE_DELETE), [T, E] = a(null), [D, O] = a(null), [k, A] = a(null), [j, M] = a(""), [N, P] = a(null), [F, I] = a({
+function f({ pages: f, activePageId: p, onPageSelect: m, onPageCreate: h, onPageRename: g, onPageDuplicate: _, onPageDelete: v, onPagesReorder: y, editable: b = !0, className: x = "" }) {
+	let { hasPermission: S } = s(), C = S(t.DASHBOARD_PAGE_CREATE), w = S(t.DASHBOARD_PAGE_UPDATE), T = S(t.DASHBOARD_PAGE_DELETE), [E, D] = o(null), [O, k] = o(null), [A, j] = o(null), [M, N] = o(""), [P, F] = o(null), [I, L] = o({
 		x: 0,
 		y: 0
-	}), L = i(null), R = i(null);
-	r(() => {
-		k && L.current && (L.current.focus(), L.current.select());
-	}, [k]), r(() => {
+	}), R = a(null), z = a(null);
+	i(() => {
+		A && R.current && (R.current.focus(), R.current.select());
+	}, [A]), i(() => {
 		function e(e) {
-			R.current && !R.current.contains(e.target) && P(null);
+			z.current && !z.current.contains(e.target) && F(null);
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, []);
-	let z = n((e, t) => {
-		E(t), e.dataTransfer.effectAllowed = "move";
-	}, []), B = n((e, t) => {
-		e.preventDefault(), e.dataTransfer.dropEffect = "move", T && T !== t && O(t);
-	}, [T]), V = n(() => {
-		if (T && D && T !== D && v) {
-			let e = [...d], t = e.findIndex((e) => e.id === T), n = e.findIndex((e) => e.id === D);
+	let B = r((e, t) => {
+		D(t), e.dataTransfer.effectAllowed = "move";
+	}, []), V = r((e, t) => {
+		e.preventDefault(), e.dataTransfer.dropEffect = "move", E && E !== t && k(t);
+	}, [E]), H = r(() => {
+		if (E && O && E !== O && y) {
+			let e = [...f].sort((e, t) => e.order - t.order), t = e.findIndex((e) => e.id === E), n = e.findIndex((e) => e.id === O);
 			if (t !== -1 && n !== -1) {
 				let [r] = e.splice(t, 1);
-				e.splice(n, 0, r), v(e.map((e) => e.id));
+				e.splice(n, 0, r), y(e.map((e) => e.id));
 			}
 		}
-		E(null), O(null);
+		D(null), k(null);
 	}, [
-		T,
-		D,
-		d,
-		v
-	]), H = n((e, t) => {
-		e.preventDefault(), P(t), I({
+		E,
+		O,
+		f,
+		y
+	]), U = r((e, t) => {
+		e.preventDefault(), F(t), L({
 			x: e.clientX,
 			y: e.clientY
 		});
-	}, []), U = n((e, t) => {
-		A(e), M(t), P(null);
-	}, []), W = n(() => {
-		k && j.trim() && h && h(k, j.trim()), A(null), M("");
+	}, []), W = r((e, t) => {
+		j(e), N(t), F(null);
+	}, []), G = r(() => {
+		A && M.trim() && g && g(A, M.trim()), j(null), N("");
 	}, [
-		k,
-		j,
-		h
-	]), G = n(() => {
-		A(null), M("");
-	}, []), K = n((e) => {
-		e.key === "Enter" ? W() : e.key === "Escape" && G();
-	}, [W, G]);
-	return /* @__PURE__ */ l("div", {
-		ref: R,
-		className: b,
-		style: {
-			display: "flex",
-			alignItems: "center",
-			gap: "4px",
-			padding: "0 8px",
-			overflowX: "auto",
-			backgroundColor: t.bgSecondary,
-			borderBottom: `1px solid ${t.borderDefault}`,
-			minHeight: "40px"
-		},
+		A,
+		M,
+		g
+	]), K = r(() => {
+		j(null), N("");
+	}, []), q = r((e) => {
+		e.key === "Enter" ? G() : e.key === "Escape" && K();
+	}, [G, K]), J = [...f].sort((e, t) => e.order - t.order), Y = r((e, t) => {
+		if (A) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault(), m(t);
+			return;
+		}
+		let n = J.findIndex((e) => e.id === t);
+		if (n === -1) return;
+		let r = null;
+		if (e.key === "ArrowRight" ? r = (n + 1) % J.length : e.key === "ArrowLeft" ? r = (n - 1 + J.length) % J.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = J.length - 1), r === null) return;
+		e.preventDefault();
+		let i = J[r];
+		i && (m(i.id), (z.current?.querySelectorAll("[role=\"tab\"]"))?.[r]?.focus());
+	}, [
+		A,
+		m,
+		J
+	]);
+	return /* @__PURE__ */ u("div", {
+		ref: z,
+		className: `flex min-w-0 items-stretch gap-icon-gap border-b border-[var(--color-border-subtle)] bg-bg-surface px-2 ${x}`,
+		"data-testid": "page-tabs",
 		children: [
-			d.sort((e, t) => e.order - t.order).map((e) => /* @__PURE__ */ c("div", {
-				draggable: y && C && !k,
-				onDragStart: (t) => z(t, e.id),
-				onDragOver: (t) => B(t, e.id),
-				onDragEnd: V,
-				onContextMenu: (t) => y && (C || w || !!g) && H(t, e.id),
-				onClick: () => !k && p(e.id),
-				onDoubleClick: () => y && C && U(e.id, e.name),
-				style: {
-					position: "relative",
-					display: "flex",
-					alignItems: "center",
-					gap: "6px",
-					padding: "8px 12px",
-					backgroundColor: f === e.id ? t.bgPrimary : "transparent",
-					borderBottom: f === e.id ? `2px solid ${t.actionPrimaryBg}` : "2px solid transparent",
-					cursor: k === e.id ? "text" : "pointer",
-					opacity: T === e.id ? .5 : 1,
-					borderLeft: D === e.id ? `2px solid ${t.actionPrimaryBg}` : "none",
-					flexShrink: 0,
-					transition: "background-color 0.15s, border-color 0.15s"
-				},
-				children: k === e.id ? /* @__PURE__ */ c("input", {
-					ref: L,
-					type: "text",
-					value: j,
-					onChange: (e) => M(e.target.value),
-					onKeyDown: K,
-					onBlur: W,
-					style: {
-						width: "100px",
-						padding: "2px 4px",
-						border: `1px solid ${t.actionPrimaryBg}`,
-						borderRadius: "2px",
-						fontSize: "13px",
-						outline: "none",
-						backgroundColor: t.bgPrimary,
-						color: t.textPrimary
-					},
-					onClick: (e) => e.stopPropagation()
-				}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
-					style: {
-						fontSize: "13px",
-						fontWeight: f === e.id ? 600 : 400,
-						color: f === e.id ? t.textPrimary : t.textSecondary
-					},
-					children: e.name
-				}), e.widgetCount !== void 0 && /* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("div", {
+				role: "tablist",
+				"aria-label": "Dashboard pages",
+				className: "flex min-w-0 flex-1 items-center gap-icon-gap overflow-x-auto",
+				style: { minHeight: "var(--size-controlHeight-md)" },
+				children: J.map((t) => /* @__PURE__ */ l("div", {
+					role: "tab",
+					tabIndex: p === t.id ? 0 : -1,
+					"aria-selected": p === t.id,
+					draggable: b && w && !A,
+					onDragStart: (e) => B(e, t.id),
+					onDragOver: (e) => V(e, t.id),
+					onDragEnd: H,
+					onContextMenu: (e) => b && (w || T || !!_) && U(e, t.id),
+					onClick: () => !A && m(t.id),
+					onDoubleClick: () => b && w && W(t.id, t.name),
+					onKeyDown: (e) => Y(e, t.id),
+					className: e,
 					style: {
-						fontSize: "10px",
-						color: t.textTertiary,
-						backgroundColor: t.borderDefault,
-						padding: "1px 4px",
-						borderRadius: "8px"
+						position: "relative",
+						display: "flex",
+						alignItems: "center",
+						gap: "6px",
+						padding: "var(--space-controlGap) var(--space-formGap)",
+						minHeight: "var(--size-controlHeight-md)",
+						backgroundColor: p === t.id ? "var(--color-bg-sunken)" : "transparent",
+						borderBottom: p === t.id ? "2px solid var(--color-action-primary-bg)" : "2px solid transparent",
+						cursor: A === t.id ? "text" : "pointer",
+						opacity: E === t.id ? .5 : 1,
+						borderLeft: O === t.id ? `2px solid ${n.actionPrimaryBg}` : "none",
+						flexShrink: 0,
+						transition: "background-color 0.15s, border-color 0.15s"
 					},
-					children: e.widgetCount
-				})] })
-			}, e.id)),
-			y && m && S && /* @__PURE__ */ c("button", {
-				onClick: m,
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					padding: "6px 12px",
-					backgroundColor: t.actionPrimaryBg,
-					border: "none",
-					borderRadius: "4px",
-					cursor: "pointer",
-					color: "#ffffff",
-					fontSize: "12px",
-					fontWeight: 500,
-					flexShrink: 0,
-					marginLeft: "8px"
-				},
+					children: A === t.id ? /* @__PURE__ */ l("input", {
+						ref: R,
+						type: "text",
+						value: M,
+						onChange: (e) => N(e.target.value),
+						onKeyDown: q,
+						onBlur: G,
+						style: {
+							width: "100px",
+							padding: "2px 4px",
+							border: `1px solid ${n.actionPrimaryBg}`,
+							borderRadius: "2px",
+							fontSize: "13px",
+							outline: "none",
+							backgroundColor: n.bgPrimary,
+							color: n.textPrimary
+						},
+						onClick: (e) => e.stopPropagation()
+					}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+						style: {
+							fontSize: "13px",
+							fontWeight: p === t.id ? 600 : 400,
+							color: p === t.id ? n.textPrimary : n.textSecondary
+						},
+						children: t.name
+					}), t.widgetCount !== void 0 && /* @__PURE__ */ l("span", {
+						style: {
+							fontSize: "10px",
+							color: n.textTertiary,
+							backgroundColor: n.borderDefault,
+							padding: "1px 4px",
+							borderRadius: "8px"
+						},
+						children: t.widgetCount
+					})] })
+				}, t.id))
+			}),
+			b && h && C && /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: h,
+				className: "my-1 inline-flex min-h-control-sm flex-shrink-0 items-center justify-center rounded-button border border-[var(--color-border-subtle)] bg-bg-surface px-3 text-xs font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-accentSubtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
 				children: "+ Add Page"
 			}),
-			N && u(/* @__PURE__ */ l("div", {
+			P && d(/* @__PURE__ */ u("div", {
 				style: {
 					position: "fixed",
-					left: F.x,
-					top: F.y,
-					backgroundColor: t.bgPrimary,
-					border: `1px solid ${t.borderDefault}`,
+					left: I.x,
+					top: I.y,
+					backgroundColor: n.bgPrimary,
+					border: `1px solid ${n.borderDefault}`,
 					borderRadius: "6px",
-					boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+					boxShadow: "var(--shadow-elevation-3)",
 					zIndex: 99999,
 					minWidth: "140px"
 				},
 				onClick: (e) => e.stopPropagation(),
 				children: [
-					C && /* @__PURE__ */ c("button", {
+					w && /* @__PURE__ */ l("button", {
 						onClick: () => {
-							let e = d.find((e) => e.id === N);
-							e && U(N, e.name);
+							let e = f.find((e) => e.id === P);
+							e && W(P, e.name);
 						},
 						style: {
 							display: "block",
 							width: "100%",
 							padding: "8px 12px",
 							textAlign: "left",
-							backgroundColor: t.bgPrimary,
+							backgroundColor: n.bgPrimary,
 							border: "none",
 							cursor: "pointer",
 							fontSize: "13px",
-							color: t.textPrimary
+							color: n.textPrimary
 						},
 						children: "Rename"
 					}),
-					g && S && /* @__PURE__ */ c("button", {
+					_ && C && /* @__PURE__ */ l("button", {
 						onClick: () => {
-							g(N), P(null);
+							_(P), F(null);
 						},
 						style: {
 							display: "block",
 							width: "100%",
 							padding: "8px 12px",
 							textAlign: "left",
-							backgroundColor: t.bgPrimary,
+							backgroundColor: n.bgPrimary,
 							border: "none",
 							cursor: "pointer",
 							fontSize: "13px",
-							color: t.textPrimary
+							color: n.textPrimary
 						},
 						children: "Duplicate"
 					}),
-					_ && w && d.length > 1 && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", { style: {
+					v && T && f.length > 1 && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", { style: {
 						height: "1px",
-						backgroundColor: t.borderDefault,
+						backgroundColor: n.borderDefault,
 						margin: "4px 0"
-					} }), /* @__PURE__ */ c("button", {
+					} }), /* @__PURE__ */ l("button", {
 						onClick: () => {
-							window.confirm("Are you sure you want to delete this page?") && _(N), P(null);
+							window.confirm("Are you sure you want to delete this page?") && v(P), F(null);
 						},
 						style: {
 							display: "block",
 							width: "100%",
 							padding: "8px 12px",
 							textAlign: "left",
-							backgroundColor: t.bgPrimary,
+							backgroundColor: n.bgPrimary,
 							border: "none",
 							cursor: "pointer",
 							fontSize: "13px",
-							color: t.statusErrorText
+							color: n.statusErrorText
 						},
 						children: "Delete"
 					})] })
@@ -221,6 +230,6 @@ function d({ pages: d, activePageId: f, onPageSelect: p, onPageCreate: m, onPage
 	});
 }
 //#endregion
-export { d as default };
+export { f as default };
 
 //# sourceMappingURL=PageTabsManager.js.map

package/dist/bigconsole/components/dashboard/PageTabsManager/PageTabsManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTabsManager.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/PageTabsManager/PageTabsManager.tsx"],"sourcesContent":["/**\n * PageTabsManager Component\n *\n * Manages dashboard page tabs with drag-and-drop reordering.\n */\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { SEMANTIC_COLORS } from '../../../utils/semanticTokens';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../../constants/permissions';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardPageTab {\n  id: string;\n  name: string;\n  order: number;\n  widgetCount?: number;\n}\n\nexport interface PageTabsManagerProps {\n  pages: DashboardPageTab[];\n  activePageId: string;\n  onPageSelect: (pageId: string) => void;\n  onPageCreate?: () => void;\n  onPageRename?: (pageId: string, newName: string) => void;\n  onPageDuplicate?: (pageId: string) => void;\n  onPageDelete?: (pageId: string) => void;\n  onPagesReorder?: (pageIds: string[]) => void;\n  editable?: boolean;\n  className?: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function PageTabsManager({\n  pages,\n  activePageId,\n  onPageSelect,\n  onPageCreate,\n  onPageRename,\n  onPageDuplicate,\n  onPageDelete,\n  onPagesReorder,\n  editable = true,\n  className = '',\n}: PageTabsManagerProps) {\n  const { hasPermission } = usePermissions();\n  const canCreatePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_CREATE);\n  const canUpdatePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_UPDATE);\n  const canDeletePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_DELETE);\n\n  const [draggedId, setDraggedId] = useState<string | null>(null);\n  const [dragOverId, setDragOverId] = useState<string | null>(null);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editingName, setEditingName] = useState('');\n  const [contextMenuId, setContextMenuId] = useState<string | null>(null);\n  const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 });\n\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Focus input when editing\n  useEffect(() => {\n    if (editingId && editInputRef.current) {\n      editInputRef.current.focus();\n      editInputRef.current.select();\n    }\n  }, [editingId]);\n\n  // Close context menu on click outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setContextMenuId(null);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  // Drag handlers\n  const handleDragStart = useCallback((e: React.DragEvent, pageId: string) => {\n    setDraggedId(pageId);\n    e.dataTransfer.effectAllowed = 'move';\n  }, []);\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent, pageId: string) => {\n      e.preventDefault();\n      e.dataTransfer.dropEffect = 'move';\n      if (draggedId && draggedId !== pageId) {\n        setDragOverId(pageId);\n      }\n    },\n    [draggedId]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    if (draggedId && dragOverId && draggedId !== dragOverId && onPagesReorder) {\n      const orderedPages = [...pages];\n      const draggedIndex = orderedPages.findIndex((p) => p.id === draggedId);\n      const targetIndex = orderedPages.findIndex((p) => p.id === dragOverId);\n\n      if (draggedIndex !== -1 && targetIndex !== -1) {\n        const [draggedPage] = orderedPages.splice(draggedIndex, 1);\n        orderedPages.splice(targetIndex, 0, draggedPage);\n        onPagesReorder(orderedPages.map((p) => p.id));\n      }\n    }\n\n    setDraggedId(null);\n    setDragOverId(null);\n  }, [draggedId, dragOverId, pages, onPagesReorder]);\n\n  // Context menu handler\n  const handleContextMenu = useCallback((e: React.MouseEvent, pageId: string) => {\n    e.preventDefault();\n    setContextMenuId(pageId);\n    setContextMenuPos({ x: e.clientX, y: e.clientY });\n  }, []);\n\n  // Start editing\n  const handleStartEdit = useCallback((pageId: string, currentName: string) => {\n    setEditingId(pageId);\n    setEditingName(currentName);\n    setContextMenuId(null);\n  }, []);\n\n  // Save edit\n  const handleSaveEdit = useCallback(() => {\n    if (editingId && editingName.trim() && onPageRename) {\n      onPageRename(editingId, editingName.trim());\n    }\n    setEditingId(null);\n    setEditingName('');\n  }, [editingId, editingName, onPageRename]);\n\n  // Cancel edit\n  const handleCancelEdit = useCallback(() => {\n    setEditingId(null);\n    setEditingName('');\n  }, []);\n\n  // Handle key press in edit mode\n  const handleEditKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        handleSaveEdit();\n      } else if (e.key === 'Escape') {\n        handleCancelEdit();\n      }\n    },\n    [handleSaveEdit, handleCancelEdit]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: '4px',\n        padding: '0 8px',\n        overflowX: 'auto',\n        backgroundColor: SEMANTIC_COLORS.bgSecondary,\n        borderBottom: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n        minHeight: '40px',\n      }}\n    >\n      {/* Page Tabs */}\n      {pages\n        .sort((a, b) => a.order - b.order)\n        .map((page) => (\n          <div\n            key={page.id}\n            draggable={editable && canUpdatePage && !editingId}\n            onDragStart={(e) => handleDragStart(e, page.id)}\n            onDragOver={(e) => handleDragOver(e, page.id)}\n            onDragEnd={handleDragEnd}\n            onContextMenu={(e) =>\n              editable && (canUpdatePage || canDeletePage || !!onPageDuplicate) && handleContextMenu(e, page.id)\n            }\n            onClick={() => !editingId && onPageSelect(page.id)}\n            onDoubleClick={() => editable && canUpdatePage && handleStartEdit(page.id, page.name)}\n            style={{\n              position: 'relative',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '6px',\n              padding: '8px 12px',\n              backgroundColor: activePageId === page.id ? SEMANTIC_COLORS.bgPrimary : 'transparent',\n              borderBottom:\n                activePageId === page.id ? `2px solid ${SEMANTIC_COLORS.actionPrimaryBg}` : '2px solid transparent',\n              cursor: editingId === page.id ? 'text' : 'pointer',\n              opacity: draggedId === page.id ? 0.5 : 1,\n              borderLeft: dragOverId === page.id ? `2px solid ${SEMANTIC_COLORS.actionPrimaryBg}` : 'none',\n              flexShrink: 0,\n              transition: 'background-color 0.15s, border-color 0.15s',\n            }}\n          >\n            {editingId === page.id ? (\n              <input\n                ref={editInputRef}\n                type=\"text\"\n                value={editingName}\n                onChange={(e) => setEditingName(e.target.value)}\n                onKeyDown={handleEditKeyDown}\n                onBlur={handleSaveEdit}\n                style={{\n                  width: '100px',\n                  padding: '2px 4px',\n                  border: `1px solid ${SEMANTIC_COLORS.actionPrimaryBg}`,\n                  borderRadius: '2px',\n                  fontSize: '13px',\n                  outline: 'none',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n                onClick={(e) => e.stopPropagation()}\n              />\n            ) : (\n              <>\n                <span\n                  style={{\n                    fontSize: '13px',\n                    fontWeight: activePageId === page.id ? 600 : 400,\n                    color: activePageId === page.id ? SEMANTIC_COLORS.textPrimary : SEMANTIC_COLORS.textSecondary,\n                  }}\n                >\n                  {page.name}\n                </span>\n                {page.widgetCount !== undefined && (\n                  <span\n                    style={{\n                      fontSize: '10px',\n                      color: SEMANTIC_COLORS.textTertiary,\n                      backgroundColor: SEMANTIC_COLORS.borderDefault,\n                      padding: '1px 4px',\n                      borderRadius: '8px',\n                    }}\n                  >\n                    {page.widgetCount}\n                  </span>\n                )}\n              </>\n            )}\n          </div>\n        ))}\n\n      {/* Add Page Button */}\n      {editable && onPageCreate && canCreatePage && (\n        <button\n          onClick={onPageCreate}\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: '6px 12px',\n            backgroundColor: SEMANTIC_COLORS.actionPrimaryBg,\n            border: 'none',\n            borderRadius: '4px',\n            cursor: 'pointer',\n            color: '#ffffff',\n            fontSize: '12px',\n            fontWeight: 500,\n            flexShrink: 0,\n            marginLeft: '8px',\n          }}\n        >\n          + Add Page\n        </button>\n      )}\n\n      {/* Context Menu - rendered via portal */}\n      {contextMenuId &&\n        createPortal(\n          <div\n            style={{\n              position: 'fixed',\n              left: contextMenuPos.x,\n              top: contextMenuPos.y,\n              backgroundColor: SEMANTIC_COLORS.bgPrimary,\n              border: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n              borderRadius: '6px',\n              boxShadow: '0 8px 24px rgba(0,0,0,0.2)',\n              zIndex: 99999,\n              minWidth: '140px',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {canUpdatePage && (\n              <button\n                onClick={() => {\n                  const page = pages.find((p) => p.id === contextMenuId);\n                  if (page) handleStartEdit(contextMenuId, page.name);\n                }}\n                style={{\n                  display: 'block',\n                  width: '100%',\n                  padding: '8px 12px',\n                  textAlign: 'left',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  border: 'none',\n                  cursor: 'pointer',\n                  fontSize: '13px',\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n              >\n                Rename\n              </button>\n            )}\n            {onPageDuplicate && canCreatePage && (\n              <button\n                onClick={() => {\n                  onPageDuplicate(contextMenuId);\n                  setContextMenuId(null);\n                }}\n                style={{\n                  display: 'block',\n                  width: '100%',\n                  padding: '8px 12px',\n                  textAlign: 'left',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  border: 'none',\n                  cursor: 'pointer',\n                  fontSize: '13px',\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n              >\n                Duplicate\n              </button>\n            )}\n            {onPageDelete && canDeletePage && pages.length > 1 && (\n              <>\n                <div style={{ height: '1px', backgroundColor: SEMANTIC_COLORS.borderDefault, margin: '4px 0' }} />\n                <button\n                  onClick={() => {\n                    if (window.confirm('Are you sure you want to delete this page?')) {\n                      onPageDelete(contextMenuId);\n                    }\n                    setContextMenuId(null);\n                  }}\n                  style={{\n                    display: 'block',\n                    width: '100%',\n                    padding: '8px 12px',\n                    textAlign: 'left',\n                    backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                    border: 'none',\n                    cursor: 'pointer',\n                    fontSize: '13px',\n                    color: SEMANTIC_COLORS.statusErrorText,\n                  }}\n                >\n                  Delete\n                </button>\n              </>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nexport default PageTabsManager;\n"],"mappings":"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"}
+{"version":3,"file":"PageTabsManager.js","names":[],"sources":["../../../../../src/bigconsole/components/dashboard/PageTabsManager/PageTabsManager.tsx"],"sourcesContent":["/**\n * PageTabsManager Component\n *\n * Manages dashboard page tabs with drag-and-drop reordering.\n */\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { SEMANTIC_COLORS } from '../../../utils/semanticTokens';\nimport { BIGCONSOLE_PERMISSIONS } from '../../../../constants/permissions';\nimport { SECTION_FOCUS_RING } from '../../common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DashboardPageTab {\n  id: string;\n  name: string;\n  order: number;\n  widgetCount?: number;\n}\n\nexport interface PageTabsManagerProps {\n  pages: DashboardPageTab[];\n  activePageId: string;\n  onPageSelect: (pageId: string) => void;\n  onPageCreate?: () => void;\n  onPageRename?: (pageId: string, newName: string) => void;\n  onPageDuplicate?: (pageId: string) => void;\n  onPageDelete?: (pageId: string) => void;\n  onPagesReorder?: (pageIds: string[]) => void;\n  editable?: boolean;\n  className?: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function PageTabsManager({\n  pages,\n  activePageId,\n  onPageSelect,\n  onPageCreate,\n  onPageRename,\n  onPageDuplicate,\n  onPageDelete,\n  onPagesReorder,\n  editable = true,\n  className = '',\n}: PageTabsManagerProps) {\n  const { hasPermission } = usePermissions();\n  const canCreatePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_CREATE);\n  const canUpdatePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_UPDATE);\n  const canDeletePage = hasPermission(BIGCONSOLE_PERMISSIONS.DASHBOARD_PAGE_DELETE);\n\n  const [draggedId, setDraggedId] = useState<string | null>(null);\n  const [dragOverId, setDragOverId] = useState<string | null>(null);\n  const [editingId, setEditingId] = useState<string | null>(null);\n  const [editingName, setEditingName] = useState('');\n  const [contextMenuId, setContextMenuId] = useState<string | null>(null);\n  const [contextMenuPos, setContextMenuPos] = useState({ x: 0, y: 0 });\n\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Focus input when editing\n  useEffect(() => {\n    if (editingId && editInputRef.current) {\n      editInputRef.current.focus();\n      editInputRef.current.select();\n    }\n  }, [editingId]);\n\n  // Close context menu on click outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setContextMenuId(null);\n      }\n    }\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  // Drag handlers\n  const handleDragStart = useCallback((e: React.DragEvent, pageId: string) => {\n    setDraggedId(pageId);\n    e.dataTransfer.effectAllowed = 'move';\n  }, []);\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent, pageId: string) => {\n      e.preventDefault();\n      e.dataTransfer.dropEffect = 'move';\n      if (draggedId && draggedId !== pageId) {\n        setDragOverId(pageId);\n      }\n    },\n    [draggedId]\n  );\n\n  const handleDragEnd = useCallback(() => {\n    if (draggedId && dragOverId && draggedId !== dragOverId && onPagesReorder) {\n      // Sort by `order` first, exactly like the render below. Reordering from\n      // the raw prop order would persist a sequence that differs from the one\n      // the user just dragged whenever `pages` arrives unsorted.\n      const orderedPages = [...pages].sort((a, b) => a.order - b.order);\n      const draggedIndex = orderedPages.findIndex((p) => p.id === draggedId);\n      const targetIndex = orderedPages.findIndex((p) => p.id === dragOverId);\n\n      if (draggedIndex !== -1 && targetIndex !== -1) {\n        const [draggedPage] = orderedPages.splice(draggedIndex, 1);\n        orderedPages.splice(targetIndex, 0, draggedPage);\n        onPagesReorder(orderedPages.map((p) => p.id));\n      }\n    }\n\n    setDraggedId(null);\n    setDragOverId(null);\n  }, [draggedId, dragOverId, pages, onPagesReorder]);\n\n  // Context menu handler\n  const handleContextMenu = useCallback((e: React.MouseEvent, pageId: string) => {\n    e.preventDefault();\n    setContextMenuId(pageId);\n    setContextMenuPos({ x: e.clientX, y: e.clientY });\n  }, []);\n\n  // Start editing\n  const handleStartEdit = useCallback((pageId: string, currentName: string) => {\n    setEditingId(pageId);\n    setEditingName(currentName);\n    setContextMenuId(null);\n  }, []);\n\n  // Save edit\n  const handleSaveEdit = useCallback(() => {\n    if (editingId && editingName.trim() && onPageRename) {\n      onPageRename(editingId, editingName.trim());\n    }\n    setEditingId(null);\n    setEditingName('');\n  }, [editingId, editingName, onPageRename]);\n\n  // Cancel edit\n  const handleCancelEdit = useCallback(() => {\n    setEditingId(null);\n    setEditingName('');\n  }, []);\n\n  // Handle key press in edit mode\n  const handleEditKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        handleSaveEdit();\n      } else if (e.key === 'Escape') {\n        handleCancelEdit();\n      }\n    },\n    [handleSaveEdit, handleCancelEdit]\n  );\n\n  // `pages` is a prop — sorting it in place mutates the caller's array. Copy first.\n  const orderedPages = [...pages].sort((a, b) => a.order - b.order);\n\n  /**\n   * Keyboard support for the tablist.\n   *\n   * The tabs carry `role=\"tab\"` and a roving `tabIndex`, which promises the\n   * standard tab-list keyboard contract: arrows move between tabs, Home/End jump\n   * to the ends, and Enter/Space activate. Without this handler the roving index\n   * would leave every non-active page unreachable by keyboard.\n   */\n  const handleTabKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>, pageId: string) => {\n      if (editingId) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        onPageSelect(pageId);\n        return;\n      }\n\n      const currentIndex = orderedPages.findIndex((p) => p.id === pageId);\n      if (currentIndex === -1) return;\n\n      let nextIndex: number | null = null;\n      if (e.key === 'ArrowRight') nextIndex = (currentIndex + 1) % orderedPages.length;\n      else if (e.key === 'ArrowLeft') nextIndex = (currentIndex - 1 + orderedPages.length) % orderedPages.length;\n      else if (e.key === 'Home') nextIndex = 0;\n      else if (e.key === 'End') nextIndex = orderedPages.length - 1;\n\n      if (nextIndex === null) return;\n\n      e.preventDefault();\n      const nextPage = orderedPages[nextIndex];\n      if (!nextPage) return;\n      onPageSelect(nextPage.id);\n      // Roving tabindex: the newly selected tab becomes the focusable one, so\n      // move focus with it or the user loses their place in the strip.\n      const tabs = containerRef.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]');\n      tabs?.[nextIndex]?.focus();\n    },\n    [editingId, onPageSelect, orderedPages]\n  );\n\n  return (\n    <div\n      ref={containerRef}\n      className={`flex min-w-0 items-stretch gap-icon-gap border-b border-[var(--color-border-subtle)] bg-bg-surface px-2 ${className}`}\n      data-testid=\"page-tabs\"\n    >\n      <div\n        role=\"tablist\"\n        aria-label=\"Dashboard pages\"\n        className=\"flex min-w-0 flex-1 items-center gap-icon-gap overflow-x-auto\"\n        style={{ minHeight: 'var(--size-controlHeight-md)' }}\n      >\n        {/* Page Tabs */}\n        {orderedPages.map((page) => (\n          <div\n            key={page.id}\n            role=\"tab\"\n            tabIndex={activePageId === page.id ? 0 : -1}\n            aria-selected={activePageId === page.id}\n            draggable={editable && canUpdatePage && !editingId}\n            onDragStart={(e) => handleDragStart(e, page.id)}\n            onDragOver={(e) => handleDragOver(e, page.id)}\n            onDragEnd={handleDragEnd}\n            onContextMenu={(e) =>\n              editable && (canUpdatePage || canDeletePage || !!onPageDuplicate) && handleContextMenu(e, page.id)\n            }\n            onClick={() => !editingId && onPageSelect(page.id)}\n            onDoubleClick={() => editable && canUpdatePage && handleStartEdit(page.id, page.name)}\n            onKeyDown={(e) => handleTabKeyDown(e, page.id)}\n            className={SECTION_FOCUS_RING}\n            style={{\n              position: 'relative',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '6px',\n              padding: 'var(--space-controlGap) var(--space-formGap)',\n              minHeight: 'var(--size-controlHeight-md)',\n              backgroundColor: activePageId === page.id ? 'var(--color-bg-sunken)' : 'transparent',\n              borderBottom:\n                activePageId === page.id ? '2px solid var(--color-action-primary-bg)' : '2px solid transparent',\n              cursor: editingId === page.id ? 'text' : 'pointer',\n              opacity: draggedId === page.id ? 0.5 : 1,\n              borderLeft: dragOverId === page.id ? `2px solid ${SEMANTIC_COLORS.actionPrimaryBg}` : 'none',\n              flexShrink: 0,\n              transition: 'background-color 0.15s, border-color 0.15s',\n            }}\n          >\n            {editingId === page.id ? (\n              <input\n                ref={editInputRef}\n                type=\"text\"\n                value={editingName}\n                onChange={(e) => setEditingName(e.target.value)}\n                onKeyDown={handleEditKeyDown}\n                onBlur={handleSaveEdit}\n                style={{\n                  width: '100px',\n                  padding: '2px 4px',\n                  border: `1px solid ${SEMANTIC_COLORS.actionPrimaryBg}`,\n                  borderRadius: '2px',\n                  fontSize: '13px',\n                  outline: 'none',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n                onClick={(e) => e.stopPropagation()}\n              />\n            ) : (\n              <>\n                <span\n                  style={{\n                    fontSize: '13px',\n                    fontWeight: activePageId === page.id ? 600 : 400,\n                    color: activePageId === page.id ? SEMANTIC_COLORS.textPrimary : SEMANTIC_COLORS.textSecondary,\n                  }}\n                >\n                  {page.name}\n                </span>\n                {page.widgetCount !== undefined && (\n                  <span\n                    style={{\n                      fontSize: '10px',\n                      color: SEMANTIC_COLORS.textTertiary,\n                      backgroundColor: SEMANTIC_COLORS.borderDefault,\n                      padding: '1px 4px',\n                      borderRadius: '8px',\n                    }}\n                  >\n                    {page.widgetCount}\n                  </span>\n                )}\n              </>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {/* Add Page Button — outside the scroller so a long tab list never hides it */}\n      {editable && onPageCreate && canCreatePage && (\n        <button\n          type=\"button\"\n          onClick={onPageCreate}\n          className={`my-1 inline-flex min-h-control-sm flex-shrink-0 items-center justify-center rounded-button border border-[var(--color-border-subtle)] bg-bg-surface px-3 text-xs font-medium text-text-primary motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`}\n        >\n          + Add Page\n        </button>\n      )}\n\n      {/* Context Menu - rendered via portal */}\n      {contextMenuId &&\n        createPortal(\n          <div\n            style={{\n              position: 'fixed',\n              left: contextMenuPos.x,\n              top: contextMenuPos.y,\n              backgroundColor: SEMANTIC_COLORS.bgPrimary,\n              border: `1px solid ${SEMANTIC_COLORS.borderDefault}`,\n              borderRadius: '6px',\n              boxShadow: 'var(--shadow-elevation-3)',\n              zIndex: 99999,\n              minWidth: '140px',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {canUpdatePage && (\n              <button\n                onClick={() => {\n                  const page = pages.find((p) => p.id === contextMenuId);\n                  if (page) handleStartEdit(contextMenuId, page.name);\n                }}\n                style={{\n                  display: 'block',\n                  width: '100%',\n                  padding: '8px 12px',\n                  textAlign: 'left',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  border: 'none',\n                  cursor: 'pointer',\n                  fontSize: '13px',\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n              >\n                Rename\n              </button>\n            )}\n            {onPageDuplicate && canCreatePage && (\n              <button\n                onClick={() => {\n                  onPageDuplicate(contextMenuId);\n                  setContextMenuId(null);\n                }}\n                style={{\n                  display: 'block',\n                  width: '100%',\n                  padding: '8px 12px',\n                  textAlign: 'left',\n                  backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                  border: 'none',\n                  cursor: 'pointer',\n                  fontSize: '13px',\n                  color: SEMANTIC_COLORS.textPrimary,\n                }}\n              >\n                Duplicate\n              </button>\n            )}\n            {onPageDelete && canDeletePage && pages.length > 1 && (\n              <>\n                <div style={{ height: '1px', backgroundColor: SEMANTIC_COLORS.borderDefault, margin: '4px 0' }} />\n                <button\n                  onClick={() => {\n                    if (window.confirm('Are you sure you want to delete this page?')) {\n                      onPageDelete(contextMenuId);\n                    }\n                    setContextMenuId(null);\n                  }}\n                  style={{\n                    display: 'block',\n                    width: '100%',\n                    padding: '8px 12px',\n                    textAlign: 'left',\n                    backgroundColor: SEMANTIC_COLORS.bgPrimary,\n                    border: 'none',\n                    cursor: 'pointer',\n                    fontSize: '13px',\n                    color: SEMANTIC_COLORS.statusErrorText,\n                  }}\n                >\n                  Delete\n                </button>\n              </>\n            )}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nexport default PageTabsManager;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/SavedViewsDropdown/SavedViewsDropdown.js

@@ -101,11 +101,12 @@ function p({ dashboardId: p, currentFilters: m, currentLayout: h, onViewLoad: g,
 			position: "fixed",
 			top: z.top,
 			left: Math.max(16, z.left),
-			minWidth: "280px",
+			minWidth: "min(280px, calc(100vw - 2rem))",
+			maxWidth: "calc(100vw - 2rem)",
 			backgroundColor: U,
 			border: `1px solid ${n.borderDefault}`,
 			borderRadius: "8px",
-			boxShadow: "0 8px 24px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1)",
+			boxShadow: "var(--shadow-elevation-3)",
 			zIndex: 99998,
 			overflow: "hidden"
 		},
@@ -130,7 +131,7 @@ function p({ dashboardId: p, currentFilters: m, currentLayout: h, onViewLoad: g,
 					style: {
 						padding: "4px 10px",
 						backgroundColor: n.actionPrimaryBg,
-						color: "white",
+						color: "var(--color-action-primary-text)",
 						border: "none",
 						borderRadius: "4px",
 						cursor: "pointer",
@@ -305,20 +306,27 @@ function p({ dashboardId: p, currentFilters: m, currentLayout: h, onViewLoad: g,
 			left: 0,
 			right: 0,
 			bottom: 0,
-			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			backgroundColor: "var(--color-overlay-scrim)",
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			padding: "var(--space-formGap)",
 			zIndex: 99999,
 			isolation: "isolate"
 		},
 		onClick: () => M(!1),
 		children: /* @__PURE__ */ u("div", {
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": "saved-view-dialog-title",
 			style: {
-				width: "400px",
+				width: "100%",
+				maxWidth: "400px",
+				maxHeight: "85vh",
+				overflowY: "auto",
 				backgroundColor: U,
-				borderRadius: "8px",
-				boxShadow: "0 4px 24px rgba(0, 0, 0, 0.3)",
+				borderRadius: "var(--radius-card)",
+				boxShadow: "var(--shadow-elevation-3)",
 				overflow: "hidden",
 				position: "relative",
 				zIndex: 1e5,
@@ -332,6 +340,7 @@ function p({ dashboardId: p, currentFilters: m, currentLayout: h, onViewLoad: g,
 						borderBottom: `1px solid ${n.borderDefault}`
 					},
 					children: /* @__PURE__ */ l("h3", {
+						id: "saved-view-dialog-title",
 						style: {
 							margin: 0,
 							fontSize: "16px",
@@ -449,7 +458,7 @@ function p({ dashboardId: p, currentFilters: m, currentLayout: h, onViewLoad: g,
 						style: {
 							padding: "10px 20px",
 							backgroundColor: N.trim() ? n.actionPrimaryBg : n.bgSecondary,
-							color: N.trim() ? "white" : n.textSecondary,
+							color: N.trim() ? "var(--color-action-primary-text)" : n.textSecondary,
 							border: "none",
 							borderRadius: "6px",
 							cursor: N.trim() ? "pointer" : "not-allowed",