@mastra/playground-ui 56.0.0 → 57.0.0-alpha.0

package/dist/{filter-bar-chip-C-JxWUU8.js → filter-bar-chip-luoMVy8-.js}

@@ -1,9 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CheckIcon, LockIcon, XIcon, SearchIcon, PencilIcon } from 'lucide-react';
-import { createContext, useContext, useRef, useState, useCallback, useMemo, forwardRef, useEffect } from 'react';
+import { createContext, useContext, useRef, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
+import { i as isFilterBarGroup, p as parseFieldValue } from './types-CIPrYAzY.js';
 import { c as comboboxStyles } from './combobox-styles-CRebmeht.js';
 import { Combobox } from '@base-ui/react/combobox';
-import { S as Spinner } from './spinner-D2C2DYw8.js';
+import { S as Spinner } from './spinner-ylbE0TJA.js';
 import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from './primitives/fluid-menu.es.js';
 import { c as cn } from './cn-65Adrsfj.js';
 import { B as Button } from './Button-cWcBEd-G.js';
@@ -15,8 +16,92 @@ import { MENU_SIDE_OFFSET } from './primitives/menu-item.es.js';
 import { usePortalContainer } from './primitives/portal-container.es.js';
 import { useIsApplePlatform } from './hooks/use-keyboard-shortcut-label.es.js';
 
-import './filter-bar-chip.css';const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
+import './filter-bar-chip.css';const ROOT_GROUP_ID = "root";
+const normalize = (value) => Array.isArray(value) ? { logic: "and", nodes: value } : value;
+const denormalize = (expr, flat) => flat ? expr.nodes.filter((node) => !isFilterBarGroup(node)) : expr;
+const flattenItems = (expr) => {
+  const out = [];
+  const walk = (nodes, groupId) => {
+    for (const node of nodes) {
+      if (isFilterBarGroup(node)) walk(node.nodes, node.id);
+      else out.push(groupId ? { item: node, groupId } : { item: node });
+    }
+  };
+  walk(expr.nodes, void 0);
+  return out;
+};
+const findGroupIn = (nodes, groupId) => {
+  for (const node of nodes) {
+    if (!isFilterBarGroup(node)) continue;
+    if (node.id === groupId) return node;
+    const nested = findGroupIn(node.nodes, groupId);
+    if (nested) return nested;
+  }
+  return void 0;
+};
+const findGroup = (expr, groupId) => findGroupIn(expr.nodes, groupId);
+const groupDepth = (expr, groupId) => {
+  const walk = (nodes, depth) => {
+    for (const node of nodes) {
+      if (!isFilterBarGroup(node)) continue;
+      if (node.id === groupId) return depth;
+      const nested = walk(node.nodes, depth + 1);
+      if (nested) return nested;
+    }
+    return 0;
+  };
+  return walk(expr.nodes, 1);
+};
+const countLeaves = (group) => group.nodes.reduce((sum, node) => sum + (isFilterBarGroup(node) ? countLeaves(node) : 1), 0);
+const collectIds = (group) => [
+  group.id,
+  ...group.nodes.flatMap((node) => isFilterBarGroup(node) ? collectIds(node) : [node.id])
+];
+const mapGroup = (nodes, groupId, fn) => nodes.map((node) => {
+  if (!isFilterBarGroup(node)) return node;
+  return node.id === groupId ? fn(node) : { ...node, nodes: mapGroup(node.nodes, groupId, fn) };
+});
+const mapItems = (nodes, fn) => nodes.map((node) => isFilterBarGroup(node) ? { ...node, nodes: mapItems(node.nodes, fn) } : fn(node));
+const filterNodes = (nodes, keep) => nodes.filter(keep).map((node) => isFilterBarGroup(node) ? { ...node, nodes: filterNodes(node.nodes, keep) } : node);
+const updateItem = (expr, itemId, patch) => ({
+  ...expr,
+  nodes: mapItems(expr.nodes, (item) => item.id === itemId ? { ...item, ...patch } : item)
+});
+const removeNode = (expr, id) => ({
+  ...expr,
+  nodes: filterNodes(expr.nodes, (node) => node.id !== id)
+});
+const pruneNodes = (nodes) => nodes.flatMap((node) => {
+  if (!isFilterBarGroup(node)) return [node];
+  const pruned = pruneNodes(node.nodes);
+  return pruned.length === 0 ? [] : [{ ...node, nodes: pruned }];
+});
+const pruneEmptyGroups = (expr) => ({
+  ...expr,
+  nodes: pruneNodes(expr.nodes)
+});
+const insertItem = (expr, groupId, item) => {
+  if (!groupId || groupId === ROOT_GROUP_ID) return { ...expr, nodes: [...expr.nodes, item] };
+  return { ...expr, nodes: mapGroup(expr.nodes, groupId, (group) => ({ ...group, nodes: [...group.nodes, item] })) };
+};
+const setGroupLogic = (expr, groupId, logic) => {
+  if (groupId === ROOT_GROUP_ID) return { ...expr, logic };
+  return { ...expr, nodes: mapGroup(expr.nodes, groupId, (group) => ({ ...group, logic })) };
+};
+const createGroup = (expr, parentId, group) => {
+  if (!parentId || parentId === ROOT_GROUP_ID) return { ...expr, nodes: [...expr.nodes, group] };
+  return { ...expr, nodes: mapGroup(expr.nodes, parentId, (parent) => ({ ...parent, nodes: [...parent.nodes, group] })) };
+};
+const clearRemovable = (expr, pinned) => pruneEmptyGroups({
+  ...expr,
+  nodes: filterNodes(expr.nodes, (node) => isFilterBarGroup(node) || pinned.has(node.id))
+});
+
+const SEGMENTS_LEFT_TO_RIGHT = ["field", "operator", "value", "remove"];
 const SEGMENTS_RIGHT_TO_LEFT = [...SEGMENTS_LEFT_TO_RIGHT].reverse();
+const DEFAULT_MAX_GROUP_DEPTH = 3;
+const FILTER_BAR_SCOPE_ATTR = "data-filter-bar-scope";
+const scopeOf = (el) => el?.closest(`[${FILTER_BAR_SCOPE_ATTR}]`) ?? null;
 const stageOf = (draft) => {
   if (!draft) return "none";
   return draft.operatorId ? "operator" : "field";
@@ -36,21 +121,55 @@ function createFilterId() {
 function emptyValueFor(operator) {
   return operator?.arity === "many" ? [] : "";
 }
+const idsOf = (nodes, out = /* @__PURE__ */ new Set()) => {
+  for (const node of nodes) {
+    out.add(node.id);
+    if (isFilterBarGroup(node)) idsOf(node.nodes, out);
+  }
+  return out;
+};
+const mergeNodes = (prev, next, leaving) => {
+  const nextById = new Map(next.map((node) => [node.id, node]));
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const old of prev) {
+    const fresh = nextById.get(old.id);
+    if (fresh) {
+      seen.add(old.id);
+      out.push(
+        isFilterBarGroup(fresh) && isFilterBarGroup(old) ? { ...fresh, nodes: mergeNodes(old.nodes, fresh.nodes, leaving) } : fresh
+      );
+    } else if (leaving.has(old.id)) {
+      out.push(old);
+    }
+  }
+  for (const node of next) if (!seen.has(node.id)) out.push(node);
+  return out;
+};
 function FilterBarProvider({
   fields,
   operators,
   value,
   onValueChange,
   createItemId,
+  maxDepth = DEFAULT_MAX_GROUP_DEPTH,
   ariaLabel,
   children
 }) {
   const segments = useRef(/* @__PURE__ */ new Map());
   const inputRef = useRef(null);
-  const itemsRef = useRef(value);
-  itemsRef.current = value;
+  const flat = Array.isArray(value);
+  const expression = useMemo(() => normalize(value), [value]);
+  const exprRef = useRef(expression);
+  exprRef.current = expression;
   const [announcement, setAnnouncement] = useState("");
   const [nonRemovableIds, setNonRemovableIds] = useState(() => /* @__PURE__ */ new Set());
+  const [inputTarget, setInputTarget] = useState(void 0);
+  const [openGroupId, setOpenGroupId] = useState(null);
+  const emit = useCallback(
+    (next) => onValueChange(denormalize(next, flat)),
+    [onValueChange, flat]
+  );
   const getField = useCallback((fieldId) => fields.find((f) => f.id === fieldId), [fields]);
   const getOperator = useCallback((operatorId) => operators.find((o) => o.id === operatorId), [operators]);
   const getFieldOperators = useCallback(
@@ -67,84 +186,162 @@ function FilterBarProvider({
   draftRef.current = draft;
   const [lastCommit, setLastCommit] = useState(null);
   const settleCommit = useCallback(() => setLastCommit((prev) => prev ? { ...prev, glint: false } : null), []);
-  const [leavingItems, setLeavingItems] = useState(
-    () => /* @__PURE__ */ new Map()
-  );
+  const [leavingIds, setLeavingIds] = useState(() => /* @__PURE__ */ new Set());
   const settleRemove = useCallback((id) => {
-    setLeavingItems((prev) => {
+    setLeavingIds((prev) => {
       if (!prev.has(id)) return prev;
-      const next = new Map(prev);
+      const next = new Set(prev);
       next.delete(id);
       return next;
     });
   }, []);
-  const markLeaving = useCallback((removed) => {
-    if (removed.length === 0) return;
-    setLeavingItems((prev) => {
-      const next = new Map(prev);
-      for (const entry of removed) next.set(entry.item.id, entry);
-      return next;
-    });
+  const markLeaving = useCallback((ids) => {
+    const list = [...ids];
+    if (list.length === 0) return;
+    setLeavingIds((prev) => /* @__PURE__ */ new Set([...prev, ...list]));
   }, []);
-  const { items, leaving } = useMemo(() => {
-    const present = new Set(value.map((item) => item.id));
-    const items2 = lastCommit && !present.has(lastCommit.item.id) ? [...value, lastCommit.item] : [...value];
-    const leaving2 = /* @__PURE__ */ new Set();
-    const pending = [...leavingItems.values()].filter((entry) => !present.has(entry.item.id)).sort((a, b) => a.index - b.index);
-    for (const entry of pending) {
-      items2.splice(Math.min(entry.index, items2.length), 0, entry.item);
-      leaving2.add(entry.item.id);
+  const renderedTreeRef = useRef(expression.nodes);
+  const { rendered, items, leaving, rootGroupOf } = useMemo(() => {
+    const present = idsOf(expression.nodes);
+    let rendered2 = leavingIds.size === 0 ? expression : { ...expression, nodes: mergeNodes(renderedTreeRef.current, expression.nodes, leavingIds) };
+    if (lastCommit && !present.has(lastCommit.item.id)) {
+      rendered2 = insertItem(rendered2, lastCommit.groupId, lastCommit.item);
+    }
+    renderedTreeRef.current = rendered2.nodes;
+    const shown = idsOf(rendered2.nodes);
+    const leaving2 = new Set([...leavingIds].filter((id) => shown.has(id) && !present.has(id)));
+    const rootGroupOf2 = /* @__PURE__ */ new Map();
+    for (const node of rendered2.nodes) {
+      if (isFilterBarGroup(node))
+        for (const { item } of flattenItems({ nodes: [node] })) rootGroupOf2.set(item.id, node.id);
     }
-    return { items: items2, leaving: leaving2 };
-  }, [value, lastCommit, leavingItems]);
+    return { rendered: rendered2, items: flattenItems(rendered2).map((e) => e.item), leaving: leaving2, rootGroupOf: rootGroupOf2 };
+  }, [expression, lastCommit, leavingIds]);
   const newItemId = useCallback(
-    (fieldId) => createItemId ? createItemId(fieldId) : createFilterId(),
-    [createItemId]
+    (fieldId) => createItemId && inputTarget === void 0 ? createItemId(fieldId) : createFilterId(),
+    [createItemId, inputTarget]
   );
   const setDraft = useCallback(
     (next) => {
       setLastCommit(null);
       setDraftState(
-        (prev) => next ? { ...next, id: prev?.fieldId === next.fieldId ? prev.id : newItemId(next.fieldId), from: stageOf(prev) } : null
+        (prev) => next ? {
+          ...next,
+          id: prev?.fieldId === next.fieldId ? prev.id : newItemId(next.fieldId),
+          from: stageOf(prev),
+          groupId: inputTarget
+        } : null
       );
     },
-    [newItemId]
+    [newItemId, inputTarget]
   );
   const commitDraft = useCallback(
     ({ fieldId, operatorId }, value2) => {
       const id = draftRef.current?.id ?? newItemId(fieldId);
+      const groupId = draftRef.current?.groupId ?? inputTarget;
       const item = { id, fieldId, operatorId, value: value2 };
-      onValueChange([...itemsRef.current, item]);
-      setLastCommit({ item, from: stageOf(draftRef.current), glint: true });
+      emit(insertItem(exprRef.current, groupId, item));
+      setLastCommit({ item, from: stageOf(draftRef.current), glint: true, groupId });
       setDraftState(null);
       announce("Filter added");
     },
-    [onValueChange, announce, newItemId]
+    [emit, announce, newItemId, inputTarget]
   );
-  const updateItem = useCallback(
+  const updateItem$1 = useCallback(
     (id, patch) => {
-      onValueChange(itemsRef.current.map((item) => item.id === id ? { ...item, ...patch } : item));
+      emit(updateItem(exprRef.current, id, patch));
     },
-    [onValueChange]
+    [emit]
   );
   const removeItem = useCallback(
     (id) => {
-      const index = itemsRef.current.findIndex((item2) => item2.id === id);
-      const item = itemsRef.current[index];
-      if (item) markLeaving([{ item, index }]);
-      onValueChange(itemsRef.current.filter((item2) => item2.id !== id));
+      markLeaving([id]);
+      emit(removeNode(exprRef.current, id));
       setLastCommit(null);
       announce("Filter removed");
     },
-    [onValueChange, announce, markLeaving]
+    [emit, announce, markLeaving]
+  );
+  const releaseInputTarget = useCallback((gone) => {
+    setInputTarget((prev) => prev && gone.has(prev) ? void 0 : prev);
+  }, []);
+  const removeGroup = useCallback(
+    (groupId) => {
+      const expr = exprRef.current;
+      const group = findGroup(expr, groupId);
+      const gone = new Set(group ? collectIds(group) : [groupId]);
+      markLeaving(gone);
+      emit(removeNode(expr, groupId));
+      setLastCommit(null);
+      setDraftState(null);
+      releaseInputTarget(gone);
+      setOpenGroupId((prev) => prev === groupId ? null : prev);
+      announce("Advanced filter removed");
+    },
+    [emit, announce, markLeaving, releaseInputTarget]
+  );
+  const addGroup = useCallback(
+    (parentId, logic) => {
+      const group = { id: createFilterId(), kind: "group", logic, nodes: [] };
+      emit(createGroup(exprRef.current, parentId, group));
+      setLastCommit(null);
+      setDraftState(null);
+      setInputTarget(group.id);
+      announce(parentId ? "Nested group added" : "Advanced filter added");
+      return group.id;
+    },
+    [emit, announce]
+  );
+  const setLogic = useCallback(
+    (groupId, logic) => {
+      emit(setGroupLogic(exprRef.current, groupId, logic));
+      announce(`Conditions joined with ${logic}`);
+    },
+    [emit, announce]
+  );
+  const getGroupDepth = useCallback((groupId) => groupDepth(exprRef.current, groupId), []);
+  const setOpenGroup = useCallback(
+    (groupId) => {
+      setOpenGroupId(groupId);
+      if (groupId !== null) return;
+      const expr = exprRef.current;
+      const pruned = pruneEmptyGroups(expr);
+      const kept = idsOf(pruned.nodes);
+      const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+      if (gone.size > 0) {
+        markLeaving(gone);
+        emit(pruned);
+      }
+      setDraftState(null);
+      setInputTarget(void 0);
+    },
+    [emit, markLeaving]
+  );
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const openGroupInput = useCallback(
+    (groupId) => {
+      setInputTarget(groupId);
+      setDraftState(null);
+      if (groupId === void 0) focusInput();
+    },
+    [focusInput]
   );
   const clear = useCallback(() => {
-    const removed = itemsRef.current.map((item, index) => ({ item, index })).filter(({ item }) => !nonRemovableIds.has(item.id));
-    markLeaving(removed);
-    onValueChange(itemsRef.current.filter((item) => nonRemovableIds.has(item.id)));
+    const expr = exprRef.current;
+    const next = clearRemovable(expr, nonRemovableIds);
+    const kept = idsOf(next.nodes);
+    const gone = new Set([...idsOf(expr.nodes)].filter((id) => !kept.has(id)));
+    markLeaving(gone);
+    emit(next);
+    setLastCommit(null);
+    setDraftState(null);
+    setInputTarget(void 0);
+    setOpenGroupId(null);
     announce("All filters removed");
-  }, [onValueChange, announce, nonRemovableIds, markLeaving]);
-  const hasRemovableItems = value.some((item) => !nonRemovableIds.has(item.id));
+  }, [emit, announce, nonRemovableIds, markLeaving]);
+  const hasRemovableItems = flattenItems(expression).some(({ item }) => !nonRemovableIds.has(item.id));
   const registerNonRemovable = useCallback((itemId, nonRemovable) => {
     setNonRemovableIds((prev) => {
       if (prev.has(itemId) === nonRemovable) return prev;
@@ -160,24 +357,31 @@ function FilterBarProvider({
     else segments.current.delete(key);
   }, []);
   const registerInput = useCallback((el) => {
-    inputRef.current = el;
-  }, []);
-  const focusInput = useCallback(() => {
-    inputRef.current?.focus();
+    if (el) inputRef.current = el;
+    else if (!inputRef.current?.isConnected) inputRef.current = null;
   }, []);
   const renderedRef = useRef(items);
   renderedRef.current = items;
+  const rootGroupRef = useRef(rootGroupOf);
+  rootGroupRef.current = rootGroupOf;
   const focusChip = useCallback((fromIndex, direction, segment) => {
     const items2 = renderedRef.current;
+    const rootGroupOf2 = rootGroupRef.current;
+    const origin = items2[fromIndex - direction];
+    const originEl = origin ? [...SEGMENTS_LEFT_TO_RIGHT].map((s) => segments.current.get(`${origin.id}:${s}`)).find(Boolean) : null;
+    const scope = scopeOf(typeof document === "undefined" ? null : document.activeElement) ?? scopeOf(originEl) ?? void 0;
     const fallbacks = direction === -1 ? SEGMENTS_RIGHT_TO_LEFT : SEGMENTS_LEFT_TO_RIGHT;
     for (let i = fromIndex; i >= 0 && i < items2.length; i += direction) {
       const item = items2[i];
       if (!item) break;
-      for (const candidate of [segment, ...fallbacks]) {
-        const el = segments.current.get(`${item.id}:${candidate}`);
-        if (el) {
-          el.focus();
-          return true;
+      const ownerIds = [item.id, rootGroupOf2.get(item.id)].filter((id) => id !== void 0);
+      for (const ownerId of ownerIds) {
+        for (const candidate of [segment, ...fallbacks]) {
+          const el = segments.current.get(`${ownerId}:${candidate}`);
+          if (el && (scope === void 0 || scopeOf(el) === scope)) {
+            el.focus();
+            return true;
+          }
         }
       }
     }
@@ -195,18 +399,29 @@ function FilterBarProvider({
       fields,
       operators,
       items,
+      expression: rendered,
+      groupsEnabled: !flat,
+      maxDepth,
       draft,
       setDraft,
       commitDraft,
       lastCommit,
       settleCommit,
-      updateItem,
+      updateItem: updateItem$1,
       removeItem,
       leaving,
       settleRemove,
       clear,
       hasRemovableItems,
       registerNonRemovable,
+      addGroup,
+      removeGroup,
+      setLogic,
+      getGroupDepth,
+      openGroupId,
+      setOpenGroup,
+      inputTarget,
+      openGroupInput,
       getField,
       getOperator,
       getFieldOperators,
@@ -223,18 +438,29 @@ function FilterBarProvider({
       fields,
       operators,
       items,
+      rendered,
+      flat,
+      maxDepth,
       draft,
       setDraft,
       commitDraft,
       lastCommit,
       settleCommit,
-      updateItem,
+      updateItem$1,
       removeItem,
       leaving,
       settleRemove,
       clear,
       hasRemovableItems,
       registerNonRemovable,
+      addGroup,
+      removeGroup,
+      setLogic,
+      getGroupDepth,
+      openGroupId,
+      setOpenGroup,
+      inputTarget,
+      openGroupInput,
       getField,
       getOperator,
       getFieldOperators,
@@ -251,6 +477,12 @@ function FilterBarProvider({
   return /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: ctx, children });
 }
 
+function FilterBarOptionLabel({ option }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    option.start,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label ?? option.value })
+  ] });
+}
 const FluidItem = forwardRef((props, ref) => /* @__PURE__ */ jsx(Combobox.Item, { ref: useFluidMenuItemRef(ref), ...props }));
 FluidItem.displayName = "FilterBarOptionItem";
 function FilterBarOptionList({
@@ -320,12 +552,6 @@ function matchesQueryFilter(item, query, itemToString) {
   return matchesQuery(itemToString ? itemToString(item) : String(item), query);
 }
 
-const parseFieldValue = (type, text) => {
-  if (type === "number") return Number(text);
-  if (type === "boolean") return text.toLowerCase() === "true";
-  return text;
-};
-
 const DEBOUNCE_MS = 150;
 const BOOLEAN_OPTIONS = [
   { value: "true", label: "True" },
@@ -881,7 +1107,7 @@ function ValueOptions({ step, onCancel }) {
         "aria-label": "Values",
         "aria-multiselectable": step.isMany || void 0,
         getKey: (o) => o.value,
-        renderOption: (o) => o.label ?? o.value,
+        renderOption: (option) => /* @__PURE__ */ jsx(FilterBarOptionLabel, { option }),
         isSelected: (o) => step.isMany ? step.selected.includes(o.value) : String(chip.item.value) === o.value,
         isLoading: step.isLoading,
         error: step.error,
@@ -980,5 +1206,5 @@ FilterBarChip.Operator = FilterBarChipOperator;
 FilterBarChip.Value = FilterBarChipValue;
 FilterBarChip.Remove = FilterBarChipRemove;
 
-export { FilterBarChip as F, FilterBarFieldLabel as a, useValueStep as b, FILTER_BAR_CONTROL_SIZE as c, FilterBarOptionList as d, editableSegmentClass as e, fieldSegmentAccentStyle as f, FilterBarProvider as g, FilterBarChipField as h, FilterBarChipOperator as i, FilterBarChipRemove as j, FilterBarChipValue as k, matchesQueryFilter as m, segmentClass as s, useFilterBarContext as u };
-//# sourceMappingURL=filter-bar-chip-C-JxWUU8.js.map
+export { FilterBarChip as F, FilterBarFieldLabel as a, findGroup as b, useValueStep as c, FILTER_BAR_CONTROL_SIZE as d, editableSegmentClass as e, fieldSegmentAccentStyle as f, FilterBarOptionList as g, FilterBarOptionLabel as h, countLeaves as i, chipClass as j, FILTER_BAR_SCOPE_ATTR as k, FilterBarProvider as l, matchesQueryFilter as m, FilterBarChipField as n, FilterBarChipOperator as o, FilterBarChipRemove as p, FilterBarChipValue as q, segmentClass as s, useFilterBarContext as u };
+//# sourceMappingURL=filter-bar-chip-luoMVy8-.js.map