@rebasepro/studio 0.19.1 → 0.19.2-canary.g09316f6

package/dist/{SQLEditor-BfNA8xM3.js → SQLEditor-sdtoZv5F.js}

@@ -25,7 +25,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col h-full overflow-hidden",
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+			className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-sheet min-h-[48px]", defaultBorderMixin),
 			children: [/* @__PURE__ */ jsx(Typography, {
 				variant: "caption",
 				className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
@@ -48,7 +48,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 			}) : Object.entries(schemas).map(([schemaName, tables]) => /* @__PURE__ */ jsxs("div", {
 				className: "mb-2",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors",
+					className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors",
 					onClick: () => setExpandedSchemas((prev) => ({
 						...prev,
 						[schemaName]: !prev[schemaName]
@@ -66,7 +66,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 				}), expandedSchemas[schemaName] && /* @__PURE__ */ jsx("div", {
 					className: "ml-3 mt-1 space-y-1",
 					children: tables.map((table) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group relative",
+						className: "flex items-center p-1 cursor-pointer hover:bg-surface-hover rounded transition-colors group relative",
 						onClick: () => setExpandedTables((prev) => ({
 							...prev,
 							[`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`]
@@ -96,7 +96,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 								children: table.tableName
 							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-800 px-1 gap-1 rounded transition-opacity",
+								className: "flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-raised px-1 gap-1 rounded transition-opacity",
 								children: [
 									/* @__PURE__ */ jsx(IconButton, {
 										size: "small",
@@ -169,7 +169,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 					}), expandedTables[`${schemaName}.${table.tableName}`] && /* @__PURE__ */ jsx("div", {
 						className: cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin),
 						children: table.columns.map((col) => /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-900 rounded-r relative min-h-[28px]",
+							className: "flex items-center p-1 group pl-2 hover:bg-surface-hover rounded-r relative min-h-[28px]",
 							children: [
 								/* @__PURE__ */ jsx("svg", {
 									className: "w-3 h-3 mr-1.5 text-text-disabled dark:text-text-disabled-dark shrink-0",
@@ -196,7 +196,7 @@ var SchemaBrowser = ({ onTableClick, schemas, isSchemaLoading, schemaError, onRe
 								}),
 								/* @__PURE__ */ jsx(IconButton, {
 									size: "smallest",
-									className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-800 transition-colors pointer-events-auto",
+									className: "opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-sheet transition-colors pointer-events-auto",
 									onClick: (e) => {
 										e.stopPropagation();
 										navigator.clipboard.writeText(col.name);
@@ -218,12 +218,12 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 	const [activeTab, setActiveTab] = useState("schema");
 	const { t } = useTranslation();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin),
+		className: cls("flex flex-col h-full w-full bg-surface-card border-r", defaultBorderMixin),
 		children: [/* @__PURE__ */ jsxs(Tabs, {
 			value: activeTab,
 			onValueChange: (v) => setActiveTab(v),
 			variant: "boxy",
-			className: "border-b border-surface-200 dark:border-surface-950",
+			className: "border-b border-hairline",
 			children: [
 				/* @__PURE__ */ jsx(Tab, {
 					value: "schema",
@@ -254,7 +254,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 					return /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col h-full",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+							className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-sheet min-h-[48px]", defaultBorderMixin),
 							children: /* @__PURE__ */ jsx(Typography, {
 								variant: "caption",
 								className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
@@ -287,7 +287,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 								}), /* @__PURE__ */ jsx("div", {
 									className: "space-y-2",
 									children: favorites.map((snippet) => /* @__PURE__ */ jsxs("div", {
-										className: cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin),
+										className: cls("group p-2 rounded border hover:border-hairline-strong bg-surface-card transition-all cursor-pointer relative", defaultBorderMixin),
 										onClick: () => onSelectSnippet(snippet.sql),
 										children: [
 											/* @__PURE__ */ jsx(Typography, {
@@ -319,7 +319,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 							}), /* @__PURE__ */ jsx("div", {
 								className: "space-y-2",
 								children: others.map((snippet) => /* @__PURE__ */ jsxs("div", {
-									className: cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin),
+									className: cls("group p-2 rounded border hover:border-hairline-strong bg-surface-card transition-all cursor-pointer relative", defaultBorderMixin),
 									onClick: () => onSelectSnippet(snippet.sql),
 									children: [
 										/* @__PURE__ */ jsx(Typography, {
@@ -350,7 +350,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 				activeTab === "history" && /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col h-full",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+						className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-sheet min-h-[48px]", defaultBorderMixin),
 						children: /* @__PURE__ */ jsx(Typography, {
 							variant: "caption",
 							className: "font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
@@ -366,7 +366,7 @@ var SQLEditorSidebar = ({ onSelectSnippet, onTableClick, snippets, history, onDe
 								children: t("studio_sql_sidebar_no_history")
 							})
 						}) : [...history].reverse().map((sql, i) => /* @__PURE__ */ jsxs("div", {
-							className: "p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer group transition-colors flex items-start",
+							className: "p-2 py-1.5 rounded hover:bg-surface-hover cursor-pointer group transition-colors flex items-start",
 							onClick: () => onSelectSnippet(sql),
 							children: [/* @__PURE__ */ jsx("svg", {
 								className: "w-3 h-3 mt-1 mr-2 text-text-disabled dark:text-text-disabled-dark group-hover:text-primary transition-colors flex-shrink-0",
@@ -552,10 +552,10 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cls("flex flex-col", isRoot ? "p-4" : "pl-6 mt-2 relative"),
 		children: [
-			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-0 bottom-0 w-px bg-surface-200 dark:bg-surface-950 -z-10" }),
-			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-5 w-3 h-px bg-surface-200 dark:bg-surface-950 -z-10" }),
+			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-0 bottom-0 w-px bg-hairline -z-10" }),
+			!isRoot && /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-5 w-3 h-px bg-hairline -z-10" }),
 			/* @__PURE__ */ jsxs("div", {
-				className: cls("border rounded-md bg-white dark:bg-surface-900 text-text-primary dark:text-text-primary-dark shadow-xs relative z-10 w-[420px] max-w-full", defaultBorderMixin),
+				className: cls("border rounded-md bg-surface-card text-text-primary dark:text-text-primary-dark shadow-xs relative z-10 w-[420px] max-w-full", defaultBorderMixin),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: cls("px-4 py-3 flex justify-between items-center cursor-pointer select-none"),
 					onClick: () => setExpanded(!expanded),
@@ -580,7 +580,7 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 								children: plan["Node Type"]
 							}),
 							plan["Relation Name"] && /* @__PURE__ */ jsxs("span", {
-								className: "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded bg-surface-200 dark:bg-surface-950 ml-2",
+								className: "font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded bg-hairline ml-2",
 								children: [
 									"on ",
 									plan["Relation Name"],
@@ -614,7 +614,7 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 				}), /* @__PURE__ */ jsx(Collapse, {
 					in: expanded,
 					children: /* @__PURE__ */ jsxs("div", {
-						className: "px-4 py-3 border-t border-surface-200 dark:border-surface-950 text-[13px] flex flex-col gap-2",
+						className: "px-4 py-3 border-t border-hairline text-[13px] flex flex-col gap-2",
 						children: [
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex items-center space-x-6",
@@ -644,7 +644,7 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
 									children: "Filter:"
 								}), /* @__PURE__ */ jsx("code", {
-									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									className: "block w-full p-2 bg-surface-well border border-hairline rounded font-mono text-[12px] truncate",
 									children: plan.Filter
 								})]
 							}),
@@ -654,7 +654,7 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
 									children: "Index Cond:"
 								}), /* @__PURE__ */ jsx("code", {
-									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									className: "block w-full p-2 bg-surface-well border border-hairline rounded font-mono text-[12px] truncate",
 									children: plan["Index Cond"]
 								})]
 							}),
@@ -664,7 +664,7 @@ var ExplainVisualizer = ({ plan, isRoot = true }) => {
 									className: "text-text-disabled dark:text-text-disabled-dark block mb-1",
 									children: "Hash Cond:"
 								}), /* @__PURE__ */ jsx("code", {
-									className: "block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate",
+									className: "block w-full p-2 bg-surface-well border border-hairline rounded font-mono text-[12px] truncate",
 									children: plan["Hash Cond"]
 								})]
 							})
@@ -722,7 +722,7 @@ var FixedEditorOverlay = ({ displayValue, onSave, onCancel }) => {
 		ref: anchorRef,
 		className: "w-full h-full min-h-[20px]",
 		children: createPortal(/* @__PURE__ */ jsx("div", {
-			className: "fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col",
+			className: "fixed z-[9999] bg-surface-sheet border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col",
 			style: {
 				top,
 				left,
@@ -1441,7 +1441,7 @@ var SQLEditor = () => {
 		if (results.length === 1 && results[0]["QUERY PLAN"] && Array.isArray(results[0]["QUERY PLAN"])) try {
 			const plan = results[0]["QUERY PLAN"][0].Plan;
 			if (plan) return /* @__PURE__ */ jsxs("div", {
-				className: "flex-grow overflow-auto p-4 bg-surface-50 dark:bg-surface-900 flex flex-col items-start",
+				className: "flex-grow overflow-auto p-4 bg-surface-sheet flex flex-col items-start",
 				children: [/* @__PURE__ */ jsx(Typography, {
 					variant: "caption",
 					className: "font-semibold text-text-secondary mb-4 tracking-wider uppercase",
@@ -1458,7 +1458,7 @@ var SQLEditor = () => {
 			className: "flex-grow p-6 flex flex-col items-center justify-center",
 			children: [/* @__PURE__ */ jsx(Typography, {
 				variant: "body2",
-				className: "text-text-secondary dark:text-text-secondary-dark font-mono border-b border-surface-200 dark:border-surface-950 pb-2 mb-2",
+				className: "text-text-secondary dark:text-text-secondary-dark font-mono border-b border-hairline pb-2 mb-2",
 				children: t("studio_sql_success")
 			}), /* @__PURE__ */ jsx(Typography, {
 				variant: "caption",
@@ -1501,7 +1501,7 @@ var SQLEditor = () => {
 			className: "flex-grow flex flex-col overflow-hidden min-h-0",
 			children: [
 				actionableCollections.length > 0 && /* @__PURE__ */ jsxs("div", {
-					className: cls("px-4 py-1.5 border-b flex items-center gap-2 shrink-0 bg-surface-50 dark:bg-surface-900", defaultBorderMixin),
+					className: cls("px-4 py-1.5 border-b flex items-center gap-2 shrink-0 bg-surface-sheet", defaultBorderMixin),
 					children: [/* @__PURE__ */ jsx(Tooltip, {
 						title: t("studio_sql_admin_collections_tooltip"),
 						children: /* @__PURE__ */ jsx(Typography, {
@@ -1613,7 +1613,7 @@ var SQLEditor = () => {
 					})
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: cls("p-2 px-4 border-t bg-surface-50 dark:bg-surface-900 flex justify-between items-center shrink-0", defaultBorderMixin),
+					className: cls("p-2 px-4 border-t bg-surface-sheet flex justify-between items-center shrink-0", defaultBorderMixin),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex space-x-4",
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -1681,7 +1681,7 @@ var SQLEditor = () => {
 	const activeSnippet = snippets.find((s) => s.sql === activeTab.sql);
 	const isFavorite = activeSnippet?.isFavorite || false;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark",
+		className: "flex h-full w-full bg-surface-card overflow-hidden text-text-primary dark:text-text-primary-dark",
 		children: [
 			/* @__PURE__ */ jsx(ResizablePanels, {
 				orientation: "horizontal",
@@ -1702,7 +1702,7 @@ var SQLEditor = () => {
 				secondPanel: /* @__PURE__ */ jsxs("div", {
 					className: "flex-grow flex flex-col min-w-0 h-full w-full",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-950", defaultBorderMixin),
+						className: cls("flex items-center justify-between pr-2 border-b bg-surface-card", defaultBorderMixin),
 						children: [/* @__PURE__ */ jsx("div", {
 							className: "flex items-center flex-grow overflow-hidden mr-4",
 							children: /* @__PURE__ */ jsxs("div", {
@@ -1712,7 +1712,7 @@ var SQLEditor = () => {
 									onValueChange: handleTabChange,
 									variant: "boxy",
 									className: "w-[unset] flex-shrink-0",
-									innerClassName: "bg-white dark:bg-surface-950",
+									innerClassName: "bg-surface-card",
 									children: tabs.map((tab) => /* @__PURE__ */ jsxs(Tab, {
 										value: tab.id,
 										className: "flex items-center justify-between group max-w-[200px]",
@@ -1763,7 +1763,7 @@ var SQLEditor = () => {
 									disabled: loading,
 									children: t("studio_sql_explain")
 								}),
-								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
+								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-hairline mx-1" }),
 								/* @__PURE__ */ jsxs("div", {
 									className: "flex items-center space-x-2 px-2",
 									onClick: (e) => {
@@ -1784,7 +1784,7 @@ var SQLEditor = () => {
 										})
 									})]
 								}),
-								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
+								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-hairline mx-1" }),
 								/* @__PURE__ */ jsx(Tooltip, {
 									title: isFavorite ? t("studio_sql_remove_from_favorites") : t("studio_sql_add_to_favorites"),
 									children: /* @__PURE__ */ jsx(IconButton, {
@@ -1822,7 +1822,7 @@ var SQLEditor = () => {
 									onClick: () => setIsSaveDialogOpen(true),
 									children: t("studio_sql_save")
 								}),
-								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-1" }),
+								/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-hairline mx-1" }),
 								/* @__PURE__ */ jsx(Menu, {
 									trigger: /* @__PURE__ */ jsxs(Button, {
 										size: "small",
@@ -1839,7 +1839,7 @@ var SQLEditor = () => {
 									children: /* @__PURE__ */ jsxs("div", {
 										className: "max-h-64 overflow-y-auto",
 										children: [/* @__PURE__ */ jsx("div", {
-											className: "px-3 py-1.5 border-b border-surface-200 dark:border-surface-950 mb-1",
+											className: "px-3 py-1.5 border-b border-hairline mb-1",
 											children: /* @__PURE__ */ jsx(Typography, {
 												variant: "caption",
 												className: "font-semibold uppercase tracking-wider text-[9px] text-text-disabled dark:text-text-disabled-dark",
@@ -1859,7 +1859,7 @@ var SQLEditor = () => {
 												children: db
 											}, db)),
 											/* @__PURE__ */ jsx("div", {
-												className: "px-3 py-1.5 border-y border-surface-200 dark:border-surface-950 mb-1 mt-1",
+												className: "px-3 py-1.5 border-y border-hairline mb-1 mt-1",
 												children: /* @__PURE__ */ jsx(Typography, {
 													variant: "caption",
 													className: "font-semibold uppercase tracking-wider text-[9px] text-text-disabled dark:text-text-disabled-dark",
@@ -1905,9 +1905,9 @@ var SQLEditor = () => {
 							})
 						}),
 						secondPanel: /* @__PURE__ */ jsxs("div", {
-							className: "h-full w-full flex flex-col bg-surface-50 dark:bg-surface-950 overflow-hidden min-h-0",
+							className: "h-full w-full flex flex-col bg-surface-well overflow-hidden min-h-0",
 							children: [/* @__PURE__ */ jsx("div", {
-								className: cls("p-2 px-4 bg-surface-100 dark:bg-surface-900 border-b shrink-0 flex items-center", defaultBorderMixin),
+								className: cls("p-2 px-4 bg-surface-raised border-b shrink-0 flex items-center", defaultBorderMixin),
 								children: /* @__PURE__ */ jsx(Typography, {
 									variant: "caption",
 									className: "font-semibold text-text-disabled dark:text-text-disabled-dark uppercase tracking-widest text-[10px]",
@@ -1974,4 +1974,4 @@ var SQLEditor = () => {
 //#endregion
 export { SQLEditor };
 
-//# sourceMappingURL=SQLEditor-BfNA8xM3.js.map
+//# sourceMappingURL=SQLEditor-sdtoZv5F.js.map