@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/parser/DataSinkSelector.js

@@ -1,13 +1,16 @@
 import { useBuildPath as e } from "../../contexts/NavigationContext.js";
 import "../../contexts/index.js";
-import t from "../../hooks/useDataSinkOperations.js";
-import n from "../datasink/DataSinkStatusBadge.js";
-import { Fragment as r, memo as i, useCallback as a, useMemo as o, useState as s } from "react";
-import { Plus as c } from "lucide-react";
-import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as t } from "../common/sectionStyles.js";
+import "../common/index.js";
+import n from "../../hooks/useDataSinkOperations.js";
+import r from "../datasink/DataSinkStatusBadge.js";
+import { Fragment as i, memo as a, useCallback as o, useMemo as s, useState as c } from "react";
+import { Plus as l } from "lucide-react";
+import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/parser/DataSinkSelector.tsx
-function f(e, t) {
+var p = "sticky top-0 z-[1] bg-bg-sunken px-3 py-1.5 border-y border-[var(--color-border-default)]", m = "text-xs font-semibold uppercase tracking-wide text-text-secondary";
+function h(e, t) {
 	if (!e) return t("bigconsole.parsers.dataSinkSelector.relativeTime.never", "Never");
 	let n = new Date(e), r = Date.now() - n.getTime(), i = Math.floor(r / 6e4);
 	if (i < 1) return t("bigconsole.parsers.dataSinkSelector.relativeTime.justNow", "Just now");
@@ -17,174 +20,202 @@ function f(e, t) {
 	let o = Math.floor(a / 24);
 	return o < 7 ? t("bigconsole.parsers.dataSinkSelector.relativeTime.daysAgo", "{{days}}d ago", { days: o }) : n.toLocaleDateString();
 }
-var p = ({ className: e }) => /* @__PURE__ */ u("svg", {
+var g = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ u("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), m = i(function({ value: i, onChange: m, filterStatus: h, placeholder: g, disabled: _ = !1, error: v = !1, errorMessage: y }) {
-	let { t: b } = l(), [x, S] = s(!1), [C, w] = s(""), T = g ?? b("bigconsole.parsers.dataSinkSelector.placeholder", "Select a data source..."), E = e(), { dataSinks: D, loading: O, fetchDataSinks: k } = t({ skipFetch: !1 }), A = o(() => D.filter((e) => {
-		if (h && e.status !== h) return !1;
-		if (C) {
-			let t = C.toLowerCase();
+}), _ = a(function({ value: a, onChange: _, filterStatus: v, placeholder: y, disabled: b = !1, error: x = !1, errorMessage: S }) {
+	let { t: C } = u(), [w, T] = c(!1), [E, D] = c(""), O = y ?? C("bigconsole.parsers.dataSinkSelector.placeholder", "Select a data source..."), k = e(), { dataSinks: A, loading: j, fetchDataSinks: M } = n({ skipFetch: !1 }), N = s(() => A.filter((e) => {
+		if (v && e.status !== v) return !1;
+		if (E) {
+			let t = E.toLowerCase();
 			return (e.name || e.key).toLowerCase().includes(t) || e.key.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t);
 		}
 		return !0;
 	}), [
-		D,
-		h,
-		C
-	]), j = o(() => D.find((e) => e.key === i), [D, i]), M = a((e) => {
-		m(e), S(!1), w("");
-	}, [m]), N = a(() => {
-		if (_) return;
-		let e = !x;
-		e && k(), S(e);
+		A,
+		v,
+		E
+	]), P = s(() => A.find((e) => e.key === a), [A, a]), F = o((e) => {
+		_(e), T(!1), D("");
+	}, [_]), I = o(() => {
+		if (b) return;
+		let e = !w;
+		e && M(), T(e);
 	}, [
-		_,
-		x,
-		k
-	]), P = a(() => {
-		S(!1);
-	}, []), F = a(() => {
-		S(!1), window.open(E("/datasinks/new"), "_blank", "noopener,noreferrer");
-	}, [E]);
-	return /* @__PURE__ */ d("div", {
+		b,
+		w,
+		M
+	]), L = o(() => {
+		T(!1);
+	}, []), R = o(() => {
+		T(!1), window.open(k("/datasinks/new"), "_blank", "noopener,noreferrer");
+	}, [k]);
+	return /* @__PURE__ */ f("div", {
 		className: "relative",
 		children: [
-			/* @__PURE__ */ d("button", {
+			/* @__PURE__ */ f("button", {
 				type: "button",
-				onClick: N,
-				disabled: _,
+				onClick: I,
+				disabled: b,
+				"aria-haspopup": "listbox",
+				"aria-expanded": w,
 				className: `
-          w-full
+          w-full min-w-0 min-h-control-md
           px-3 py-2
           bg-bg-surface
           border rounded-md
           text-left
           flex items-center justify-between gap-2
-          transition-colors
-          ${_ ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
-          ${v ? "border-status-error-border" : "border-border-default"}
-          ${x ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
+          motion-safe:transition-colors
+          ${t}
+          ${b ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
+          ${x ? "border-status-error-border" : "border-[var(--color-border-default)]"}
+          ${w ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
         `,
-				children: [/* @__PURE__ */ u("div", {
+				children: [/* @__PURE__ */ d("div", {
 					className: "flex-1 min-w-0",
-					children: j ? /* @__PURE__ */ d("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ u(n, {
-							status: j.status,
+					children: P ? /* @__PURE__ */ f("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ d(r, {
+							status: P.status,
 							size: "sm",
 							showIcon: !1
-						}), /* @__PURE__ */ u("span", {
+						}), /* @__PURE__ */ d("span", {
 							className: "text-sm text-text-primary truncate",
-							children: j.name || j.key
+							children: P.name || P.key
 						})]
-					}) : /* @__PURE__ */ u("span", {
-						className: "text-sm text-text-tertiary",
-						children: T
+					}) : /* @__PURE__ */ d("span", {
+						className: "text-sm text-text-muted",
+						children: O
 					})
-				}), /* @__PURE__ */ u(p, { className: `w-4 h-4 text-text-secondary transition-transform ${x ? "transform rotate-180" : ""}` })]
+				}), /* @__PURE__ */ d(g, {
+					"aria-hidden": "true",
+					className: `w-4 h-4 shrink-0 text-text-secondary motion-safe:transition-transform ${w ? "transform rotate-180" : ""}`
+				})]
 			}),
-			v && y && /* @__PURE__ */ u("p", {
+			x && S && /* @__PURE__ */ d("p", {
 				className: "mt-1 text-xs text-status-error-text",
-				children: y
+				children: S
 			}),
-			x && /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u("div", {
+			w && /* @__PURE__ */ f(i, { children: [/* @__PURE__ */ d("div", {
 				className: "fixed inset-0 z-10",
-				onClick: P
-			}), /* @__PURE__ */ d("div", {
-				className: "absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-border-default rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden",
+				onClick: L
+			}), /* @__PURE__ */ f("div", {
+				className: "absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-[var(--color-border-default)] rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden",
 				children: [
-					/* @__PURE__ */ u("div", {
-						className: "p-2 border-b border-border-default",
-						children: /* @__PURE__ */ u("input", {
+					/* @__PURE__ */ d("div", {
+						className: "p-2 border-b border-[var(--color-border-default)]",
+						children: /* @__PURE__ */ d("input", {
 							type: "text",
-							placeholder: b("bigconsole.parsers.dataSinkSelector.searchPlaceholder", "Search data sources..."),
-							value: C,
-							onChange: (e) => w(e.target.value),
-							className: "\n                  w-full px-3 py-2\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder-text-tertiary\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                "
+							"aria-label": C("bigconsole.parsers.dataSinkSelector.searchPlaceholder", "Search data sources..."),
+							placeholder: C("bigconsole.parsers.dataSinkSelector.searchPlaceholder", "Search data sources..."),
+							value: E,
+							onChange: (e) => D(e.target.value),
+							className: "\n                  w-full min-w-0 min-h-control-md px-3 py-2\n                  bg-bg-sunken\n                  border border-[var(--color-border-default)]\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder:text-text-muted\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                "
 						})
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ d("div", {
 						className: "overflow-y-auto flex-1",
-						children: O ? /* @__PURE__ */ u("div", {
+						children: j ? /* @__PURE__ */ d("div", {
 							className: "p-4 text-center text-sm text-text-secondary",
-							children: b("bigconsole.parsers.dataSinkSelector.loading", "Loading data sources...")
-						}) : A.length === 0 ? /* @__PURE__ */ u("div", {
+							children: C("bigconsole.parsers.dataSinkSelector.loading", "Loading data sources...")
+						}) : N.length === 0 ? /* @__PURE__ */ d("div", {
 							className: "p-4 text-center text-sm text-text-secondary",
-							children: C ? b("bigconsole.parsers.dataSinkSelector.emptySearch", "No matching data sources found") : b("bigconsole.parsers.dataSinkSelector.empty", "No data sources available")
-						}) : /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u("button", {
-							type: "button",
-							onClick: () => M(null),
-							className: `
-                      w-full px-3 py-2
+							children: E ? C("bigconsole.parsers.dataSinkSelector.emptySearch", "No matching data sources found") : C("bigconsole.parsers.dataSinkSelector.empty", "No data sources available")
+						}) : /* @__PURE__ */ f(i, { children: [
+							/* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => F(null),
+								className: `
+                      w-full min-h-control-md px-3 py-2
                       text-left text-sm
                       hover:bg-bg-sunken
-                      transition-colors
-                      ${i === null ? "bg-action-primary-bg/10 text-action-primary-bg" : "text-text-secondary"}
+                      motion-safe:transition-colors
+                      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                      ${a === null ? "bg-action-primary-bg/10 text-action-primary-bg" : "text-text-secondary"}
                     `,
-							children: /* @__PURE__ */ u("span", {
-								className: "italic",
-								children: b("bigconsole.parsers.dataSinkSelector.none", "None")
-							})
-						}), A.map((e) => /* @__PURE__ */ u("button", {
-							type: "button",
-							onClick: () => M(e.key),
-							className: `
-                        w-full px-3 py-2.5
+								children: /* @__PURE__ */ d("span", {
+									className: "italic",
+									children: C("bigconsole.parsers.dataSinkSelector.none", "None")
+								})
+							}),
+							/* @__PURE__ */ d("div", {
+								className: p,
+								children: /* @__PURE__ */ d("span", {
+									className: m,
+									children: "Data Sources"
+								})
+							}),
+							N.map((e) => /* @__PURE__ */ d("button", {
+								type: "button",
+								onClick: () => F(e.key),
+								className: `
+                        w-full min-h-control-md px-3 py-2.5
                         text-left
                         hover:bg-bg-sunken
-                        transition-colors
-                        border-b border-border-default last:border-b-0
-                        ${i === e.key ? "bg-action-primary-bg/10" : ""}
+                        motion-safe:transition-colors
+                        border-b border-[var(--color-border-default)] last:border-b-0
+                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface
+                        ${a === e.key ? "bg-action-primary-bg/10" : ""}
                       `,
-							children: /* @__PURE__ */ u("div", {
-								className: "flex items-start justify-between gap-2",
 								children: /* @__PURE__ */ d("div", {
-									className: "flex-1 min-w-0",
-									children: [
-										/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-2 mb-1",
-											children: [/* @__PURE__ */ u(n, {
-												status: e.status,
-												size: "sm",
-												showIcon: !1
-											}), /* @__PURE__ */ u("span", {
-												className: "text-sm font-medium text-text-primary truncate",
-												children: e.name || e.key
-											})]
-										}),
-										e.description && /* @__PURE__ */ u("p", {
-											className: "text-xs text-text-secondary line-clamp-1 mb-1",
-											children: e.description
-										}),
-										/* @__PURE__ */ d("div", {
-											className: "flex items-center gap-2 text-xs text-text-tertiary",
-											children: [
-												/* @__PURE__ */ u("span", { children: b("bigconsole.parsers.dataSinkSelector.keyLabel", "key: {{key}}", { key: e.key }) }),
-												/* @__PURE__ */ u("span", { children: "•" }),
-												/* @__PURE__ */ u("span", { children: b("bigconsole.parsers.dataSinkSelector.refreshedLabel", "Refreshed: {{time}}", { time: f(e.lastRefreshedAt, b) }) })
-											]
-										})
-									]
+									className: "flex items-start justify-between gap-2",
+									children: /* @__PURE__ */ f("div", {
+										className: "flex-1 min-w-0",
+										children: [
+											/* @__PURE__ */ f("div", {
+												className: "flex min-w-0 items-center gap-2 mb-1",
+												children: [/* @__PURE__ */ d(r, {
+													status: e.status,
+													size: "sm",
+													showIcon: !1
+												}), /* @__PURE__ */ d("span", {
+													className: "text-sm font-medium text-text-primary truncate",
+													children: e.name || e.key
+												})]
+											}),
+											e.description && /* @__PURE__ */ d("p", {
+												className: "text-xs text-text-secondary line-clamp-1 mb-1",
+												children: e.description
+											}),
+											/* @__PURE__ */ f("div", {
+												className: "flex min-w-0 flex-wrap items-center gap-x-2 text-xs text-text-muted",
+												children: [
+													/* @__PURE__ */ d("span", {
+														className: "min-w-0 truncate font-mono",
+														children: C("bigconsole.parsers.dataSinkSelector.keyLabel", "key: {{key}}", { key: e.key })
+													}),
+													/* @__PURE__ */ d("span", {
+														"aria-hidden": "true",
+														children: "•"
+													}),
+													/* @__PURE__ */ d("span", {
+														className: "truncate",
+														children: C("bigconsole.parsers.dataSinkSelector.refreshedLabel", "Refreshed: {{time}}", { time: h(e.lastRefreshedAt, C) })
+													})
+												]
+											})
+										]
+									})
 								})
-							})
-						}, e.id))] })
+							}, e.id))
+						] })
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ d("div", {
 						className: "p-2 border-t border-border-default",
-						children: /* @__PURE__ */ d("button", {
+						children: /* @__PURE__ */ f("button", {
 							type: "button",
-							onClick: F,
+							onClick: R,
 							className: "\n                  w-full flex items-center gap-2\n                  px-3 py-2\n                  text-sm font-medium text-action-primary-bg\n                  rounded-md\n                  hover:bg-action-primary-bg/10\n                  transition-colors\n                ",
-							children: [/* @__PURE__ */ u(c, { className: "w-4 h-4" }), b("bigconsole.parsers.dataSinkSelector.createNew", "Create new data source")]
+							children: [/* @__PURE__ */ d(l, { className: "w-4 h-4" }), C("bigconsole.parsers.dataSinkSelector.createNew", "Create new data source")]
 						})
 					})
 				]
@@ -193,6 +224,6 @@ var p = ({ className: e }) => /* @__PURE__ */ u("svg", {
 	});
 });
 //#endregion
-export { m as default };
+export { _ as default };
 
 //# sourceMappingURL=DataSinkSelector.js.map

package/dist/bigconsole/components/parser/DataSinkSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkSelector.js","names":[],"sources":["../../../../src/bigconsole/components/parser/DataSinkSelector.tsx"],"sourcesContent":["/**\n * DataSink Selector\n *\n * Dropdown component for selecting a DataSink as a parser's input source.\n */\n\nimport { memo, useState, useMemo, useCallback, Fragment } from 'react';\nimport { Plus } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useBuildPath } from '../../contexts';\nimport { DataSinkStatusBadge } from '../datasink/DataSinkStatusBadge';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkSelectorProps {\n  /** Currently selected DataSink key */\n  value: string | null;\n  /** Callback when selection changes */\n  onChange: (key: string | null) => void;\n  /** Filter by status */\n  filterStatus?: DataSinkStatus;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the selector is disabled */\n  disabled?: boolean;\n  /** Whether to show error state */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\ntype TranslateFn = (\n  key: string,\n  fallbackOrParams?: string | Record<string, string | number>,\n  params?: Record<string, string | number>\n) => string;\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string | null | undefined, t: TranslateFn): string {\n  if (!dateString) return t('bigconsole.parsers.dataSinkSelector.relativeTime.never', 'Never');\n\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return t('bigconsole.parsers.dataSinkSelector.relativeTime.justNow', 'Just now');\n  if (minutes < 60)\n    return t('bigconsole.parsers.dataSinkSelector.relativeTime.minutesAgo', '{{minutes}}m ago', { minutes });\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return t('bigconsole.parsers.dataSinkSelector.relativeTime.hoursAgo', '{{hours}}h ago', { hours });\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return t('bigconsole.parsers.dataSinkSelector.relativeTime.daysAgo', '{{days}}d ago', { days });\n\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst ChevronDownIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkSelector = memo(function DataSinkSelector({\n  value,\n  onChange,\n  filterStatus,\n  placeholder,\n  disabled = false,\n  error = false,\n  errorMessage,\n}: DataSinkSelectorProps) {\n  const { t } = useI18n();\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const resolvedPlaceholder =\n    placeholder ?? t('bigconsole.parsers.dataSinkSelector.placeholder', 'Select a data source...');\n\n  const buildPath = useBuildPath();\n\n  const { dataSinks, loading, fetchDataSinks } = useDataSinkOperations({ skipFetch: false });\n\n  // Filter data sinks\n  const filteredDataSinks = useMemo(\n    () =>\n      dataSinks.filter((ds) => {\n        // Filter by status if specified\n        if (filterStatus && ds.status !== filterStatus) return false;\n\n        // Filter by search query\n        if (searchQuery) {\n          const query = searchQuery.toLowerCase();\n          return (\n            (ds.name || ds.key).toLowerCase().includes(query) ||\n            ds.key.toLowerCase().includes(query) ||\n            ds.description?.toLowerCase().includes(query)\n          );\n        }\n\n        return true;\n      }),\n    [dataSinks, filterStatus, searchQuery]\n  );\n\n  // Find selected DataSink\n  const selectedDataSink = useMemo(() => dataSinks.find((ds) => ds.key === value), [dataSinks, value]);\n\n  // Handle selection\n  const handleSelect = useCallback(\n    (key: string | null) => {\n      onChange(key);\n      setIsOpen(false);\n      setSearchQuery('');\n    },\n    [onChange]\n  );\n\n  // Toggle dropdown\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n    const next = !isOpen;\n    // Refetch on open so a DataSink created via the \"Create new\" tab\n    // shows up here without needing a full page reload.\n    if (next) void fetchDataSinks();\n    setIsOpen(next);\n  }, [disabled, isOpen, fetchDataSinks]);\n\n  // Close dropdown\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Open the create-DataSink page in a new tab so the current editing\n  // context (e.g. an unsaved widget in the dashboard builder) is preserved.\n  const handleCreateNew = useCallback(() => {\n    setIsOpen(false);\n    window.open(buildPath('/datasinks/new'), '_blank', 'noopener,noreferrer');\n  }, [buildPath]);\n\n  return (\n    <div className=\"relative\">\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={`\n          w-full\n          px-3 py-2\n          bg-bg-surface\n          border rounded-md\n          text-left\n          flex items-center justify-between gap-2\n          transition-colors\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-action-primary-bg cursor-pointer'}\n          ${error ? 'border-status-error-border' : 'border-border-default'}\n          ${isOpen ? 'border-action-primary-bg ring-2 ring-action-primary-bg/20' : ''}\n        `}\n      >\n        <div className=\"flex-1 min-w-0\">\n          {selectedDataSink ? (\n            <div className=\"flex items-center gap-2\">\n              <DataSinkStatusBadge status={selectedDataSink.status} size=\"sm\" showIcon={false} />\n              <span className=\"text-sm text-text-primary truncate\">\n                {selectedDataSink.name || selectedDataSink.key}\n              </span>\n            </div>\n          ) : (\n            <span className=\"text-sm text-text-tertiary\">{resolvedPlaceholder}</span>\n          )}\n        </div>\n\n        <ChevronDownIcon\n          className={`w-4 h-4 text-text-secondary transition-transform ${isOpen ? 'transform rotate-180' : ''}`}\n        />\n      </button>\n\n      {/* Error message */}\n      {error && errorMessage && <p className=\"mt-1 text-xs text-status-error-text\">{errorMessage}</p>}\n\n      {/* Dropdown */}\n      {isOpen && (\n        <Fragment>\n          {/* Backdrop */}\n          <div className=\"fixed inset-0 z-10\" onClick={handleClose} />\n\n          {/* Dropdown content */}\n          <div className=\"absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-border-default rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden\">\n            {/* Search input */}\n            <div className=\"p-2 border-b border-border-default\">\n              <input\n                type=\"text\"\n                placeholder={t('bigconsole.parsers.dataSinkSelector.searchPlaceholder', 'Search data sources...')}\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={`\n                  w-full px-3 py-2\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder-text-tertiary\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                `}\n              />\n            </div>\n\n            {/* Options list */}\n            <div className=\"overflow-y-auto flex-1\">\n              {loading ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {t('bigconsole.parsers.dataSinkSelector.loading', 'Loading data sources...')}\n                </div>\n              ) : filteredDataSinks.length === 0 ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {searchQuery\n                    ? t('bigconsole.parsers.dataSinkSelector.emptySearch', 'No matching data sources found')\n                    : t('bigconsole.parsers.dataSinkSelector.empty', 'No data sources available')}\n                </div>\n              ) : (\n                <Fragment>\n                  {/* None option */}\n                  <button\n                    type=\"button\"\n                    onClick={() => handleSelect(null)}\n                    className={`\n                      w-full px-3 py-2\n                      text-left text-sm\n                      hover:bg-bg-sunken\n                      transition-colors\n                      ${value === null ? 'bg-action-primary-bg/10 text-action-primary-bg' : 'text-text-secondary'}\n                    `}\n                  >\n                    <span className=\"italic\">{t('bigconsole.parsers.dataSinkSelector.none', 'None')}</span>\n                  </button>\n\n                  {/* DataSink options */}\n                  {filteredDataSinks.map((ds) => (\n                    <button\n                      key={ds.id}\n                      type=\"button\"\n                      onClick={() => handleSelect(ds.key)}\n                      className={`\n                        w-full px-3 py-2.5\n                        text-left\n                        hover:bg-bg-sunken\n                        transition-colors\n                        border-b border-border-default last:border-b-0\n                        ${value === ds.key ? 'bg-action-primary-bg/10' : ''}\n                      `}\n                    >\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"flex-1 min-w-0\">\n                          {/* Name and status */}\n                          <div className=\"flex items-center gap-2 mb-1\">\n                            <DataSinkStatusBadge status={ds.status} size=\"sm\" showIcon={false} />\n                            <span className=\"text-sm font-medium text-text-primary truncate\">{ds.name || ds.key}</span>\n                          </div>\n\n                          {/* Description */}\n                          {ds.description && (\n                            <p className=\"text-xs text-text-secondary line-clamp-1 mb-1\">{ds.description}</p>\n                          )}\n\n                          {/* Metadata */}\n                          <div className=\"flex items-center gap-2 text-xs text-text-tertiary\">\n                            <span>\n                              {t('bigconsole.parsers.dataSinkSelector.keyLabel', 'key: {{key}}', { key: ds.key })}\n                            </span>\n                            <span>•</span>\n                            <span>\n                              {t('bigconsole.parsers.dataSinkSelector.refreshedLabel', 'Refreshed: {{time}}', {\n                                time: formatRelativeTime(ds.lastRefreshedAt, t),\n                              })}\n                            </span>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n                  ))}\n                </Fragment>\n              )}\n            </div>\n\n            {/* Create new — persistent footer action (opens in a new tab) */}\n            <div className=\"p-2 border-t border-border-default\">\n              <button\n                type=\"button\"\n                onClick={handleCreateNew}\n                className=\"\n                  w-full flex items-center gap-2\n                  px-3 py-2\n                  text-sm font-medium text-action-primary-bg\n                  rounded-md\n                  hover:bg-action-primary-bg/10\n                  transition-colors\n                \"\n              >\n                <Plus className=\"w-4 h-4\" />\n                {t('bigconsole.parsers.dataSinkSelector.createNew', 'Create new data source')}\n              </button>\n            </div>\n          </div>\n        </Fragment>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkSelector;\n"],"mappings":"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"}
+{"version":3,"file":"DataSinkSelector.js","names":[],"sources":["../../../../src/bigconsole/components/parser/DataSinkSelector.tsx"],"sourcesContent":["/**\n * DataSink Selector\n *\n * Dropdown component for selecting a DataSink as a parser's input source.\n */\n\nimport { memo, useState, useMemo, useCallback, Fragment } from 'react';\nimport { Plus } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useBuildPath } from '../../contexts';\nimport { DataSinkStatusBadge } from '../datasink/DataSinkStatusBadge';\nimport { SECTION_FOCUS_RING } from '../common';\nimport type { DataSinkStatus } from '../../types';\n\n/**\n * Group header inside the dropdown — kept identical to ParserSelector's so the\n * two pickers that sit next to each other in the widget inspector read as one\n * system instead of two.\n */\nconst GROUP_HEADER = 'sticky top-0 z-[1] bg-bg-sunken px-3 py-1.5 border-y border-[var(--color-border-default)]';\nconst GROUP_HEADER_LABEL = 'text-xs font-semibold uppercase tracking-wide text-text-secondary';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkSelectorProps {\n  /** Currently selected DataSink key */\n  value: string | null;\n  /** Callback when selection changes */\n  onChange: (key: string | null) => void;\n  /** Filter by status */\n  filterStatus?: DataSinkStatus;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the selector is disabled */\n  disabled?: boolean;\n  /** Whether to show error state */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\ntype TranslateFn = (\n  key: string,\n  fallbackOrParams?: string | Record<string, string | number>,\n  params?: Record<string, string | number>\n) => string;\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string | null | undefined, t: TranslateFn): string {\n  if (!dateString) return t('bigconsole.parsers.dataSinkSelector.relativeTime.never', 'Never');\n\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return t('bigconsole.parsers.dataSinkSelector.relativeTime.justNow', 'Just now');\n  if (minutes < 60)\n    return t('bigconsole.parsers.dataSinkSelector.relativeTime.minutesAgo', '{{minutes}}m ago', { minutes });\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return t('bigconsole.parsers.dataSinkSelector.relativeTime.hoursAgo', '{{hours}}h ago', { hours });\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return t('bigconsole.parsers.dataSinkSelector.relativeTime.daysAgo', '{{days}}d ago', { days });\n\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst ChevronDownIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkSelector = memo(function DataSinkSelector({\n  value,\n  onChange,\n  filterStatus,\n  placeholder,\n  disabled = false,\n  error = false,\n  errorMessage,\n}: DataSinkSelectorProps) {\n  const { t } = useI18n();\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const resolvedPlaceholder =\n    placeholder ?? t('bigconsole.parsers.dataSinkSelector.placeholder', 'Select a data source...');\n\n  const buildPath = useBuildPath();\n\n  const { dataSinks, loading, fetchDataSinks } = useDataSinkOperations({ skipFetch: false });\n\n  // Filter data sinks\n  const filteredDataSinks = useMemo(\n    () =>\n      dataSinks.filter((ds) => {\n        // Filter by status if specified\n        if (filterStatus && ds.status !== filterStatus) return false;\n\n        // Filter by search query\n        if (searchQuery) {\n          const query = searchQuery.toLowerCase();\n          return (\n            (ds.name || ds.key).toLowerCase().includes(query) ||\n            ds.key.toLowerCase().includes(query) ||\n            ds.description?.toLowerCase().includes(query)\n          );\n        }\n\n        return true;\n      }),\n    [dataSinks, filterStatus, searchQuery]\n  );\n\n  // Find selected DataSink\n  const selectedDataSink = useMemo(() => dataSinks.find((ds) => ds.key === value), [dataSinks, value]);\n\n  // Handle selection\n  const handleSelect = useCallback(\n    (key: string | null) => {\n      onChange(key);\n      setIsOpen(false);\n      setSearchQuery('');\n    },\n    [onChange]\n  );\n\n  // Toggle dropdown\n  const handleToggle = useCallback(() => {\n    if (disabled) return;\n    const next = !isOpen;\n    // Refetch on open so a DataSink created via the \"Create new\" tab\n    // shows up here without needing a full page reload.\n    if (next) void fetchDataSinks();\n    setIsOpen(next);\n  }, [disabled, isOpen, fetchDataSinks]);\n\n  // Close dropdown\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  // Open the create-DataSink page in a new tab so the current editing\n  // context (e.g. an unsaved widget in the dashboard builder) is preserved.\n  const handleCreateNew = useCallback(() => {\n    setIsOpen(false);\n    window.open(buildPath('/datasinks/new'), '_blank', 'noopener,noreferrer');\n  }, [buildPath]);\n\n  return (\n    <div className=\"relative\">\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        className={`\n          w-full min-w-0 min-h-control-md\n          px-3 py-2\n          bg-bg-surface\n          border rounded-md\n          text-left\n          flex items-center justify-between gap-2\n          motion-safe:transition-colors\n          ${SECTION_FOCUS_RING}\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-action-primary-bg cursor-pointer'}\n          ${error ? 'border-status-error-border' : 'border-[var(--color-border-default)]'}\n          ${isOpen ? 'border-action-primary-bg ring-2 ring-action-primary-bg/20' : ''}\n        `}\n      >\n        <div className=\"flex-1 min-w-0\">\n          {selectedDataSink ? (\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <DataSinkStatusBadge status={selectedDataSink.status} size=\"sm\" showIcon={false} />\n              <span className=\"text-sm text-text-primary truncate\">\n                {selectedDataSink.name || selectedDataSink.key}\n              </span>\n            </div>\n          ) : (\n            <span className=\"text-sm text-text-muted\">{resolvedPlaceholder}</span>\n          )}\n        </div>\n\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          className={`w-4 h-4 shrink-0 text-text-secondary motion-safe:transition-transform ${isOpen ? 'transform rotate-180' : ''}`}\n        />\n      </button>\n\n      {/* Error message */}\n      {error && errorMessage && <p className=\"mt-1 text-xs text-status-error-text\">{errorMessage}</p>}\n\n      {/* Dropdown */}\n      {isOpen && (\n        <Fragment>\n          {/* Backdrop */}\n          <div className=\"fixed inset-0 z-10\" onClick={handleClose} />\n\n          {/* Dropdown content */}\n          <div className=\"absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-[var(--color-border-default)] rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden\">\n            {/* Search input */}\n            <div className=\"p-2 border-b border-[var(--color-border-default)]\">\n              <input\n                type=\"text\"\n                aria-label={t('bigconsole.parsers.dataSinkSelector.searchPlaceholder', 'Search data sources...')}\n                placeholder={t('bigconsole.parsers.dataSinkSelector.searchPlaceholder', 'Search data sources...')}\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={`\n                  w-full min-w-0 min-h-control-md px-3 py-2\n                  bg-bg-sunken\n                  border border-[var(--color-border-default)]\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder:text-text-muted\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                `}\n              />\n            </div>\n\n            {/* Options list */}\n            <div className=\"overflow-y-auto flex-1\">\n              {loading ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {t('bigconsole.parsers.dataSinkSelector.loading', 'Loading data sources...')}\n                </div>\n              ) : filteredDataSinks.length === 0 ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {searchQuery\n                    ? t('bigconsole.parsers.dataSinkSelector.emptySearch', 'No matching data sources found')\n                    : t('bigconsole.parsers.dataSinkSelector.empty', 'No data sources available')}\n                </div>\n              ) : (\n                <Fragment>\n                  {/* None option */}\n                  <button\n                    type=\"button\"\n                    onClick={() => handleSelect(null)}\n                    className={`\n                      w-full min-h-control-md px-3 py-2\n                      text-left text-sm\n                      hover:bg-bg-sunken\n                      motion-safe:transition-colors\n                      ${SECTION_FOCUS_RING}\n                      ${value === null ? 'bg-action-primary-bg/10 text-action-primary-bg' : 'text-text-secondary'}\n                    `}\n                  >\n                    <span className=\"italic\">{t('bigconsole.parsers.dataSinkSelector.none', 'None')}</span>\n                  </button>\n\n                  {/* DataSink options — labelled group, matching ParserSelector */}\n                  <div className={GROUP_HEADER}>\n                    <span className={GROUP_HEADER_LABEL}>Data Sources</span>\n                  </div>\n                  {filteredDataSinks.map((ds) => (\n                    <button\n                      key={ds.id}\n                      type=\"button\"\n                      onClick={() => handleSelect(ds.key)}\n                      className={`\n                        w-full min-h-control-md px-3 py-2.5\n                        text-left\n                        hover:bg-bg-sunken\n                        motion-safe:transition-colors\n                        border-b border-[var(--color-border-default)] last:border-b-0\n                        ${SECTION_FOCUS_RING}\n                        ${value === ds.key ? 'bg-action-primary-bg/10' : ''}\n                      `}\n                    >\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"flex-1 min-w-0\">\n                          {/* Name and status */}\n                          <div className=\"flex min-w-0 items-center gap-2 mb-1\">\n                            <DataSinkStatusBadge status={ds.status} size=\"sm\" showIcon={false} />\n                            <span className=\"text-sm font-medium text-text-primary truncate\">{ds.name || ds.key}</span>\n                          </div>\n\n                          {/* Description */}\n                          {ds.description && (\n                            <p className=\"text-xs text-text-secondary line-clamp-1 mb-1\">{ds.description}</p>\n                          )}\n\n                          {/* Metadata */}\n                          <div className=\"flex min-w-0 flex-wrap items-center gap-x-2 text-xs text-text-muted\">\n                            <span className=\"min-w-0 truncate font-mono\">\n                              {t('bigconsole.parsers.dataSinkSelector.keyLabel', 'key: {{key}}', { key: ds.key })}\n                            </span>\n                            <span aria-hidden=\"true\">•</span>\n                            <span className=\"truncate\">\n                              {t('bigconsole.parsers.dataSinkSelector.refreshedLabel', 'Refreshed: {{time}}', {\n                                time: formatRelativeTime(ds.lastRefreshedAt, t),\n                              })}\n                            </span>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n                  ))}\n                </Fragment>\n              )}\n            </div>\n\n            {/* Create new — persistent footer action (opens in a new tab) */}\n            <div className=\"p-2 border-t border-border-default\">\n              <button\n                type=\"button\"\n                onClick={handleCreateNew}\n                className=\"\n                  w-full flex items-center gap-2\n                  px-3 py-2\n                  text-sm font-medium text-action-primary-bg\n                  rounded-md\n                  hover:bg-action-primary-bg/10\n                  transition-colors\n                \"\n              >\n                <Plus className=\"w-4 h-4\" />\n                {t('bigconsole.parsers.dataSinkSelector.createNew', 'Create new data source')}\n              </button>\n            </div>\n          </div>\n        </Fragment>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkSelector;\n"],"mappings":"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"}

package/dist/bigconsole/components/parser/ExpressionEditor.js

@@ -39,12 +39,12 @@ var o = e(function({ value: e, type: o, onChange: s, readOnly: c = !1, height: l
 		s && e !== void 0 && s(e);
 	}, v = p ?? a(o), y = l.includes("%");
 	return /* @__PURE__ */ r("div", {
-		className: `relative ${y ? "h-full flex flex-col" : ""}`,
+		className: `relative min-w-0 ${y ? "h-full flex flex-col" : ""}`,
 		children: [/* @__PURE__ */ n("div", {
 			className: `
-          border rounded-md overflow-hidden
+          min-w-0 border rounded-md overflow-hidden
           ${y ? "flex-1 min-h-0" : ""}
-          ${f ? "border-status-error-border" : "border-border-default"}
+          ${f ? "border-status-error-border" : "border-[var(--color-border-default)]"}
         `,
 			style: y ? { height: "100%" } : void 0,
 			children: /* @__PURE__ */ n(i, {

package/dist/bigconsole/components/parser/ExpressionEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionEditor.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ExpressionEditor.tsx"],"sourcesContent":["/**\n * Expression Editor\n *\n * Monaco-based code editor for JQ/JSONata expressions.\n * Provides syntax highlighting, auto-completion, and error display.\n */\n\nimport { memo, useRef } from 'react';\nimport { Editor as MonacoEditor } from '@monaco-editor/react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ExpressionEditorProps {\n  /** Current value */\n  value: string;\n  /** Parser type for syntax highlighting */\n  type?: ParserType;\n  /** Callback when value changes */\n  onChange?: (value: string) => void;\n  /** Whether editor is read-only */\n  readOnly?: boolean;\n  /** Editor height (CSS value) */\n  height?: string;\n  /** Show line numbers */\n  lineNumbers?: boolean;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Error message to display */\n  error?: string | null;\n  /** Override language (json, plaintext, etc.) */\n  language?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get Monaco language for parser type\n */\nfunction getLanguageForParserType(type?: ParserType): string {\n  switch (type) {\n    case 'jq':\n      return 'plaintext'; // JQ doesn't have native Monaco support\n    case 'jsonata':\n      return 'javascript'; // JSONata is similar to JavaScript\n    default:\n      return 'plaintext';\n  }\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ExpressionEditor = memo(function ExpressionEditor({\n  value,\n  type,\n  onChange,\n  readOnly = false,\n  height = '300px',\n  lineNumbers = true,\n  placeholder,\n  error,\n  language,\n}: ExpressionEditorProps) {\n  const editorRef = useRef<unknown>(null);\n\n  // Configure Monaco theme before mount\n  const handleBeforeMount = (monaco: unknown) => {\n    const m = monaco as { editor: { defineTheme: (name: string, theme: unknown) => void } };\n    m.editor.defineTheme('bigconsole-dark', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editorCursor.foreground': '#ffffff',\n        'editorCursor.background': '#000000',\n        'editor.background': '#1e1e1e',\n        'editor.lineHighlightBackground': '#2a2a2a',\n      },\n    });\n  };\n\n  // Handle editor mount\n  const handleMount = (editor: unknown) => {\n    editorRef.current = editor;\n    const ed = editor as {\n      setValue: (v: string) => void;\n      getModel: () => {\n        getLineCount: () => number;\n        getLineMaxColumn: (n: number) => number;\n      } | null;\n      setSelection: (s: {\n        startLineNumber: number;\n        startColumn: number;\n        endLineNumber: number;\n        endColumn: number;\n      }) => void;\n    };\n\n    // If no value but placeholder exists, set it\n    if (!value && placeholder) {\n      ed.setValue(placeholder);\n      onChange?.(placeholder);\n\n      // Select all text so user can easily replace\n      const model = ed.getModel();\n      if (model) {\n        ed.setSelection({\n          startLineNumber: 1,\n          startColumn: 1,\n          endLineNumber: model.getLineCount(),\n          endColumn: model.getLineMaxColumn(model.getLineCount()),\n        });\n      }\n    }\n  };\n\n  // Handle value change\n  const handleChange = (newValue: string | undefined) => {\n    if (onChange && newValue !== undefined) {\n      onChange(newValue);\n    }\n  };\n\n  const editorLanguage = language ?? getLanguageForParserType(type);\n  const isPercentHeight = height.includes('%');\n\n  return (\n    <div className={`relative ${isPercentHeight ? 'h-full flex flex-col' : ''}`}>\n      <div\n        className={`\n          border rounded-md overflow-hidden\n          ${isPercentHeight ? 'flex-1 min-h-0' : ''}\n          ${error ? 'border-status-error-border' : 'border-border-default'}\n        `}\n        style={isPercentHeight ? { height: '100%' } : undefined}\n      >\n        <MonacoEditor\n          height={isPercentHeight ? '100%' : height}\n          language={editorLanguage}\n          value={value}\n          onChange={handleChange}\n          beforeMount={handleBeforeMount}\n          onMount={handleMount}\n          options={{\n            readOnly,\n            minimap: { enabled: false },\n            lineNumbers: lineNumbers ? 'on' : 'off',\n            scrollBeyondLastLine: false,\n            fontSize: 13,\n            fontFamily: \"'JetBrains Mono', 'Fira Code', 'Courier New', monospace\",\n            wordWrap: 'on',\n            automaticLayout: true,\n            padding: { top: 16, bottom: 12 },\n            lineDecorationsWidth: 8,\n            lineNumbersMinChars: 3,\n            glyphMargin: false,\n            folding: true,\n            renderLineHighlight: 'line',\n            selectOnLineNumbers: true,\n            roundedSelection: false,\n            cursorStyle: 'line',\n            cursorWidth: 2,\n            cursorBlinking: 'smooth',\n            smoothScrolling: true,\n            contextmenu: true,\n            mouseWheelZoom: false,\n            quickSuggestions: !readOnly,\n            suggestOnTriggerCharacters: !readOnly,\n            acceptSuggestionOnEnter: 'on',\n            tabCompletion: 'on',\n            wordBasedSuggestions: 'matchingDocuments',\n            parameterHints: { enabled: !readOnly },\n            suggest: {\n              showKeywords: true,\n              showSnippets: true,\n            },\n          }}\n          theme=\"bigconsole-dark\"\n        />\n      </div>\n\n      {error && (\n        <div className=\"mt-2 flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ExpressionEditor;\n"],"mappings":";;;;AA2CA,SAAS,EAAyB,GAA2B;AAC3D,SAAQ,GAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;AAQb,IAAa,IAAmB,EAAK,SAA0B,EAC7D,UACA,SACA,aACA,cAAW,IACX,YAAS,SACT,iBAAc,IACd,gBACA,UACA,eACwB;CACxB,IAAM,IAAY,EAAgB,KAAK,EAGjC,KAAqB,MAAoB;AACnC,IACR,OAAO,YAAY,mBAAmB;GACtC,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ;IACN,2BAA2B;IAC3B,2BAA2B;IAC3B,qBAAqB;IACrB,kCAAkC;IACnC;GACF,CAAC;IAIE,KAAe,MAAoB;AACvC,IAAU,UAAU;EACpB,IAAM,IAAK;AAeX,MAAI,CAAC,KAAS,GAAa;AAEzB,GADA,EAAG,SAAS,EAAY,EACxB,IAAW,EAAY;GAGvB,IAAM,IAAQ,EAAG,UAAU;AAC3B,GAAI,KACF,EAAG,aAAa;IACd,iBAAiB;IACjB,aAAa;IACb,eAAe,EAAM,cAAc;IACnC,WAAW,EAAM,iBAAiB,EAAM,cAAc,CAAC;IACxD,CAAC;;IAMF,KAAgB,MAAiC;AACrD,EAAI,KAAY,MAAa,KAAA,KAC3B,EAAS,EAAS;IAIhB,IAAiB,KAAY,EAAyB,EAAK,EAC3D,IAAkB,EAAO,SAAS,IAAI;AAE5C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY,IAAkB,yBAAyB;YAAvE,CACE,kBAAC,OAAD;GACE,WAAW;;YAEP,IAAkB,mBAAmB,GAAG;YACxC,IAAQ,+BAA+B,wBAAwB;;GAEnE,OAAO,IAAkB,EAAE,QAAQ,QAAQ,GAAG,KAAA;aAE9C,kBAAC,GAAD;IACE,QAAQ,IAAkB,SAAS;IACnC,UAAU;IACH;IACP,UAAU;IACV,aAAa;IACb,SAAS;IACT,SAAS;KACP;KACA,SAAS,EAAE,SAAS,IAAO;KAC3B,aAAa,IAAc,OAAO;KAClC,sBAAsB;KACtB,UAAU;KACV,YAAY;KACZ,UAAU;KACV,iBAAiB;KACjB,SAAS;MAAE,KAAK;MAAI,QAAQ;MAAI;KAChC,sBAAsB;KACtB,qBAAqB;KACrB,aAAa;KACb,SAAS;KACT,qBAAqB;KACrB,qBAAqB;KACrB,kBAAkB;KAClB,aAAa;KACb,aAAa;KACb,gBAAgB;KAChB,iBAAiB;KACjB,aAAa;KACb,gBAAgB;KAChB,kBAAkB,CAAC;KACnB,4BAA4B,CAAC;KAC7B,yBAAyB;KACzB,eAAe;KACf,sBAAsB;KACtB,gBAAgB,EAAE,SAAS,CAAC,GAAU;KACtC,SAAS;MACP,cAAc;MACd,cAAc;MACf;KACF;IACD,OAAM;IACN,CAAA;GACE,CAAA,EAEL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;cAER,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,EACN,kBAAC,KAAD;IAAG,WAAU;cAAkC;IAAU,CAAA,CACrD;KAEJ;;EAER"}
+{"version":3,"file":"ExpressionEditor.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ExpressionEditor.tsx"],"sourcesContent":["/**\n * Expression Editor\n *\n * Monaco-based code editor for JQ/JSONata expressions.\n * Provides syntax highlighting, auto-completion, and error display.\n */\n\nimport { memo, useRef } from 'react';\nimport { Editor as MonacoEditor } from '@monaco-editor/react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ExpressionEditorProps {\n  /** Current value */\n  value: string;\n  /** Parser type for syntax highlighting */\n  type?: ParserType;\n  /** Callback when value changes */\n  onChange?: (value: string) => void;\n  /** Whether editor is read-only */\n  readOnly?: boolean;\n  /** Editor height (CSS value) */\n  height?: string;\n  /** Show line numbers */\n  lineNumbers?: boolean;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Error message to display */\n  error?: string | null;\n  /** Override language (json, plaintext, etc.) */\n  language?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get Monaco language for parser type\n */\nfunction getLanguageForParserType(type?: ParserType): string {\n  switch (type) {\n    case 'jq':\n      return 'plaintext'; // JQ doesn't have native Monaco support\n    case 'jsonata':\n      return 'javascript'; // JSONata is similar to JavaScript\n    default:\n      return 'plaintext';\n  }\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ExpressionEditor = memo(function ExpressionEditor({\n  value,\n  type,\n  onChange,\n  readOnly = false,\n  height = '300px',\n  lineNumbers = true,\n  placeholder,\n  error,\n  language,\n}: ExpressionEditorProps) {\n  const editorRef = useRef<unknown>(null);\n\n  // Configure Monaco theme before mount.\n  //\n  // The hex literals below are deliberate and must NOT be replaced with design\n  // tokens: Monaco's `defineTheme` writes these values into its own generated\n  // stylesheet and only accepts literal colours — it does not resolve `var(...)`\n  // or Tailwind classes. Everything *around* the editor (the wrapper border, the\n  // error text) uses tokens; only the editor's internal chrome is literal.\n  const handleBeforeMount = (monaco: unknown) => {\n    const m = monaco as { editor: { defineTheme: (name: string, theme: unknown) => void } };\n    m.editor.defineTheme('bigconsole-dark', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editorCursor.foreground': '#ffffff',\n        'editorCursor.background': '#000000',\n        'editor.background': '#1e1e1e',\n        'editor.lineHighlightBackground': '#2a2a2a',\n      },\n    });\n  };\n\n  // Handle editor mount\n  const handleMount = (editor: unknown) => {\n    editorRef.current = editor;\n    const ed = editor as {\n      setValue: (v: string) => void;\n      getModel: () => {\n        getLineCount: () => number;\n        getLineMaxColumn: (n: number) => number;\n      } | null;\n      setSelection: (s: {\n        startLineNumber: number;\n        startColumn: number;\n        endLineNumber: number;\n        endColumn: number;\n      }) => void;\n    };\n\n    // If no value but placeholder exists, set it\n    if (!value && placeholder) {\n      ed.setValue(placeholder);\n      onChange?.(placeholder);\n\n      // Select all text so user can easily replace\n      const model = ed.getModel();\n      if (model) {\n        ed.setSelection({\n          startLineNumber: 1,\n          startColumn: 1,\n          endLineNumber: model.getLineCount(),\n          endColumn: model.getLineMaxColumn(model.getLineCount()),\n        });\n      }\n    }\n  };\n\n  // Handle value change\n  const handleChange = (newValue: string | undefined) => {\n    if (onChange && newValue !== undefined) {\n      onChange(newValue);\n    }\n  };\n\n  const editorLanguage = language ?? getLanguageForParserType(type);\n  const isPercentHeight = height.includes('%');\n\n  return (\n    <div className={`relative min-w-0 ${isPercentHeight ? 'h-full flex flex-col' : ''}`}>\n      <div\n        className={`\n          min-w-0 border rounded-md overflow-hidden\n          ${isPercentHeight ? 'flex-1 min-h-0' : ''}\n          ${error ? 'border-status-error-border' : 'border-[var(--color-border-default)]'}\n        `}\n        style={isPercentHeight ? { height: '100%' } : undefined}\n      >\n        <MonacoEditor\n          height={isPercentHeight ? '100%' : height}\n          language={editorLanguage}\n          value={value}\n          onChange={handleChange}\n          beforeMount={handleBeforeMount}\n          onMount={handleMount}\n          options={{\n            readOnly,\n            minimap: { enabled: false },\n            lineNumbers: lineNumbers ? 'on' : 'off',\n            scrollBeyondLastLine: false,\n            fontSize: 13,\n            fontFamily: \"'JetBrains Mono', 'Fira Code', 'Courier New', monospace\",\n            wordWrap: 'on',\n            automaticLayout: true,\n            padding: { top: 16, bottom: 12 },\n            lineDecorationsWidth: 8,\n            lineNumbersMinChars: 3,\n            glyphMargin: false,\n            folding: true,\n            renderLineHighlight: 'line',\n            selectOnLineNumbers: true,\n            roundedSelection: false,\n            cursorStyle: 'line',\n            cursorWidth: 2,\n            cursorBlinking: 'smooth',\n            smoothScrolling: true,\n            contextmenu: true,\n            mouseWheelZoom: false,\n            quickSuggestions: !readOnly,\n            suggestOnTriggerCharacters: !readOnly,\n            acceptSuggestionOnEnter: 'on',\n            tabCompletion: 'on',\n            wordBasedSuggestions: 'matchingDocuments',\n            parameterHints: { enabled: !readOnly },\n            suggest: {\n              showKeywords: true,\n              showSnippets: true,\n            },\n          }}\n          theme=\"bigconsole-dark\"\n        />\n      </div>\n\n      {error && (\n        <div className=\"mt-2 flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n            />\n          </svg>\n          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ExpressionEditor;\n"],"mappings":";;;;AA2CA,SAAS,EAAyB,GAA2B;AAC3D,SAAQ,GAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;AAQb,IAAa,IAAmB,EAAK,SAA0B,EAC7D,UACA,SACA,aACA,cAAW,IACX,YAAS,SACT,iBAAc,IACd,gBACA,UACA,eACwB;CACxB,IAAM,IAAY,EAAgB,KAAK,EASjC,KAAqB,MAAoB;AACnC,IACR,OAAO,YAAY,mBAAmB;GACtC,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ;IACN,2BAA2B;IAC3B,2BAA2B;IAC3B,qBAAqB;IACrB,kCAAkC;IACnC;GACF,CAAC;IAIE,KAAe,MAAoB;AACvC,IAAU,UAAU;EACpB,IAAM,IAAK;AAeX,MAAI,CAAC,KAAS,GAAa;AAEzB,GADA,EAAG,SAAS,EAAY,EACxB,IAAW,EAAY;GAGvB,IAAM,IAAQ,EAAG,UAAU;AAC3B,GAAI,KACF,EAAG,aAAa;IACd,iBAAiB;IACjB,aAAa;IACb,eAAe,EAAM,cAAc;IACnC,WAAW,EAAM,iBAAiB,EAAM,cAAc,CAAC;IACxD,CAAC;;IAMF,KAAgB,MAAiC;AACrD,EAAI,KAAY,MAAa,KAAA,KAC3B,EAAS,EAAS;IAIhB,IAAiB,KAAY,EAAyB,EAAK,EAC3D,IAAkB,EAAO,SAAS,IAAI;AAE5C,QACE,kBAAC,OAAD;EAAK,WAAW,oBAAoB,IAAkB,yBAAyB;YAA/E,CACE,kBAAC,OAAD;GACE,WAAW;;YAEP,IAAkB,mBAAmB,GAAG;YACxC,IAAQ,+BAA+B,uCAAuC;;GAElF,OAAO,IAAkB,EAAE,QAAQ,QAAQ,GAAG,KAAA;aAE9C,kBAAC,GAAD;IACE,QAAQ,IAAkB,SAAS;IACnC,UAAU;IACH;IACP,UAAU;IACV,aAAa;IACb,SAAS;IACT,SAAS;KACP;KACA,SAAS,EAAE,SAAS,IAAO;KAC3B,aAAa,IAAc,OAAO;KAClC,sBAAsB;KACtB,UAAU;KACV,YAAY;KACZ,UAAU;KACV,iBAAiB;KACjB,SAAS;MAAE,KAAK;MAAI,QAAQ;MAAI;KAChC,sBAAsB;KACtB,qBAAqB;KACrB,aAAa;KACb,SAAS;KACT,qBAAqB;KACrB,qBAAqB;KACrB,kBAAkB;KAClB,aAAa;KACb,aAAa;KACb,gBAAgB;KAChB,iBAAiB;KACjB,aAAa;KACb,gBAAgB;KAChB,kBAAkB,CAAC;KACnB,4BAA4B,CAAC;KAC7B,yBAAyB;KACzB,eAAe;KACf,sBAAsB;KACtB,gBAAgB,EAAE,SAAS,CAAC,GAAU;KACtC,SAAS;MACP,cAAc;MACd,cAAc;MACf;KACF;IACD,OAAM;IACN,CAAA;GACE,CAAA,EAEL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;cAER,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,EACN,kBAAC,KAAD;IAAG,WAAU;cAAkC;IAAU,CAAA,CACrD;KAEJ;;EAER"}