@datarecce/ui 0.1.28 → 0.1.30

package/dist/{state-FkYREAs-.js → state-lPCQsWy5.js}

@@ -27,7 +27,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
-const require_urls = require('./urls-SazAekCZ.js');
+const require_mui_theme = require('./mui-theme-B2wm_cvZ.js');
+const require_urls = require('./urls-C4eAc82S.js');
 let _mui_material_styles = require("@mui/material/styles");
 let react = require("react");
 react = __toESM(react);
@@ -116,696 +117,6 @@ _mui_material_Popover = __toESM(_mui_material_Popover);
 let _mui_material_ButtonGroup = require("@mui/material/ButtonGroup");
 _mui_material_ButtonGroup = __toESM(_mui_material_ButtonGroup);
 
-//#region recce-source/js/src/components/ui/mui-theme.ts
-/**
-* MUI Theme Configuration for Recce
-*
-* This theme mirrors the existing Chakra UI theme tokens from theme.ts
-* to ensure visual consistency during the migration period.
-*
-* Color palette mappings:
-* - iochmara (custom blue) -> primary
-* - cyan -> secondary
-* - brand (orange) -> custom palette
-* - green -> success
-* - amber -> warning
-* - red -> error
-* - neutral -> grey
-*/
-const white = "#FFFFFF";
-const black = "#000000";
-const colors = {
-	white,
-	black,
-	iochmara: {
-		50: "#EAF3FB",
-		100: "#C4DDF3",
-		200: "#9EC6EB",
-		300: "#79B0E2",
-		400: "#5599D8",
-		500: "#3182CE",
-		600: "#2A6CA7",
-		700: "#225581",
-		800: "#193E5C",
-		900: "#102638",
-		950: "#060E14"
-	},
-	cyan: {
-		50: "#ECFEFF",
-		100: "#CFFAFE",
-		200: "#A5F3FC",
-		300: "#67E8F9",
-		400: "#22D3EE",
-		500: "#06B6D4",
-		600: "#0891B2",
-		700: "#0E7490",
-		800: "#155E75",
-		900: "#164E63",
-		950: "#083344"
-	},
-	neutral: {
-		50: "#FAFAFA",
-		100: "#F5F5F5",
-		200: "#E5E5E5",
-		300: "#D4D4D4",
-		400: "#A3A3A3",
-		500: "#737373",
-		600: "#525252",
-		700: "#404040",
-		800: "#262626",
-		900: "#171717",
-		950: "#0A0A0A"
-	},
-	amber: {
-		50: "#FFFBEB",
-		100: "#FEF3C7",
-		200: "#FDE68A",
-		300: "#FCD34D",
-		400: "#FBBF24",
-		500: "#F59E0B",
-		600: "#D97706",
-		700: "#B45309",
-		800: "#92400E",
-		900: "#78350F",
-		950: "#431407"
-	},
-	yellow: {
-		50: "#FEFCE8",
-		100: "#FEF9C3",
-		200: "#FEF08A",
-		300: "#FDE047",
-		400: "#FACC15",
-		500: "#EAB308",
-		600: "#CA8A04",
-		700: "#A16207",
-		800: "#854D0E",
-		900: "#713F12",
-		950: "#422006"
-	},
-	green: {
-		50: "#F0FDF4",
-		100: "#DCFCE7",
-		200: "#BBF7D0",
-		300: "#86EFAC",
-		400: "#4ADE80",
-		500: "#22C55E",
-		600: "#16A34A",
-		700: "#15803D",
-		800: "#166534",
-		900: "#14532D",
-		950: "#052E16"
-	},
-	red: {
-		50: "#FEF2F2",
-		100: "#FEE2E2",
-		200: "#FECACA",
-		300: "#FCA5A5",
-		400: "#F87171",
-		500: "#EF4444",
-		600: "#DC2626",
-		700: "#B91C1C",
-		800: "#991B1B",
-		900: "#7F1D1D",
-		950: "#450A0A"
-	},
-	rose: {
-		50: "#FFF1F2",
-		100: "#FFE4E6",
-		200: "#FECDD3",
-		300: "#FDA4AF",
-		400: "#FB7185",
-		500: "#F43F5E",
-		600: "#E11D48",
-		700: "#BE123C",
-		800: "#9F1239",
-		900: "#881337",
-		950: "#4C0519"
-	},
-	fuchsia: {
-		50: "#FDF4FF",
-		100: "#FAE8FF",
-		200: "#F5D0FE",
-		300: "#F0ABFC",
-		400: "#E879F9",
-		500: "#D946EF",
-		600: "#C026D3",
-		700: "#A21CAF",
-		800: "#86198F",
-		900: "#701A75",
-		950: "#4A044E"
-	},
-	brand: {
-		50: "#FFDED5",
-		100: "#FFC1B0",
-		200: "#FFA58C",
-		300: "#FF8967",
-		400: "#FF6E42",
-		500: "#FD541E",
-		600: "#F04104",
-		700: "#C93A06",
-		800: "#A23206",
-		900: "#7C2906",
-		950: "#571E05"
-	}
-};
-const semanticColors = {
-	envBase: colors.amber[500],
-	envCurrent: colors.iochmara[500]
-};
-/**
-* Helper to generate button color variants for a given color
-* Creates contained, outlined, and text variant styles
-*/
-function createButtonColorVariants(colorName, colorScale) {
-	return [
-		{
-			props: {
-				color: colorName,
-				variant: "contained"
-			},
-			style: {
-				backgroundColor: colorScale[500],
-				color: white,
-				"&:hover": { backgroundColor: colorScale[600] }
-			}
-		},
-		{
-			props: {
-				color: colorName,
-				variant: "outlined"
-			},
-			style: {
-				borderColor: colorScale[500],
-				color: colorScale[600],
-				"&:hover": {
-					borderColor: colorScale[600],
-					backgroundColor: `${colorScale[50]}80`
-				}
-			}
-		},
-		{
-			props: {
-				color: colorName,
-				variant: "text"
-			},
-			style: {
-				color: colorScale[600],
-				"&:hover": { backgroundColor: `${colorScale[50]}80` }
-			}
-		}
-	];
-}
-/**
-* Helper to generate CircularProgress color variants
-*/
-function createProgressColorVariant(colorName, colorScale) {
-	return {
-		props: { color: colorName },
-		style: { color: colorScale[500] }
-	};
-}
-/**
-* Helper to generate Badge color variants
-*/
-function createBadgeColorVariant(colorName, colorScale) {
-	return {
-		props: { color: colorName },
-		style: { "& .MuiBadge-badge": {
-			backgroundColor: colorScale[500],
-			color: white
-		} }
-	};
-}
-/**
-* Helper to generate Chip color variants
-*/
-function createChipColorVariants(colorName, colorScale) {
-	return [{
-		props: {
-			color: colorName,
-			variant: "filled"
-		},
-		style: {
-			backgroundColor: colorScale[500],
-			color: white,
-			"&:hover": { backgroundColor: colorScale[600] }
-		}
-	}, {
-		props: {
-			color: colorName,
-			variant: "outlined"
-		},
-		style: {
-			borderColor: colorScale[500],
-			color: colorScale[600]
-		}
-	}];
-}
-const buttonColorVariants = [
-	...createButtonColorVariants("iochmara", colors.iochmara),
-	...createButtonColorVariants("cyan", colors.cyan),
-	...createButtonColorVariants("amber", colors.amber),
-	...createButtonColorVariants("green", colors.green),
-	...createButtonColorVariants("red", colors.red),
-	...createButtonColorVariants("rose", colors.rose),
-	...createButtonColorVariants("fuchsia", colors.fuchsia),
-	...createButtonColorVariants("brand", colors.brand)
-];
-const progressColorVariants = [
-	createProgressColorVariant("iochmara", colors.iochmara),
-	createProgressColorVariant("cyan", colors.cyan),
-	createProgressColorVariant("amber", colors.amber),
-	createProgressColorVariant("green", colors.green),
-	createProgressColorVariant("red", colors.red),
-	createProgressColorVariant("rose", colors.rose),
-	createProgressColorVariant("fuchsia", colors.fuchsia),
-	createProgressColorVariant("brand", colors.brand),
-	createProgressColorVariant("neutral", colors.neutral)
-];
-const badgeColorVariants = [
-	createBadgeColorVariant("iochmara", colors.iochmara),
-	createBadgeColorVariant("cyan", colors.cyan),
-	createBadgeColorVariant("amber", colors.amber),
-	createBadgeColorVariant("green", colors.green),
-	createBadgeColorVariant("red", colors.red),
-	createBadgeColorVariant("rose", colors.rose),
-	createBadgeColorVariant("fuchsia", colors.fuchsia),
-	createBadgeColorVariant("brand", colors.brand),
-	createBadgeColorVariant("neutral", colors.neutral)
-];
-const chipColorVariants = [
-	...createChipColorVariants("iochmara", colors.iochmara),
-	...createChipColorVariants("cyan", colors.cyan),
-	...createChipColorVariants("amber", colors.amber),
-	...createChipColorVariants("green", colors.green),
-	...createChipColorVariants("red", colors.red),
-	...createChipColorVariants("rose", colors.rose),
-	...createChipColorVariants("fuchsia", colors.fuchsia),
-	...createChipColorVariants("brand", colors.brand),
-	...createChipColorVariants("neutral", colors.neutral)
-];
-const componentOverrides = {
-	MuiButton: {
-		defaultProps: { disableElevation: true },
-		variants: [{
-			props: { size: "xsmall" },
-			style: {
-				padding: "0 0.5rem",
-				fontSize: "0.75rem",
-				fontWeight: 500,
-				borderRadius: 4,
-				minHeight: "unset",
-				lineHeight: 1.5
-			}
-		}, ...buttonColorVariants],
-		styleOverrides: {
-			root: ({ theme, ownerState }) => ({
-				textTransform: "none",
-				fontWeight: 500,
-				borderRadius: 6,
-				...ownerState.color === "neutral" && ownerState.variant === "contained" && {
-					backgroundColor: colors.neutral[700],
-					color: white,
-					"&:hover": { backgroundColor: colors.neutral[800] }
-				},
-				...ownerState.color === "neutral" && ownerState.variant === "outlined" && {
-					borderColor: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[300],
-					color: theme.palette.mode === "dark" ? colors.neutral[100] : colors.neutral[900],
-					"&:hover": {
-						borderColor: theme.palette.mode === "dark" ? colors.neutral[400] : colors.neutral[400],
-						backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100]
-					}
-				},
-				...ownerState.color === "neutral" && ownerState.variant === "text" && {
-					color: theme.palette.mode === "dark" ? colors.neutral[200] : colors.neutral[700],
-					"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[100] }
-				}
-			}),
-			sizeSmall: {
-				padding: "0.25rem 0.75rem",
-				fontSize: "0.875rem"
-			},
-			sizeMedium: {
-				padding: "0.5rem 1rem",
-				fontSize: "1rem"
-			},
-			sizeLarge: {
-				padding: "0.75rem 1.5rem",
-				fontSize: "1.125rem"
-			},
-			contained: { "&:hover": { boxShadow: "none" } },
-			outlined: {
-				borderWidth: "1px",
-				"&:hover": { borderWidth: "1px" }
-			},
-			text: ({ theme }) => ({ "&:hover": { backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)" } })
-		}
-	},
-	MuiIconButton: { styleOverrides: {
-		root: { borderRadius: 6 },
-		sizeSmall: { padding: 4 },
-		sizeMedium: { padding: 8 },
-		sizeLarge: { padding: 12 }
-	} },
-	MuiTextField: {
-		defaultProps: {
-			variant: "outlined",
-			size: "small"
-		},
-		styleOverrides: { root: { "& .MuiOutlinedInput-root": { borderRadius: 6 } } }
-	},
-	MuiOutlinedInput: { styleOverrides: {
-		root: {
-			borderRadius: 6,
-			"&:hover .MuiOutlinedInput-notchedOutline": { borderColor: colors.iochmara[400] },
-			"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-				borderColor: colors.iochmara[500],
-				borderWidth: 2
-			}
-		},
-		notchedOutline: ({ theme }) => ({ borderColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[300] })
-	} },
-	MuiCheckbox: {
-		defaultProps: { color: "primary" },
-		styleOverrides: { root: { borderRadius: 4 } }
-	},
-	MuiSwitch: { defaultProps: { color: "primary" } },
-	MuiDialog: { styleOverrides: { paper: { borderRadius: 8 } } },
-	MuiDialogTitle: { styleOverrides: { root: {
-		fontWeight: 600,
-		fontSize: "1.125rem"
-	} } },
-	MuiMenu: { styleOverrides: { paper: ({ theme }) => ({
-		borderRadius: 8,
-		boxShadow: theme.shadows[3]
-	}) } },
-	MuiMenuItem: { styleOverrides: { root: ({ theme }) => ({
-		fontSize: "0.875rem",
-		padding: "0.5rem 0.75rem",
-		"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.neutral[600] : colors.neutral[100] },
-		"&.Mui-selected": {
-			backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
-			"&:hover": { backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[800] : colors.iochmara[100] }
-		}
-	}) } },
-	MuiChip: {
-		variants: [{
-			props: { size: "xsmall" },
-			style: {
-				height: 20,
-				fontSize: "0.625rem"
-			}
-		}, ...chipColorVariants],
-		styleOverrides: {
-			root: {
-				borderRadius: 6,
-				fontWeight: 500
-			},
-			sizeSmall: {
-				height: 24,
-				fontSize: "0.75rem"
-			},
-			sizeMedium: {
-				height: 32,
-				fontSize: "0.875rem"
-			}
-		}
-	},
-	MuiTooltip: { styleOverrides: {
-		tooltip: ({ theme }) => ({
-			backgroundColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800],
-			fontSize: "0.75rem",
-			padding: "0.25rem 0.5rem",
-			borderRadius: 4
-		}),
-		arrow: ({ theme }) => ({ color: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[800] })
-	} },
-	MuiAlert: { styleOverrides: {
-		root: { borderRadius: 6 },
-		standardSuccess: ({ theme }) => ({
-			backgroundColor: theme.palette.mode === "dark" ? colors.green[900] : colors.green[50],
-			color: theme.palette.mode === "dark" ? colors.green[200] : colors.green[800]
-		}),
-		standardWarning: ({ theme }) => ({
-			backgroundColor: theme.palette.mode === "dark" ? colors.amber[900] : colors.amber[50],
-			color: theme.palette.mode === "dark" ? colors.amber[200] : colors.amber[800]
-		}),
-		standardError: ({ theme }) => ({
-			backgroundColor: theme.palette.mode === "dark" ? colors.red[900] : colors.red[50],
-			color: theme.palette.mode === "dark" ? colors.red[200] : colors.red[800]
-		}),
-		standardInfo: ({ theme }) => ({
-			backgroundColor: theme.palette.mode === "dark" ? colors.iochmara[900] : colors.iochmara[50],
-			color: theme.palette.mode === "dark" ? colors.iochmara[200] : colors.iochmara[800]
-		})
-	} },
-	MuiTabs: { styleOverrides: { indicator: { height: 2 } } },
-	MuiTab: { styleOverrides: { root: {
-		textTransform: "none",
-		fontWeight: 500,
-		minHeight: 48
-	} } },
-	MuiAvatar: { styleOverrides: { root: { fontWeight: 500 } } },
-	MuiBadge: {
-		variants: badgeColorVariants,
-		styleOverrides: { badge: {
-			fontWeight: 500,
-			fontSize: "0.75rem"
-		} }
-	},
-	MuiCircularProgress: {
-		defaultProps: { color: "primary" },
-		variants: progressColorVariants
-	},
-	MuiLink: {
-		defaultProps: {
-			underline: "hover",
-			fontWeight: 500
-		},
-		styleOverrides: { root: {
-			color: colors.iochmara[600],
-			textDecorationColor: colors.iochmara[300],
-			"&:hover": { color: colors.iochmara[700] }
-		} }
-	},
-	MuiPaper: { styleOverrides: { rounded: { borderRadius: 8 } } },
-	MuiPopover: { styleOverrides: { paper: ({ theme }) => ({
-		borderRadius: 8,
-		boxShadow: theme.shadows[3]
-	}) } },
-	MuiDivider: { styleOverrides: { root: ({ theme }) => ({ borderColor: theme.palette.mode === "dark" ? colors.neutral[700] : colors.neutral[200] }) } },
-	MuiBreadcrumbs: { styleOverrides: { separator: ({ theme }) => ({ color: theme.palette.mode === "dark" ? colors.neutral[500] : colors.neutral[400] }) } }
-};
-const baseThemeOptions = {
-	palette: {
-		primary: {
-			main: colors.iochmara[500],
-			light: colors.iochmara[300],
-			dark: colors.iochmara[600],
-			contrastText: white
-		},
-		secondary: {
-			main: colors.cyan[500],
-			light: colors.cyan[400],
-			dark: colors.cyan[600],
-			contrastText: white
-		},
-		success: {
-			main: colors.green[500],
-			light: colors.green[400],
-			dark: colors.green[600],
-			contrastText: white
-		},
-		warning: {
-			main: colors.amber[500],
-			light: colors.amber[400],
-			dark: colors.amber[600],
-			contrastText: white
-		},
-		error: {
-			main: colors.red[500],
-			light: colors.red[400],
-			dark: colors.red[600],
-			contrastText: white
-		},
-		grey: {
-			50: colors.neutral[50],
-			100: colors.neutral[100],
-			200: colors.neutral[200],
-			300: colors.neutral[300],
-			400: colors.neutral[400],
-			500: colors.neutral[500],
-			600: colors.neutral[600],
-			700: colors.neutral[700],
-			800: colors.neutral[800],
-			900: colors.neutral[900]
-		}
-	},
-	typography: {
-		fontFamily: "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
-		fontWeightLight: 300,
-		fontWeightRegular: 400,
-		fontWeightMedium: 500,
-		fontWeightBold: 700,
-		h1: {
-			fontWeight: 700,
-			fontSize: "2.25rem",
-			lineHeight: 1.2
-		},
-		h2: {
-			fontWeight: 700,
-			fontSize: "1.875rem",
-			lineHeight: 1.2
-		},
-		h3: {
-			fontWeight: 600,
-			fontSize: "1.5rem",
-			lineHeight: 1.3
-		},
-		h4: {
-			fontWeight: 600,
-			fontSize: "1.25rem",
-			lineHeight: 1.4
-		},
-		h5: {
-			fontWeight: 600,
-			fontSize: "1.125rem",
-			lineHeight: 1.4
-		},
-		h6: {
-			fontWeight: 600,
-			fontSize: "1rem",
-			lineHeight: 1.5
-		},
-		body1: {
-			fontSize: "0.875rem",
-			lineHeight: 1.5
-		},
-		body2: {
-			fontSize: "0.75rem",
-			lineHeight: 1.5
-		},
-		button: {
-			textTransform: "none",
-			fontWeight: 500
-		}
-	},
-	shape: { borderRadius: 6 },
-	spacing: 4,
-	components: componentOverrides
-};
-const lightThemeOptions = {
-	...baseThemeOptions,
-	palette: {
-		...baseThemeOptions.palette,
-		mode: "light",
-		background: {
-			default: white,
-			paper: white
-		},
-		text: {
-			primary: colors.neutral[900],
-			secondary: colors.neutral[600]
-		}
-	}
-};
-const darkThemeOptions = {
-	...baseThemeOptions,
-	palette: {
-		...baseThemeOptions.palette,
-		mode: "dark",
-		background: {
-			default: colors.neutral[900],
-			paper: colors.neutral[800]
-		},
-		text: {
-			primary: colors.neutral[50],
-			secondary: colors.neutral[400]
-		}
-	}
-};
-const lightTheme = (0, _mui_material_styles.createTheme)(lightThemeOptions);
-const darkTheme = (0, _mui_material_styles.createTheme)(darkThemeOptions);
-function createPaletteColor(colorScale) {
-	return {
-		main: colorScale[500],
-		light: colorScale[300],
-		dark: colorScale[600],
-		contrastText: white
-	};
-}
-const customPaletteAdditions = {
-	brand: createPaletteColor(colors.brand),
-	iochmara: {
-		main: colors.iochmara[500],
-		light: colors.iochmara[50],
-		dark: colors.iochmara[700],
-		contrastText: white
-	},
-	cyan: createPaletteColor(colors.cyan),
-	amber: createPaletteColor(colors.amber),
-	green: createPaletteColor(colors.green),
-	red: createPaletteColor(colors.red),
-	rose: createPaletteColor(colors.rose),
-	fuchsia: createPaletteColor(colors.fuchsia),
-	neutral: {
-		main: colors.neutral[500],
-		light: colors.neutral[300],
-		dark: colors.neutral[600],
-		contrastText: white
-	},
-	envBase: semanticColors.envBase,
-	envCurrent: semanticColors.envCurrent
-};
-Object.assign(lightTheme.palette, customPaletteAdditions);
-Object.assign(darkTheme.palette, customPaletteAdditions);
-/**
-* Semantic variant mappings from Chakra-style tokens to scale values
-* These map semantic names to numeric scale values in the color palette
-*/
-const semanticVariantMap = {
-	solid: 600,
-	subtle: 50,
-	muted: 200,
-	emphasized: 500,
-	focusRing: 400,
-	light: 300
-};
-/**
-* Color aliases - map Chakra color names to our color palette
-*/
-const colorAliases = {
-	orange: "amber",
-	gray: "neutral"
-};
-/**
-* Token lookup function to mimic Chakra UI's token API
-* Usage: token("colors.green.solid") => "#16A34A"
-*/
-function token(path$2) {
-	const parts = path$2.split(".");
-	if (parts[0] === "colors" && parts.length >= 3) {
-		let colorName = parts[1];
-		const variant = parts[2];
-		if (colorName in colorAliases) colorName = colorAliases[colorName];
-		if (colorName === "white") return white;
-		if (colorName === "black") return black;
-		if (colorName in semanticColors) {
-			const semantic = semanticColors[colorName];
-			if (typeof semantic === "object" && variant in semantic) return semantic[variant];
-		}
-		if (colorName in colors) {
-			const color = colors[colorName];
-			if (typeof color === "object" && variant in color) return color[variant];
-			if (variant in semanticVariantMap) {
-				const scaleValue = semanticVariantMap[variant];
-				if (typeof color === "object" && scaleValue in color) return color[scaleValue];
-			}
-		}
-	}
-}
-
-//#endregion
 //#region recce-source/js/src/components/ui/toaster.tsx
 const ToasterContext = (0, react.createContext)(null);
 let toastIdCounter = 0;
