synapse-react-client 4.0.38 → 4.0.41

package/dist/components/QueryBuilder/FilterConditionRow.module.scss

@@ -0,0 +1,101 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  min-height: 30px;
+
+  // Value pills adopt the parent group's accent — parent sets `--qb-pill-color`
+  // as inline style on its wrapper (see FilterGroupNode).
+  --qb-pill-color: var(--synapse-primary-action-color);
+}
+
+.remove {
+  color: var(--synapse-gray-600) !important;
+  border: 1px solid var(--synapse-border-color-gray);
+  border-radius: 4px !important;
+  padding: 4px !important;
+
+  &:hover {
+    color: var(--synapse-error);
+    border-color: var(--synapse-error);
+    background-color: transparent !important;
+  }
+}
+
+// Match the field heights across the row so Property, Operator, and value
+// inputs all sit on the same baseline. Outlined inputs get consistent
+// padding via MUI defaults; we just fix the height and widths.
+.propertyPicker,
+.operatorPicker,
+.rangeInput,
+.textInput {
+  :global(.MuiOutlinedInput-root) {
+    height: 36px;
+    font-size: 14px;
+  }
+}
+
+.propertyPicker {
+  min-width: 200px;
+}
+
+.operatorPicker {
+  min-width: 120px;
+}
+
+.rangeInput {
+  width: 120px;
+}
+
+.textInput {
+  min-width: 200px;
+}
+
+.pillGroupContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+.pillFilter {
+  max-width: 260px;
+}
+
+.pillGroupScroll {
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.pillGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+
+  // MUI's ToggleButtonGroup uses `:not(:first-of-type)` rules to collapse
+  // grouped buttons into an attached pill bar. `!important` is the pragmatic
+  // way to undo that; otherwise our pills have flat left edges and negative
+  // margins.
+  :global(.MuiToggleButton-root),
+  :global(.MuiToggleButtonGroup-grouped) {
+    text-transform: none;
+    padding: 2px 12px;
+    border-radius: 999px !important;
+    border: 1px solid var(--synapse-gray-dark) !important;
+    margin: 0 !important;
+    font-size: 13px;
+    line-height: 1.4;
+  }
+
+  :global(.MuiToggleButton-root.Mui-selected) {
+    background-color: var(--qb-pill-color);
+    color: white;
+    border-color: var(--qb-pill-color);
+  }
+
+  :global(.MuiToggleButton-root.Mui-selected:hover) {
+    background-color: var(--qb-pill-color);
+  }
+}

package/dist/components/QueryBuilder/FilterGroupNode.css

