@grafana/plugin-ui 0.14.0-dev.1 → 0.14.1-dsconfig.032cfc4

package/dist/cjs/index.cjs

@@ -11,22 +11,25 @@ var e2eSelectors = require('@grafana/e2e-selectors');
 var runtime = require('@grafana/runtime');
 var reactUse = require('react-use');
 var ui$1 = require('@react-awesome-query-builder/ui');
-var lodash = require('lodash');
 var uuid = require('uuid');
+var lodash = require('lodash');
 var AutoSizer = require('react-virtualized-auto-sizer');
-var sqlFormatter = require('sql-formatter-plus');
+var sqlFormatter = require('sql-formatter');
 var rxjs = require('rxjs');
 var operators$1 = require('rxjs/operators');
+var useDatasourceSchema = require('./useDatasourceSchema-CxPGD2-b.js');
+var reactHookForm = require('react-hook-form');
+require('@marcbachmann/cel-js');
 var dnd = require('@hello-pangea/dnd');
 var reactPopperTooltip = require('react-popper-tooltip');
 var Prism = require('prismjs');
+require('js-yaml');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var Calendar__default = /*#__PURE__*/_interopDefaultCompat(Calendar);
 var AutoSizer__default = /*#__PURE__*/_interopDefaultCompat(AutoSizer);
-var sqlFormatter__default = /*#__PURE__*/_interopDefaultCompat(sqlFormatter);
 var Prism__default = /*#__PURE__*/_interopDefaultCompat(Prism);
 
 const QueryEditorRow = (props) => {
@@ -76,7 +79,7 @@ function Segment(props) {
   );
 }
 
