@upbound/monarch-blocks 0.1.0

package/dist/cel-filter-bar.js

@@ -0,0 +1,1850 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/cel-filter-bar/cel-filter-bar.tsx
+import * as React from "react";
+import { Icon } from "@upbound/monarch-core";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/hooks/use-mounted.ts
+import { useSyncExternalStore } from "react";
+function subscribe() {
+  return () => {
+  };
+}
+function useMounted() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/cel-filter-bar/cel-filter-bar.tsx
+import { Badge } from "@upbound/monarch-core";
+import { Button } from "@upbound/monarch-core";
+import { ButtonGroup, ButtonGroupText } from "@upbound/monarch-core";
+import { Calendar } from "@upbound/monarch-core";
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxClearAll,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSelectedChips,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue
+} from "@upbound/monarch-core";
+import { Input } from "@upbound/monarch-core";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@upbound/monarch-core";
+import { Label } from "@upbound/monarch-core";
+import { Popover, PopoverContent, PopoverTrigger } from "@upbound/monarch-core";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@upbound/monarch-core";
+
+// src/hooks/use-cel-filter-editor-state.ts
+import { useCallback, useRef, useState } from "react";
+
+// src/lib/cel-filter/constants.ts
+var RELATIVE_DURATION_PRESET_VALUES = [
+  "24h",
+  "168h",
+  "720h"
+];
+var RELATIVE_DURATION_PRESETS = new Set(RELATIVE_DURATION_PRESET_VALUES);
+function isRelativeDurationPreset(value) {
+  return RELATIVE_DURATION_PRESETS.has(value);
+}
+var MAX_NESTING_DEPTH = 50;
+var MAX_REGEX_LEN = 1e3;
+var ADD_FILTER_POPOVER_SUPPRESS_MS = 500;
+
+// src/hooks/use-cel-filter-editor-state.ts
+function useCelFilterEditorState(initialCommittedIds = []) {
+  const [editingConditionId, setEditingConditionId] = useState(null);
+  const [committedConditionIds, setCommittedConditionIds] = useState(() => new Set(initialCommittedIds));
+  const [activeSurface, setActiveSurface] = useState(null);
+  const suppressCloseUntilRef = useRef(null);
+  const segmentSwitchRef = useRef(false);
+  const isDismissSuppressed = useCallback((id) => {
+    const entry = suppressCloseUntilRef.current;
+    return entry !== null && entry.id === id && Date.now() < entry.until;
+  }, []);
+  const commitCondition = useCallback((id) => {
+    setCommittedConditionIds((prev) => {
+      if (prev.has(id)) {
+        return prev;
+      }
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    setEditingConditionId((current) => current === id ? null : current);
+    setActiveSurface(null);
+    segmentSwitchRef.current = false;
+  }, []);
+  const beginEditing = useCallback((id, surface = "value") => {
+    setEditingConditionId(id);
+    setActiveSurface(surface);
+  }, []);
+  const openSurface = useCallback(
+    (id, surface) => {
+      if (editingConditionId !== id) {
+        beginEditing(id, surface);
+        return;
+      }
+      setActiveSurface(surface);
+    },
+    [beginEditing, editingConditionId]
+  );
+  const closeSurface = useCallback(
+    (id) => {
+      if (editingConditionId === id) {
+        setActiveSurface(null);
+      }
+    },
+    [editingConditionId]
+  );
+  const handlePopoverDismiss = useCallback(
+    (id) => {
+      if (segmentSwitchRef.current) {
+        segmentSwitchRef.current = false;
+        return;
+      }
+      if (isDismissSuppressed(id)) {
+        return;
+      }
+      suppressCloseUntilRef.current = null;
+      commitCondition(id);
+    },
+    [commitCondition, isDismissSuppressed]
+  );
+  const toggleSurface = useCallback(
+    (id, surface) => {
+      const isDraft = editingConditionId === id;
+      const popoverVisible = isDraft && activeSurface !== null;
+      if (isDraft && activeSurface === surface && popoverVisible) {
+        closeSurface(id);
+        return;
+      }
+      if (popoverVisible && activeSurface !== surface) {
+        segmentSwitchRef.current = true;
+      }
+      openSurface(id, surface);
+    },
+    [activeSurface, closeSurface, editingConditionId, openSurface]
+  );
+  const suppressDismissFor = useCallback((id, ms = ADD_FILTER_POPOVER_SUPPRESS_MS) => {
+    suppressCloseUntilRef.current = {
+      id,
+      until: Date.now() + ms
+    };
+  }, []);
+  const removeCondition = useCallback(
+    (id) => {
+      var _a;
+      if (((_a = suppressCloseUntilRef.current) == null ? void 0 : _a.id) === id) {
+        suppressCloseUntilRef.current = null;
+      }
+      setCommittedConditionIds((prev) => {
+        if (!prev.has(id)) {
+          return prev;
+        }
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      setEditingConditionId((current) => current === id ? null : current);
+      if (editingConditionId === id) {
+        setActiveSurface(null);
+        segmentSwitchRef.current = false;
+      }
+    },
+    [editingConditionId]
+  );
+  const clearSuppress = useCallback(() => {
+    suppressCloseUntilRef.current = null;
+  }, []);
+  const getController = useCallback(
+    (conditionId) => {
+      const isDraft = editingConditionId === conditionId;
+      const surface = isDraft ? activeSurface : null;
+      return {
+        isDraft,
+        activeSurface: surface,
+        popoverVisible: isDraft && activeSurface !== null,
+        isDismissSuppressed: () => isDismissSuppressed(conditionId),
+        beginEditing: () => beginEditing(conditionId),
+        openSurface: (s) => openSurface(conditionId, s),
+        closeSurface: () => closeSurface(conditionId),
+        commit: () => {
+          suppressCloseUntilRef.current = null;
+          commitCondition(conditionId);
+        },
+        handlePopoverDismiss: () => handlePopoverDismiss(conditionId),
+        toggleSurface: (s) => toggleSurface(conditionId, s)
+      };
+    },
+    [
+      activeSurface,
+      beginEditing,
+      closeSurface,
+      commitCondition,
+      editingConditionId,
+      handlePopoverDismiss,
+      isDismissSuppressed,
+      openSurface,
+      toggleSurface
+    ]
+  );
+  return {
+    editingConditionId,
+    activeSurface,
+    committedConditionIds,
+    getController,
+    beginEditing,
+    suppressDismissFor,
+    removeCondition,
+    clearSuppress
+  };
+}
+
+// src/lib/cel-filter/date-utils.ts
+var CALENDAR_DAY_PATTERN = /^(\d{4}-\d{2}-\d{2})/;
+var MINUTE_PATTERN = /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})/;
+var TIME_OF_DAY_PATTERN = /^\d{4}-\d{2}-\d{2}T(\d{2}:\d{2})/;
+function calendarDayStartInstant(instant) {
+  const match = CALENDAR_DAY_PATTERN.exec(instant);
+  return match ? `${match[1]}T00:00:00.000Z` : instant;
+}
+function inclusiveEndInstant(instant, granularity) {
+  if (granularity === "minute") {
+    const minuteMatch = MINUTE_PATTERN.exec(instant);
+    return minuteMatch ? `${minuteMatch[1]}:59.999Z` : instant;
+  }
+  const match = CALENDAR_DAY_PATTERN.exec(instant);
+  return match ? `${match[1]}T23:59:59.999Z` : instant;
+}
+function isRealCalendarDay(instant) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(instant);
+  if (!match) {
+    return false;
+  }
+  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day;
+}
+function readTimeOfDay(instant) {
+  if (!instant) {
+    return "";
+  }
+  const match = TIME_OF_DAY_PATTERN.exec(instant);
+  return match ? match[1] : "";
+}
+function withTimeOfDay(instant, timeOfDay) {
+  const day = CALENDAR_DAY_PATTERN.exec(instant);
+  const time = /^(\d{2}):(\d{2})/.exec(timeOfDay);
+  if (!day || !time) {
+    return instant;
+  }
+  return `${day[1]}T${time[1]}:${time[2]}:00.000Z`;
+}
+function formatCalendarDateUtc(date, boundary) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const time = boundary === "end" ? "T23:59:59.999Z" : "T00:00:00.000Z";
+  return `${year}-${month}-${day}${time}`;
+}
+function parseCalendarDate(value) {
+  if (!value) {
+    return void 0;
+  }
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value);
+  if (!match) {
+    return void 0;
+  }
+  return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+}
+function formatInstantLabel(instant, { withTime = false, locale } = {}) {
+  const date = parseCalendarDate(instant);
+  if (!date) {
+    return "";
+  }
+  const dateLabel = date.toLocaleDateString(locale);
+  const timeOfDay = withTime ? readTimeOfDay(instant) : "";
+  return timeOfDay ? `${dateLabel} ${timeOfDay} UTC` : dateLabel;
+}
+
+// src/lib/cel-filter/types.ts
+var isCelFilterGroup = (node) => node.type === "group";
+var isCelFilterCondition = (node) => node.type === "condition";
+var isCheckboxCelValue = (value) => Array.isArray(value) && value.every((item) => typeof item === "string");
+var isMultiTextCelValue = (value) => typeof value === "object" && value !== null && "tokens" in value;
+var isDateCelValue = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  if ("tokens" in value || "key" in value) {
+    return false;
+  }
+  return "preset" in value || "instant" in value || "range" in value || Object.keys(value).length === 0;
+};
+var isMapKeyCelValue = (value) => typeof value === "object" && value !== null && "key" in value;
+
+// src/lib/cel-filter/value-utils.ts
+function isRelativeDateCelValue(value) {
+  return value.preset != null;
+}
+function readDateCelValue(value) {
+  return isDateCelValue(value) ? value : {};
+}
+function readMapKeyCelValue(value) {
+  return isMapKeyCelValue(value) ? value : { key: "" };
+}
+function readMultiTextCelValue(value) {
+  return isMultiTextCelValue(value) ? value : { tokens: [] };
+}
+
+// src/lib/cel-filter/compile/escape-cel-string.ts
+function escapeCelString(input) {
+  let out = "";
+  for (const char of input) {
+    switch (char) {
+      case "\\":
+        out += "\\\\";
+        break;
+      case '"':
+        out += '\\"';
+        break;
+      case "\n":
+        out += "\\n";
+        break;
+      case "\r":
+        out += "\\r";
+        break;
+      case "	":
+        out += "\\t";
+        break;
+      case "\f":
+        out += "\\f";
+        break;
+      case "\v":
+        out += "\\v";
+        break;
+      case "\b":
+        out += "\\b";
+        break;
+      case "\0":
+        out += "\\0";
+        break;
+      default:
+        out += char;
+    }
+  }
+  return out;
+}
+function celStringLiteral(input) {
+  return `"${escapeCelString(input)}"`;
+}
+
+// src/lib/cel-filter/compile/operators.ts
+var RESERVED_COLUMN_CEL_IDENTIFIERS = {
+  namespace: "__namespace__"
+};
+var CEL_IDENTIFIER_TO_COLUMN_ID = Object.fromEntries(
+  Object.entries(RESERVED_COLUMN_CEL_IDENTIFIERS).map(([columnId, celIdentifier]) => [celIdentifier, columnId])
+);
+var ENUM_OPERATORS = ["is", "is_not"];
+var TEXT_OPERATORS = [
+  "is",
+  "is_not",
+  "contains",
+  "does_not_contain",
+  "starts_with",
+  "ends_with",
+  "matches"
+];
+var DATE_OPERATORS = [
+  "is",
+  "is_not",
+  "is_before",
+  "is_after",
+  "is_on_or_before",
+  "is_on_or_after",
+  "is_between",
+  "is_not_between"
+];
+var MAP_OPERATORS = ["key_exists", "key_does_not_exist", "has_value", "does_not_have_value"];
+var DATE_RELATIVE_OPERATORS = ["is_before", "is_after", "is_on_or_before", "is_on_or_after"];
+var DATE_WINDOW_OPERATORS = ["is", "is_not"];
+var DATE_RANGE_OPERATORS = ["is_between", "is_not_between"];
+var DATE_END_BOUNDARY_OPERATORS = ["is_on_or_before", "is_after"];
+var MAP_VALUE_OPERATORS = ["has_value", "does_not_have_value"];
+function getAllowedOperatorsForShape(shape) {
+  switch (shape) {
+    case "checkbox":
+    case "radio":
+    case "static":
+      return ENUM_OPERATORS;
+    case "text":
+    case "multiText":
+      return TEXT_OPERATORS;
+    case "date":
+      return DATE_OPERATORS;
+    case "map":
+      return MAP_OPERATORS;
+    default:
+      return [];
+  }
+}
+function getAllowedOperators(columnDef) {
+  if (!columnDef) {
+    return [];
+  }
+  if (columnDef.allowedOperators) {
+    return columnDef.allowedOperators;
+  }
+  const shape = columnDef.filterType === "keyValue" ? "map" : columnDef.filterType;
+  return getAllowedOperatorsForShape(shape);
+}
+function isDateRelativeOperator(operator) {
+  return DATE_RELATIVE_OPERATORS.includes(operator);
+}
+function isDateWindowOperator(operator) {
+  return DATE_WINDOW_OPERATORS.includes(operator);
+}
+function isDateRangeOperator(operator) {
+  return DATE_RANGE_OPERATORS.includes(operator);
+}
+function dateBoundaryForOperator(operator) {
+  return DATE_END_BOUNDARY_OPERATORS.includes(operator) ? "end" : "start";
+}
+function resolveColumnDefinition(condition, schema) {
+  if (!condition.columnId) {
+    return void 0;
+  }
+  return schema.columns.find((column) => column.id === condition.columnId);
+}
+function resolveFilterShape(condition, schema) {
+  const columnDef = resolveColumnDefinition(condition, schema);
+  if (!columnDef) {
+    return void 0;
+  }
+  if (columnDef.filterType === "keyValue") {
+    return "map";
+  }
+  if (columnDef.filterType === "static") {
+    return Array.isArray(condition.value) ? "checkbox" : "radio";
+  }
+  return columnDef.filterType;
+}
+var OPERATOR_LABELS = {
+  is: "is",
+  is_not: "is not",
+  contains: "contains",
+  does_not_contain: "does not contain",
+  starts_with: "starts with",
+  ends_with: "ends with",
+  matches: "matches",
+  is_before: "is before",
+  is_after: "is after",
+  is_on_or_before: "is on or before",
+  is_on_or_after: "is on or after",
+  is_between: "is between",
+  is_not_between: "is not between",
+  key_exists: "key exists",
+  key_does_not_exist: "key does not exist",
+  has_value: "has value",
+  does_not_have_value: "does not have value"
+};
+function getOperatorLabel(operator) {
+  return OPERATOR_LABELS[operator];
+}
+function getQuantifierLabel(quantifier) {
+  return quantifier === "all" ? "all of" : "any of";
+}
+var SINGLE_INSTANCE_FILTER_TYPES = /* @__PURE__ */ new Set(["checkbox", "radio", "static"]);
+function allowsMultipleConditions(filterType) {
+  return !SINGLE_INSTANCE_FILTER_TYPES.has(filterType);
+}
+function getDefaultOperator(filterType) {
+  switch (filterType) {
+    case "checkbox":
+    case "radio":
+    case "text":
+    case "static":
+      return "is";
+    case "multiText":
+      return "contains";
+    case "date":
+      return "is";
+    case "keyValue":
+      return "key_exists";
+    default:
+      return "is";
+  }
+}
+function applyOperatorChange(condition, newOperator, shape) {
+  const next = __spreadProps(__spreadValues({}, condition), { operator: newOperator });
+  const oldOperator = condition.operator;
+  if (shape === "date") {
+    const value = condition.value;
+    const isRelative = isDateCelValue(value) && isRelativeDateCelValue(value);
+    const changesValueShape = isDateRangeOperator(oldOperator) !== isDateRangeOperator(newOperator);
+    const relativeNeedsClear = isRelative && (newOperator === "is" || newOperator === "is_not");
+    if (changesValueShape || relativeNeedsClear) {
+      next.value = void 0;
+      return next;
+    }
+    if (isDateCelValue(value) && value.hasTime && isDateWindowOperator(newOperator)) {
+      const _a = value, { hasTime: _hasTime } = _a, dayOnly = __objRest(_a, ["hasTime"]);
+      next.value = dayOnly;
+    }
+    return next;
+  }
+  if (shape === "map") {
+    const value = condition.value;
+    if (!isMapKeyCelValue(value)) {
+      return next;
+    }
+    const bothValueOps = MAP_VALUE_OPERATORS.includes(oldOperator) && MAP_VALUE_OPERATORS.includes(newOperator);
+    next.value = bothValueOps ? { key: value.key, value: value.value } : { key: value.key };
+    return next;
+  }
+  return next;
+}
+var atomic = (expression) => ({ expression, needsGrouping: false });
+function buildConditionExpression(condition, shape, columnDef) {
+  var _a, _b, _c, _d, _e, _f;
+  if (shape === "map") {
+    return buildMapExpression(condition.columnId, condition.operator, condition.value);
+  }
+  const columnId = (_b = (_a = columnDef == null ? void 0 : columnDef.id) != null ? _a : condition.columnId) != null ? _b : "";
+  const column = (_c = RESERVED_COLUMN_CEL_IDENTIFIERS[columnId]) != null ? _c : columnId;
+  switch (shape) {
+    case "checkbox":
+      return buildCheckboxExpression(column, condition.operator, (_d = condition.value) != null ? _d : []);
+    case "radio":
+      return buildRadioExpression(column, condition.operator, String((_e = condition.value) != null ? _e : ""));
+    case "text":
+      return atomic(buildTextTokenFragment(column, condition.operator, String((_f = condition.value) != null ? _f : "")));
+    case "multiText":
+      return buildMultiTextExpression(column, condition.operator, condition.value);
+    case "date":
+      return atomic(buildDateExpression(column, condition.operator, condition.value));
+    default:
+      return atomic("");
+  }
+}
+function buildCheckboxExpression(column, operator, values) {
+  const list = `${column} in [${values.map(celStringLiteral).join(", ")}]`;
+  return atomic(operator === "is_not" ? `!(${list})` : list);
+}
+function buildRadioExpression(column, operator, value) {
+  const literal = celStringLiteral(value);
+  return atomic(operator === "is_not" ? `${column} != ${literal}` : `${column} == ${literal}`);
+}
+function buildTextTokenFragment(column, operator, value, forcePositive = false) {
+  const literal = celStringLiteral(value);
+  switch (operator) {
+    case "is":
+      return `${column} == ${literal}`;
+    case "is_not":
+      return forcePositive ? `${column} == ${literal}` : `${column} != ${literal}`;
+    case "contains":
+      return `${column}.contains(${literal})`;
+    case "does_not_contain":
+      return forcePositive ? `${column}.contains(${literal})` : `!${column}.contains(${literal})`;
+    case "starts_with":
+      return `${column}.startsWith(${literal})`;
+    case "ends_with":
+      return `${column}.endsWith(${literal})`;
+    case "matches":
+      return `${column}.matches(${literal})`;
+    default:
+      return "";
+  }
+}
+function isNegatedTextOperator(operator) {
+  return operator === "is_not" || operator === "does_not_contain";
+}
+function buildMultiTextExpression(column, operator, value) {
+  const tokens = value.tokens;
+  if (tokens.length === 1) {
+    return atomic(buildTextTokenFragment(column, operator, tokens[0]));
+  }
+  const connective = value.quantifier === "all" ? " && " : " || ";
+  const joined = tokens.map((token) => buildTextTokenFragment(column, operator, token, true)).join(connective);
+  if (isNegatedTextOperator(operator)) {
+    return atomic(`!(${joined})`);
+  }
+  return { expression: joined, needsGrouping: value.quantifier !== "all" };
+}
+var DATE_RELATIVE_COMPARATOR_SYMBOLS = {
+  is_before: "<",
+  is_after: ">",
+  is_on_or_before: "<=",
+  is_on_or_after: ">="
+};
+function buildCalendarDayRange(column, startInstant, endInstant) {
+  const start = `timestamp(${celStringLiteral(startInstant)})`;
+  const end = `timestamp(${celStringLiteral(endInstant)})`;
+  return `${column} >= ${start} && ${column} <= ${end}`;
+}
+function buildDateExpression(column, operator, value) {
+  var _a, _b, _c;
+  if (isRelativeDateCelValue(value)) {
+    const durationStr = (_a = value.preset) != null ? _a : "";
+    if (!durationStr) {
+      return "";
+    }
+    const relativeSymbol = (_b = DATE_RELATIVE_COMPARATOR_SYMBOLS[operator]) != null ? _b : ">";
+    return `${column} ${relativeSymbol} now() - duration(${celStringLiteral(durationStr)})`;
+  }
+  if (isDateRangeOperator(operator) && value.range) {
+    const range = buildCalendarDayRange(column, value.range.start, value.range.end);
+    return operator === "is_not_between" ? `!(${range})` : range;
+  }
+  const startInstant = (_c = value.instant) != null ? _c : "";
+  const granularity = value.hasTime && !isDateWindowOperator(operator) ? "minute" : "day";
+  const endInstant = inclusiveEndInstant(startInstant, granularity);
+  const startTimestamp = `timestamp(${celStringLiteral(startInstant)})`;
+  const endTimestamp = `timestamp(${celStringLiteral(endInstant)})`;
+  switch (operator) {
+    case "is":
+      return buildCalendarDayRange(column, startInstant, endInstant);
+    case "is_not":
+      return `!(${buildCalendarDayRange(column, startInstant, endInstant)})`;
+    case "is_before":
+      return `${column} < ${startTimestamp}`;
+    case "is_on_or_before":
+      return `${column} <= ${endTimestamp}`;
+    case "is_after":
+      return `${column} > ${endTimestamp}`;
+    case "is_on_or_after":
+      return `${column} >= ${startTimestamp}`;
+    default:
+      return `${column} == ${startTimestamp}`;
+  }
+}
+function buildMapExpression(columnId, operator, value) {
+  var _a, _b, _c;
+  const column = (_a = RESERVED_COLUMN_CEL_IDENTIFIERS[columnId]) != null ? _a : columnId;
+  const keyLiteral = celStringLiteral(value.key);
+  switch (operator) {
+    case "key_exists":
+      return atomic(`${keyLiteral} in ${column}`);
+    case "key_does_not_exist":
+      return atomic(`!(${keyLiteral} in ${column})`);
+    case "has_value":
+      return atomic(`${column}[${keyLiteral}] == ${celStringLiteral((_b = value.value) != null ? _b : "")}`);
+    case "does_not_have_value":
+      return atomic(`${column}[${keyLiteral}] != ${celStringLiteral((_c = value.value) != null ? _c : "")}`);
+    default:
+      return atomic("");
+  }
+}
+function denormalizeColumnIdWithReservedNames(columnId) {
+  var _a;
+  return (_a = CEL_IDENTIFIER_TO_COLUMN_ID[columnId]) != null ? _a : columnId;
+}
+
+// src/lib/cel-filter/compile/validate-condition.ts
+function statusFromIssues(issues) {
+  if (issues.some((issue) => issue.severity === "invalid")) {
+    return "invalid";
+  }
+  if (issues.some((issue) => issue.severity === "incomplete")) {
+    return "incomplete";
+  }
+  return "valid";
+}
+var SEVERITY_BY_CODE = {
+  missing_column: "incomplete",
+  missing_value: "incomplete",
+  missing_key: "incomplete",
+  missing_tokens: "incomplete",
+  missing_quantifier: "incomplete",
+  missing_instant: "incomplete",
+  missing_range: "incomplete",
+  missing_duration: "incomplete",
+  unknown_column: "invalid",
+  illegal_operator: "invalid",
+  invalid_date_mode: "invalid",
+  regex_too_long: "invalid",
+  invalid_timestamp: "invalid",
+  invalid_date_range: "invalid",
+  nesting_depth_exceeded: "invalid"
+};
+var MESSAGES = {
+  missing_column: "Select a column for this filter.",
+  missing_value: "Enter a value for this filter.",
+  missing_key: "Enter a key for this filter.",
+  missing_tokens: "Enter at least one value for this filter.",
+  missing_quantifier: "Choose whether to match any or all values.",
+  missing_instant: "Select a date for this filter.",
+  missing_range: "Select a start and end date for this filter.",
+  missing_duration: "Select a duration for this filter.",
+  unknown_column: "This column is not available for filtering.",
+  illegal_operator: "This operator is not allowed for this filter.",
+  invalid_date_mode: "This operator cannot be used with this date mode.",
+  regex_too_long: `Pattern exceeds the maximum length of ${MAX_REGEX_LEN} characters.`,
+  invalid_timestamp: "Enter a valid date.",
+  invalid_date_range: "The start must be on or before the end.",
+  nesting_depth_exceeded: "This filter is nested too deeply."
+};
+var RFC3339_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})$/;
+function isValidRfc3339(value) {
+  return RFC3339_RE.test(value) && !Number.isNaN(Date.parse(value)) && isRealCalendarDay(value);
+}
+function makeIssue({ condition, code, field }) {
+  return {
+    code,
+    message: MESSAGES[code],
+    severity: SEVERITY_BY_CODE[code],
+    nodeId: condition.id,
+    nodeType: "condition",
+    field
+  };
+}
+function validateCondition(condition, schema) {
+  if (!condition.columnId) {
+    return [makeIssue({ condition, code: "missing_column", field: "columnId" })];
+  }
+  const columnDef = resolveColumnDefinition(condition, schema);
+  if (!columnDef) {
+    return [makeIssue({ condition, code: "unknown_column", field: "columnId" })];
+  }
+  return validateColumnCondition(condition, columnDef);
+}
+function validateColumnCondition(condition, columnDef) {
+  const allowed = getAllowedOperators(columnDef);
+  if (!allowed.includes(condition.operator)) {
+    return [makeIssue({ condition, code: "illegal_operator", field: "operator" })];
+  }
+  switch (columnDef.filterType) {
+    case "checkbox":
+    case "static":
+      return validateCheckbox(condition);
+    case "radio":
+    case "text":
+      return validateSingleString(condition, columnDef.filterType);
+    case "multiText":
+      return validateMultiText(condition);
+    case "date":
+      return validateDate(condition);
+    case "keyValue":
+      return validateMapCondition(condition);
+    default:
+      return [];
+  }
+}
+function validateCheckbox(condition) {
+  const value = condition.value;
+  if (!Array.isArray(value) || value.length === 0) {
+    return [makeIssue({ condition, code: "missing_value", field: "value" })];
+  }
+  return [];
+}
+function validateSingleString(condition, filterType) {
+  const value = condition.value;
+  if (typeof value !== "string" || value === "") {
+    return [makeIssue({ condition, code: "missing_value", field: "value" })];
+  }
+  if (filterType === "text" && condition.operator === "matches" && value.length > MAX_REGEX_LEN) {
+    return [makeIssue({ condition, code: "regex_too_long", field: "pattern" })];
+  }
+  return [];
+}
+function validateMultiText(condition) {
+  const value = condition.value;
+  if (!isMultiTextCelValue(value) || value.tokens.length === 0) {
+    return [makeIssue({ condition, code: "missing_tokens", field: "tokens" })];
+  }
+  const issues = [];
+  const multi = value;
+  if (multi.tokens.length > 1 && !multi.quantifier) {
+    issues.push(makeIssue({ condition, code: "missing_quantifier", field: "quantifier" }));
+  }
+  if (condition.operator === "matches" && multi.tokens.some((token) => token.length > MAX_REGEX_LEN)) {
+    issues.push(makeIssue({ condition, code: "regex_too_long", field: "pattern" }));
+  }
+  return issues;
+}
+function validateDate(condition) {
+  const value = condition.value;
+  if (!isDateCelValue(value)) {
+    return [makeIssue({ condition, code: "missing_instant", field: "instant" })];
+  }
+  const date = value;
+  if (isRelativeDateCelValue(date)) {
+    return validateRelativeDate(condition, date);
+  }
+  return validateAbsoluteDate(condition, date);
+}
+function validateAbsoluteDate(condition, value) {
+  const issues = [];
+  if (isDateRangeOperator(condition.operator)) {
+    const range = value.range;
+    if (!range || !range.start || !range.end) {
+      issues.push(makeIssue({ condition, code: "missing_range", field: "range" }));
+      return issues;
+    }
+    if (!isValidRfc3339(range.start)) {
+      issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "start" }));
+    }
+    if (!isValidRfc3339(range.end)) {
+      issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "end" }));
+    }
+    if (issues.length === 0 && Date.parse(range.start) > Date.parse(range.end)) {
+      issues.push(makeIssue({ condition, code: "invalid_date_range", field: "range" }));
+    }
+    return issues;
+  }
+  if (!value.instant) {
+    issues.push(makeIssue({ condition, code: "missing_instant", field: "instant" }));
+    return issues;
+  }
+  if (!isValidRfc3339(value.instant)) {
+    issues.push(makeIssue({ condition, code: "invalid_timestamp", field: "instant" }));
+  }
+  return issues;
+}
+function validateRelativeDate(condition, value) {
+  const issues = [];
+  if (!isDateRelativeOperator(condition.operator)) {
+    issues.push(makeIssue({ condition, code: "invalid_date_mode", field: "value" }));
+    return issues;
+  }
+  if (!value.preset) {
+    issues.push(makeIssue({ condition, code: "missing_duration", field: "preset" }));
+  }
+  return issues;
+}
+function validateMapCondition(condition) {
+  const issues = [];
+  const value = isMapKeyCelValue(condition.value) ? condition.value : void 0;
+  if (!value || value.key === "") {
+    issues.push(makeIssue({ condition, code: "missing_key", field: "key" }));
+  }
+  const requiresValue = condition.operator === "has_value" || condition.operator === "does_not_have_value";
+  if (requiresValue && (!value || !value.value)) {
+    issues.push(makeIssue({ condition, code: "missing_value", field: "value" }));
+  }
+  return issues;
+}
+
+// src/lib/cel-filter/compile/apply-display-rules.ts
+function applyDisplayRules(raw, meta) {
+  const issues = raw.issues.filter((issue) => {
+    if (issue.nodeType === "group") {
+      return true;
+    }
+    if (issue.nodeId === meta.editingConditionId) {
+      return false;
+    }
+    return meta.committedConditionIds.has(issue.nodeId);
+  });
+  const status = statusFromIssues(issues);
+  const expression = status === "valid" ? raw.expression : void 0;
+  return {
+    status,
+    expression,
+    issues,
+    isEmitReady: false
+  };
+}
+
+// src/lib/cel-filter/schema-utils.ts
+var COMMIT_FILTER_TYPES = /* @__PURE__ */ new Set(["text", "multiText", "keyValue", "date"]);
+function isMultiTextColumn(columnId, schema) {
+  var _a;
+  return ((_a = schema.columns.find((column) => column.id === columnId)) == null ? void 0 : _a.filterType) === "multiText";
+}
+function getColumnEmitOn(columnDef) {
+  if (columnDef.emitOn) {
+    return columnDef.emitOn;
+  }
+  return COMMIT_FILTER_TYPES.has(columnDef.filterType) ? "commit" : "change";
+}
+
+// src/lib/cel-filter/compile/compute-is-emit-ready.ts
+function resolveEditingColumn(tree, schema, editingConditionId) {
+  const condition = tree.root.children.find(
+    (child) => isCelFilterCondition(child) && child.id === editingConditionId
+  );
+  return condition && schema.columns.find((column) => column.id === condition.columnId);
+}
+function computeIsEmitReady(raw, editingConditionId, schema, tree, meta) {
+  if (raw.status !== "valid") return false;
+  if (!editingConditionId) return true;
+  const columnDef = resolveEditingColumn(tree, schema, editingConditionId);
+  if (!columnDef || getColumnEmitOn(columnDef) === "change") return true;
+  const popoverClosed = meta.activeSurface === null;
+  return popoverClosed && meta.committedConditionIds.has(editingConditionId);
+}
+
+// src/lib/cel-filter/compile/compile-cel-filter-tree.ts
+function combineGroupFragments(fragments) {
+  if (fragments.length === 0) {
+    return { expression: "", needsGrouping: false };
+  }
+  if (fragments.length === 1) {
+    return fragments[0];
+  }
+  return {
+    expression: fragments.map((fragment) => fragment.needsGrouping ? `(${fragment.expression})` : fragment.expression).join(" && "),
+    needsGrouping: false
+  };
+}
+function compileGroup(group, schema) {
+  const depthIssues = group.depth > MAX_NESTING_DEPTH ? [
+    {
+      code: "nesting_depth_exceeded",
+      message: "This filter is nested too deeply.",
+      severity: "invalid",
+      nodeId: group.id,
+      nodeType: "group"
+    }
+  ] : [];
+  return group.children.reduce(
+    (acc, child) => {
+      if (isCelFilterGroup(child)) {
+        const nested = compileGroup(child, schema);
+        acc.issues.push(...nested.issues);
+        if (nested.fragments.length > 0) {
+          acc.fragments.push(combineGroupFragments(nested.fragments));
+        }
+        return acc;
+      }
+      if (isCelFilterCondition(child)) {
+        const conditionIssues = validateCondition(child, schema);
+        if (conditionIssues.length > 0) {
+          acc.issues.push(...conditionIssues);
+          return acc;
+        }
+        const shape = resolveFilterShape(child, schema);
+        if (!shape) {
+          return acc;
+        }
+        const columnDef = resolveColumnDefinition(child, schema);
+        acc.fragments.push(buildConditionExpression(child, shape, columnDef));
+      }
+      return acc;
+    },
+    { issues: depthIssues, fragments: [] }
+  );
+}
+function compileCelFilterTree(tree, schema) {
+  const { issues, fragments } = compileGroup(tree.root, schema);
+  const status = statusFromIssues(issues);
+  if (status === "valid") {
+    return { status, expression: combineGroupFragments(fragments).expression, issues, isEmitReady: true };
+  }
+  return { status, issues, isEmitReady: false };
+}
+
+// src/lib/cel-filter/tree-utils.ts
+function createCelNodeId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `cel-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function createEmptyCelFilterTree() {
+  return {
+    root: {
+      id: createCelNodeId(),
+      type: "group",
+      combinator: "and",
+      depth: 0,
+      children: []
+    }
+  };
+}
+function createDefaultCondition({ schema, columnId }) {
+  const columnDef = schema.columns.find((column) => column.id === columnId);
+  if (!columnDef) {
+    throw new Error(`createDefaultCondition: column "${columnId}" is not in schema.columns`);
+  }
+  return {
+    id: createCelNodeId(),
+    type: "condition",
+    columnId,
+    operator: getDefaultOperator(columnDef.filterType),
+    value: columnDef.defaultValue
+  };
+}
+function appendCondition(tree, condition) {
+  return { root: __spreadProps(__spreadValues({}, tree.root), { children: [...tree.root.children, condition] }) };
+}
+function replaceCondition(tree, conditionId, updater) {
+  return {
+    root: __spreadProps(__spreadValues({}, tree.root), {
+      children: tree.root.children.map(
+        (child) => isCelFilterCondition(child) && child.id === conditionId ? updater(child) : child
+      )
+    })
+  };
+}
+function removeConditionById(tree, conditionId) {
+  return {
+    root: __spreadProps(__spreadValues({}, tree.root), {
+      children: tree.root.children.filter((child) => !(isCelFilterCondition(child) && child.id === conditionId))
+    })
+  };
+}
+
+// src/lib/cel-filter/merge-contextual-into-cel-tree.ts
+function upsertCondition(tree, matches, build) {
+  var _a;
+  const index = tree.root.children.findIndex((child) => isCelFilterCondition(child) && matches(child));
+  const found = tree.root.children[index];
+  const existing = index >= 0 && isCelFilterCondition(found) ? found : void 0;
+  const condition = __spreadValues({
+    id: (_a = existing == null ? void 0 : existing.id) != null ? _a : createCelNodeId()
+  }, build(existing));
+  const children = index >= 0 ? tree.root.children.map((child, i) => i === index ? condition : child) : [...tree.root.children, condition];
+  return { root: __spreadProps(__spreadValues({}, tree.root), { children }) };
+}
+function mergeKeyValueToken(tree, columnId, token) {
+  const [key, ...rest] = token.split("=");
+  const mapValue = rest.join("=");
+  return upsertCondition(
+    tree,
+    (condition) => condition.columnId === columnId && isMapKeyCelValue(condition.value) && condition.value.key === key,
+    () => ({
+      type: "condition",
+      columnId,
+      operator: mapValue ? "has_value" : "key_exists",
+      value: mapValue ? { key, value: mapValue } : { key }
+    })
+  );
+}
+function mergeContextualIntoCelTree(tree, schema, columnId, values) {
+  if (values.length === 0) {
+    return tree;
+  }
+  const columnDef = schema.columns.find((column) => column.id === columnId);
+  if (!columnDef) {
+    return tree;
+  }
+  const matchesColumn = (condition) => condition.columnId === columnId;
+  switch (columnDef.filterType) {
+    case "checkbox":
+      return upsertCondition(tree, matchesColumn, (existing) => ({
+        type: "condition",
+        columnId,
+        operator: "is",
+        value: Array.from(
+          /* @__PURE__ */ new Set([...existing && isCheckboxCelValue(existing.value) ? existing.value : [], ...values])
+        )
+      }));
+    case "keyValue":
+      return values.reduce((acc, token) => mergeKeyValueToken(acc, columnId, token), tree);
+    case "multiText":
+      return upsertCondition(tree, matchesColumn, () => ({
+        type: "condition",
+        columnId,
+        operator: "contains",
+        value: { tokens: values, quantifier: "any" }
+      }));
+    case "date":
+      return upsertCondition(tree, matchesColumn, () => ({
+        type: "condition",
+        columnId,
+        operator: "is",
+        value: { instant: calendarDayStartInstant(values[0]) }
+      }));
+    default:
+      return upsertCondition(tree, matchesColumn, () => ({
+        type: "condition",
+        columnId,
+        operator: "is",
+        value: values[0]
+      }));
+  }
+}
+
+// src/cel-filter-bar/cel-filter-bar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RELATIVE_PRESET_LABELS = {
+  "24h": "Last 24 hours",
+  "168h": "Last 7 days",
+  "720h": "Last 30 days"
+};
+var SEGMENT_SELECT_TRIGGER_CLASSNAME = "hover:border-input! focus-visible:border-input focus-visible:ring-0 hover:bg-muted focus-visible:bg-muted aria-expanded:bg-muted";
+function CelFilterBar({
+  tree,
+  onChange,
+  schema,
+  onCompileResultChange,
+  onRestrictedOptionSelect,
+  showClearButton = false,
+  className
+}) {
+  const editor = useCelFilterEditorState();
+  const onCompileResultChangeRef = React.useRef(onCompileResultChange);
+  React.useEffect(() => {
+    onCompileResultChangeRef.current = onCompileResultChange;
+  });
+  const rawResult = React.useMemo(() => compileCelFilterTree(tree, schema), [tree, schema]);
+  const displayResult = React.useMemo(
+    () => applyDisplayRules(rawResult, {
+      editingConditionId: editor.editingConditionId,
+      committedConditionIds: editor.committedConditionIds
+    }),
+    [rawResult, editor.editingConditionId, editor.committedConditionIds]
+  );
+  const isEmitReady = React.useMemo(
+    () => computeIsEmitReady(rawResult, editor.editingConditionId, schema, tree, {
+      activeSurface: editor.activeSurface,
+      committedConditionIds: editor.committedConditionIds
+    }),
+    [rawResult, editor.editingConditionId, editor.activeSurface, editor.committedConditionIds, schema, tree]
+  );
+  React.useEffect(() => {
+    var _a;
+    (_a = onCompileResultChangeRef.current) == null ? void 0 : _a.call(onCompileResultChangeRef, __spreadProps(__spreadValues({}, displayResult), { isEmitReady }));
+  }, [displayResult, isEmitReady]);
+  const conditions = tree.root.children.filter(isCelFilterCondition);
+  function handleAddFilter(columnId) {
+    const condition = createDefaultCondition({ schema, columnId });
+    onChange(appendCondition(tree, condition));
+    editor.beginEditing(condition.id);
+    editor.suppressDismissFor(condition.id);
+  }
+  function handleRemove(conditionId) {
+    onChange(removeConditionById(tree, conditionId));
+    editor.removeCondition(conditionId);
+  }
+  function handleClearAll() {
+    onChange({ root: __spreadProps(__spreadValues({}, tree.root), { children: [] }) });
+    editor.clearSuppress();
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter }),
+    conditions.map((condition) => {
+      const columnDef = resolveColumnDefinition(condition, schema);
+      if (!columnDef) return null;
+      return /* @__PURE__ */ jsx(
+        CelFilterPill,
+        {
+          condition,
+          columnDef,
+          schema,
+          tree,
+          onChange,
+          controller: editor.getController(condition.id),
+          issues: displayResult.issues.filter((issue) => issue.nodeId === condition.id),
+          onRemove: () => handleRemove(condition.id),
+          onRestrictedOptionSelect
+        },
+        condition.id
+      );
+    }),
+    showClearButton && conditions.length > 0 && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClearAll, children: "Clear all" })
+  ] });
+}
+function CelAddFilterButton({
+  schema,
+  conditions,
+  onSelect
+}) {
+  var _a, _b;
+  const usedSingleInstanceColumnIds = new Set(
+    conditions.map((condition) => resolveColumnDefinition(condition, schema)).filter(
+      (columnDef) => !!columnDef && !allowsMultipleConditions(columnDef.filterType)
+    ).map((columnDef) => columnDef.id)
+  );
+  const availableColumns = schema.columns.filter((column) => !usedSingleInstanceColumnIds.has(column.id));
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const column of availableColumns) {
+    const key = (_a = column.group) != null ? _a : "";
+    const list = (_b = groupMap.get(key)) != null ? _b : [];
+    list.push(column);
+    groupMap.set(key, list);
+  }
+  const groups = Array.from(groupMap.entries()).map(([value, items]) => ({ value, items }));
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: groups,
+      itemToStringValue: (item) => item.title,
+      itemToStringLabel: (item) => item.title,
+      onValueChange: (column) => {
+        if (column) onSelect(column.id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(ComboboxTrigger, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: [
+          /* @__PURE__ */ jsx(Icon, { name: "plus", "data-icon": "inline-start" }),
+          "Add filter"
+        ] }),
+        /* @__PURE__ */ jsxs(ComboboxContent, { align: "start", className: "w-64", children: [
+          /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No filters found." }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (group) => /* @__PURE__ */ jsxs(ComboboxGroup, { items: group.items, children: [
+            group.value && /* @__PURE__ */ jsx(ComboboxLabel, { children: group.value }),
+            /* @__PURE__ */ jsx(ComboboxCollection, { children: (column) => /* @__PURE__ */ jsx(ComboboxItem, { value: column, children: column.title }, column.id) })
+          ] }, group.value) })
+        ] })
+      ]
+    }
+  );
+}
+function formatConditionSummary(condition, columnDef, locale) {
+  var _a, _b, _c, _d, _e, _f;
+  const shape = columnDef.filterType === "keyValue" ? "map" : columnDef.filterType;
+  switch (shape) {
+    case "checkbox": {
+      const value = isCheckboxCelValue(condition.value) ? condition.value : [];
+      if (value.length === 0) return "Any";
+      if (value.length === 1) {
+        return (_c = (_b = (_a = columnDef.options) == null ? void 0 : _a.find((opt) => opt.value === value[0])) == null ? void 0 : _b.label) != null ? _c : value[0];
+      }
+      return `${value.length} ${columnDef.pluralTitle}`;
+    }
+    case "radio":
+    case "static": {
+      const value = typeof condition.value === "string" ? condition.value : "";
+      if (!value) return "Any";
+      return (_f = (_e = (_d = columnDef.options) == null ? void 0 : _d.find((opt) => opt.value === value)) == null ? void 0 : _e.label) != null ? _f : value;
+    }
+    case "text":
+      return typeof condition.value === "string" && condition.value ? condition.value : "Any";
+    case "multiText": {
+      const value = readMultiTextCelValue(condition.value);
+      if (value.tokens.length === 0) return "Any";
+      if (value.tokens.length === 1) return value.tokens[0];
+      return `${value.tokens.length} values`;
+    }
+    case "date": {
+      const value = readDateCelValue(condition.value);
+      if (isRelativeDateCelValue(value)) return value.preset ? RELATIVE_PRESET_LABELS[value.preset] : "Any";
+      if (value.range)
+        return `${formatInstantLabel(value.range.start, { locale })} \u2013 ${formatInstantLabel(value.range.end, { locale })}`;
+      if (value.instant) return formatInstantLabel(value.instant, { withTime: value.hasTime, locale });
+      return "Any";
+    }
+    case "map": {
+      const value = readMapKeyCelValue(condition.value);
+      if (!value.key) return "Any";
+      return value.value ? `${value.key}=${value.value}` : value.key;
+    }
+    default:
+      return "Any";
+  }
+}
+function CelFilterPill({
+  condition,
+  columnDef,
+  schema,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a;
+  const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
+  const mounted = useMounted();
+  const locale = mounted ? void 0 : "en-US";
+  if (shape === "checkbox") {
+    return /* @__PURE__ */ jsx(
+      CelCheckboxComboboxPill,
+      {
+        condition,
+        columnDef,
+        tree,
+        onChange,
+        controller,
+        issues,
+        onRemove,
+        onRestrictedOptionSelect
+      }
+    );
+  }
+  if (shape === "radio") {
+    return /* @__PURE__ */ jsx(
+      CelRadioComboboxPill,
+      {
+        condition,
+        columnDef,
+        tree,
+        onChange,
+        controller,
+        issues,
+        onRemove,
+        onRestrictedOptionSelect
+      }
+    );
+  }
+  function updateValue(value) {
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value })));
+  }
+  function updateOperator(operator) {
+    const hadValue = condition.value !== void 0;
+    const next = applyOperatorChange(condition, operator, shape);
+    onChange(replaceCondition(tree, condition.id, () => next));
+    if (hadValue && next.value === void 0) controller.beginEditing();
+  }
+  const allowedOperators = getAllowedOperators(columnDef);
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          shape === "multiText" && /* @__PURE__ */ jsx(
+            CelQuantifierSegment,
+            {
+              columnTitle: columnDef.title,
+              value: readMultiTextCelValue(condition.value),
+              onChangeValue: updateValue
+            }
+          ),
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "gap-1 font-normal", children: [
+            /* @__PURE__ */ jsx("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef, locale) }),
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: shape === "date" ? "w-fit" : "w-72", children: [
+          shape === "text" && /* @__PURE__ */ jsx(CelTextValueEditor, { condition, onChangeValue: updateValue, onCommit: controller.commit }),
+          shape === "multiText" && /* @__PURE__ */ jsx(CelMultiTextValueEditor, { condition, onChangeValue: updateValue }),
+          shape === "date" && /* @__PURE__ */ jsx(CelDateValueEditor, { condition, onChangeValue: updateValue }),
+          shape === "map" && /* @__PURE__ */ jsx(CelKeyValueValueEditor, { condition, onChangeValue: updateValue, onCommit: controller.commit }),
+          issues.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelOperatorSegment({
+  columnTitle,
+  operator,
+  allowedOperators,
+  hideOnSingleOperator,
+  onChangeOperator
+}) {
+  if (allowedOperators.length > 1) {
+    return /* @__PURE__ */ jsxs(Select, { value: operator, onValueChange: (value) => onChangeOperator(value), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": `${columnTitle} operator`, className: SEGMENT_SELECT_TRIGGER_CLASSNAME, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { position: "popper", children: /* @__PURE__ */ jsx(SelectGroup, { children: allowedOperators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op, children: getOperatorLabel(op) }, op)) }) })
+    ] });
+  }
+  if (allowedOperators.length === 1 && !hideOnSingleOperator) {
+    return /* @__PURE__ */ jsx(ButtonGroupText, { className: "text-muted-foreground font-normal", children: getOperatorLabel(allowedOperators[0]) });
+  }
+  return null;
+}
+function CelQuantifierSegment({
+  columnTitle,
+  value,
+  onChangeValue
+}) {
+  var _a;
+  if (value.tokens.length <= 1) return null;
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: (_a = value.quantifier) != null ? _a : "any",
+      onValueChange: (next) => {
+        if (next === "any" || next === "all") onChangeValue(__spreadProps(__spreadValues({}, value), { quantifier: next }));
+      },
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": `${columnTitle} quantifier`, className: SEGMENT_SELECT_TRIGGER_CLASSNAME, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { position: "popper", children: /* @__PURE__ */ jsxs(SelectGroup, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "any", children: getQuantifierLabel("any") }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "all", children: getQuantifierLabel("all") })
+        ] }) })
+      ]
+    }
+  );
+}
+function CelCheckboxComboboxPill({
+  condition,
+  columnDef,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a;
+  const options = (_a = columnDef.options) != null ? _a : [];
+  const value = isCheckboxCelValue(condition.value) ? condition.value : [];
+  const selected = options.filter((option) => value.includes(option.value));
+  const allowedOperators = getAllowedOperators(columnDef);
+  function updateOperator(operator) {
+    onChange(replaceCondition(tree, condition.id, (c) => applyOperatorChange(c, operator, "checkbox")));
+  }
+  function applySelection(nextSelected) {
+    const current = new Set(value);
+    const nextValues = new Set(nextSelected.map((option) => option.value));
+    for (const option of nextSelected) {
+      if (!current.has(option.value) && option.disabled) {
+        onRestrictedOptionSelect == null ? void 0 : onRestrictedOptionSelect({ columnId: columnDef.id, value: option.value, label: option.label });
+        nextValues.delete(option.value);
+      }
+    }
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value: Array.from(nextValues) })));
+    const added = nextSelected.find((option) => !current.has(option.value) && !option.disabled && option.operator);
+    if (added == null ? void 0 : added.operator) updateOperator(added.operator);
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: options,
+      itemToStringValue: (item) => item.label,
+      multiple: true,
+      value: selected,
+      onValueChange: (next) => applySelection(next),
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ComboboxTrigger,
+            {
+              "aria-label": `${columnDef.title} value`,
+              render: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef) })
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+          /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
+          selected.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(ComboboxSelectedChips, { children: [
+              /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, item.value)) }) }),
+              /* @__PURE__ */ jsx(ComboboxClearAll, { onClick: () => applySelection([]) })
+            ] }),
+            /* @__PURE__ */ jsx(ComboboxSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+            "No ",
+            columnDef.title.toLowerCase(),
+            " found."
+          ] }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsx(ComboboxItem, { value: item, className: cn(item.disabled && "text-muted-foreground"), children: item.label }, item.value) }),
+          issues.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelRadioComboboxPill({
+  condition,
+  columnDef,
+  tree,
+  onChange,
+  controller,
+  issues,
+  onRemove,
+  onRestrictedOptionSelect
+}) {
+  var _a, _b;
+  const options = (_a = columnDef.options) != null ? _a : [];
+  const value = typeof condition.value === "string" ? condition.value : "";
+  const selected = (_b = options.find((option) => option.value === value)) != null ? _b : null;
+  const allowedOperators = getAllowedOperators(columnDef);
+  function updateOperator(operator) {
+    onChange(replaceCondition(tree, condition.id, (c) => applyOperatorChange(c, operator, "radio")));
+  }
+  function applySelection(option) {
+    if (!option) return;
+    if (option.disabled) {
+      onRestrictedOptionSelect == null ? void 0 : onRestrictedOptionSelect({ columnId: columnDef.id, value: option.value, label: option.label });
+      return;
+    }
+    onChange(replaceCondition(tree, condition.id, (c) => __spreadProps(__spreadValues({}, c), { value: option.value })));
+    if (option.operator) updateOperator(option.operator);
+    controller.commit();
+  }
+  return /* @__PURE__ */ jsxs(
+    Combobox,
+    {
+      items: options,
+      itemToStringValue: (item) => item.label,
+      value: selected,
+      onValueChange: (next) => applySelection(next),
+      open: controller.popoverVisible,
+      onOpenChange: (open) => {
+        if (open) controller.beginEditing();
+        else if (!controller.isDismissSuppressed()) controller.handlePopoverDismiss();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx(ButtonGroupText, { children: columnDef.title }),
+          /* @__PURE__ */ jsx(
+            CelOperatorSegment,
+            {
+              columnTitle: columnDef.title,
+              operator: condition.operator,
+              allowedOperators,
+              hideOnSingleOperator: columnDef.hideOnSingleOperator,
+              onChangeOperator: updateOperator
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ComboboxTrigger,
+            {
+              "aria-label": `${columnDef.title} value`,
+              render: /* @__PURE__ */ jsx(Button, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx("span", { className: cn(issues.length > 0 && "text-destructive"), children: formatConditionSummary(condition, columnDef) })
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "xmark" }) })
+        ] }),
+        /* @__PURE__ */ jsxs(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+          /* @__PURE__ */ jsx(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
+          /* @__PURE__ */ jsxs(ComboboxEmpty, { children: [
+            "No ",
+            columnDef.title.toLowerCase(),
+            " found."
+          ] }),
+          /* @__PURE__ */ jsx(ComboboxList, { children: (item) => /* @__PURE__ */ jsx(ComboboxItem, { value: item, className: cn(item.disabled && "text-muted-foreground"), children: item.label }, item.value) }),
+          issues.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-body-sm text-destructive", children: issues.map((issue) => issue.message).join(" ") })
+        ] })
+      ]
+    }
+  );
+}
+function CelTextValueEditor({
+  condition,
+  onChangeValue,
+  onCommit
+}) {
+  const value = typeof condition.value === "string" ? condition.value : "";
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      autoFocus: true,
+      value,
+      placeholder: "Enter a value\u2026",
+      onChange: (e) => onChangeValue(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") onCommit();
+      }
+    }
+  );
+}
+function CelMultiTextValueEditor({
+  condition,
+  onChangeValue
+}) {
+  const value = readMultiTextCelValue(condition.value);
+  const [draft, setDraft] = React.useState("");
+  function addToken() {
+    var _a;
+    const token = draft.trim();
+    if (!token || value.tokens.includes(token)) {
+      setDraft("");
+      return;
+    }
+    const nextTokens = [...value.tokens, token];
+    const quantifier = nextTokens.length > 1 ? (_a = value.quantifier) != null ? _a : "any" : value.quantifier;
+    onChangeValue(__spreadProps(__spreadValues({}, value), { tokens: nextTokens, quantifier }));
+    setDraft("");
+  }
+  function removeToken(token) {
+    onChangeValue(__spreadProps(__spreadValues({}, value), { tokens: value.tokens.filter((t) => t !== token) }));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    value.tokens.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: value.tokens.map((token) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1", children: [
+      token,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remove ${token}`,
+          onClick: () => removeToken(token),
+          className: "cursor-pointer",
+          children: /* @__PURE__ */ jsx(Icon, { name: "xmark", size: "xs" })
+        }
+      )
+    ] }, token)) }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        value: draft,
+        placeholder: "Type a value, press Enter\u2026",
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            addToken();
+          } else if (e.key === "Backspace" && draft === "" && value.tokens.length > 0) {
+            removeToken(value.tokens[value.tokens.length - 1]);
+          }
+        }
+      }
+    )
+  ] });
+}
+function CelKeyValueValueEditor({
+  condition,
+  onChangeValue,
+  onCommit
+}) {
+  var _a;
+  const value = readMapKeyCelValue(condition.value);
+  const needsValue = condition.operator === "has_value" || condition.operator === "does_not_have_value";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, { children: "Key" }) }),
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          autoFocus: true,
+          value: value.key,
+          onChange: (e) => onChangeValue(__spreadProps(__spreadValues({}, value), { key: e.target.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !needsValue) onCommit();
+          }
+        }
+      )
+    ] }),
+    needsValue && /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, { children: "Value" }) }),
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          value: (_a = value.value) != null ? _a : "",
+          onChange: (e) => onChangeValue(__spreadProps(__spreadValues({}, value), { value: e.target.value })),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") onCommit();
+          }
+        }
+      )
+    ] })
+  ] });
+}
+function CelDateValueEditor({
+  condition,
+  onChangeValue
+}) {
+  const value = readDateCelValue(condition.value);
+  const operator = condition.operator;
+  const relativeCapable = isDateRelativeOperator(operator);
+  const isRange = isDateRangeOperator(operator);
+  const showTime = !isDateWindowOperator(operator) && !isRange;
+  const isRelative = isRelativeDateCelValue(value);
+  function pickInstant(date) {
+    if (!date) return;
+    const boundary = dateBoundaryForOperator(operator);
+    const instant = formatCalendarDateUtc(date, showTime ? boundary : "start");
+    onChangeValue({ instant });
+  }
+  function pickRange(range) {
+    if (!(range == null ? void 0 : range.from)) return;
+    const start = calendarDayStartInstant(formatCalendarDateUtc(range.from, "start"));
+    const end = range.to ? formatCalendarDateUtc(range.to, "end") : formatCalendarDateUtc(range.from, "end");
+    onChangeValue({ range: { start, end } });
+  }
+  function pickTime(timeOfDay) {
+    if (!value.instant) return;
+    onChangeValue({ instant: withTimeOfDay(value.instant, timeOfDay), hasTime: true });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      relativeCapable && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-r pr-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground px-2 font-medium", children: "Quick select" }),
+        RELATIVE_DURATION_PRESET_VALUES.map((preset) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: isRelative && value.preset === preset ? "secondary" : "ghost",
+            size: "sm",
+            className: "justify-start",
+            onClick: () => onChangeValue({ preset }),
+            children: RELATIVE_PRESET_LABELS[preset]
+          },
+          preset
+        ))
+      ] }),
+      isRange ? /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "range",
+          selected: value.range ? { from: parseCalendarDate(value.range.start), to: parseCalendarDate(value.range.end) } : void 0,
+          onSelect: pickRange
+        }
+      ) : /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          selected: isRelative ? void 0 : parseCalendarDate(value.instant),
+          onSelect: pickInstant
+        }
+      )
+    ] }),
+    showTime && !isRelative && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "cel-date-time", className: "text-body-sm text-muted-foreground shrink-0", children: "Time (UTC)" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "cel-date-time",
+          type: "time",
+          className: "w-full",
+          value: readTimeOfDay(value.instant),
+          onChange: (e) => pickTime(e.target.value),
+          disabled: !value.instant
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CelFilterBar,
+  RELATIVE_DURATION_PRESET_VALUES,
+  allowsMultipleConditions,
+  appendCondition,
+  applyDisplayRules,
+  applyOperatorChange,
+  calendarDayStartInstant,
+  celStringLiteral,
+  compileCelFilterTree,
+  computeIsEmitReady,
+  createCelNodeId,
+  createDefaultCondition,
+  createEmptyCelFilterTree,
+  dateBoundaryForOperator,
+  denormalizeColumnIdWithReservedNames,
+  escapeCelString,
+  formatCalendarDateUtc,
+  formatInstantLabel,
+  getAllowedOperators,
+  getColumnEmitOn,
+  getDefaultOperator,
+  getOperatorLabel,
+  getQuantifierLabel,
+  isCelFilterCondition,
+  isCelFilterGroup,
+  isCheckboxCelValue,
+  isDateCelValue,
+  isDateRangeOperator,
+  isDateRelativeOperator,
+  isDateWindowOperator,
+  isMapKeyCelValue,
+  isMultiTextCelValue,
+  isMultiTextColumn,
+  isRealCalendarDay,
+  isRelativeDateCelValue,
+  isRelativeDurationPreset,
+  mergeContextualIntoCelTree,
+  parseCalendarDate,
+  readDateCelValue,
+  readMapKeyCelValue,
+  readMultiTextCelValue,
+  readTimeOfDay,
+  removeConditionById,
+  replaceCondition,
+  resolveColumnDefinition,
+  resolveFilterShape,
+  validateCondition,
+  withTimeOfDay
+};
+//# sourceMappingURL=cel-filter-bar.js.map