@@ -0,0 +1 @@
+._group_ryxud_1{border-left:2px solid var(--qb-accent-color,var(--synapse-primary-action-color));border-radius:2px 0 0 2px;padding:8px 0 8px 16px;position:relative}._group_ryxud_1._nested_ryxud_7{margin-top:4px;margin-bottom:4px}._group_ryxud_1._dropTarget_ryxud_11{box-shadow:inset 0 0 0 2px var(--qb-accent-color,var(--synapse-primary-action-color));border-radius:3px}._header_ryxud_16{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:4px;display:flex}._combinator_ryxud_24 .MuiToggleButton-root{text-transform:none;border-color:var(--synapse-gray-dark);min-width:44px;color:var(--synapse-gray-regular);padding:2px 12px;font-weight:700}._combinator_ryxud_24 .MuiToggleButton-root.Mui-selected{background-color:var(--qb-accent-color,var(--synapse-primary-action-color));color:#fff;border-color:var(--qb-accent-color,var(--synapse-primary-action-color))}._combinator_ryxud_24 .MuiToggleButton-root.Mui-selected:hover{background-color:var(--qb-accent-color,var(--synapse-primary-action-color))}._notToggle_ryxud_43{text-transform:none;border-color:var(--synapse-gray-dark);color:var(--synapse-gray-regular);padding:2px 12px;font-size:13px;font-weight:600}._notToggle_ryxud_43.Mui-selected,._notToggle_ryxud_43.Mui-selected:hover{background-color:var(--synapse-error);color:#fff;border-color:var(--synapse-error)}._actions_ryxud_57{align-items:center;gap:4px;margin-left:auto;display:flex}._actionButton_ryxud_64{text-transform:none;min-width:0;color:var(--synapse-primary-action-color);padding:2px 8px;font-weight:500}._children_ryxud_72{flex-direction:column;gap:2px;display:flex}._emptyState_ryxud_78{color:var(--synapse-gray-deemphasized);padding:8px 4px;font-size:13px;font-style:italic}

package/dist/components/QueryBuilder/FilterGroupNode.d.ts

@@ -0,0 +1,11 @@
+import { QBGroup } from './QueryBuilderTypes';
+export type FilterGroupNodeProps = {
+    group: QBGroup;
+    isRoot?: boolean;
+    parentGroupId?: string;
+    index?: number;
+    /** Nesting level, used to resolve drops into the innermost group. */
+    depth?: number;
+};
+export declare function FilterGroupNode(props: FilterGroupNodeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FilterGroupNode.d.ts.map

package/dist/components/QueryBuilder/FilterGroupNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupNode.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAa,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAExD,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAmK1D"}

package/dist/components/QueryBuilder/FilterGroupNode.js

@@ -0,0 +1,134 @@
+import { isQBGroup as e } from "./QueryBuilderTypes.js";
+import { groupDropZoneData as t, groupDropZoneId as n } from "./queryBuilderDnd.js";
+import { useQueryBuilderInternalContext as r } from "./QueryBuilderInternalContext.js";
+import i from "./queryBuilderDrag.module.js";
+import { QBDragHandle as a } from "./QBDragHandle.js";
+import { FilterConditionRow as o } from "./FilterConditionRow.js";
+import s from "./FilterGroupNode.module.js";
+import { Button as c, ToggleButton as l, ToggleButtonGroup as u } from "@mui/material";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useForkRef as p } from "@mui/material/utils";
+import { useSortable as m } from "@dnd-kit/react/sortable";
+import { pointerIntersection as h } from "@dnd-kit/collision";
+import { useDroppable as g } from "@dnd-kit/react";
+//#region src/components/QueryBuilder/FilterGroupNode.tsx
+function _(b) {
+	let { group: x, isRoot: S = !1, parentGroupId: C, index: w, depth: T = 0 } = b, { addConditionAt: E, addChildGroupAt: D, clearGroupAt: O, updateGroupAt: k, removeGroupAt: A } = r(), { ref: j, handleRef: M, isDragSource: N } = m({
+		id: x.id,
+		index: w ?? 0,
+		group: C ?? x.id,
+		disabled: {
+			draggable: S,
+			droppable: !0
+		}
+	}), { ref: P, isDropTarget: F } = g({
+		id: n(x.id),
+		data: t(x.id),
+		collisionDetector: h,
+		collisionPriority: T
+	}), I = p(j, P), L = {
+		"--qb-accent-color": v(x),
+		"--qb-pill-color": v(x)
+	};
+	return /* @__PURE__ */ f("div", {
+		ref: I,
+		className: `${s.group} ${S ? "" : s.nested}${N ? ` ${i.dragSource}` : ""}${F ? ` ${s.dropTarget}` : ""}`,
+		style: L,
+		role: "group",
+		"aria-label": y(x),
+		"data-qb-node-id": x.id,
+		children: [/* @__PURE__ */ f("div", {
+			className: s.header,
+			children: [
+				!S && /* @__PURE__ */ d(a, {
+					handleRef: M,
+					label: "Drag condition group into another condition group"
+				}),
+				/* @__PURE__ */ f(u, {
+					size: "small",
+					className: s.combinator,
+					exclusive: !0,
+					value: x.combinator,
+					"aria-label": "Boolean combinator",
+					onChange: (e, t) => {
+						t != null && k(x.id, { combinator: t });
+					},
+					children: [/* @__PURE__ */ d(l, {
+						value: "AND",
+						"aria-label": "AND",
+						children: "AND"
+					}), /* @__PURE__ */ d(l, {
+						value: "OR",
+						"aria-label": "OR",
+						children: "OR"
+					})]
+				}),
+				/* @__PURE__ */ d(l, {
+					size: "small",
+					value: "not",
+					selected: x.not,
+					className: s.notToggle,
+					"aria-label": "Negate this group",
+					"aria-pressed": x.not,
+					onChange: () => k(x.id, { not: !x.not }),
+					children: "Exclude (NOT)"
+				}),
+				/* @__PURE__ */ f("div", {
+					className: s.actions,
+					children: [
+						/* @__PURE__ */ d(c, {
+							className: s.actionButton,
+							size: "small",
+							onClick: () => E(x.id),
+							children: "+ Condition"
+						}),
+						/* @__PURE__ */ d(c, {
+							className: s.actionButton,
+							size: "small",
+							onClick: () => D(x.id),
+							children: "+ Condition Group"
+						}),
+						/* @__PURE__ */ d(c, {
+							className: s.actionButton,
+							size: "small",
+							onClick: () => O(x.id),
+							disabled: x.children.length === 0,
+							children: "Clear"
+						}),
+						!S && /* @__PURE__ */ d(c, {
+							className: s.actionButton,
+							size: "small",
+							onClick: () => A(x.id),
+							children: "Delete Condition Group"
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ d("div", {
+			className: s.children,
+			children: x.children.length === 0 ? /* @__PURE__ */ d("div", {
+				className: s.emptyState,
+				children: "No conditions yet, add one above"
+			}) : x.children.map((t, n) => e(t) ? /* @__PURE__ */ d(_, {
+				group: t,
+				parentGroupId: x.id,
+				index: n,
+				depth: T + 1
+			}, t.id) : /* @__PURE__ */ d(o, {
+				condition: t,
+				parentGroupId: x.id,
+				index: n
+			}, t.id))
+		})]
+	});
+}
+function v(e) {
+	return e.not ? "var(--synapse-error)" : e.combinator === "OR" ? "var(--synapse-warning)" : "var(--synapse-primary-action-color)";
+}
+function y(e) {
+	return `${e.not ? "excluded " : ""}${e.combinator} filter group`;
+}
+//#endregion
+export { _ as FilterGroupNode };
+
+//# sourceMappingURL=FilterGroupNode.js.map

package/dist/components/QueryBuilder/FilterGroupNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupNode.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterGroupNode.tsx"],"sourcesContent":["import { Button, ToggleButton, ToggleButtonGroup } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport { pointerIntersection } from '@dnd-kit/collision'\nimport { useDroppable } from '@dnd-kit/react'\nimport { useSortable } from '@dnd-kit/react/sortable'\nimport { CSSProperties } from 'react'\nimport { FilterConditionRow } from './FilterConditionRow'\nimport styles from './FilterGroupNode.module.scss'\nimport { QBDragHandle } from './QBDragHandle'\nimport dragStyles from './queryBuilderDrag.module.scss'\nimport { groupDropZoneData, groupDropZoneId } from './queryBuilderDnd'\nimport { useQueryBuilderInternalContext } from './QueryBuilderInternalContext'\nimport { isQBGroup, QBGroup } from './QueryBuilderTypes'\n\nexport type FilterGroupNodeProps = {\n  group: QBGroup\n  isRoot?: boolean\n  parentGroupId?: string\n  index?: number\n  /** Nesting level, used to resolve drops into the innermost group. */\n  depth?: number\n}\n\nexport function FilterGroupNode(props: FilterGroupNodeProps) {\n  const { group, isRoot = false, parentGroupId, index, depth = 0 } = props\n  const {\n    addConditionAt,\n    addChildGroupAt,\n    clearGroupAt,\n    updateGroupAt,\n    removeGroupAt,\n  } = useQueryBuilderInternalContext()\n\n  // Groups become drop targets only through the `useDroppable` zone below.\n  // Keep the sortable's droppable half disabled unless `useQueryBuilderDrag`\n  // also resolves sortable targets: for any target the app doesn't reposition\n  // in `onDragOver`, dnd-kit's OptimisticSortingPlugin moves the DOM node\n  // itself, and React's next commit throws `NotFoundError` on `removeChild`.\n  const {\n    ref: sortableRef,\n    handleRef,\n    isDragSource,\n  } = useSortable({\n    id: group.id,\n    index: index ?? 0,\n    group: parentGroupId ?? group.id,\n    disabled: { draggable: isRoot, droppable: true },\n  })\n\n  // `useQueryBuilderDrag` identifies the target group by `data.groupId`. Zones\n  // nest inside their groups, so the pointer is inside every ancestor of the\n  // group it is over; hit-testing by pointer and ranking by depth selects the\n  // innermost. `collisionPriority` replaces the ranking a detector returns, so\n  // the detector has to be one that reports nothing but pointer hits —\n  // otherwise a deeper zone the dragged box merely overlaps outranks the zone\n  // the pointer is actually in.\n  const { ref: dropZoneRef, isDropTarget } = useDroppable({\n    id: groupDropZoneId(group.id),\n    data: groupDropZoneData(group.id),\n    collisionDetector: pointerIntersection,\n    collisionPriority: depth,\n  })\n\n  // The drag source and the drop zone are the same element.\n  const groupRef = useForkRef(sortableRef, dropZoneRef)\n\n  const style: CSSProperties = {\n    ['--qb-accent-color' as string]: accentColorFor(group),\n    ['--qb-pill-color' as string]: accentColorFor(group),\n  }\n\n  return (\n    <div\n      ref={groupRef}\n      className={`${styles.group} ${isRoot ? '' : styles.nested}${\n        isDragSource ? ` ${dragStyles.dragSource}` : ''\n      }${isDropTarget ? ` ${styles.dropTarget}` : ''}`}\n      style={style}\n      role=\"group\"\n      aria-label={groupAriaLabel(group)}\n      data-qb-node-id={group.id}\n    >\n      <div className={styles.header}>\n        {!isRoot && (\n          <QBDragHandle\n            handleRef={handleRef}\n            label=\"Drag condition group into another condition group\"\n          />\n        )}\n        <ToggleButtonGroup\n          size=\"small\"\n          className={styles.combinator}\n          exclusive\n          value={group.combinator}\n          aria-label=\"Boolean combinator\"\n          onChange={(_event, next) => {\n            if (next == null) return\n            updateGroupAt(group.id, { combinator: next })\n          }}\n        >\n          <ToggleButton value=\"AND\" aria-label=\"AND\">\n            AND\n          </ToggleButton>\n          <ToggleButton value=\"OR\" aria-label=\"OR\">\n            OR\n          </ToggleButton>\n        </ToggleButtonGroup>\n\n        <ToggleButton\n          size=\"small\"\n          value=\"not\"\n          selected={group.not}\n          className={styles.notToggle}\n          aria-label=\"Negate this group\"\n          aria-pressed={group.not}\n          onChange={() => updateGroupAt(group.id, { not: !group.not })}\n        >\n          Exclude (NOT)\n        </ToggleButton>\n\n        <div className={styles.actions}>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => addConditionAt(group.id)}\n          >\n            + Condition\n          </Button>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => addChildGroupAt(group.id)}\n          >\n            + Condition Group\n          </Button>\n          <Button\n            className={styles.actionButton}\n            size=\"small\"\n            onClick={() => clearGroupAt(group.id)}\n            disabled={group.children.length === 0}\n          >\n            Clear\n          </Button>\n          {!isRoot && (\n            <Button\n              className={styles.actionButton}\n              size=\"small\"\n              onClick={() => removeGroupAt(group.id)}\n            >\n              Delete Condition Group\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <div className={styles.children}>\n        {group.children.length === 0 ? (\n          <div className={styles.emptyState}>\n            No conditions yet, add one above\n          </div>\n        ) : (\n          group.children.map((child, childIndex) => {\n            if (isQBGroup(child)) {\n              return (\n                <FilterGroupNode\n                  key={child.id}\n                  group={child}\n                  parentGroupId={group.id}\n                  index={childIndex}\n                  depth={depth + 1}\n                />\n              )\n            }\n            return (\n              <FilterConditionRow\n                key={child.id}\n                condition={child}\n                parentGroupId={group.id}\n                index={childIndex}\n              />\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction accentColorFor(group: QBGroup): string {\n  if (group.not) return 'var(--synapse-error)'\n  if (group.combinator === 'OR') return 'var(--synapse-warning)'\n  return 'var(--synapse-primary-action-color)'\n}\n\nfunction groupAriaLabel(group: QBGroup): string {\n  const modifier = group.not ? 'excluded ' : ''\n  return `${modifier}${group.combinator} filter group`\n}\n"],"mappings":"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"}

package/dist/components/QueryBuilder/FilterGroupNode.module.js

@@ -0,0 +1,16 @@
+import './FilterGroupNode.css';var e = {
+	group: "_group_ryxud_1",
+	nested: "_nested_ryxud_7",
+	dropTarget: "_dropTarget_ryxud_11",
+	header: "_header_ryxud_16",
+	combinator: "_combinator_ryxud_24",
+	notToggle: "_notToggle_ryxud_43",
+	actions: "_actions_ryxud_57",
+	actionButton: "_actionButton_ryxud_64",
+	children: "_children_ryxud_72",
+	emptyState: "_emptyState_ryxud_78"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=FilterGroupNode.module.js.map

package/dist/components/QueryBuilder/FilterGroupNode.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterGroupNode.module.js","names":[],"sources":["../../../src/components/QueryBuilder/FilterGroupNode.module.scss"],"sourcesContent":[".group {\n  position: relative;\n  padding: 8px 0 8px 16px;\n  border-left: 2px solid\n    var(--qb-accent-color, var(--synapse-primary-action-color));\n  border-radius: 2px 0 0 2px;\n\n  &.nested {\n    margin-top: 4px;\n    margin-bottom: 4px;\n  }\n\n  // Groups are the only drop targets, so this marks which one a release\n  // would land in. The dragged node has already moved here by the time it\n  // shows, so the highlight reads as confirmation rather than a preview.\n  &.dropTarget {\n    border-radius: 3px;\n    box-shadow: inset 0 0 0 2px\n      var(--qb-accent-color, var(--synapse-primary-action-color));\n  }\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.combinator :global(.MuiToggleButton-root) {\n  text-transform: none;\n  padding: 2px 12px;\n  min-width: 44px;\n  font-weight: 700;\n  border-color: var(--synapse-gray-dark);\n  color: var(--synapse-gray-regular);\n}\n\n.combinator :global(.MuiToggleButton-root.Mui-selected) {\n  background-color: var(--qb-accent-color, var(--synapse-primary-action-color));\n  color: white;\n  border-color: var(--qb-accent-color, var(--synapse-primary-action-color));\n}\n\n.combinator :global(.MuiToggleButton-root.Mui-selected:hover) {\n  background-color: var(--qb-accent-color, var(--synapse-primary-action-color));\n}\n\n.notToggle {\n  text-transform: none;\n  padding: 2px 12px;\n  border-color: var(--synapse-gray-dark);\n  color: var(--synapse-gray-regular);\n  font-weight: 600;\n  font-size: 13px;\n\n  &:global(.Mui-selected),\n  &:global(.Mui-selected:hover) {\n    background-color: var(--synapse-error);\n    color: white;\n    border-color: var(--synapse-error);\n  }\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  margin-left: auto;\n}\n\n.actionButton {\n  text-transform: none;\n  padding: 2px 8px;\n  min-width: 0;\n  font-weight: 500;\n  color: var(--synapse-primary-action-color);\n}\n\n.children {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.emptyState {\n  padding: 8px 4px;\n  color: var(--synapse-gray-deemphasized);\n  font-style: italic;\n  font-size: 13px;\n}\n"],"mappings":""}

package/dist/components/QueryBuilder/FilterGroupNode.module.scss

@@ -0,0 +1,92 @@
+.group {
+  position: relative;
+  padding: 8px 0 8px 16px;
+  border-left: 2px solid
+    var(--qb-accent-color, var(--synapse-primary-action-color));
+  border-radius: 2px 0 0 2px;
+
+  &.nested {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+
+  // Groups are the only drop targets, so this marks which one a release
+  // would land in. The dragged node has already moved here by the time it
+  // shows, so the highlight reads as confirmation rather than a preview.
+  &.dropTarget {
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 2px
+      var(--qb-accent-color, var(--synapse-primary-action-color));
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 4px;
+}
+
+.combinator :global(.MuiToggleButton-root) {
+  text-transform: none;
+  padding: 2px 12px;
+  min-width: 44px;
+  font-weight: 700;
+  border-color: var(--synapse-gray-dark);
+  color: var(--synapse-gray-regular);
+}
+
+.combinator :global(.MuiToggleButton-root.Mui-selected) {
+  background-color: var(--qb-accent-color, var(--synapse-primary-action-color));
+  color: white;
+  border-color: var(--qb-accent-color, var(--synapse-primary-action-color));
+}
+
+.combinator :global(.MuiToggleButton-root.Mui-selected:hover) {
+  background-color: var(--qb-accent-color, var(--synapse-primary-action-color));
+}
+
+.notToggle {
+  text-transform: none;
+  padding: 2px 12px;
+  border-color: var(--synapse-gray-dark);
+  color: var(--synapse-gray-regular);
+  font-weight: 600;
+  font-size: 13px;
+
+  &:global(.Mui-selected),
+  &:global(.Mui-selected:hover) {
+    background-color: var(--synapse-error);
+    color: white;
+    border-color: var(--synapse-error);
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.actionButton {
+  text-transform: none;
+  padding: 2px 8px;
+  min-width: 0;
+  font-weight: 500;
+  color: var(--synapse-primary-action-color);
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.emptyState {
+  padding: 8px 4px;
+  color: var(--synapse-gray-deemphasized);
+  font-style: italic;
+  font-size: 13px;
+}

package/dist/components/QueryBuilder/QBDragHandle.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+export type QBDragHandleProps = {
+    /** `handleRef` from `useSortable`, which binds the drag sensor here. */
+    handleRef: Ref<HTMLButtonElement>;
+    /** Names the drag for both the tooltip and the accessible name. */
+    label: string;
+};
+/** The grip that starts a drag on a condition or a condition group. */
+export declare function QBDragHandle(props: QBDragHandleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QBDragHandle.d.ts.map

package/dist/components/QueryBuilder/QBDragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QBDragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/QBDragHandle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAG3B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,wEAAwE;IACxE,SAAS,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACjC,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,uEAAuE;AACvE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAcpD"}

package/dist/components/QueryBuilder/QBDragHandle.js

@@ -0,0 +1,22 @@
+import e from "./queryBuilderDrag.module.js";
+import { IconButton as t, Tooltip as n } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/icons-material/DragIndicator";
+//#region src/components/QueryBuilder/QBDragHandle.tsx
+function a(a) {
+	let { handleRef: o, label: s } = a;
+	return /* @__PURE__ */ r(n, {
+		title: s,
+		children: /* @__PURE__ */ r(t, {
+			ref: o,
+			size: "small",
+			className: e.dragHandle,
+			"aria-label": s,
+			children: /* @__PURE__ */ r(i, { fontSize: "small" })
+		})
+	});
+}
+//#endregion
+export { a as QBDragHandle };
+
+//# sourceMappingURL=QBDragHandle.js.map

package/dist/components/QueryBuilder/QBDragHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QBDragHandle.js","names":[],"sources":["../../../src/components/QueryBuilder/QBDragHandle.tsx"],"sourcesContent":["import DragIndicatorIcon from '@mui/icons-material/DragIndicator'\nimport { IconButton, Tooltip } from '@mui/material'\nimport { Ref } from 'react'\nimport styles from './queryBuilderDrag.module.scss'\n\nexport type QBDragHandleProps = {\n  /** `handleRef` from `useSortable`, which binds the drag sensor here. */\n  handleRef: Ref<HTMLButtonElement>\n  /** Names the drag for both the tooltip and the accessible name. */\n  label: string\n}\n\n/** The grip that starts a drag on a condition or a condition group. */\nexport function QBDragHandle(props: QBDragHandleProps) {\n  const { handleRef, label } = props\n  return (\n    <Tooltip title={label}>\n      <IconButton\n        ref={handleRef}\n        size=\"small\"\n        className={styles.dragHandle}\n        aria-label={label}\n      >\n        <DragIndicatorIcon fontSize=\"small\" />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;AAaA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EAAE,cAAW,aAAU;CAC7B,OACE,kBAAC,GAAD;EAAS,OAAO;YACd,kBAAC,GAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW,EAAO;GAClB,cAAY;aAEZ,kBAAC,GAAD,EAAmB,UAAS,QAAS,CAAA;EAC3B,CAAA;CACL,CAAA;AAEb"}

package/dist/components/QueryBuilder/QueryBuilderControls.css

@@ -0,0 +1 @@
+._root_x90xm_1{background:var(--synapse-background-color-gray-light);border:1px solid var(--synapse-border-color-gray);border-radius:4px;flex-direction:column;gap:12px;padding:12px;display:flex}._applyRow_x90xm_11{justify-content:flex-end;display:flex}._applyButton_x90xm_16{text-transform:none}._summaryBar_x90xm_20{border:1px solid var(--synapse-border-color-gray);background:#fff;border-radius:4px;flex-direction:column;align-items:stretch;gap:6px;padding:8px 12px;display:flex}._summaryHeader_x90xm_31{justify-content:space-between;align-items:center;gap:12px;display:flex}._summaryLabel_x90xm_38{text-transform:uppercase;letter-spacing:.5px;color:var(--synapse-gray-regular);font-size:11px;font-weight:700}._summaryContent_x90xm_46{word-break:break-word;font-size:14px;line-height:1.5}._summaryModeToggle_x90xm_52{flex-shrink:0}._summaryModeToggle_x90xm_52 .MuiToggleButton-root{text-transform:none;padding:2px 12px;font-size:12px}._sqlPlaceholder_x90xm_61{color:var(--synapse-gray-deemphasized);font-style:italic}._sqlText_x90xm_66{font-family:var(--synapse-font-family-mono,monospace);white-space:pre-wrap;word-break:break-word;color:var(--synapse-gray-1000);font-size:12px;display:block}._sqlError_x90xm_75{color:var(--synapse-error);font-size:13px}

package/dist/components/QueryBuilder/QueryBuilderControls.d.ts

@@ -0,0 +1,21 @@
+import { QBGroup } from './QueryBuilderTypes';
+export type QueryBuilderControlsProps = {
+    /** The QB tree. When null, an empty default tree is rendered. */
+    tree: QBGroup | null;
+    /** Called with the next tree after any dispatched edit. */
+    onTreeChange: (next: QBGroup) => void;
+    /**
+     * When true, the property picker only offers columns that have facet
+     * metadata (Cohort Builder mode). Defaults to false.
+     */
+    onlyFacetedColumns?: boolean;
+};
+/**
+ * Top-level Query Builder panel. Uses `useQBFacetSourceMetadata()` — must be
+ * rendered inside the Suspense boundary that already wraps
+ * `QueryVisualizationWrapper` in `QueryWrapperPlotNav`. Facet metadata is
+ * pulled from a companion query that strips the QB's own `FilterGroup` out
+ * of `additionalFilters` so pill values remain stable while the user builds.
+ */
+export declare function QueryBuilderControls(props: QueryBuilderControlsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QueryBuilderControls.d.ts.map

package/dist/components/QueryBuilder/QueryBuilderControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderControls.d.ts","sourceRoot":"","sources":["../../../src/components/QueryBuilder/QueryBuilderControls.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAe,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAI1D,MAAM,MAAM,yBAAyB,GAAG;IACtC,iEAAiE;IACjE,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACpB,2DAA2D;IAC3D,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAID;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAkLpE"}

package/dist/components/QueryBuilder/QueryBuilderControls.js

@@ -0,0 +1,143 @@
+import { isFilterGroup as e } from "../../utils/types/IsType.js";
+import { useQueryContext as t } from "../QueryContext/QueryContext.js";
+import "../QueryContext/index.js";
+import { useQueryVisualizationContext as n } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import "../QueryVisualizationWrapper/index.js";
+import { addChildGroup as r, addConditionToGroup as i, clearGroup as a, defaultQBGroup as o, removeNode as s, updateCondition as c, updateGroup as l } from "./queryBuilderOperations.js";
+import { qbNodeToApiFilter as u } from "./queryBuilderTranslation.js";
+import { useQueryBuilderDrag as d } from "./queryBuilderDnd.js";
+import { useQBCombinedSql as f } from "./useQBCombinedSql.js";
+import { useQBFacetSourceMetadata as p } from "./useQBFacetSourceMetadata.js";
+import { QueryBuilderInternalContextProvider as m } from "./QueryBuilderInternalContext.js";
+import { FilterGroupNode as h } from "./FilterGroupNode.js";
+import { qbTreeToReadable as g } from "./qbTreeToReadable.js";
+import _ from "./QueryBuilderControls.module.js";
+import { useCallback as v, useMemo as y, useState as b } from "react";
+import { Button as x, ToggleButton as S, ToggleButtonGroup as C } from "@mui/material";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { DragDropProvider as E } from "@dnd-kit/react";
+//#region src/components/QueryBuilder/QueryBuilderControls.tsx
+function D(D) {
+	let { tree: O, onTreeChange: k, onlyFacetedColumns: A = !1 } = D, { columnModels: j, facetResults: M } = p(), { executeQueryRequest: N } = t(), P = O ?? o(), F = v(() => {
+		let t = u(P);
+		N((n) => {
+			let r = (n.query.additionalFilters ?? []).filter((t) => !e(t)), i = t ? [...r, t] : r;
+			return {
+				...n,
+				query: {
+					...n.query,
+					additionalFilters: i.length > 0 ? i : void 0
+				}
+			};
+		});
+	}, [P, N]), { getColumnDisplayName: I } = n(), [L, R] = b("plain-english"), z = v((e) => {
+		k(i(P, e, null, null));
+	}, [P, k]), B = v((e) => {
+		k(r(P, e));
+	}, [P, k]), V = v((e) => {
+		k(a(P, e));
+	}, [P, k]), H = v((e, t) => {
+		k(l(P, e, t));
+	}, [P, k]), U = v((e) => {
+		k(s(P, e));
+	}, [P, k]), W = v((e, t) => {
+		k(c(P, e, t));
+	}, [P, k]), G = v((e) => {
+		k(s(P, e));
+	}, [P, k]), K = d(P, k), q = y(() => ({
+		columnModels: j,
+		facetResults: M,
+		onlyFacetedColumns: A,
+		getColumnDisplayName: I,
+		addConditionAt: z,
+		addChildGroupAt: B,
+		clearGroupAt: V,
+		updateGroupAt: H,
+		removeGroupAt: U,
+		updateConditionAt: W,
+		removeConditionAt: G
+	}), [
+		j,
+		M,
+		A,
+		I,
+		z,
+		B,
+		V,
+		H,
+		U,
+		W,
+		G
+	]), J = y(() => g(P, I), [P, I]), { data: Y, isPending: X, error: Z } = f(L === "sql" ? P : null);
+	return /* @__PURE__ */ w(m, {
+		value: q,
+		children: /* @__PURE__ */ w(E, {
+			...K,
+			children: /* @__PURE__ */ T("div", {
+				className: _.root,
+				children: [
+					/* @__PURE__ */ T("div", {
+						className: _.summaryBar,
+						children: [/* @__PURE__ */ T("div", {
+							className: _.summaryHeader,
+							children: [/* @__PURE__ */ w("span", {
+								className: _.summaryLabel,
+								children: "Query Summary"
+							}), /* @__PURE__ */ T(C, {
+								className: _.summaryModeToggle,
+								size: "small",
+								exclusive: !0,
+								value: L,
+								onChange: (e, t) => {
+									t != null && R(t);
+								},
+								"aria-label": "Query summary display mode",
+								children: [/* @__PURE__ */ w(S, {
+									value: "plain-english",
+									"aria-label": "Show summary",
+									children: "Summary"
+								}), /* @__PURE__ */ w(S, {
+									value: "sql",
+									"aria-label": "Show SQL",
+									children: "SQL"
+								})]
+							})]
+						}), /* @__PURE__ */ w("div", {
+							className: _.summaryContent,
+							"aria-live": "polite",
+							"aria-atomic": "true",
+							children: L === "plain-english" ? J : Z ? /* @__PURE__ */ T("span", {
+								className: _.sqlError,
+								children: ["Could not load SQL preview: ", Z.message]
+							}) : X ? /* @__PURE__ */ w("span", {
+								className: _.sqlPlaceholder,
+								children: "Loading SQL…"
+							}) : /* @__PURE__ */ w("code", {
+								className: _.sqlText,
+								children: Y
+							})
+						})]
+					}),
+					/* @__PURE__ */ w(h, {
+						group: P,
+						isRoot: !0
+					}),
+					/* @__PURE__ */ w("div", {
+						className: _.applyRow,
+						children: /* @__PURE__ */ w(x, {
+							variant: "contained",
+							color: "primary",
+							onClick: F,
+							className: _.applyButton,
+							children: "Update Results"
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { D as QueryBuilderControls };
+
+//# sourceMappingURL=QueryBuilderControls.js.map

package/dist/components/QueryBuilder/QueryBuilderControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilderControls.js","names":[],"sources":["../../../src/components/QueryBuilder/QueryBuilderControls.tsx"],"sourcesContent":["import { Button, ToggleButton, ToggleButtonGroup } from '@mui/material'\nimport { DragDropProvider } from '@dnd-kit/react'\nimport { useCallback, useMemo, useState } from 'react'\nimport { isFilterGroup } from '../../utils/types/IsType'\nimport { useQueryContext } from '../QueryContext'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { FilterGroupNode } from './FilterGroupNode'\nimport { useQueryBuilderDrag } from './queryBuilderDnd'\nimport { qbNodeToApiFilter } from './queryBuilderTranslation'\nimport { qbTreeToReadable } from './qbTreeToReadable'\nimport { QueryBuilderInternalContextProvider } from './QueryBuilderInternalContext'\nimport styles from './QueryBuilderControls.module.scss'\nimport {\n  addChildGroup,\n  addConditionToGroup,\n  clearGroup,\n  defaultQBGroup,\n  removeNode,\n  updateCondition,\n  updateGroup,\n} from './queryBuilderOperations'\nimport { QBCondition, QBGroup } from './QueryBuilderTypes'\nimport { useQBCombinedSql } from './useQBCombinedSql'\nimport { useQBFacetSourceMetadata } from './useQBFacetSourceMetadata'\n\nexport type QueryBuilderControlsProps = {\n  /** The QB tree. When null, an empty default tree is rendered. */\n  tree: QBGroup | null\n  /** Called with the next tree after any dispatched edit. */\n  onTreeChange: (next: QBGroup) => void\n  /**\n   * When true, the property picker only offers columns that have facet\n   * metadata (Cohort Builder mode). Defaults to false.\n   */\n  onlyFacetedColumns?: boolean\n}\n\ntype SummaryMode = 'plain-english' | 'sql'\n\n/**\n * Top-level Query Builder panel. Uses `useQBFacetSourceMetadata()` — must be\n * rendered inside the Suspense boundary that already wraps\n * `QueryVisualizationWrapper` in `QueryWrapperPlotNav`. Facet metadata is\n * pulled from a companion query that strips the QB's own `FilterGroup` out\n * of `additionalFilters` so pill values remain stable while the user builds.\n */\nexport function QueryBuilderControls(props: QueryBuilderControlsProps) {\n  const { tree, onTreeChange, onlyFacetedColumns = false } = props\n  const { columnModels, facetResults } = useQBFacetSourceMetadata()\n  const { executeQueryRequest } = useQueryContext()\n\n  const activeTree = tree ?? defaultQBGroup()\n\n  const onApply = useCallback(() => {\n    const filterGroup = qbNodeToApiFilter(activeTree)\n    executeQueryRequest(prev => {\n      // Preserve any non-QB additionalFilters (e.g. lockedColumn constraints\n      // introduced by portal detail pages) — Update Results only owns the\n      // FilterGroup slot.\n      const preserved = (prev.query.additionalFilters ?? []).filter(\n        f => !isFilterGroup(f),\n      )\n      const next = filterGroup ? [...preserved, filterGroup] : preserved\n      return {\n        ...prev,\n        query: {\n          ...prev.query,\n          additionalFilters: next.length > 0 ? next : undefined,\n        },\n      }\n    })\n  }, [activeTree, executeQueryRequest])\n\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const [summaryMode, setSummaryMode] = useState<SummaryMode>('plain-english')\n\n  const addConditionAt = useCallback(\n    (groupId: string) => {\n      onTreeChange(addConditionToGroup(activeTree, groupId, null, null))\n    },\n    [activeTree, onTreeChange],\n  )\n  const addChildGroupAt = useCallback(\n    (groupId: string) => {\n      onTreeChange(addChildGroup(activeTree, groupId))\n    },\n    [activeTree, onTreeChange],\n  )\n  const clearGroupAt = useCallback(\n    (groupId: string) => {\n      onTreeChange(clearGroup(activeTree, groupId))\n    },\n    [activeTree, onTreeChange],\n  )\n  const updateGroupAt = useCallback(\n    (\n      groupId: string,\n      patch: Partial<Omit<QBGroup, 'kind' | 'id' | 'children'>>,\n    ) => {\n      onTreeChange(updateGroup(activeTree, groupId, patch))\n    },\n    [activeTree, onTreeChange],\n  )\n  const removeGroupAt = useCallback(\n    (groupId: string) => {\n      onTreeChange(removeNode(activeTree, groupId))\n    },\n    [activeTree, onTreeChange],\n  )\n  const updateConditionAt = useCallback(\n    (conditionId: string, patch: Partial<Omit<QBCondition, 'kind' | 'id'>>) => {\n      onTreeChange(updateCondition(activeTree, conditionId, patch))\n    },\n    [activeTree, onTreeChange],\n  )\n  const removeConditionAt = useCallback(\n    (conditionId: string) => {\n      onTreeChange(removeNode(activeTree, conditionId))\n    },\n    [activeTree, onTreeChange],\n  )\n  const dragHandlers = useQueryBuilderDrag(activeTree, onTreeChange)\n\n  const contextValue = useMemo(\n    () => ({\n      columnModels,\n      facetResults,\n      onlyFacetedColumns,\n      getColumnDisplayName,\n      addConditionAt,\n      addChildGroupAt,\n      clearGroupAt,\n      updateGroupAt,\n      removeGroupAt,\n      updateConditionAt,\n      removeConditionAt,\n    }),\n    [\n      columnModels,\n      facetResults,\n      onlyFacetedColumns,\n      getColumnDisplayName,\n      addConditionAt,\n      addChildGroupAt,\n      clearGroupAt,\n      updateGroupAt,\n      removeGroupAt,\n      updateConditionAt,\n      removeConditionAt,\n    ],\n  )\n\n  const readable = useMemo(\n    () => qbTreeToReadable(activeTree, getColumnDisplayName),\n    [activeTree, getColumnDisplayName],\n  )\n\n  const {\n    data: combinedSql,\n    isPending: isSqlPending,\n    error: sqlError,\n  } = useQBCombinedSql(summaryMode === 'sql' ? activeTree : null)\n\n  return (\n    <QueryBuilderInternalContextProvider value={contextValue}>\n      <DragDropProvider {...dragHandlers}>\n        <div className={styles.root}>\n          <div className={styles.summaryBar}>\n            <div className={styles.summaryHeader}>\n              <span className={styles.summaryLabel}>Query Summary</span>\n              <ToggleButtonGroup\n                className={styles.summaryModeToggle}\n                size=\"small\"\n                exclusive\n                value={summaryMode}\n                onChange={(_event, next: SummaryMode | null) => {\n                  if (next != null) setSummaryMode(next)\n                }}\n                aria-label=\"Query summary display mode\"\n              >\n                <ToggleButton value=\"plain-english\" aria-label=\"Show summary\">\n                  Summary\n                </ToggleButton>\n                <ToggleButton value=\"sql\" aria-label=\"Show SQL\">\n                  SQL\n                </ToggleButton>\n              </ToggleButtonGroup>\n            </div>\n            <div\n              className={styles.summaryContent}\n              aria-live=\"polite\"\n              aria-atomic=\"true\"\n            >\n              {summaryMode === 'plain-english' ? (\n                readable\n              ) : sqlError ? (\n                <span className={styles.sqlError}>\n                  Could not load SQL preview: {sqlError.message}\n                </span>\n              ) : isSqlPending ? (\n                <span className={styles.sqlPlaceholder}>Loading SQL…</span>\n              ) : (\n                <code className={styles.sqlText}>{combinedSql}</code>\n              )}\n            </div>\n          </div>\n\n          <FilterGroupNode group={activeTree} isRoot />\n\n          <div className={styles.applyRow}>\n            <Button\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={onApply}\n              className={styles.applyButton}\n            >\n              Update Results\n            </Button>\n          </div>\n        </div>\n      </DragDropProvider>\n    </QueryBuilderInternalContextProvider>\n  )\n}\n"],"mappings":"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"}

package/dist/components/QueryBuilder/QueryBuilderControls.module.js

@@ -0,0 +1,17 @@
+import './QueryBuilderControls.css';var e = {
+	root: "_root_x90xm_1",
+	applyRow: "_applyRow_x90xm_11",
+	applyButton: "_applyButton_x90xm_16",
+	summaryBar: "_summaryBar_x90xm_20",
+	summaryHeader: "_summaryHeader_x90xm_31",
+	summaryLabel: "_summaryLabel_x90xm_38",
+	summaryContent: "_summaryContent_x90xm_46",
+	summaryModeToggle: "_summaryModeToggle_x90xm_52",
+	sqlPlaceholder: "_sqlPlaceholder_x90xm_61",
+	sqlText: "_sqlText_x90xm_66",
+	sqlError: "_sqlError_x90xm_75"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=QueryBuilderControls.module.js.map