-const getStyles$r = (theme) => {
+const getStyles$x = (theme) => {
   const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
   return {
     container: css.css`
@@ -226,7 +229,7 @@ const getBodyStyles = (theme) => {
 
 const DatePicker = React.memo((props) => {
   const theme = ui.useTheme2();
-  const styles = getStyles$r(theme);
+  const styles = getStyles$x(theme);
   const { isOpen, onClose } = props;
   if (!isOpen) {
     return null;
@@ -256,7 +259,7 @@ const Body = React.memo(({ value, onChange }) => {
 });
 Body.displayName = "Body";
 
-function getStyles$q() {
+function getStyles$w() {
   return {
     input: css.css({
       /* hides the native Calendar picker icon given when using type=date */
@@ -272,7 +275,7 @@ const formatDate = (date) => date.toISOString().split("T")[0];
 const DatePickerWithInput = (props) => {
   const { value, onChange, className, ...rest } = props;
   const [open, setOpen] = React.useState(false);
-  const styles = getStyles$q();
+  const styles = getStyles$w();
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     ui.Input,
     {
@@ -339,15 +342,15 @@ function getSignatureDisplayModel(signature) {
 }
 PluginSignatureBadge.displayName = "PluginSignatureBadge";
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
 class DataSourcePicker extends React.PureComponent {
   constructor(props) {
     super(props);
-    __publicField$3(this, "dataSourceSrv", runtime.getDataSourceSrv());
-    __publicField$3(this, "state", {});
-    __publicField$3(this, "onChange", (item) => {
+    __publicField$4(this, "dataSourceSrv", runtime.getDataSourceSrv());
+    __publicField$4(this, "state", {});
+    __publicField$4(this, "onChange", (item) => {
       const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
       if (dsSettings) {
         this.props.onChange(dsSettings);
@@ -427,14 +430,14 @@ class DataSourcePicker extends React.PureComponent {
     ));
   }
 }
-__publicField$3(DataSourcePicker, "defaultProps", {
+__publicField$4(DataSourcePicker, "defaultProps", {
   autoFocus: false,
   openMenuOnFocus: false,
   placeholder: "Select datasource"
 });
 
 const { FormField, Switch } = ui.LegacyForms;
-const getStyles$p = ui.stylesFactory(() => ({
+const getStyles$v = ui.stylesFactory(() => ({
   firstRow: css.css`
     display: flex;
   `,
@@ -451,7 +454,7 @@ const getStyles$p = ui.stylesFactory(() => ({
 }));
 const DataLink = (props) => {
   const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles$p();
+  const styles = getStyles$v();
   const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
   const handleChange = (field) => (event) => {
     onChange({
@@ -568,7 +571,7 @@ function useInternalLink(datasourceUid) {
   return [showInternalLink, setShowInternalLink];
 }
 
-const getStyles$o = (theme) => ({
+const getStyles$u = (theme) => ({
   infoText: css.css`
     padding-bottom: ${theme.v1.spacing.md};
     color: ${theme.v1.colors.textWeak};
@@ -580,7 +583,7 @@ const getStyles$o = (theme) => ({
 const DataLinks = (props) => {
   const { value, onChange } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$o(theme);
+  const styles = getStyles$u(theme);
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
     return /* @__PURE__ */ React__default.default.createElement(
       DataLink,
@@ -641,110 +644,21 @@ var QueryEditorExpressionType = /* @__PURE__ */ ((QueryEditorExpressionType2) =>
   return QueryEditorExpressionType2;
 })(QueryEditorExpressionType || {});
 
-function getRawSqlFn(db) {
-  return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
-}
-function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
-  var _a, _b, _c, _d;
-  let rawQuery = "";
-  if (!sql || !haveColumns(sql.columns)) {
-    return rawQuery;
-  }
-  rawQuery += createSelectClause(sql.columns);
-  if (catalog && dataset && table) {
-    rawQuery += `FROM ${catalog}.${dataset}.${table} `;
-  } else if (!disableDatasets && dataset && table) {
-    rawQuery += `FROM ${dataset}.${table} `;
-  } else if (table) {
-    rawQuery += `FROM ${table} `;
-  }
-  if (sql.whereString) {
-    rawQuery += `WHERE ${sql.whereString} `;
-  }
-  if ((_b = (_a = sql.groupBy) == null ? void 0 : _a[0]) == null ? void 0 : _b.property.name) {
-    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !lodash.isEmpty(g));
-    rawQuery += `GROUP BY ${groupBy.join(", ")} `;
-  }
-  if ((_c = sql.orderBy) == null ? void 0 : _c.property.name) {
-    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
-  }
-  if (((_d = sql.orderBy) == null ? void 0 : _d.property.name) && sql.orderByDirection) {
-    rawQuery += `${sql.orderByDirection} `;
-  }
-  if (sql.limit !== void 0 && sql.limit >= 0) {
-    rawQuery += `LIMIT ${sql.limit} `;
-  }
-  return rawQuery;
-}
-function createSelectClause(sqlColumns) {
-  const columns = sqlColumns.map((c) => {
-    var _a, _b;
-    let rawColumn = "";
-    if (c.name) {
-      rawColumn += `${c.name}(${(_a = c.parameters) == null ? void 0 : _a.map((p) => `${p.name}`)})`;
-    } else {
-      rawColumn += `${(_b = c.parameters) == null ? void 0 : _b.map((p) => `${p.name}`)}`;
-    }
-    return rawColumn;
-  });
-  return `SELECT ${columns.join(", ")} `;
-}
-function haveColumns(columns) {
-  if (!columns) {
-    return false;
-  }
-  const haveColumn = columns.some((c) => {
-    var _a, _b;
-    return ((_a = c.parameters) == null ? void 0 : _a.length) || ((_b = c.parameters) == null ? void 0 : _b.some((p) => p.name));
-  });
-  const haveFunction = columns.some((c) => c.name);
-  return haveColumn || haveFunction;
-}
-function setGroupByField(field) {
-  return {
-    type: QueryEditorExpressionType.GroupBy,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field
-    }
-  };
-}
-function setPropertyField(field) {
-  return {
-    type: QueryEditorExpressionType.Property,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field
-    }
-  };
-}
-function createFunctionField(functionName) {
-  return {
-    type: QueryEditorExpressionType.Function,
-    name: functionName,
-    parameters: []
-  };
-}
-
-function applyQueryDefaults(q) {
-  let editorMode = (q == null ? void 0 : q.editorMode) || EditorMode.Builder;
-  if ((q == null ? void 0 : q.editorMode) === void 0 && (q == null ? void 0 : q.rawSql) !== void 0) {
-    editorMode = EditorMode.Code;
-  }
-  const result = {
-    ...q,
-    refId: (q == null ? void 0 : q.refId) || "A",
-    format: (q == null ? void 0 : q.format) !== void 0 ? q.format : QueryFormat.Table,
-    rawSql: (q == null ? void 0 : q.rawSql) || "",
-    editorMode,
-    sql: (q == null ? void 0 : q.sql) || {
-      columns: [createFunctionField()],
-      groupBy: [setGroupByField()],
-      limit: 50
-    }
-  };
-  return result;
-}
+var TokenType = /* @__PURE__ */ ((TokenType2) => {
+  TokenType2["Parenthesis"] = "delimiter.parenthesis.sql";
+  TokenType2["Whitespace"] = "white.sql";
+  TokenType2["Keyword"] = "keyword.sql";
+  TokenType2["Delimiter"] = "delimiter.sql";
+  TokenType2["Operator"] = "operator.sql";
+  TokenType2["Identifier"] = "identifier.sql";
+  TokenType2["IdentifierQuote"] = "identifier.quote.sql";
+  TokenType2["Type"] = "type.sql";
+  TokenType2["Function"] = "predefined.sql";
+  TokenType2["Number"] = "number.sql";
+  TokenType2["String"] = "string.sql";
+  TokenType2["Variable"] = "variable.sql";
+  return TokenType2;
+})(TokenType || {});
 
 class LinkedToken {
   constructor(type, value, range, previous, next) {
@@ -899,21 +813,6 @@ var MacroType = /* @__PURE__ */ ((MacroType2) => {
   MacroType2[MacroType2["Table"] = 4] = "Table";
   return MacroType2;
 })(MacroType || {});
-var TokenType = /* @__PURE__ */ ((TokenType2) => {
-  TokenType2["Parenthesis"] = "delimiter.parenthesis.sql";
-  TokenType2["Whitespace"] = "white.sql";
-  TokenType2["Keyword"] = "keyword.sql";
-  TokenType2["Delimiter"] = "delimiter.sql";
-  TokenType2["Operator"] = "operator.sql";
-  TokenType2["Identifier"] = "identifier.sql";
-  TokenType2["IdentifierQuote"] = "identifier.quote.sql";
-  TokenType2["Type"] = "type.sql";
-  TokenType2["Function"] = "predefined.sql";
-  TokenType2["Number"] = "number.sql";
-  TokenType2["String"] = "string.sql";
-  TokenType2["Variable"] = "variable.sql";
-  return TokenType2;
-})(TokenType || {});
 var StatementPosition = /* @__PURE__ */ ((StatementPosition2) => {
   StatementPosition2["Unknown"] = "unknown";
   StatementPosition2["SelectKeyword"] = "selectKeyword";
@@ -5456,6 +5355,91 @@ const QUERY_FORMAT_OPTIONS = [
 const backWardToOption = (value) => ({ label: value, value });
 const toOption = (_a = data.toOption) != null ? _a : backWardToOption;
 
+function getRawSqlFn(db) {
+  return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
+}
+function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
+  var _a, _b, _c, _d;
+  let rawQuery = "";
+  if (!sql || !haveColumns(sql.columns)) {
+    return rawQuery;
+  }
+  rawQuery += createSelectClause(sql.columns);
+  if (catalog && dataset && table) {
+    rawQuery += `FROM ${catalog}.${dataset}.${table} `;
+  } else if (!disableDatasets && dataset && table) {
+    rawQuery += `FROM ${dataset}.${table} `;
+  } else if (table) {
+    rawQuery += `FROM ${table} `;
+  }
+  if (sql.whereString) {
+    rawQuery += `WHERE ${sql.whereString} `;
+  }
+  if ((_b = (_a = sql.groupBy) == null ? void 0 : _a[0]) == null ? void 0 : _b.property.name) {
+    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !lodash.isEmpty(g));
+    rawQuery += `GROUP BY ${groupBy.join(", ")} `;
+  }
+  if ((_c = sql.orderBy) == null ? void 0 : _c.property.name) {
+    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
+  }
+  if (((_d = sql.orderBy) == null ? void 0 : _d.property.name) && sql.orderByDirection) {
+    rawQuery += `${sql.orderByDirection} `;
+  }
+  if (sql.limit !== void 0 && sql.limit >= 0) {
+    rawQuery += `LIMIT ${sql.limit} `;
+  }
+  return rawQuery;
+}
+function createSelectClause(sqlColumns) {
+  const columns = sqlColumns.map((c) => {
+    var _a, _b;
+    let rawColumn = "";
+    if (c.name) {
+      rawColumn += `${c.name}(${(_a = c.parameters) == null ? void 0 : _a.map((p) => `${p.name}`)})`;
+    } else {
+      rawColumn += `${(_b = c.parameters) == null ? void 0 : _b.map((p) => `${p.name}`)}`;
+    }
+    return rawColumn;
+  });
+  return `SELECT ${columns.join(", ")} `;
+}
+function haveColumns(columns) {
+  if (!columns) {
+    return false;
+  }
+  const haveColumn = columns.some((c) => {
+    var _a, _b;
+    return ((_a = c.parameters) == null ? void 0 : _a.length) || ((_b = c.parameters) == null ? void 0 : _b.some((p) => p.name));
+  });
+  const haveFunction = columns.some((c) => c.name);
+  return haveColumn || haveFunction;
+}
+function setGroupByField(field) {
+  return {
+    type: QueryEditorExpressionType.GroupBy,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function setPropertyField(field) {
+  return {
+    type: QueryEditorExpressionType.Property,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function createFunctionField(functionName) {
+  return {
+    type: QueryEditorExpressionType.Function,
+    name: functionName,
+    parameters: []
+  };
+}
+
 const EditorStack = ({ children, wrap: wrapItems = true, ...props }) => {
   var _a, _b;
   return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { wrap: wrapItems ? "wrap" : void 0, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props }, children);
@@ -5495,7 +5479,7 @@ const getButtonStyles = (theme) => ({
 });
 
 const InputGroup = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$n);
+  const styles = ui.useStyles2(getStyles$t);
   const modifiedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.props.invalid) {
       return React.cloneElement(child, { className: css.cx(child.props.className, styles.invalidChild) });
@@ -5513,7 +5497,7 @@ const borderPriority = [
   "focused"
   // highest priority
 ];
-const getStyles$n = () => ({
+const getStyles$t = () => ({
   root: css.css({
     display: "flex",
     // Style the direct children of the component
@@ -5596,10 +5580,10 @@ const EditorFieldGroup = ({ children }) => {
 };
 
 const EditorHeader = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$m);
+  const styles = ui.useStyles2(getStyles$s);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, children);
 };
-const getStyles$m = (theme) => ({
+const getStyles$s = (theme) => ({
   root: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -5612,12 +5596,12 @@ const getStyles$m = (theme) => ({
 const EditorField$1 = (props) => {
   var _a;
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
-  const styles = ui.useStyles2(getStyles$l, width);
+  const styles = ui.useStyles2(getStyles$r, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(ui.Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$l = (theme, width) => {
+const getStyles$r = (theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -5645,10 +5629,10 @@ const getStyles$l = (theme, width) => {
 };
 
 const EditorRow$1 = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$k);
+  const styles = ui.useStyles2(getStyles$q);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$k = (theme) => {
+const getStyles$q = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -5663,10 +5647,10 @@ const EditorRows$1 = ({ children }) => {
 };
 
 const EditorSwitch = (props) => {
-  const styles = getStyles$j();
+  const styles = getStyles$p();
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__default.default.createElement(ui.Switch, { ...props }));
 };
-const getStyles$j = () => {
+const getStyles$p = () => {
   return {
     switch: css.css({
       display: "flex",
@@ -5688,7 +5672,7 @@ function InlineSelect({ label: labelProp, ...props }) {
     ValueContainer,
     SingleValue: ValueContainer
   };
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__default.default.createElement(ui.Select, { openMenuOnFocus: true, inputId: id, ...props, components }));
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__default.default.createElement(ui.Select, { inputId: id, ...props, components }));
 }
 const SelectContainer = (props) => {
   const { children } = props;
@@ -5724,10 +5708,10 @@ const getSelectStyles = (theme) => ({
 });
 
 const Space = ({ v = 0, h = 0, layout = "block" }) => {
-  const styles = ui.useStyles2(getStyles$i, v, h, layout);
+  const styles = ui.useStyles2(getStyles$o, v, h, layout);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.wrapper) });
 };
-const getStyles$i = (theme, v, h, layout) => ({
+const getStyles$o = (theme, v, h, layout) => ({
   wrapper: css.css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),
@@ -5742,6 +5726,26 @@ const getStyles$i = (theme, v, h, layout) => ({
   ])
 });
 
+function applyQueryDefaults(q) {
+  let editorMode = (q == null ? void 0 : q.editorMode) || EditorMode.Builder;
+  if ((q == null ? void 0 : q.editorMode) === void 0 && (q == null ? void 0 : q.rawSql) !== void 0) {
+    editorMode = EditorMode.Code;
+  }
+  const result = {
+    ...q,
+    refId: (q == null ? void 0 : q.refId) || "A",
+    format: (q == null ? void 0 : q.format) !== void 0 ? q.format : QueryFormat.Table,
+    rawSql: (q == null ? void 0 : q.rawSql) || "",
+    editorMode,
+    sql: (q == null ? void 0 : q.sql) || {
+      columns: [createFunctionField()],
+      groupBy: [setGroupByField()],
+      limit: 50
+    }
+  };
+  return result;
+}
+
 function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
   const buttonRef = React.useRef(null);
   React.useEffect(() => {
@@ -6131,14 +6135,33 @@ function QueryHeader({
   )))));
 }
 
-function formatSQL(q) {
-  return sqlFormatter__default.default.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m) => {
-    return m.replace(/\s/g, "");
+function formatSQL(q, language = "sql") {
+  const formatted = sqlFormatter.format(q, {
+    language,
+    paramTypes: {
+      custom: [
+        {
+          regex: "\\$\\s*\\{[^}]*\\}|\\$\\s*__\\w+(?:\\([^)]*\\))?|\\$\\s*\\w+"
+        }
+      ]
+    }
   });
+  return formatted.replace(
+    /(\$\s*\{[^}]*\})|(\$\s*__\w+(?:\([^)]*\))?)|(\$\s*\w+)/g,
+    (m) => m.replace(/\s/g, "")
+  );
 }
 
-function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }) {
-  const queryRef = React.useRef(query);
+function QueryEditorRaw({
+  children,
+  onChange,
+  query,
+  width,
+  height,
+  completionProvider,
+  language = "sql"
+}) {
+  const queryRef = React.useRef(query);
   React.useEffect(() => {
     queryRef.current = query;
   }, [query]);
@@ -6160,7 +6183,7 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
       height,
       query: query.rawSql,
       onChange: onRawQueryChange,
-      language: { id: "sql", completionProvider, formatter: formatSQL }
+      language: { id: "sql", completionProvider, formatter: (q) => formatSQL(q, language) }
     },
     children
   );
@@ -6265,6 +6288,10 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === void 0) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
+  const onFormatClick = () => {
+    runtime.reportInteraction("grafana_sql_query_editor_format_click");
+    onFormatCode == null ? void 0 : onFormatCode();
+  };
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React__default.default.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React__default.default.createElement(
     QueryValidator,
     {
@@ -6274,7 +6301,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
         validatorProps.onValidate(result);
       }
     }
-  )), showTools && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__default.default.createElement(
+  )), showTools && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { onClick: onFormatClick, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__default.default.createElement(
     ui.IconButton,
     {
       onClick: () => onExpand(!isExpanded),
@@ -6285,9 +6312,18 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   ), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.hint, name: "keyboard" })))));
 }
 
-function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+function RawEditor({
+  db,
+  query,
+  onChange,
+  onRunQuery,
+  onValidate,
+  queryToValidate,
+  range,
+  language = "sql"
+}) {
   const theme = ui.useTheme2();
-  const styles = ui.useStyles2(getStyles$h);
+  const styles = ui.useStyles2(getStyles$n);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [toolboxRef, toolboxMeasure] = reactUse.useMeasure();
   const [editorRef, editorMeasure] = reactUse.useMeasure();
@@ -6299,6 +6335,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
+        language,
         height: height ? height - toolboxMeasure.height : void 0,
         onChange
       },
@@ -6356,7 +6393,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     renderEditor(true)
   ));
 }
-function getStyles$h(theme) {
+function getStyles$n(theme) {
   return {
     modal: css.css`
       width: 95vw;
@@ -6369,23 +6406,23 @@ function getStyles$h(theme) {
   };
 }
 
-function Preview({ rawSql }) {
+function Preview({ rawSql, language = "sql" }) {
   const [_, copyToClipboard] = reactUse.useCopyToClipboard();
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$m);
   const labelElement = /* @__PURE__ */ React__default.default.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
   return /* @__PURE__ */ React__default.default.createElement(ui.Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React__default.default.createElement(
     ui.CodeEditor,
     {
       language: "sql",
       height: 80,
-      value: formatSQL(rawSql),
+      value: formatSQL(rawSql, language),
       monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
       readOnly: true,
       showMiniMap: false
     }
   ));
 }
-function getStyles$g(theme) {
+function getStyles$m(theme) {
   return {
     grow: css.css({ flexGrow: 1 }),
     label: css.css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
@@ -6504,7 +6541,7 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
 const asteriskValue = { label: "*", value: "*" };
 function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$l);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = React.useCallback(
     (item, index) => (column) => {
@@ -6600,7 +6637,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles$f = () => {
+const getStyles$l = () => {
   return { addButton: css.css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {
@@ -6946,10 +6983,10 @@ function mapFieldsToTypes(columns) {
 }
 
 const EditorRow = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$k);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$e = (theme) => {
+const getStyles$k = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -6963,12 +7000,12 @@ const EditorField = (props) => {
   var _a;
   const { label, optional, tooltip, children, width, ...fieldProps } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$d(theme, width);
+  const styles = getStyles$j(theme, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$d = ui.stylesFactory((theme, width) => {
+const getStyles$j = ui.stylesFactory((theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -6999,12 +7036,20 @@ const EditorRows = ({ children }) => {
   return /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
 };
 
-const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }) => {
+const VisualEditor = ({
+  query,
+  db,
+  queryRowFilter,
+  onChange,
+  onValidate,
+  language = "sql",
+  range
+}) => {
   const state = reactUse.useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
   }, [db, query.dataset, query.table]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(EditorRows, null, /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React__default.default.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React__default.default.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(Preview, { rawSql: query.rawSql }))), /* @__PURE__ */ React__default.default.createElement(QueryToolbox, { db, query, onValidate, range }));
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(EditorRows, null, /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React__default.default.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React__default.default.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(Preview, { rawSql: query.rawSql, language }))), /* @__PURE__ */ React__default.default.createElement(QueryToolbox, { db, query, onValidate, range }));
 };
 
 const MACRO_NAMES = [
@@ -7023,20 +7068,20 @@ const MACRO_NAMES = [
   "$__unixEpochGroupAlias"
 ];
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class SqlDatasource extends runtime.DataSourceWithBackend {
   constructor(instanceSettings, templateSrv = runtime.getTemplateSrv()) {
     super(instanceSettings);
     this.templateSrv = templateSrv;
-    __publicField$2(this, "id");
-    __publicField$2(this, "name");
-    __publicField$2(this, "interval");
-    __publicField$2(this, "db");
-    __publicField$2(this, "dataset");
-    __publicField$2(this, "annotations", {});
-    __publicField$2(this, "interpolateVariable", (value, variable) => {
+    __publicField$3(this, "id");
+    __publicField$3(this, "name");
+    __publicField$3(this, "interval");
+    __publicField$3(this, "db");
+    __publicField$3(this, "dataset");
+    __publicField$3(this, "annotations", {});
+    __publicField$3(this, "interpolateVariable", (value, variable) => {
       if (typeof value === "string") {
         if (variable.multi || variable.includeAll) {
           const result = this.getQueryModel().quoteLiteral(value);
@@ -7186,7 +7231,7 @@ const getSearchFilterScopedVar = (args) => {
   };
 };
 
-function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
+function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, language = "sql" }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [isQueryRunnable, setIsQueryRunnable] = React.useState(true);
   const db = datasource.getDB();
@@ -7262,6 +7307,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     {
       db,
       query: queryWithDefaults,
+      language,
       onChange: (q) => onQueryChange(q, false),
       queryRowFilter,
       onValidate: setIsQueryRunnable,
@@ -7271,6 +7317,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     RawEditor,
     {
       db,
+      language,
       query: queryWithDefaults,
       queryToValidate,
       onChange: onQueryChange,
@@ -7408,7 +7455,7 @@ const ConfigSubSection = ({ children, ...props }) => {
 function ConfigDescriptionLink(props) {
   const { description, suffix, feature } = props;
   const text = `Learn more about ${feature}`;
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$i);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: styles.container }, description, /* @__PURE__ */ React__default.default.createElement(
     "a",
     {
@@ -7420,7 +7467,7 @@ function ConfigDescriptionLink(props) {
     text
   ));
 }
-const getStyles$c = (theme) => {
+const getStyles$i = (theme) => {
   return {
     container: css.css({
       color: theme.colors.text.secondary,
@@ -8389,6 +8436,2545 @@ const AdvancedHttpSettings = ({
   ));
 };
 
+const SECURE_FIELD_CONFIGURED = "__CONFIGURED__";
+function resolveSecureKeyTemplate(template, item, index) {
+  return template.replace(/\{index1\}/g, String(index + 1)).replace(/\{index\}/g, String(index)).replace(/\{item\.(\w+)\}/g, (_, key) => {
+    var _a;
+    return String((_a = item[key]) != null ? _a : "");
+  });
+}
+function evaluateItemCondition(condition, item) {
+  const trimmed = condition.trim();
+  if (trimmed === "true") {
+    return true;
+  }
+  const match = trimmed.match(/^item\.(\w+)\s*==\s*(.+)$/);
+  if (!match) {
+    return false;
+  }
+  const [, key, rawValue] = match;
+  const actualValue = item[key];
+  const expected = rawValue.trim();
+  if (expected === "true") {
+    return actualValue === true;
+  }
+  if (expected === "false") {
+    return actualValue === false;
+  }
+  const unquoted = expected.replace(/^['"]|['"]$/g, "");
+  return String(actualValue) === unquoted;
+}
+function findActiveSecureOverride(itemFields, item, index) {
+  for (const field of itemFields) {
+    if (!field.overrides) {
+      continue;
+    }
+    for (const override of field.overrides) {
+      if (!override.secureKey) {
+        continue;
+      }
+      if (evaluateItemCondition(override.when, item)) {
+        return {
+          fieldKey: field.key,
+          resolvedKey: resolveSecureKeyTemplate(override.secureKey, item, index)
+        };
+      }
+    }
+  }
+  return null;
+}
+function patternToRegex(pattern) {
+  const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp("^" + escaped.replace("\\{index\\}", "(\\d+)") + "$");
+}
+function findIndicesForPattern(record, pattern) {
+  const re = patternToRegex(pattern);
+  const indices = [];
+  for (const key of Object.keys(record)) {
+    const m = key.match(re);
+    if (m) {
+      const n = Number(m[1]);
+      if (!Number.isNaN(n)) {
+        indices.push(n);
+      }
+    }
+  }
+  return indices.sort((a, b) => a - b);
+}
+function expandIndexedPair(field, ds) {
+  var _a, _b, _c;
+  const storage = field.storage;
+  if ((storage == null ? void 0 : storage.type) !== "indexedPair" || !storage.key || !storage.value) {
+    return [];
+  }
+  const source = storage.key.target === "jsonData" ? (_a = ds.jsonData) != null ? _a : {} : ds;
+  const indices = findIndicesForPattern(source, storage.key.pattern);
+  const items = [];
+  for (const i of indices) {
+    const nameKey = storage.key.pattern.replace("{index}", String(i));
+    const valueKey = storage.value.pattern.replace("{index}", String(i));
+    const nameVal = source[nameKey];
+    if (nameVal === void 0 || nameVal === null) {
+      continue;
+    }
+    const hasValue = storage.value.target === "secureJsonData" ? !!((_b = ds.secureJsonFields) == null ? void 0 : _b[valueKey]) : !!((_c = ds.jsonData) == null ? void 0 : _c[valueKey]);
+    items.push({
+      index: i,
+      name: String(nameVal),
+      value: hasValue ? SECURE_FIELD_CONFIGURED : ""
+    });
+  }
+  return items;
+}
+function flattenIndexedPair(field, items, jsonData, secureJsonData, secureJsonFields) {
+  var _a;
+  const storage = field.storage;
+  if ((storage == null ? void 0 : storage.type) !== "indexedPair" || !storage.key || !storage.value) {
+    return;
+  }
+  const existingIndices = new Set(
+    storage.key.target === "jsonData" ? findIndicesForPattern(jsonData, storage.key.pattern) : []
+  );
+  const usedIndices = /* @__PURE__ */ new Set();
+  const startIdx = (_a = storage.startIndex) != null ? _a : 1;
+  let nextIndex = existingIndices.size > 0 ? Math.max(...existingIndices) + 1 : startIdx;
+  for (const item of items) {
+    let idx = item.index;
+    if (idx === 0) {
+      idx = nextIndex++;
+    }
+    usedIndices.add(idx);
+    const nameKey = storage.key.pattern.replace("{index}", String(idx));
+    const valueKey = storage.value.pattern.replace("{index}", String(idx));
+    if (storage.key.target === "jsonData") {
+      jsonData[nameKey] = item.name;
+    }
+    if (storage.value.target === "secureJsonData") {
+      if (item.value === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[valueKey] = true;
+      } else if (item.value) {
+        secureJsonData[valueKey] = item.value;
+        secureJsonFields[valueKey] = false;
+      }
+    } else if (storage.value.target === "jsonData") {
+      jsonData[valueKey] = item.value;
+    }
+  }
+  for (const idx of existingIndices) {
+    if (usedIndices.has(idx)) {
+      continue;
+    }
+    const nameKey = storage.key.pattern.replace("{index}", String(idx));
+    const valueKey = storage.value.pattern.replace("{index}", String(idx));
+    if (storage.key.target === "jsonData") {
+      delete jsonData[nameKey];
+    }
+    if (storage.value.target === "secureJsonData") {
+      delete secureJsonFields[valueKey];
+      delete secureJsonData[valueKey];
+    } else if (storage.value.target === "jsonData") {
+      delete jsonData[valueKey];
+    }
+  }
+}
+function resolveRawPath(ref, ds) {
+  var _a;
+  const trimmed = ref.trim();
+  if (trimmed.startsWith("jsonData.")) {
+    return (_a = ds.jsonData) == null ? void 0 : _a[trimmed.slice(9)];
+  }
+  if (trimmed.startsWith("root.")) {
+    return ds[trimmed.slice(5)];
+  }
+  return void 0;
+}
+async function fetchExistingValues(dsUid, fields) {
+  var _a, _b, _c, _d, _e, _f;
+  try {
+    const ds = await runtime.getBackendSrv().get(`/api/datasources/uid/${dsUid}`, void 0, void 0, {
+      showErrorAlert: false
+    });
+    const values = {};
+    for (const field of fields) {
+      if (((_a = field.storage) == null ? void 0 : _a.type) === "indexedPair") {
+        values[field.key] = expandIndexedPair(field, ds);
+        continue;
+      }
+      const fk = useDatasourceSchema.formKey(field);
+      switch (field.target) {
+        case "root":
+          if (ds[field.key] !== void 0) {
+            values[fk] = ds[field.key];
+          }
+          break;
+        case "jsonData":
+          if (field.section) {
+            const sectionObj = (_b = ds.jsonData) == null ? void 0 : _b[field.section];
+            if ((sectionObj == null ? void 0 : sectionObj[field.key]) !== void 0) {
+              values[fk] = sectionObj[field.key];
+            }
+          } else if (((_c = ds.jsonData) == null ? void 0 : _c[field.key]) !== void 0) {
+            values[fk] = ds.jsonData[field.key];
+          }
+          break;
+        case "secureJsonData":
+          if ((_d = ds.secureJsonFields) == null ? void 0 : _d[field.key]) {
+            values[fk] = SECURE_FIELD_CONFIGURED;
+          }
+          break;
+      }
+      if (values[fk] === void 0 && ((_e = field.storage) == null ? void 0 : _e.type) === "computed" && field.storage.read) {
+        const fallback = resolveRawPath(field.storage.read, ds);
+        if (fallback !== void 0) {
+          values[fk] = fallback;
+        }
+      }
+    }
+    for (const field of fields) {
+      if (field.valueType !== "array" || !((_f = field.item) == null ? void 0 : _f.fields)) {
+        continue;
+      }
+      const itemFields = field.item.fields;
+      const hasSecureOverride = itemFields.some((f) => {
+        var _a2;
+        return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+      });
+      if (!hasSecureOverride) {
+        continue;
+      }
+      const fk = useDatasourceSchema.formKey(field);
+      const arr = values[fk];
+      if (!Array.isArray(arr)) {
+        continue;
+      }
+      values[fk] = arr.map((item, idx) => {
+        var _a2;
+        const match = findActiveSecureOverride(itemFields, item, idx);
+        if (match && ((_a2 = ds.secureJsonFields) == null ? void 0 : _a2[match.resolvedKey])) {
+          return { ...item, [match.fieldKey]: SECURE_FIELD_CONFIGURED };
+        }
+        return item;
+      });
+    }
+    return { values, readOnly: !!ds.readOnly };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to load datasource configuration";
+    return { values: {}, readOnly: false, error: message };
+  }
+}
+function buildDatasourceConfigPayload(data, fields, existing, isFieldVisible) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const rootFields = {};
+  const jsonData = { ...(_a = existing.jsonData) != null ? _a : {} };
+  const secureJsonData = {};
+  const secureJsonFields = { ...(_b = existing.secureJsonFields) != null ? _b : {} };
+  for (const field of fields) {
+    if (((_c = field.storage) == null ? void 0 : _c.type) === "indexedPair") {
+      const items = Array.isArray(data[field.key]) ? data[field.key] : [];
+      flattenIndexedPair(field, items, jsonData, secureJsonData, secureJsonFields);
+      continue;
+    }
+    const isManagedByEffect = (_d = field.tags) == null ? void 0 : _d.some((t) => t.startsWith("managed-by:"));
+    if (!isManagedByEffect && !isFieldVisible(field)) {
+      continue;
+    }
+    const fk = useDatasourceSchema.formKey(field);
+    const value = data[fk];
+    if (field.target === "secureJsonData") {
+      if (value === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[field.key] = true;
+        continue;
+      }
+      if (value && value !== "") {
+        secureJsonData[field.key] = String(value);
+        secureJsonFields[field.key] = false;
+      } else {
+        secureJsonFields[field.key] = false;
+      }
+      continue;
+    }
+    if (value === void 0 || value === "") {
+      continue;
+    }
+    switch (field.target) {
+      case "root":
+        rootFields[field.key] = value;
+        break;
+      case "jsonData":
+        if (field.section) {
+          if (!jsonData[field.section] || typeof jsonData[field.section] !== "object") {
+            jsonData[field.section] = {};
+          }
+          jsonData[field.section][field.key] = value;
+        } else {
+          jsonData[field.key] = value;
+        }
+        break;
+    }
+  }
+  for (const field of fields) {
+    if (field.valueType !== "array" || !((_e = field.item) == null ? void 0 : _e.fields) || field.target !== "jsonData") {
+      continue;
+    }
+    const itemFields = field.item.fields;
+    const hasSecureOverride = itemFields.some((f) => {
+      var _a2;
+      return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+    });
+    if (!hasSecureOverride) {
+      continue;
+    }
+    const arr = field.section ? (_f = jsonData[field.section]) == null ? void 0 : _f[field.key] : jsonData[field.key];
+    if (!Array.isArray(arr)) {
+      continue;
+    }
+    const secureKeyOverrides = [];
+    for (const f of itemFields) {
+      for (const o of (_g = f.overrides) != null ? _g : []) {
+        if (o.secureKey) {
+          secureKeyOverrides.push({ fieldKey: f.key, override: o });
+        }
+      }
+    }
+    const activeSecureKeys = /* @__PURE__ */ new Set();
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      const match = findActiveSecureOverride(itemFields, item, i);
+      if (!match) {
+        continue;
+      }
+      const resolvedKey = match.resolvedKey;
+      activeSecureKeys.add(resolvedKey);
+      const itemValue = item[match.fieldKey];
+      if (itemValue === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[resolvedKey] = true;
+      } else if (itemValue && itemValue !== "") {
+        secureJsonData[resolvedKey] = String(itemValue);
+        secureJsonFields[resolvedKey] = false;
+        item[match.fieldKey] = "";
+      }
+    }
+    const existingSecureFields = (_h = existing.secureJsonFields) != null ? _h : {};
+    for (const existingKey of Object.keys(existingSecureFields)) {
+      const couldBeFromThisField = secureKeyOverrides.some((sko) => {
+        const staticPrefix = sko.override.secureKey.split("{")[0];
+        return staticPrefix && existingKey.startsWith(staticPrefix);
+      });
+      if (couldBeFromThisField && !activeSecureKeys.has(existingKey)) {
+        secureJsonFields[existingKey] = false;
+        secureJsonData[existingKey] = "";
+      }
+    }
+  }
+  return { rootFields, jsonData, secureJsonData, secureJsonFields };
+}
+async function submitDatasourceConfig(dsUid, data, fields, isFieldVisible) {
+  const existing = await runtime.getBackendSrv().get(`/api/datasources/uid/${dsUid}`);
+  const { rootFields, jsonData, secureJsonData, secureJsonFields } = buildDatasourceConfigPayload(
+    data,
+    fields,
+    existing,
+    isFieldVisible
+  );
+  await runtime.getBackendSrv().put(`/api/datasources/uid/${dsUid}`, {
+    ...existing,
+    ...rootFields,
+    jsonData,
+    secureJsonData,
+    secureJsonFields
+  });
+}
+
+function evaluateEffectCondition(when, fieldValue) {
+  var _a, _b;
+  const m = when.match(/^value\s*(==|!=)\s*(?:'([^']*)'|"([^"]*)"|(.+))$/);
+  if (!m) {
+    return false;
+  }
+  const op = m[1];
+  let target = (_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4];
+  if (target === "true") {
+    target = true;
+  } else if (target === "false") {
+    target = false;
+  } else if (typeof target === "string" && /^-?\d+(\.\d+)?$/.test(target)) {
+    target = Number(target);
+  }
+  const eq = String(fieldValue) === String(target);
+  return op === "==" ? eq : !eq;
+}
+function isFieldRequired(field, watchedValues, fieldById, celContext) {
+  if (field.required) {
+    return true;
+  }
+  if (field.requiredWhen) {
+    if (celContext) {
+      return useDatasourceSchema.evaluateCelExpression(field.requiredWhen, celContext);
+    }
+    const parsed = useDatasourceSchema.parseDependsOn(field.requiredWhen);
+    if (parsed) {
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? useDatasourceSchema.formKey(depField) : parsed.field;
+      return useDatasourceSchema.evaluateDependsOn(parsed, useDatasourceSchema.getWatchedValue(watchedValues, depKey));
+    }
+  }
+  return false;
+}
+function buildValidationRules(field, required) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const rules = {};
+  const label = (_a = field.label) != null ? _a : field.key;
+  if (required) {
+    if (field.target === "secureJsonData") {
+      rules.validate = (value) => {
+        if (value === SECURE_FIELD_CONFIGURED) {
+          return true;
+        }
+        if (!value || value === "") {
+          return `${label} is required`;
+        }
+        return true;
+      };
+    } else {
+      rules.required = `${label} is required`;
+    }
+  }
+  if (field.valueType === "array" && ((_b = field.item) == null ? void 0 : _b.valueType) === "object" && ((_c = field.item.fields) == null ? void 0 : _c.length)) {
+    const requiredItemFields = field.item.fields.filter((f) => f.required);
+    if (requiredItemFields.length > 0) {
+      const existingValidate = rules.validate;
+      rules.validate = (value) => {
+        var _a2;
+        if (existingValidate) {
+          const r = existingValidate(value);
+          if (r !== true) {
+            return r;
+          }
+        }
+        if (!Array.isArray(value)) {
+          return true;
+        }
+        const itemErrors = {};
+        for (let i = 0; i < value.length; i++) {
+          const item = value[i];
+          const missing = [];
+          for (const rf of requiredItemFields) {
+            const v = item[rf.key];
+            if (v === void 0 || v === null || v === "") {
+              missing.push((_a2 = rf.label) != null ? _a2 : rf.key);
+            }
+          }
+          if (missing.length > 0) {
+            itemErrors[i] = `${missing.join(", ")} required`;
+          }
+        }
+        if (Object.keys(itemErrors).length === 0) {
+          return true;
+        }
+        return `__ITEM_ERRORS__${JSON.stringify(itemErrors)}`;
+      };
+    }
+  }
+  if (field.validations) {
+    for (const v of field.validations) {
+      switch (v.type) {
+        case "pattern":
+          rules.pattern = {
+            value: new RegExp(v.pattern),
+            message: (_d = v.message) != null ? _d : `Invalid ${label}`
+          };
+          break;
+        case "range":
+          if (v.min !== void 0) {
+            rules.min = { value: v.min, message: (_e = v.message) != null ? _e : `Minimum value is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.max = { value: v.max, message: (_f = v.message) != null ? _f : `Maximum value is ${v.max}` };
+          }
+          break;
+        case "length":
+          if (v.min !== void 0) {
+            rules.minLength = { value: v.min, message: (_g = v.message) != null ? _g : `Minimum length is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.maxLength = { value: v.max, message: (_h = v.message) != null ? _h : `Maximum length is ${v.max}` };
+          }
+          break;
+      }
+    }
+  }
+  return rules;
+}
+const ITEM_ERRORS_PREFIX = "__ITEM_ERRORS__";
+function parseItemErrors(errorMessage) {
+  if (!errorMessage || !errorMessage.startsWith(ITEM_ERRORS_PREFIX)) {
+    return null;
+  }
+  try {
+    return JSON.parse(errorMessage.slice(ITEM_ERRORS_PREFIX.length));
+  } catch (e) {
+    return null;
+  }
+}
+
+const PdcFieldNote = (props) => {
+  const { enabled, description, configUrl } = props;
+  const styles = ui.useStyles2(getStyles$h);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "shield", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Private data source connect: ", /* @__PURE__ */ React__default.default.createElement("strong", null, enabled ? "Enabled" : "Disabled")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }))), /* @__PURE__ */ React__default.default.createElement(ui.LinkButton, { variant: "secondary", size: "sm", icon: "external-link-alt", href: configUrl }, "Configure in settings"));
+};
+const getStyles$h = (theme) => ({
+  wrapper: css.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
+  note: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  })
+});
+
+function SecureFieldInput(props) {
+  var _a;
+  const { formField, placeholder, disabled } = props;
+  const isConfigured = formField.value === SECURE_FIELD_CONFIGURED;
+  const [revealed, setRevealed] = React.useState(false);
+  const styles = ui.useStyles2(getSecureFieldStyles);
+  if (isConfigured) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.configuredRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", fill: "text", size: "sm", onClick: () => formField.onChange(""), type: "button" }, "Reset"));
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      ...formField,
+      value: String((_a = formField.value) != null ? _a : ""),
+      type: revealed ? "text" : "password",
+      placeholder,
+      disabled,
+      suffix: /* @__PURE__ */ React__default.default.createElement(
+        ui.Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  );
+}
+const getSecureFieldStyles = (theme) => ({
+  configuredRow: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    whiteSpace: "nowrap"
+  }),
+  configuredBadge: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    borderRadius: theme.shape.radius.pill,
+    backgroundColor: theme.colors.success.transparent,
+    color: theme.colors.success.text,
+    fontSize: theme.typography.bodySmall.fontSize,
+    whiteSpace: "nowrap"
+  })
+});
+
+const ComplexFieldNote = (props) => {
+  const { count, label } = props;
+  const styles = ui.useStyles2(getStyles$g);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, count > 0 ? `${count} ${label.toLowerCase()} configured.` : `No ${label.toLowerCase()} configured.`, " Configure in Grafana UI."));
+};
+const getStyles$g = (theme) => ({
+  note: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  })
+});
+
+function FileUploadField(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { field, formField, disabled, setValue } = props;
+  const [mode, setModeLocal] = React.useState("upload");
+  const [error, setError] = React.useState(null);
+  const theme = ui.useTheme2();
+  const mapping = (_a = field.ui) == null ? void 0 : _a.fileMapping;
+  const accept = (_c = (_b = field.ui) == null ? void 0 : _b.accept) != null ? _c : [".json"];
+  const setMode = React.useCallback(
+    (next) => {
+      setModeLocal(next);
+      formField.onChange(next);
+    },
+    [formField]
+  );
+  const processJson = React.useCallback(
+    (text) => {
+      const fileMapping = mapping != null ? mapping : {};
+      try {
+        const parsed = JSON.parse(text);
+        if (typeof parsed !== "object" || parsed === null) {
+          setError("Invalid JSON object");
+          return;
+        }
+        const requiredKeys = Object.keys(fileMapping);
+        const missingKeys = requiredKeys.filter((k) => parsed[k] === void 0);
+        if (missingKeys.length > 0) {
+          setError(`Missing keys: ${missingKeys.join(", ")}`);
+          return;
+        }
+        for (const [jsonKey, targetFieldId] of Object.entries(fileMapping)) {
+          if (parsed[jsonKey] !== void 0) {
+            const parts = targetFieldId.split(".");
+            const fk = parts.length === 2 ? parts[1] : targetFieldId;
+            setValue(fk, parsed[jsonKey]);
+          }
+        }
+        setError(null);
+        setModeLocal("manual");
+        formField.onChange("manual");
+      } catch (e) {
+        setError("Invalid JSON");
+      }
+    },
+    [mapping, setValue, formField]
+  );
+  const styles = getStyles$f(theme);
+  if (mode === "manual") {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"));
+  }
+  if (mode === "paste") {
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        placeholder: (_e = (_d = field.ui) == null ? void 0 : _d.placeholder) != null ? _e : "Paste Google JWT token here",
+        rows: (_g = (_f = field.ui) == null ? void 0 : _f.rows) != null ? _g : 10,
+        onBlur: (e) => {
+          const val = e.currentTarget.value;
+          if (val.trim()) {
+            processJson(val);
+          }
+        },
+        disabled
+      }
+    ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+    ui.FileDropzone,
+    {
+      options: { multiple: false, accept: accept.join(",") },
+      readAs: "readAsText",
+      onLoad: (result) => {
+        if (typeof result === "string") {
+          processJson(result);
+        }
+      }
+    }
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+}
+function getStyles$f(theme) {
+  return {
+    buttonRow: css.css({
+      marginTop: theme.spacing(1),
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(0.5)
+    }),
+    separator: css.css({
+      padding: `0 ${theme.spacing(0.5)}`,
+      color: theme.colors.text.secondary
+    }),
+    error: css.css({
+      color: theme.colors.error.text,
+      fontSize: theme.typography.bodySmall.fontSize,
+      marginTop: theme.spacing(0.5),
+      display: "block"
+    })
+  };
+}
+
+const IndexedPairEditor = (props) => {
+  const { value, onChange, maxItems = 10, disabled, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
+  const items = Array.isArray(value) ? value : [];
+  const addItem = () => {
+    if (items.length >= maxItems) {
+      return;
+    }
+    onChange([...items, { index: 0, name: "", value: "" }]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, key, val) => {
+    const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    IndexedPairRow,
+    {
+      key: item.index || `new-${i}`,
+      item,
+      index: i,
+      disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      hideControls,
+      itemLabel
+    }
+  )), !hideControls && items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", itemLabel)), !hideControls && items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " ", itemLabel, "s reached"));
+};
+const IndexedPairRow = (props) => {
+  const { item, index, disabled, onUpdate, onRemove, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
+  const secureStyles = ui.useStyles2(getSecureFieldStyles);
+  const isConfigured = item.value === SECURE_FIELD_CONFIGURED;
+  const [editing, setEditing] = React.useState(false);
+  const [revealed, setRevealed] = React.useState(false);
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      value: item.name,
+      placeholder: "key",
+      disabled: disabled || hideControls,
+      onChange: (e) => onUpdate(index, "name", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      }
+    }
+  )), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, isConfigured && !editing ? /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React__default.default.createElement("span", { className: secureStyles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      onClick: () => {
+        setEditing(true);
+        onUpdate(index, "value", "");
+      },
+      type: "button"
+    },
+    "Reset"
+  )) : /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      value: item.value === SECURE_FIELD_CONFIGURED ? "" : item.value,
+      placeholder: `${itemLabel} value`,
+      disabled,
+      type: revealed ? "text" : "password",
+      onChange: (e) => onUpdate(index, "value", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      },
+      suffix: /* @__PURE__ */ React__default.default.createElement(
+        ui.Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  )), !hideControls && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `Remove ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": `Remove ${itemLabel}`,
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  )));
+};
+const getStyles$e = (theme) => ({
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  }),
+  limitNote: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+function ObjectArrayEditor(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { field, value, onChange, disabled, errorMessage } = props;
+  const styles = ui.useStyles2(getStyles$d);
+  const itemFields = (_b = (_a = field.item) == null ? void 0 : _a.fields) != null ? _b : [];
+  const layoutRows = computeLayoutRows(itemFields);
+  const items = Array.isArray(value) ? value : [];
+  const maxItems = (_e = (_d = (_c = field.validations) == null ? void 0 : _c.find((v) => v.type === "itemCount")) == null ? void 0 : _d.max) != null ? _e : 20;
+  const label = (_f = field.label) != null ? _f : field.key;
+  const itemErrors = parseItemErrors(errorMessage);
+  const addItem = () => {
+    var _a2, _b2;
+    if (items.length >= maxItems) {
+      return;
+    }
+    const empty = {};
+    for (const f of itemFields) {
+      if (f.valueType === "boolean") {
+        empty[f.key] = (_a2 = f.defaultValue) != null ? _a2 : false;
+      } else {
+        empty[f.key] = (_b2 = f.defaultValue) != null ? _b2 : "";
+      }
+    }
+    onChange([...items, empty]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, key, val) => {
+    const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 1 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    ObjectArrayItemRow,
+    {
+      key: i,
+      item,
+      index: i,
+      itemFields,
+      layoutRows,
+      disabled: !!disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      showLabels: true,
+      error: itemErrors == null ? void 0 : itemErrors[i]
+    }
+  )), items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", label.toLowerCase())), items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " items reached"));
+}
+function computeLayoutRows(fields) {
+  var _a;
+  const hasExplicitRow = fields.some((f) => {
+    var _a2;
+    return ((_a2 = f.ui) == null ? void 0 : _a2.row) !== void 0;
+  });
+  if (!hasExplicitRow) {
+    if (fields.length <= 3) {
+      return [fields];
+    }
+    return fields.map((f) => [f]);
+  }
+  const rowMap = /* @__PURE__ */ new Map();
+  const noRow = [];
+  for (const f of fields) {
+    if (((_a = f.ui) == null ? void 0 : _a.row) !== void 0) {
+      const existing = rowMap.get(f.ui.row);
+      if (existing) {
+        existing.push(f);
+      } else {
+        rowMap.set(f.ui.row, [f]);
+      }
+    } else {
+      noRow.push(f);
+    }
+  }
+  const sortedKeys = [...rowMap.keys()].sort((a, b) => a - b);
+  const rows = sortedKeys.map((k) => rowMap.get(k));
+  for (const f of noRow) {
+    rows.push([f]);
+  }
+  return rows;
+}
+function makeItemFormField(item, index, fieldKey, onUpdate) {
+  return {
+    name: `item-${index}-${fieldKey}`,
+    value: item[fieldKey],
+    onChange: (eventOrValue) => {
+      if (eventOrValue != null && typeof eventOrValue === "object" && "target" in eventOrValue) {
+        onUpdate(index, fieldKey, eventOrValue.target.value);
+      } else {
+        onUpdate(index, fieldKey, eventOrValue);
+      }
+    },
+    onBlur: () => {
+    }
+  };
+}
+function effectiveItemField(field, isSecure) {
+  if (!isSecure) {
+    return field;
+  }
+  return { ...field, semanticType: "password" };
+}
+function ObjectArrayItemRow({
+  item,
+  index,
+  itemFields,
+  layoutRows,
+  disabled,
+  onUpdate,
+  onRemove,
+  showLabels,
+  error
+}) {
+  const styles = ui.useStyles2(getStyles$d);
+  const secureOverride = findActiveSecureOverride(itemFields, item, index);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.itemRow }, layoutRows.map((row, rowIdx) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { key: rowIdx, direction: "row", gap: 1, alignItems: "flex-end", wrap: "wrap" }, row.map((field) => {
+    var _a;
+    const isSecureTarget = (secureOverride == null ? void 0 : secureOverride.fieldKey) === field.key;
+    const eff = effectiveItemField(field, !!isSecureTarget);
+    const formField = makeItemFormField(item, index, field.key, onUpdate);
+    if (isSecureTarget && item[field.key] === SECURE_FIELD_CONFIGURED) {
+      formField.value = SECURE_FIELD_CONFIGURED;
+    }
+    return /* @__PURE__ */ React__default.default.createElement("div", { key: field.key, className: field.valueType === "boolean" ? styles.boolCell : styles.inputCell }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.cellLabel }, (_a = field.label) != null ? _a : field.key, field.required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.required }, " *")), renderFieldInput(eff, formField, disabled));
+  }), rowIdx === 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.removeCellWithLabel }, /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Remove" }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": "Remove item",
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  ))))), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.itemError }, error));
+}
+const getStyles$d = (theme) => ({
+  itemRow: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
+  inputCell: css.css({
+    flex: "1 1 120px",
+    minWidth: 120,
+    overflow: "hidden"
+  }),
+  boolCell: css.css({
+    flex: "0 0 auto",
+    minWidth: 0
+  }),
+  cellLabel: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.25)
+  }),
+  required: css.css({
+    color: theme.colors.error.text
+  }),
+  removeCellWithLabel: css.css({
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "flex-end",
+    paddingBottom: theme.spacing(0.25)
+  }),
+  itemError: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  }),
+  limitNote: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+const StringArrayInput = (props) => {
+  const { value, onChange, placeholder, disabled, itemLabel = "item" } = props;
+  const styles = ui.useStyles2(getStyles$c);
+  const items = Array.isArray(value) ? value : [];
+  const lastInputRef = React.useRef(null);
+  const shouldFocusLastRef = React.useRef(false);
+  React.useEffect(() => {
+    if (shouldFocusLastRef.current && lastInputRef.current) {
+      lastInputRef.current.focus();
+      shouldFocusLastRef.current = false;
+    }
+  }, [items.length]);
+  const addItem = () => {
+    shouldFocusLastRef.current = true;
+    onChange([...items, ""]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, val) => {
+    onChange(items.map((item, i) => i === index ? val : item));
+  };
+  const isItemValid = (index, val) => {
+    const trimmed = val.trim();
+    if (trimmed === "") {
+      return false;
+    }
+    return !items.some((item, i) => i !== index && item.trim() === trimmed);
+  };
+  const handleEnter = (index, currentValue) => {
+    if (!isItemValid(index, currentValue)) {
+      return;
+    }
+    if (index === items.length - 1) {
+      shouldFocusLastRef.current = true;
+      onChange([...items, ""]);
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, key: i }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      ref: i === items.length - 1 ? lastInputRef : void 0,
+      value: item,
+      placeholder: placeholder != null ? placeholder : itemLabel,
+      disabled,
+      onChange: (e) => updateItem(i, e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleEnter(i, e.currentTarget.value);
+        }
+      }
+    }
+  )), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `Remove ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": `Remove ${itemLabel}`,
+      onClick: () => removeItem(i),
+      type: "button"
+    }
+  )))), !disabled && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", onClick: addItem, type: "button" }, "Add")));
+};
+const getStyles$c = (theme) => ({
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  })
+});
+
+function renderFieldInput(field, formField, disabled, errorMessage, setValue) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  const value = formField.value;
+  const placeholder = (_a = field.ui) == null ? void 0 : _a.placeholder;
+  const label = (_b = field.label) != null ? _b : field.key;
+  if (((_c = field.ui) == null ? void 0 : _c.component) === "fileUpload" && field.ui.fileMapping && setValue) {
+    return /* @__PURE__ */ React__default.default.createElement(FileUploadField, { field, formField, disabled, setValue });
+  }
+  if (field.target === "secureJsonData" || field.semanticType === "password" || field.semanticType === "token") {
+    return /* @__PURE__ */ React__default.default.createElement(SecureFieldInput, { formField, placeholder: placeholder != null ? placeholder : label, disabled, label });
+  }
+  if (((_d = field.ui) == null ? void 0 : _d.component) === "radio") {
+    const options = ((_f = (_e = field.ui) == null ? void 0 : _e.options) != null ? _f : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React__default.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default.default.createElement(
+      ui.RadioButtonGroup,
+      {
+        options,
+        value: String(value != null ? value : ""),
+        onChange: (v) => {
+          if (field.valueType === "number") {
+            const n = Number(v);
+            formField.onChange(Number.isNaN(n) ? v : n);
+          } else {
+            formField.onChange(v);
+          }
+        },
+        disabled
+      }
+    ));
+  }
+  if (((_g = field.ui) == null ? void 0 : _g.component) === "select") {
+    const options = ((_i = (_h = field.ui) == null ? void 0 : _h.options) != null ? _i : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.Select,
+      {
+        options,
+        value: options.find((o) => o.value === String(value != null ? value : "")),
+        onChange: (v) => formField.onChange(v == null ? void 0 : v.value),
+        disabled
+      }
+    );
+  }
+  if (field.valueType === "boolean") {
+    return /* @__PURE__ */ React__default.default.createElement(ui.Switch, { value: !!value, onChange: (e) => formField.onChange(e.currentTarget.checked), disabled });
+  }
+  if (field.valueType === "number") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.Input,
+      {
+        ...formField,
+        value: value !== void 0 && value !== null ? Number(value) : "",
+        type: "number",
+        placeholder,
+        disabled,
+        onChange: (e) => {
+          const n = e.currentTarget.valueAsNumber;
+          formField.onChange(Number.isNaN(n) ? void 0 : n);
+        }
+      }
+    );
+  }
+  if (field.semanticType === "url") {
+    return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), type: "url", placeholder, disabled });
+  }
+  if (((_j = field.ui) == null ? void 0 : _j.component) === "textarea") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        ...formField,
+        value: String(value != null ? value : ""),
+        placeholder,
+        disabled,
+        rows: (_l = (_k = field.ui) == null ? void 0 : _k.rows) != null ? _l : 3
+      }
+    );
+  }
+  if (((_m = field.storage) == null ? void 0 : _m.type) === "indexedPair") {
+    const items = Array.isArray(value) ? value : [];
+    const maxItems = (_p = (_o = (_n = field.validations) == null ? void 0 : _n.find((v) => v.type === "itemCount")) == null ? void 0 : _o.max) != null ? _p : 10;
+    const itemLabel = (_r = (_q = field.label) == null ? void 0 : _q.toLowerCase().replace(/s$/, "")) != null ? _r : "header";
+    return /* @__PURE__ */ React__default.default.createElement(
+      IndexedPairEditor,
+      {
+        value: items,
+        onChange: formField.onChange,
+        maxItems,
+        disabled,
+        itemLabel
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_s = field.item) == null ? void 0 : _s.valueType) === "string") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      StringArrayInput,
+      {
+        value: Array.isArray(value) ? value : [],
+        onChange: formField.onChange,
+        placeholder,
+        disabled,
+        itemLabel: label.toLowerCase().replace(/s$/, "")
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_t = field.item) == null ? void 0 : _t.valueType) === "object" && ((_u = field.item.fields) == null ? void 0 : _u.length)) {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ObjectArrayEditor,
+      {
+        field,
+        value,
+        onChange: formField.onChange,
+        disabled,
+        errorMessage
+      }
+    );
+  }
+  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_v = field.item) == null ? void 0 : _v.valueType) === "object" || ((_w = field.item) == null ? void 0 : _w.valueType) === "map")) {
+    const count = Array.isArray(value) ? value.length : 0;
+    return /* @__PURE__ */ React__default.default.createElement(ComplexFieldNote, { count, label });
+  }
+  return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), placeholder, disabled });
+}
+
+const getTabStyles = (theme) => ({
+  root: css.css({
+    display: "flex",
+    gap: theme.spacing(3),
+    position: "relative",
+    background: theme.colors.background.canvas,
+    padding: theme.spacing(2)
+  }),
+  // Sidebar
+  sidebar: css.css({
+    width: 250,
+    flexShrink: 0,
+    position: "sticky",
+    top: theme.spacing(2),
+    alignSelf: "flex-start",
+    [theme.breakpoints.down("sm")]: { display: "none" }
+  }),
+  sidebarTitle: css.css({
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary,
+    padding: `${theme.spacing(1)} 0`,
+    marginBottom: theme.spacing(1)
+  }),
+  navList: css.css({
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    position: "relative"
+  }),
+  navItem: css.css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(1.5),
+    padding: `${theme.spacing(1)} 0`,
+    cursor: "pointer",
+    position: "relative"
+  }),
+  navItemActive: css.css({}),
+  // Dot container: positions the dot and the connector line
+  navDotWrap: css.css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 12,
+    flexShrink: 0,
+    alignSelf: "flex-start",
+    paddingTop: theme.spacing(0.5)
+  }),
+  navDot: css.css({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    border: `2px solid ${theme.colors.text.disabled}`,
+    background: theme.colors.background.canvas,
+    position: "relative",
+    zIndex: 1
+  }),
+  navDotOptional: css.css({
+    borderStyle: "dashed"
+  }),
+  navDotActive: css.css({
+    background: theme.colors.primary.main,
+    borderColor: theme.colors.primary.main,
+    borderStyle: "solid"
+  }),
+  navDotValidated: css.css({
+    background: theme.colors.success.main,
+    borderColor: theme.colors.success.main,
+    borderStyle: "solid"
+  }),
+  navDotError: css.css({
+    background: theme.colors.error.main,
+    borderColor: theme.colors.error.main,
+    borderStyle: "solid"
+  }),
+  // Connector line running from dot center downward to next item
+  navConnector: css.css({
+    position: "absolute",
+    left: 5,
+    top: 16,
+    bottom: -16,
+    width: 2,
+    background: theme.colors.border.medium,
+    zIndex: 0
+  }),
+  navConnectorDashed: css.css({
+    background: "none",
+    borderLeft: `2px dashed ${theme.colors.border.weak}`,
+    width: 0
+  }),
+  navLabel: css.css({
+    fontSize: theme.typography.body.fontSize,
+    color: theme.colors.text.secondary,
+    lineHeight: 1.4
+  }),
+  navLabelActive: css.css({
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  // Main content
+  main: css.css({
+    flex: 1,
+    minWidth: 0,
+    width: 0,
+    // forces flex child to respect flex-grow and fill remaining space
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  form: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  requiredNotice: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.5)
+  }),
+  // Section wrapper — card container around CollapsableSection
+  section: css.css({
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.default,
+    background: theme.colors.background.secondary,
+    overflow: "hidden"
+  }),
+  // Override Collapse component styling
+  collapseHeader: css.css({
+    borderRadius: theme.shape.radius.default,
+    background: "none",
+    border: "none",
+    marginBottom: 0,
+    // Collapse header button: make label fill remaining space
+    "& > button": {
+      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+      width: "100%",
+      justifyContent: "flex-start"
+    },
+    "& > button > div": {
+      flex: 1,
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      textAlign: "left"
+    }
+  }),
+  sectionLabel: css.css({
+    display: "flex",
+    alignItems: "center",
+    flex: 1
+  }),
+  sectionLabelText: css.css({
+    flex: 1
+  }),
+  sectionHeader: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+    cursor: "pointer",
+    userSelect: "none"
+  }),
+  sectionChevron: css.css({
+    transition: "transform 0.2s ease"
+  }),
+  sectionChevronOpen: css.css({
+    transform: "rotate(90deg)"
+  }),
+  sectionTitle: css.css({
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    flex: 1,
+    textAlign: "left"
+  }),
+  sectionBadge: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.colors.text.disabled,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.pill,
+    padding: `1px ${theme.spacing(0.75)}`,
+    whiteSpace: "nowrap"
+  }),
+  sectionDescription: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(1.5)
+  }),
+  sectionBody: css.css({
+    padding: `0 ${theme.spacing(2)} ${theme.spacing(2)}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  // Form bottom
+  formButtons: css.css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.5)
+  }),
+  // Loading / error states
+  loadingContainer: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(3),
+    color: theme.colors.text.secondary
+  }),
+  overlay: css.css({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    background: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    zIndex: 1,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.primary,
+    opacity: 0.95
+  }),
+  readOnlyBanner: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    marginBottom: theme.spacing(1)
+  })
+});
+const getWizardStyles = (theme) => ({
+  container: css.css({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    overflow: "hidden"
+  }),
+  overlay: css.css({
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    background: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    zIndex: 1,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.primary,
+    opacity: 0.95
+  }),
+  readOnlyBanner: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
+  navBar: css.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  navTitle: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.colors.text.primary
+  }),
+  stepCount: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.colors.text.secondary
+  }),
+  navActions: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.25)
+  }),
+  form: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  buttons: css.css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.25)
+  }),
+  fieldRow: css.css({
+    display: "grid",
+    gridTemplateColumns: "minmax(80px, 1fr) minmax(0, 2fr)",
+    gap: theme.spacing(0.75),
+    alignItems: "start"
+  }),
+  fieldRowCenter: css.css({
+    display: "grid",
+    gridTemplateColumns: "minmax(80px, 1fr) minmax(0, 2fr)",
+    gap: theme.spacing(0.75),
+    alignItems: "center",
+    padding: `${theme.spacing(0.5)} 0`
+  }),
+  fieldLabelRow: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.5)
+  }),
+  fieldLabelRowCompact: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  }),
+  fieldLabel: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  fieldRequired: css.css({
+    color: theme.colors.error.text,
+    marginLeft: 2
+  }),
+  fieldInfoIcon: css.css({
+    color: theme.colors.text.disabled,
+    cursor: "help",
+    flexShrink: 0
+  }),
+  fieldInputCol: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.25),
+    minWidth: 0
+  }),
+  fieldError: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  })
+});
+
+function SchemaField({
+  field,
+  control,
+  errors,
+  disabled,
+  dsUid,
+  watchedValues,
+  fieldById,
+  celContext,
+  setValue
+}) {
+  const styles = ui.useStyles2(getWizardStyles);
+  const activeOverride = useDatasourceSchema.resolveActiveOverride(field, watchedValues, fieldById);
+  const fk = useDatasourceSchema.formKey(field);
+  if (field.key === "pdcInjected" && field.target === "jsonData") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      reactHookForm.Controller,
+      {
+        name: fk,
+        control,
+        render: ({ field: formField }) => /* @__PURE__ */ React__default.default.createElement(
+          PdcFieldNote,
+          {
+            enabled: !!formField.value,
+            description: field.description,
+            configUrl: `/connections/datasources/edit/${dsUid}`
+          }
+        )
+      }
+    );
+  }
+  const required = isFieldRequired(field, watchedValues, fieldById, celContext);
+  const validationRules = buildValidationRules(field, required);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactHookForm.Controller,
+    {
+      name: fk,
+      control,
+      rules: validationRules,
+      render: ({ field: formField }) => {
+        var _a, _b, _c, _d, _e;
+        const errorMessage = (_a = errors[fk]) == null ? void 0 : _a.message;
+        const label = (_b = field.label) != null ? _b : field.key;
+        const description = (_c = activeOverride == null ? void 0 : activeOverride.description) != null ? _c : field.description;
+        const effectiveField = activeOverride ? {
+          ...field,
+          description,
+          ui: {
+            ...field.ui,
+            placeholder: (_e = activeOverride.placeholder) != null ? _e : (_d = field.ui) == null ? void 0 : _d.placeholder
+          }
+        } : field;
+        const isReadOnly = !!(activeOverride == null ? void 0 : activeOverride.readOnly);
+        const isBool = field.valueType === "boolean";
+        return /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldRowCenter : styles.fieldRow }, /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldLabelRowCompact : styles.fieldLabelRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldLabel }, label, required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldRequired }, "*")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldInputCol }, renderFieldInput(effectiveField, formField, disabled || isReadOnly, errorMessage, setValue), errorMessage && !parseItemErrors(errorMessage) && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldError }, errorMessage)));
+      }
+    }
+  );
+}
+
+const AuthorizationHeaderField = (props) => {
+  const { headersFieldKey, control, disabled, watchedValues } = props;
+  const styles = ui.useStyles2(getWizardStyles);
+  const items = React.useMemo(
+    () => Array.isArray(watchedValues[headersFieldKey]) ? watchedValues[headersFieldKey] : [],
+    [watchedValues, headersFieldKey]
+  );
+  const authEntries = React.useMemo(() => {
+    const entries = [];
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].name.toLowerCase() === "authorization") {
+        entries.push({ item: items[i], originalIdx: i });
+      }
+    }
+    return entries;
+  }, [items]);
+  if (authEntries.length === 0) {
+    return null;
+  }
+  const authItems = authEntries.map((e) => e.item);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactHookForm.Controller,
+    {
+      name: headersFieldKey,
+      control,
+      render: ({ field: formField }) => {
+        const handleChange = (updatedAuthItems) => {
+          const updated = [...items];
+          for (let i = 0; i < authEntries.length; i++) {
+            if (i < updatedAuthItems.length) {
+              updated[authEntries[i].originalIdx] = updatedAuthItems[i];
+            }
+          }
+          formField.onChange(updated);
+        };
+        return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldRow }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldLabelRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldLabel }, "Custom HTTP Headers"), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Authorization HTTP header(s) sent with every request." }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldInputCol }, /* @__PURE__ */ React__default.default.createElement(IndexedPairEditor, { value: authItems, onChange: handleChange, disabled, hideControls: true })));
+      }
+    }
+  );
+};
+
+function SidebarNav({ groups, activeIndex, sectionStates, onSelect }) {
+  const styles = ui.useStyles2(getTabStyles);
+  const visibleGroups = groups.filter((g) => g.group.id !== "_required");
+  return /* @__PURE__ */ React__default.default.createElement("nav", { className: styles.sidebar }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sidebarTitle }, "Connect data source"), /* @__PURE__ */ React__default.default.createElement("ul", { className: styles.navList }, visibleGroups.map((g, vi) => {
+    var _a, _b;
+    const origIndex = groups.indexOf(g);
+    const state = (_a = sectionStates[origIndex]) != null ? _a : "draft";
+    const isActive = origIndex === activeIndex;
+    const isOptional = g.group.optional === true;
+    const isLast = vi === visibleGroups.length - 1;
+    const nextIsOptional = !isLast && ((_b = visibleGroups[vi + 1]) == null ? void 0 : _b.group.optional) === true;
+    return /* @__PURE__ */ React__default.default.createElement("li", { key: g.group.id }, /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        className: css.cx(styles.navItem, isActive && styles.navItemActive),
+        onClick: () => onSelect(origIndex),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(origIndex);
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navDotWrap }, /* @__PURE__ */ React__default.default.createElement(
+        "span",
+        {
+          className: css.cx(
+            styles.navDot,
+            isOptional && styles.navDotOptional,
+            isActive && styles.navDotActive,
+            state === "validated" && !isActive && styles.navDotValidated,
+            state === "error" && !isActive && styles.navDotError
+          )
+        }
+      ), !isLast && /* @__PURE__ */ React__default.default.createElement(
+        "div",
+        {
+          className: css.cx(styles.navConnector, (isOptional || nextIsOptional) && styles.navConnectorDashed)
+        }
+      )),
+      /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.navLabel, isActive && styles.navLabelActive) }, g.group.title)
+    ));
+  })));
+}
+
+function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  const styles = ui.useStyles2(getTabStyles);
+  const sectionRefs = React.useRef(/* @__PURE__ */ new Map());
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    errors,
+    watchedValues,
+    celContext,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isFieldDisabled,
+    isGroupValid,
+    groupHasData,
+    onSubmit,
+    setValue
+  } = form;
+  const displayGroups = React.useMemo(() => resolvedGroups.filter((g) => g.group.id !== "_required"), [resolvedGroups]);
+  const [expandedSections, setExpandedSections] = React.useState(() => {
+    const expanded = /* @__PURE__ */ new Set();
+    for (let i = 0; i < displayGroups.length; i++) {
+      if (!displayGroups[i].group.optional) {
+        expanded.add(i);
+      }
+    }
+    return expanded;
+  });
+  const hasExpandedForData = React.useRef(false);
+  React.useMemo(() => {
+    if (initializing || hasExpandedForData.current) {
+      return;
+    }
+    hasExpandedForData.current = true;
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      for (let i = 0; i < displayGroups.length; i++) {
+        if (groupHasData(displayGroups[i])) {
+          next.add(i);
+        }
+      }
+      return next;
+    });
+  }, [initializing, displayGroups, groupHasData]);
+  const [activeSection, setActiveSection] = React.useState(0);
+  const toggleSection = React.useCallback((index) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+  const scrollToSection = React.useCallback(
+    (index) => {
+      setActiveSection(index);
+      if (!expandedSections.has(index)) {
+        setExpandedSections((prev) => new Set(prev).add(index));
+      }
+      const el = sectionRefs.current.get(index);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
+    [expandedSections]
+  );
+  const sectionStates = React.useMemo(() => {
+    return displayGroups.map((g, i) => {
+      if (i === activeSection) {
+        return "active";
+      }
+      if (!isGroupValid(g)) {
+        return "error";
+      }
+      if (groupHasData(g)) {
+        return "validated";
+      }
+      return "draft";
+    });
+  }, [displayGroups, activeSection, isGroupValid, groupHasData]);
+  if (initializing) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.loadingContainer }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm", inline: true }), " Loading configuration\u2026");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.formButtons }, /* @__PURE__ */ React__default.default.createElement(
+      ui.LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, submitting && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Saving & testing\u2026")), /* @__PURE__ */ React__default.default.createElement(
+    SidebarNav,
+    {
+      groups: displayGroups,
+      activeIndex: activeSection,
+      sectionStates,
+      onSelect: scrollToSection
+    }
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.main }, readOnly && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.readOnlyBanner }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Read-only \u2014 managed externally")), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.requiredNotice }, "Fields marked with * are required"), /* @__PURE__ */ React__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, displayGroups.map((g, i) => {
+    const visibleFields = g.fields.filter(isFieldVisible);
+    if (visibleFields.length === 0 && !httpHeadersField) {
+      return null;
+    }
+    const showHeaders = httpHeadersField && (g.group.id === "auth" || g.group.id === "url-and-auth" || g.group.id === "_required" || g.group.fieldRefs.includes("httpHeaders"));
+    const sectionLabel = /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionLabel }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionLabelText }, g.group.title), g.group.optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionBadge }, "Optional"));
+    return /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        key: g.group.id,
+        ref: (el) => {
+          if (el) {
+            sectionRefs.current.set(i, el);
+          }
+        },
+        className: styles.section
+      },
+      /* @__PURE__ */ React__default.default.createElement(
+        ui.Collapse,
+        {
+          label: sectionLabel,
+          isOpen: expandedSections.has(i),
+          collapsible: true,
+          onToggle: () => {
+            toggleSection(i);
+            setActiveSection(i);
+          },
+          className: styles.collapseHeader
+        },
+        /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionBody }, g.group.description && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDescription }, g.group.description), visibleFields.map((field) => /* @__PURE__ */ React__default.default.createElement(
+          SchemaField,
+          {
+            key: useDatasourceSchema.formKey(field),
+            field,
+            control,
+            errors,
+            disabled: allDisabled || isFieldDisabled(field),
+            dsUid,
+            watchedValues,
+            fieldById,
+            celContext,
+            setValue
+          }
+        )), showHeaders && /* @__PURE__ */ React__default.default.createElement(
+          AuthorizationHeaderField,
+          {
+            headersFieldKey: useDatasourceSchema.formKey(httpHeadersField),
+            control,
+            disabled: allDisabled,
+            watchedValues
+          }
+        ))
+      )
+    );
+  }), submitError && /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.formButtons }, readOnly ? /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", disabled: submitting, type: "submit" }, submitting ? "Saving\u2026" : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError }))))));
+}
+
+function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
+  const [submitting, setSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState(null);
+  const [initializing, setInitializing] = React.useState(true);
+  const [fetchError, setFetchError] = React.useState(null);
+  const [detectedReadOnly, setDetectedReadOnly] = React.useState(false);
+  const readOnly = detectedReadOnly;
+  const resolvedGroups = React.useMemo(() => {
+    const groups = useDatasourceSchema.resolveGroups(schema);
+    const requiredGroup = useDatasourceSchema.resolveRequiredFieldsGroup(schema);
+    if (!requiredGroup) {
+      return groups;
+    }
+    return [requiredGroup, ...groups];
+  }, [schema]);
+  const fieldById = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const f of schema.fields) {
+      m.set(f.id, f);
+    }
+    return m;
+  }, [schema.fields]);
+  const httpHeadersField = React.useMemo(
+    () => {
+      var _a;
+      return (_a = schema.fields.find((f) => {
+        var _a2;
+        return f.key === "httpHeaders" && ((_a2 = f.storage) == null ? void 0 : _a2.type) === "indexedPair";
+      })) != null ? _a : null;
+    },
+    [schema.fields]
+  );
+  const allStorageFields = React.useMemo(
+    () => schema.fields.filter((f) => f.kind !== "virtual" && !f.isItemField && f.target),
+    [schema.fields]
+  );
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    trigger,
+    setValue,
+    formState: { errors }
+  } = reactHookForm.useForm({ mode: "onChange" });
+  const fieldsWithEffects = React.useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.effects || field.effects.length === 0) {
+        continue;
+      }
+      const mapped = field.effects.map((eff) => ({
+        when: eff.when,
+        targets: Object.entries(eff.set).map(([targetId, val]) => {
+          const targetField = fieldById.get(targetId);
+          return { key: targetField ? useDatasourceSchema.formKey(targetField) : targetId, value: val };
+        })
+      }));
+      result.push({ sourceKey: useDatasourceSchema.formKey(field), effects: mapped });
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  React.useEffect(() => {
+    let cancelled = false;
+    fetchExistingValues(dsUid, allStorageFields).then((result) => {
+      if (cancelled) {
+        return;
+      }
+      if (result.error) {
+        setFetchError(result.error);
+        setInitializing(false);
+        return;
+      }
+      if (result.readOnly) {
+        setDetectedReadOnly(true);
+      }
+      const defaults = {};
+      for (const field of allStorageFields) {
+        if (field.defaultValue !== void 0) {
+          defaults[useDatasourceSchema.formKey(field)] = field.defaultValue;
+        }
+      }
+      const merged = { ...defaults, ...result.values };
+      const virtualValues = useDatasourceSchema.computeVirtualFieldValues(schema, merged);
+      reset({ ...merged, ...virtualValues });
+      setInitializing(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dsUid, allStorageFields, schema, reset]);
+  const watchedValues = watch();
+  const prevEffectValuesRef = React.useRef({});
+  React.useEffect(() => {
+    if (initializing) {
+      return;
+    }
+    for (const { sourceKey, effects } of fieldsWithEffects) {
+      const currentVal = useDatasourceSchema.getWatchedValue(watchedValues, sourceKey);
+      const prevVal = prevEffectValuesRef.current[sourceKey];
+      if (currentVal === prevVal) {
+        continue;
+      }
+      prevEffectValuesRef.current[sourceKey] = currentVal;
+      for (const eff of effects) {
+        if (evaluateEffectCondition(eff.when, currentVal)) {
+          for (const { key, value } of eff.targets) {
+            setValue(key, value);
+          }
+          break;
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithEffects, initializing, setValue]);
+  const fieldsWithOverrideDefaults = React.useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.overrides || field.overrides.length === 0) {
+        continue;
+      }
+      const ovs = field.overrides.filter((ov) => ov.defaultValue !== void 0).map((ov) => {
+        const parsed = useDatasourceSchema.parseDependsOn(ov.when);
+        if (!parsed) {
+          return null;
+        }
+        const depField = fieldById.get(parsed.field);
+        return {
+          depKey: depField ? useDatasourceSchema.formKey(depField) : parsed.field,
+          depValue: parsed.value,
+          negate: parsed.negate,
+          defaultValue: ov.defaultValue
+        };
+      }).filter(Boolean);
+      if (ovs.length > 0) {
+        result.push({ targetKey: useDatasourceSchema.formKey(field), fieldDefault: field.defaultValue, overrides: ovs });
+      }
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  const prevOverrideDepRef = React.useRef({});
+  React.useEffect(() => {
+    var _a;
+    if (initializing) {
+      return;
+    }
+    for (const { targetKey, fieldDefault, overrides } of fieldsWithOverrideDefaults) {
+      for (const ov of overrides) {
+        const currentDepVal = String((_a = useDatasourceSchema.getWatchedValue(watchedValues, ov.depKey)) != null ? _a : "");
+        const trackKey = `${targetKey}::${ov.depKey}`;
+        const prevDepVal = prevOverrideDepRef.current[trackKey];
+        if (currentDepVal === prevDepVal) {
+          continue;
+        }
+        prevOverrideDepRef.current[trackKey] = currentDepVal;
+        const active = useDatasourceSchema.evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, currentDepVal);
+        const wasActive = prevDepVal !== void 0 && useDatasourceSchema.evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, prevDepVal);
+        if (active) {
+          setValue(targetKey, ov.defaultValue);
+        } else if (wasActive && fieldDefault !== void 0) {
+          setValue(targetKey, fieldDefault);
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithOverrideDefaults, initializing, setValue]);
+  const celContext = React.useMemo(() => {
+    const ctx = {};
+    for (const f of fieldById.values()) {
+      const fk = useDatasourceSchema.formKey(f);
+      const val = useDatasourceSchema.getWatchedValue(watchedValues, fk);
+      if (val !== void 0) {
+        const parts = f.id.split(".");
+        let current = ctx;
+        for (let i = 0; i < parts.length - 1; i++) {
+          if (!(parts[i] in current) || typeof current[parts[i]] !== "object" || current[parts[i]] === null) {
+            current[parts[i]] = {};
+          }
+          current = current[parts[i]];
+        }
+        current[parts[parts.length - 1]] = val;
+      }
+    }
+    return ctx;
+  }, [watchedValues, fieldById]);
+  const isFieldVisible = React.useCallback(
+    (field) => {
+      function check(f, visited) {
+        var _a;
+        if (f.kind === "virtual" && !f.ui) {
+          return false;
+        }
+        if ((_a = f.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) {
+          return false;
+        }
+        if (!f.dependsOn) {
+          return true;
+        }
+        const refs = useDatasourceSchema.extractFieldRefs(f.dependsOn);
+        for (const ref of refs) {
+          const depField = fieldById.get(ref);
+          if (depField && !visited.has(depField.id)) {
+            visited.add(f.id);
+            if (!check(depField, visited)) {
+              return false;
+            }
+          }
+        }
+        return useDatasourceSchema.evaluateCelExpression(f.dependsOn, celContext);
+      }
+      return check(field, /* @__PURE__ */ new Set());
+    },
+    [celContext, fieldById]
+  );
+  const onSubmit = React.useCallback(
+    async (data) => {
+      setSubmitting(true);
+      setSubmitError(null);
+      onSaving == null ? void 0 : onSaving(true);
+      const minDelay = new Promise((r) => setTimeout(r, 2e3));
+      try {
+        await submitDatasourceConfig(dsUid, data, allStorageFields, isFieldVisible);
+        const [refreshed] = await Promise.all([fetchExistingValues(dsUid, allStorageFields), minDelay]);
+        const defaults = {};
+        for (const field of allStorageFields) {
+          if (field.defaultValue !== void 0) {
+            defaults[useDatasourceSchema.formKey(field)] = field.defaultValue;
+          }
+        }
+        const merged = { ...defaults, ...refreshed.values };
+        const virtualValues = useDatasourceSchema.computeVirtualFieldValues(schema, merged);
+        reset({ ...merged, ...virtualValues });
+        onSuccess("UPDATED", "Configuration saved.");
+      } catch (err) {
+        await minDelay;
+        setSubmitError(err instanceof Error ? err.message : "Failed to update datasource");
+      } finally {
+        setSubmitting(false);
+        onSaving == null ? void 0 : onSaving(false);
+      }
+    },
+    [dsUid, allStorageFields, isFieldVisible, schema, reset, onSuccess, onSaving]
+  );
+  const isGroupValid = React.useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        if (!isFieldVisible(field)) {
+          continue;
+        }
+        if (errors[useDatasourceSchema.formKey(field)]) {
+          return false;
+        }
+        if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+          const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.formKey(field));
+          if (val === SECURE_FIELD_CONFIGURED) {
+            continue;
+          }
+          if (val === void 0 || val === null || val === "") {
+            return false;
+          }
+        }
+      }
+      return true;
+    },
+    [errors, watchedValues, fieldById, celContext, isFieldVisible]
+  );
+  const isFieldDisabled = React.useCallback(
+    (field) => {
+      if (!field.disabledWhen) {
+        return false;
+      }
+      return useDatasourceSchema.evaluateCelExpression(field.disabledWhen, celContext);
+    },
+    [celContext]
+  );
+  const groupHasData = React.useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.formKey(field));
+        if (val === void 0 || val === null || val === "" || val === false) {
+          continue;
+        }
+        if (val === field.defaultValue) {
+          continue;
+        }
+        return true;
+      }
+      return false;
+    },
+    [watchedValues]
+  );
+  return {
+    // Schema
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    // Form
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    celContext,
+    // State
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    // Callbacks
+    isFieldVisible,
+    isFieldDisabled,
+    isGroupValid,
+    groupHasData,
+    onSubmit,
+    setValue
+  };
+}
+
+function DatasourceConfigWizard(props) {
+  const { schema, dsUid, dsName, onSuccess, onSaving, onRetest, healthError, renderActions, mode = "tab" } = props;
+  const form = useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving });
+  if (mode === "tab") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      TabLayout,
+      {
+        form,
+        schema,
+        dsUid,
+        dsName,
+        onRetest,
+        healthError,
+        renderActions
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    WizardLayout,
+    {
+      form,
+      schema,
+      dsUid,
+      dsName,
+      onRetest,
+      healthError,
+      renderActions
+    }
+  );
+}
+function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  var _a, _b, _c;
+  const styles = ui.useStyles2(getWizardStyles);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    celContext,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isFieldDisabled,
+    onSubmit,
+    setValue
+  } = form;
+  const arrowSteps = React.useMemo(() => {
+    const requiredGroup = resolvedGroups.find((g) => g.group.id === "_required");
+    if (!requiredGroup) {
+      return new Set(resolvedGroups.map((_, i) => i));
+    }
+    const requiredFieldIds = new Set(requiredGroup.fields.map((f) => f.id));
+    const steps = /* @__PURE__ */ new Set();
+    for (let i = 0; i < resolvedGroups.length; i++) {
+      const g = resolvedGroups[i];
+      if (g.group.id === "_required" || g.fields.some((f) => !requiredFieldIds.has(f.id))) {
+        steps.add(i);
+      }
+    }
+    return steps;
+  }, [resolvedGroups]);
+  const currentResolved = resolvedGroups[currentStep];
+  const isFirstStep = React.useMemo(() => {
+    for (let i = 0; i < currentStep; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps]);
+  const isLastStep = React.useMemo(() => {
+    for (let i = currentStep + 1; i < resolvedGroups.length; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps, resolvedGroups.length]);
+  const visibleFieldsForStep = React.useMemo(
+    () => currentResolved ? currentResolved.fields.filter(isFieldVisible) : [],
+    [currentResolved, isFieldVisible]
+  );
+  const currentGroupValid = React.useMemo(() => {
+    if (!currentResolved) {
+      return true;
+    }
+    for (const field of visibleFieldsForStep) {
+      if (errors[useDatasourceSchema.formKey(field)]) {
+        return false;
+      }
+      if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+        const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.formKey(field));
+        if (val === SECURE_FIELD_CONFIGURED) {
+          continue;
+        }
+        if (val === void 0 || val === null || val === "") {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById, celContext]);
+  const goNext = React.useCallback(async () => {
+    if (!currentResolved) {
+      return;
+    }
+    if (!readOnly) {
+      const visibleKeys = visibleFieldsForStep.map((f) => useDatasourceSchema.formKey(f));
+      const valid = await trigger(visibleKeys);
+      if (!valid) {
+        return;
+      }
+    }
+    setCurrentStep((s) => {
+      for (let i = s + 1; i < resolvedGroups.length; i++) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [currentResolved, visibleFieldsForStep, trigger, resolvedGroups.length, arrowSteps, readOnly]);
+  const goPrev = React.useCallback(() => {
+    setCurrentStep((s) => {
+      for (let i = s - 1; i >= 0; i--) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [arrowSteps]);
+  if (initializing) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm", inline: true }), " Loading configuration...");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttons }, /* @__PURE__ */ React__default.default.createElement(
+      ui.LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  if (resolvedGroups.length === 0) {
+    return null;
+  }
+  const currentGroup = currentResolved == null ? void 0 : currentResolved.group;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, submitting && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Saving & testing\u2026")), readOnly && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.readOnlyBanner }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Read-only \u2014 managed externally")), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navBar }, currentGroup && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: (_a = currentGroup.description) != null ? _a : currentGroup.title }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.navTitle }, currentGroup.title, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.stepCount }, currentStep + 1, "/", resolvedGroups.length))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navActions }, /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: isFirstStep ? "First step" : `Previous: ${(_b = resolvedGroups[currentStep - 1]) == null ? void 0 : _b.group.title}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "angle-left",
+      "aria-label": "Previous",
+      onClick: goPrev,
+      disabled: isFirstStep || submitting,
+      type: "button"
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(
+    ui.Select,
+    {
+      options: resolvedGroups.map((g, i) => ({ label: g.group.title, value: i })),
+      value: currentStep,
+      onChange: (v) => {
+        if (v) {
+          setCurrentStep(v.value);
+        }
+      },
+      disabled: submitting,
+      width: 18
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: isLastStep ? "Last step" : `Next: ${(_c = resolvedGroups[currentStep + 1]) == null ? void 0 : _c.group.title}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: isLastStep || !readOnly && !currentGroupValid ? "secondary" : "primary",
+      size: "sm",
+      icon: "angle-right",
+      "aria-label": "Next",
+      onClick: goNext,
+      disabled: isLastStep || submitting,
+      type: "button"
+    }
+  )))), currentResolved && /* @__PURE__ */ React__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, visibleFieldsForStep.map((field) => /* @__PURE__ */ React__default.default.createElement(
+    SchemaField,
+    {
+      key: useDatasourceSchema.formKey(field),
+      field,
+      control,
+      errors,
+      disabled: allDisabled || isFieldDisabled(field),
+      dsUid,
+      watchedValues,
+      fieldById,
+      celContext,
+      setValue
+    }
+  )), (currentResolved.group.id === "_required" || currentResolved.group.id === "auth") && httpHeadersField && /* @__PURE__ */ React__default.default.createElement(
+    AuthorizationHeaderField,
+    {
+      headersFieldKey: useDatasourceSchema.formKey(httpHeadersField),
+      control,
+      disabled: allDisabled,
+      watchedValues
+    }
+  ), submitError && /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttons }, readOnly ? /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", disabled: submitting || !currentGroupValid, type: "submit" }, submitting ? "Saving..." : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError })))));
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, key + "" , value);
+class DatasourceErrorBoundary extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField$2(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[DatasourceConfigWizard] Caught error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "warning", title: "Configuration wizard unavailable" }, "Could not load the configuration wizard", this.props.dsName ? ` for ${this.props.dsName}` : "", ". Use the Settings link to configure this datasource manually.");
+    }
+    return this.props.children;
+  }
+}
+
+const MAX_CONCURRENCY = 5;
+function useHealthChecks() {
+  const [healthMap, setHealthMap] = React.useState({});
+  const queueRef = React.useRef([]);
+  const activeRef = React.useRef(0);
+  const mountedRef = React.useRef(true);
+  const everQueuedRef = React.useRef(/* @__PURE__ */ new Set());
+  const checkOne = React.useCallback(async (uid) => {
+    if (!mountedRef.current) {
+      return;
+    }
+    setHealthMap((prev) => ({ ...prev, [uid]: { state: "checking" } }));
+    try {
+      const result = await runtime.getBackendSrv().get(
+        `/api/datasources/uid/${uid}/health`,
+        void 0,
+        void 0,
+        { showErrorAlert: false }
+      );
+      if (!mountedRef.current) {
+        return;
+      }
+      setHealthMap((prev) => {
+        var _a;
+        return {
+          ...prev,
+          [uid]: { state: "done", status: (_a = result.status) != null ? _a : "OK", message: result.message }
+        };
+      });
+    } catch (error) {
+      if (!mountedRef.current) {
+        return;
+      }
+      let status = "ERROR";
+      let message = "";
+      if (error && typeof error === "object" && "data" in error) {
+        const data = error.data;
+        if (data == null ? void 0 : data.status) {
+          status = data.status;
+        }
+        if (data == null ? void 0 : data.message) {
+          message = data.message;
+        }
+      }
+      if (!message) {
+        message = error instanceof Error ? error.message : String(error);
+      }
+      setHealthMap((prev) => ({
+        ...prev,
+        [uid]: { state: "done", status, message }
+      }));
+    }
+  }, []);
+  const processQueue = React.useCallback(() => {
+    while (activeRef.current < MAX_CONCURRENCY && queueRef.current.length > 0) {
+      const uid = queueRef.current.shift();
+      activeRef.current++;
+      checkOne(uid).finally(() => {
+        activeRef.current--;
+        processQueue();
+      });
+    }
+  }, [checkOne]);
+  const checkUids = React.useCallback(
+    (uids) => {
+      const toCheck = [];
+      for (const uid of uids) {
+        if (everQueuedRef.current.has(uid)) {
+          continue;
+        }
+        everQueuedRef.current.add(uid);
+        toCheck.push(uid);
+      }
+      if (toCheck.length === 0) {
+        return;
+      }
+      setHealthMap((prev) => {
+        const next = { ...prev };
+        for (const uid of toCheck) {
+          next[uid] = { state: "pending" };
+        }
+        return next;
+      });
+      queueRef.current.push(...toCheck);
+      processQueue();
+    },
+    [processQueue]
+  );
+  const retry = React.useCallback(
+    (uid) => {
+      everQueuedRef.current.delete(uid);
+      everQueuedRef.current.add(uid);
+      setHealthMap((prev) => ({ ...prev, [uid]: { state: "pending" } }));
+      queueRef.current.push(uid);
+      processQueue();
+    },
+    [processQueue]
+  );
+  return { healthMap, checkUids, retry };
+}
+
+let pluginNameCache = null;
+function buildPluginNameCache() {
+  var _a;
+  if (pluginNameCache) {
+    return pluginNameCache;
+  }
+  const map = /* @__PURE__ */ new Map();
+  try {
+    const list = runtime.getDataSourceSrv().getList();
+    for (const ds of list) {
+      if (((_a = ds.meta) == null ? void 0 : _a.name) && ds.type && !map.has(ds.type)) {
+        map.set(ds.type, ds.meta.name);
+      }
+    }
+  } catch (ex) {
+    console.error(ex);
+  }
+  pluginNameCache = map;
+  return map;
+}
+function resolvePluginName(pluginType) {
+  var _a;
+  const cache = buildPluginNameCache();
+  return (_a = cache.get(pluginType)) != null ? _a : pluginType;
+}
+
 var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -9842,6 +12428,34 @@ const convertUnits = (queryStats) => {
   return text + suffix;
 };
 