@@ -1477,8 +788,8 @@ const RunToolbar = ({ warnings, children }) => {
 			gap: "5px",
 			alignItems: "center",
 			px: "10px",
-			bgcolor: hasWarnings ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
-			color: hasWarnings ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
+			bgcolor: hasWarnings ? isDark ? require_mui_theme.colors.amber[900] : require_mui_theme.colors.amber[100] : "inherit",
+			color: hasWarnings ? isDark ? require_mui_theme.colors.amber[200] : require_mui_theme.colors.amber[800] : "inherit"
 		},
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mui_material_Box.default, {
@@ -1489,7 +800,7 @@ const RunToolbar = ({ warnings, children }) => {
 					gap: 0
 				},
 				children: warnings?.map((warning) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiWarning, {
-					color: isDark ? colors.amber[400] : colors.amber[600],
+					color: isDark ? require_mui_theme.colors.amber[400] : require_mui_theme.colors.amber[600],
 					style: {
 						verticalAlign: "middle",
 						marginRight: 4
@@ -1905,7 +1216,7 @@ async function getRecceInstanceInfo(client = axiosClient) {
 
 //#endregion
 //#region recce-source/js/src/lib/hooks/ApiConfigContext.tsx
-const defaultConfig = {
+const defaultConfig$1 = {
 	apiPrefix: "",
 	authToken: void 0,
 	baseUrl: void 0
@@ -1938,7 +1249,7 @@ function createApiClient(config) {
 	});
 	return client;
 }
-function ApiConfigProvider({ children, apiPrefix = defaultConfig.apiPrefix, authToken = defaultConfig.authToken, baseUrl = defaultConfig.baseUrl }) {
+function ApiConfigProvider({ children, apiPrefix = defaultConfig$1.apiPrefix, authToken = defaultConfig$1.authToken, baseUrl = defaultConfig$1.baseUrl }) {
 	const config = (0, react.useMemo)(() => ({
 		apiPrefix,
 		authToken,
@@ -4078,8 +3389,8 @@ function useClipBoardToast() {
 //#region recce-source/js/src/components/query/DiffText.tsx
 const DiffText = ({ value, colorPalette, grayOut, noCopy, fontSize }) => {
 	const [isHovered, setIsHovered] = (0, react.useState)(false);
-	const textColor = colors[colorPalette][800];
-	const bgColor = colors[colorPalette][100];
+	const textColor = require_mui_theme.colors[colorPalette][800];
+	const bgColor = require_mui_theme.colors[colorPalette][100];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mui_material_Box.default, {
 		sx: {
 			display: "flex",
@@ -5542,21 +4853,76 @@ const RunModal = ({ isOpen, onClose, onExecute, type, title, params: defaultPara
 };
 
 //#endregion
-//#region recce-source/js/src/lib/hooks/useAppRouter.ts
+//#region src/lib/hooks/RouteConfigContext.ts
+const defaultConfig = { basePath: "" };
+const RouteConfigContext = (0, react.createContext)(null);
 /**
-* useAppRouter - Navigation utilities for Next.js App Router
+* Provider for route configuration.
 *
-* Provides a similar API to Wouter's useLocation for easier migration.
-* This hook combines Next.js's useRouter, usePathname, useParams,
-* and useSearchParams into a unified interface.
+* Wrap your application (or RecceContextProvider) with this provider
+* to configure path prefixes for navigation.
 *
-* IMPORTANT: useSearchParams() triggers Suspense boundaries in Next.js.
-* To avoid full-page loading states, useAppLocation() only returns the
-* pathname by default. Use useAppLocationWithSearch() if you need
-* search params included in the location string.
+* @example
+* // In recce-cloud
+* <RouteConfigProvider basePath={`/oss/${sessionId}`}>
+*   <RecceContextProvider>
+*     {children}
+*   </RecceContextProvider>
+* </RouteConfigProvider>
+*/
+function RouteConfigProvider({ children, basePath = defaultConfig.basePath }) {
+	const resolvePath = (0, react.useCallback)((path$2) => {
+		if (!basePath) return path$2;
+		if (path$2.startsWith(basePath)) return path$2;
+		if (path$2.match(/^https?:\/\//)) return path$2;
+		if (path$2.startsWith("#")) return path$2;
+		return `${basePath.endsWith("/") ? basePath.slice(0, -1) : basePath}${path$2.startsWith("/") ? path$2 : `/${path$2}`}`;
+	}, [basePath]);
+	const contextValue = (0, react.useMemo)(() => ({
+		basePath,
+		resolvePath
+	}), [basePath, resolvePath]);
+	return react.default.createElement(RouteConfigContext.Provider, { value: contextValue }, children);
+}
+const defaultRouteConfigContext = {
+	basePath: "",
+	resolvePath: (path$2) => path$2
+};
+/**
+* Hook to access route configuration.
+*
+* When used outside RouteConfigProvider, returns default config
+* (for OSS backward compatibility).
+*
+* @returns RouteConfigContextType with basePath and resolvePath function
+*/
+function useRouteConfig() {
+	return (0, react.useContext)(RouteConfigContext) ?? defaultRouteConfigContext;
+}
+/**
+* Safe hook that returns null if context not available.
+* Useful for components that need to detect if RouteConfigProvider is present.
+*/
+function useRouteConfigSafe() {
+	return (0, react.useContext)(RouteConfigContext);
+}
+
+//#endregion
+//#region src/lib/hooks/useAppRouter.ts
+/**
+* useAppRouter - Navigation utilities for Next.js App Router with RouteConfig support
+*
+* This is a custom version that wraps the OSS useAppRouter to add
+* RouteConfigContext support for path prefixing in recce-cloud.
+*
+* The key difference from OSS:
+* - setLocation() automatically prefixes paths with the configured basePath
+* - This allows OSS components to use setLocation("/query") while
+*   recce-cloud can configure basePath="/oss/abc123" to get "/oss/abc123/query"
 */
 /**
 * Hook that provides Wouter-compatible location API using Next.js App Router
+* with RouteConfigContext support for path prefixing.
 *
 * NOTE: This returns only the pathname (not search params) to avoid
 * triggering Suspense boundaries on every navigation.
@@ -5565,15 +4931,123 @@ const RunModal = ({ isOpen, onClose, onExecute, type, title, params: defaultPara
 *
 * @example
 * const [location, setLocation] = useAppLocation();
-* setLocation("/checks?id=123"); // Navigate to new path with query
-* setLocation("/checks", { replace: true }); // Replace current history entry
+* setLocation("/checks?id=123"); // In cloud mode with basePath="/oss/abc123"
+*                                 // navigates to "/oss/abc123/checks?id=123"
 */
 function useAppLocation() {
 	const router = (0, next_navigation.useRouter)();
-	return [(0, next_navigation.usePathname)(), (0, react.useCallback)((to, options) => {
-		if (options?.replace) router.replace(to, { scroll: options?.scroll ?? true });
-		else router.push(to, { scroll: options?.scroll ?? true });
-	}, [router])];
+	const pathname = (0, next_navigation.usePathname)();
+	const { resolvePath } = useRouteConfig();
+	return [pathname, (0, react.useCallback)((to, options) => {
+		const [pathPart, queryPart] = to.split("?");
+		const resolvedPath = resolvePath(pathPart);
+		const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+		if (options?.replace) router.replace(fullPath, { scroll: options?.scroll ?? true });
+		else router.push(fullPath, { scroll: options?.scroll ?? true });
+	}, [router, resolvePath])];
+}
+/**
+* Hook that includes search params in the location string.
+* Also supports RouteConfigContext path prefixing.
+*
+* WARNING: This hook uses useSearchParams() which triggers Suspense.
+* Only use this in components that are wrapped in a <Suspense> boundary,
+* or in leaf components where suspension is acceptable.
+*
+* @returns [fullLocation, setLocation] tuple with search params included
+*/
+function useAppLocationWithSearch() {
+	const router = (0, next_navigation.useRouter)();
+	const pathname = (0, next_navigation.usePathname)();
+	const searchParams = (0, next_navigation.useSearchParams)();
+	const { resolvePath } = useRouteConfig();
+	return [(0, react.useMemo)(() => {
+		const search = searchParams?.toString();
+		return search ? `${pathname}?${search}` : pathname;
+	}, [pathname, searchParams]), (0, react.useCallback)((to, options) => {
+		const [pathPart, queryPart] = to.split("?");
+		const resolvedPath = resolvePath(pathPart);
+		const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+		if (options?.replace) router.replace(fullPath, { scroll: options?.scroll ?? true });
+		else router.push(fullPath, { scroll: options?.scroll ?? true });
+	}, [router, resolvePath])];
+}
+/**
+* Hook to check if current path matches a pattern
+* Similar to Wouter's useRoute
+*
+* @param pattern - The route pattern to match (e.g., "/checks/:checkId")
+* @returns [isMatch, params] tuple
+*
+* @example
+* const [isMatch, params] = useAppRoute("/checks/:checkId");
+* if (isMatch) {
+*   console.log(params.checkId); // "abc-123"
+* }
+*/
+function useAppRoute(pattern) {
+	const pathname = (0, next_navigation.usePathname)();
+	const params = (0, next_navigation.useParams)();
+	return [(0, react.useMemo)(() => {
+		const regexPattern = pattern.replace(/:\w+/g, "([^/]+)").replace(/\*/g, ".*");
+		return (/* @__PURE__ */ new RegExp(`^${regexPattern}$`)).test(pathname);
+	}, [pattern, pathname]), (0, react.useMemo)(() => {
+		if (!params) return {};
+		return Object.fromEntries(Object.entries(params).map(([key, value]) => [key, Array.isArray(value) ? value.join("/") : value]));
+	}, [params])];
+}
+/**
+* Imperative navigation function for use outside React components
+* Use sparingly - prefer useAppLocation hook in components
+*
+* NOTE: This function does NOT support RouteConfigContext because
+* it's used outside of React component tree. If you need path prefixing,
+* use useAppLocation hook instead.
+*
+* @example
+* // In an event handler or utility function
+* import { navigateTo } from "@/lib/hooks/useAppRouter";
+* navigateTo("/checks?id=123");
+*/
+function navigateTo(path$2, replace = false) {
+	if (typeof window !== "undefined") {
+		if (replace) window.history.replaceState(null, "", path$2);
+		else window.history.pushState(null, "", path$2);
+		window.dispatchEvent(new PopStateEvent("popstate"));
+	}
+}
+/**
+* Hook for programmatic navigation with more options
+* Provides direct access to Next.js router methods with RouteConfigContext support
+*
+* NOTE: Does not include searchParams to avoid Suspense.
+* Use useSearchParams() directly in components that need it.
+*/
+function useAppNavigation() {
+	const router = (0, next_navigation.useRouter)();
+	const pathname = (0, next_navigation.usePathname)();
+	const params = (0, next_navigation.useParams)();
+	const { resolvePath } = useRouteConfig();
+	return {
+		pathname,
+		params,
+		push: (0, react.useCallback)((href, options) => {
+			const [pathPart, queryPart] = href.split("?");
+			const resolvedPath = resolvePath(pathPart);
+			const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+			router.push(fullPath, options);
+		}, [router, resolvePath]),
+		replace: (0, react.useCallback)((href, options) => {
+			const [pathPart, queryPart] = href.split("?");
+			const resolvedPath = resolvePath(pathPart);
+			const fullPath = queryPart ? `${resolvedPath}?${queryPart}` : resolvedPath;
+			router.replace(fullPath, options);
+		}, [router, resolvePath]),
+		back: router.back,
+		forward: router.forward,
+		refresh: router.refresh,
+		prefetch: router.prefetch
+	};
 }
 
 //#endregion
@@ -7182,13 +6656,13 @@ const PrivateQueryResultView = ({ run, viewOptions, onViewOptionsChanged, onAddT
 				alignItems: "center",
 				gap: "5px",
 				px: "10px",
-				bgcolor: warning ? isDark ? colors.amber[900] : colors.amber[100] : "inherit",
-				color: warning ? isDark ? colors.amber[200] : colors.amber[800] : "inherit"
+				bgcolor: warning ? isDark ? require_mui_theme.colors.amber[900] : require_mui_theme.colors.amber[100] : "inherit",
+				color: warning ? isDark ? require_mui_theme.colors.amber[200] : require_mui_theme.colors.amber[800] : "inherit"
 			},
 			children: [
 				warning && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_icons_pi.PiWarning, {
-						color: isDark ? colors.amber[400] : colors.amber[600],
+						color: isDark ? require_mui_theme.colors.amber[400] : require_mui_theme.colors.amber[600],
 						style: { alignSelf: "center" }
 					}),
 					" ",
@@ -7892,45 +7366,45 @@ function ValueDiffForm({ params, onParamsChanged, setIsReadyToExecute }) {
 		control: (base) => ({
 			...base,
 			minHeight: "40px",
-			backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor,
-			borderColor: isDark ? colors.neutral[600] : base.borderColor
+			backgroundColor: isDark ? require_mui_theme.colors.neutral[700] : base.backgroundColor,
+			borderColor: isDark ? require_mui_theme.colors.neutral[600] : base.borderColor
 		}),
 		menu: (base) => ({
 			...base,
-			backgroundColor: isDark ? colors.neutral[700] : base.backgroundColor
+			backgroundColor: isDark ? require_mui_theme.colors.neutral[700] : base.backgroundColor
 		}),
 		option: (base, state) => ({
 			...base,
-			backgroundColor: state.isSelected ? isDark ? colors.neutral[600] : colors.iochmara[500] : state.isFocused ? isDark ? colors.neutral[600] : colors.iochmara[50] : isDark ? colors.neutral[700] : base.backgroundColor,
-			color: isDark ? colors.neutral[200] : base.color
+			backgroundColor: state.isSelected ? isDark ? require_mui_theme.colors.neutral[600] : require_mui_theme.colors.iochmara[500] : state.isFocused ? isDark ? require_mui_theme.colors.neutral[600] : require_mui_theme.colors.iochmara[50] : isDark ? require_mui_theme.colors.neutral[700] : base.backgroundColor,
+			color: isDark ? require_mui_theme.colors.neutral[200] : base.color
 		}),
 		multiValue: (base) => ({
 			...base,
-			backgroundColor: isDark ? colors.neutral[600] : base.backgroundColor
+			backgroundColor: isDark ? require_mui_theme.colors.neutral[600] : base.backgroundColor
 		}),
 		multiValueLabel: (base) => ({
 			...base,
-			color: isDark ? colors.neutral[200] : base.color
+			color: isDark ? require_mui_theme.colors.neutral[200] : base.color
 		}),
 		multiValueRemove: (base) => ({
 			...base,
-			color: isDark ? colors.neutral[400] : base.color,
+			color: isDark ? require_mui_theme.colors.neutral[400] : base.color,
 			"&:hover": {
-				backgroundColor: isDark ? colors.neutral[500] : colors.red[200],
-				color: isDark ? colors.neutral[200] : colors.red[600]
+				backgroundColor: isDark ? require_mui_theme.colors.neutral[500] : require_mui_theme.colors.red[200],
+				color: isDark ? require_mui_theme.colors.neutral[200] : require_mui_theme.colors.red[600]
 			}
 		}),
 		input: (base) => ({
 			...base,
-			color: isDark ? colors.neutral[200] : base.color
+			color: isDark ? require_mui_theme.colors.neutral[200] : base.color
 		}),
 		singleValue: (base) => ({
 			...base,
-			color: isDark ? colors.neutral[200] : base.color
+			color: isDark ? require_mui_theme.colors.neutral[200] : base.color
 		}),
 		placeholder: (base) => ({
 			...base,
-			color: isDark ? colors.neutral[400] : base.color
+			color: isDark ? require_mui_theme.colors.neutral[400] : base.color
 		})
 	}), [isDark]);
 	const { columns, primaryKey: nodePrimaryKey, isLoading, error } = useModelColumns_default(params.model);
@@ -8457,6 +7931,12 @@ Object.defineProperty(exports, 'RecceInstanceInfoProvider', {
     return RecceInstanceInfoProvider;
   }
 });
+Object.defineProperty(exports, 'RouteConfigProvider', {
+  enumerable: true,
+  get: function () {
+    return RouteConfigProvider;
+  }
+});
 Object.defineProperty(exports, 'RowCountDiffResultView', {
   enumerable: true,
   get: function () {
@@ -8577,12 +8057,6 @@ Object.defineProperty(exports, 'cancelRun', {
     return cancelRun;
   }
 });
-Object.defineProperty(exports, 'colors', {
-  enumerable: true,
-  get: function () {
-    return colors;
-  }
-});
 Object.defineProperty(exports, 'createCheckByRun', {
   enumerable: true,
   get: function () {
@@ -8607,12 +8081,6 @@ Object.defineProperty(exports, 'createSimpleCheck', {
     return createSimpleCheck;
   }
 });
-Object.defineProperty(exports, 'darkTheme', {
-  enumerable: true,
-  get: function () {
-    return darkTheme;
-  }
-});
 Object.defineProperty(exports, 'deleteCheck', {
   enumerable: true,
   get: function () {
@@ -8793,12 +8261,6 @@ Object.defineProperty(exports, 'layout', {
     return layout;
   }
 });
-Object.defineProperty(exports, 'lightTheme', {
-  enumerable: true,
-  get: function () {
-    return lightTheme;
-  }
-});
 Object.defineProperty(exports, 'listChecks', {
   enumerable: true,
   get: function () {
@@ -8841,6 +8303,12 @@ Object.defineProperty(exports, 'mergeKeysWithStatus', {
     return mergeKeysWithStatus;
   }
 });
+Object.defineProperty(exports, 'navigateTo', {
+  enumerable: true,
+  get: function () {
+    return navigateTo;
+  }
+});
 Object.defineProperty(exports, 'queryModelRowCount', {
   enumerable: true,
   get: function () {
@@ -8985,12 +8453,6 @@ Object.defineProperty(exports, 'toaster', {
     return toaster;
   }
 });
-Object.defineProperty(exports, 'token', {
-  enumerable: true,
-  get: function () {
-    return token;
-  }
-});
 Object.defineProperty(exports, 'trackColumnLevelLineage', {
   enumerable: true,
   get: function () {
@@ -9117,6 +8579,24 @@ Object.defineProperty(exports, 'useAppLocation', {
     return useAppLocation;
   }
 });
+Object.defineProperty(exports, 'useAppLocationWithSearch', {
+  enumerable: true,
+  get: function () {
+    return useAppLocationWithSearch;
+  }
+});
+Object.defineProperty(exports, 'useAppNavigation', {
+  enumerable: true,
+  get: function () {
+    return useAppNavigation;
+  }
+});
+Object.defineProperty(exports, 'useAppRoute', {
+  enumerable: true,
+  get: function () {
+    return useAppRoute;
+  }
+});
 Object.defineProperty(exports, 'useChecks', {
   enumerable: true,
   get: function () {
@@ -9183,6 +8663,18 @@ Object.defineProperty(exports, 'useRecceServerFlag', {
     return useRecceServerFlag;
   }
 });
+Object.defineProperty(exports, 'useRouteConfig', {
+  enumerable: true,
+  get: function () {
+    return useRouteConfig;
+  }
+});
+Object.defineProperty(exports, 'useRouteConfigSafe', {
+  enumerable: true,
+  get: function () {
+    return useRouteConfigSafe;
+  }
+});
 Object.defineProperty(exports, 'useRunsAggregated', {
   enumerable: true,
   get: function () {
@@ -9201,4 +8693,4 @@ Object.defineProperty(exports, 'waitRun', {
     return waitRun;
   }
 });
-//# sourceMappingURL=state-FkYREAs-.js.map
+//# sourceMappingURL=state-lPCQsWy5.js.map