+exports.ROOT_CONFIG_FIELDS = useDatasourceSchema.ROOT_CONFIG_FIELDS;
+exports.buildCelContext = useDatasourceSchema.buildCelContext;
+exports.buildCloneDatasourcePayload = useDatasourceSchema.buildCloneDatasourcePayload;
+exports.buildCreateDatasourcePayload = useDatasourceSchema.buildCreateDatasourcePayload;
+exports.buildUpdateDatasourcePayload = useDatasourceSchema.buildUpdateDatasourcePayload;
+exports.clearExpressionCache = useDatasourceSchema.clearExpressionCache;
+exports.computeVirtualFieldValues = useDatasourceSchema.computeVirtualFieldValues;
+exports.configToYaml = useDatasourceSchema.configToYaml;
+exports.datasourceToProvisioningYaml = useDatasourceSchema.datasourceToProvisioningYaml;
+exports.evaluateCelDirect = useDatasourceSchema.evaluateCelDirect;
+exports.evaluateCelExpression = useDatasourceSchema.evaluateCelExpression;
+exports.evaluateComputedRead = useDatasourceSchema.evaluateComputedRead;
+exports.evaluateDependsOn = useDatasourceSchema.evaluateDependsOn;
+exports.extractFieldRefs = useDatasourceSchema.extractFieldRefs;
+exports.fetchConfigSchema = useDatasourceSchema.fetchConfigSchema;
+exports.formKey = useDatasourceSchema.formKey;
+exports.formatYamlDiff = useDatasourceSchema.formatYamlDiff;
+exports.generateLLMHint = useDatasourceSchema.generateLLMHint;
+exports.generateTroubleshootingFields = useDatasourceSchema.generateTroubleshootingFields;
+exports.getConfigSchema = useDatasourceSchema.getConfigSchema;
+exports.getWatchedValue = useDatasourceSchema.getWatchedValue;
+exports.isValidCelExpression = useDatasourceSchema.isValidCelExpression;
+exports.parseDependsOn = useDatasourceSchema.parseDependsOn;
+exports.resolveActiveOverride = useDatasourceSchema.resolveActiveOverride;
+exports.resolveGroups = useDatasourceSchema.resolveGroups;
+exports.resolveRequiredFieldsGroup = useDatasourceSchema.resolveRequiredFieldsGroup;
+exports.toProvisioningYaml = useDatasourceSchema.toProvisioningYaml;
+exports.useDatasourceSchema = useDatasourceSchema.useDatasourceSchema;
 exports.AccessoryButton = AccessoryButton;
 exports.AdvancedHttpSettings = AdvancedHttpSettings;
 exports.Auth = Auth;
@@ -9861,6 +12475,8 @@ exports.DataLinks = DataLinks;
 exports.DataSourceDescription = DataSourceDescription;
 exports.DataSourcePicker = DataSourcePicker;
 exports.DatasetSelector = DatasetSelector;
+exports.DatasourceConfigWizard = DatasourceConfigWizard;
+exports.DatasourceErrorBoundary = DatasourceErrorBoundary;
 exports.DatePicker = DatePicker;
 exports.DatePickerWithInput = DatePickerWithInput;
 exports.DebounceInput = DebounceInput;
@@ -9914,5 +12530,7 @@ exports.formatDate = formatDate;
 exports.getStandardSQLCompletionProvider = getStandardSQLCompletionProvider;
 exports.grafanaStandardSQLLanguage = language;
 exports.grafanaStandardSQLLanguageConf = conf;
+exports.resolvePluginName = resolvePluginName;
 exports.toOption = toOption;
+exports.useHealthChecks = useHealthChecks;
 //# sourceMappingURL=index.cjs.map