react-conditional-ui 1.2.0

package/dist/index.js

@@ -0,0 +1,1802 @@
+// src/components/Input.tsx
+import { useCallback as useCallback3, useState as useState2, useRef, useLayoutEffect, forwardRef } from "react";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import Tooltip from "@mui/material/Tooltip";
+
+// src/hooks/useConditionalInput.ts
+import { useState, useCallback as useCallback2 } from "react";
+
+// src/condition-structure/Field.ts
+var Field = class _Field {
+  constructor(raw, value, label) {
+    this.raw = raw;
+    this.value = value;
+    this.label = label;
+    this.isValid = value !== "";
+  }
+  static invalid(raw) {
+    return new _Field(raw, "", raw);
+  }
+};
+
+// src/condition-structure/Operator.ts
+var Operator = class _Operator {
+  constructor(raw, value, label) {
+    this.raw = raw;
+    this.value = value;
+    this.label = label;
+    this.isValid = value !== "";
+  }
+  static invalid(raw) {
+    return new _Operator(raw, "", raw);
+  }
+};
+
+// src/condition-structure/Value.ts
+var Value = class _Value {
+  constructor(raw, opts = { isValid: raw.length > 0 }) {
+    this.raw = raw;
+    this.isValid = opts.isValid;
+    this.errorMessage = opts.errorMessage ?? null;
+    this.matchedOption = opts.matchedOption ?? null;
+    this.value = this.matchedOption?.value ?? raw;
+    this.label = this.matchedOption?.label ?? raw;
+  }
+  static valid(raw, matchedOption) {
+    return new _Value(raw, { isValid: true, matchedOption });
+  }
+  static invalid(raw, errorMessage) {
+    return new _Value(raw, { isValid: false, errorMessage });
+  }
+  static empty() {
+    return new _Value("", { isValid: false, errorMessage: "Missing value" });
+  }
+};
+
+// src/fuzzy/operators.ts
+var DEFAULT_OPERATORS = [
+  {
+    label: "equals",
+    value: "eq",
+    aliases: ["equals", "equal", "equal to", "is equal to", "eq", "=", "==", "is"]
+  },
+  {
+    label: "not equals",
+    value: "ne",
+    aliases: [
+      "not equals",
+      "not equal",
+      "not equal to",
+      "is not equal to",
+      "ne",
+      "!=",
+      "is not",
+      "isn't",
+      "isnt",
+      "doesn't equal",
+      "does not equal"
+    ]
+  },
+  {
+    label: "greater than",
+    value: "gt",
+    aliases: [
+      "greater than",
+      "gt",
+      ">",
+      "more than",
+      "bigger than",
+      "above",
+      "exceeds",
+      "higher than"
+    ]
+  },
+  {
+    label: "greater than or equal to",
+    value: "gte",
+    aliases: [
+      "greater than or equal to",
+      "greater than or equal",
+      "gte",
+      ">=",
+      "at least",
+      "no less than",
+      "not less than",
+      "not smaller than",
+      "not below",
+      "not under"
+    ]
+  },
+  {
+    label: "less than",
+    value: "lt",
+    aliases: [
+      "less than",
+      "lt",
+      "<",
+      "fewer than",
+      "smaller than",
+      "below",
+      "under",
+      "lower than"
+    ]
+  },
+  {
+    label: "less than or equal to",
+    value: "lte",
+    aliases: [
+      "less than or equal to",
+      "less than or equal",
+      "lte",
+      "<=",
+      "at most",
+      "no more than",
+      "not greater than",
+      "not bigger than",
+      "not above",
+      "not more than"
+    ]
+  },
+  {
+    label: "contains",
+    value: "contains",
+    aliases: ["contains", "includes", "has", "not missing"]
+  }
+];
+
+// src/hooks/useConditionDataProvider.ts
+import { useMemo, useCallback } from "react";
+
+// src/fuzzy/match-engine.ts
+import Fuse from "fuse.js";
+
+// src/logger.ts
+import createDebug from "debug";
+var BASE = "react-conditional-ui";
+var createLogger = (namespace) => createDebug(`${BASE}:${namespace}`);
+
+// src/fuzzy/match-engine.ts
+var log = createLogger("match-engine");
+var valueLog = createLogger("value");
+var TYPE_ALLOWED_OPS = {
+  number: /* @__PURE__ */ new Set(["eq", "ne", "gt", "lt", "gte", "lte"]),
+  enum: /* @__PURE__ */ new Set(["eq", "ne"]),
+  text: /* @__PURE__ */ new Set(["eq", "ne", "contains", "starts_with"])
+};
+var MatchEngine = class _MatchEngine {
+  constructor(fields, operators) {
+    this.fields = fields;
+    this.operators = operators;
+    this.fieldFuse = new Fuse(fields, {
+      keys: ["label"],
+      threshold: 0.4,
+      includeScore: true
+    });
+    const flatAliases = operators.flatMap(
+      (op) => op.aliases.map((alias) => ({ alias: alias.toLowerCase(), operator: op }))
+    );
+    this.opFuse = new Fuse(flatAliases, {
+      keys: ["alias"],
+      threshold: 0.4,
+      includeScore: true
+    });
+    this.perFieldOpFuse = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      const restricted = this.resolveOpsForField(field, operators);
+      if (restricted !== operators) {
+        const aliases = restricted.flatMap(
+          (op) => op.aliases.map((alias) => ({ alias: alias.toLowerCase(), operator: op }))
+        );
+        this.perFieldOpFuse.set(
+          field.value,
+          new Fuse(aliases, { keys: ["alias"], threshold: 0.4, includeScore: true })
+        );
+      }
+    }
+  }
+  matchField(candidate) {
+    const results = this.fieldFuse.search(candidate);
+    if (results.length > 0 && (results[0].score ?? 1) <= 0.4) {
+      log(
+        "field match: %s -> %s (score: %f)",
+        candidate,
+        results[0].item.value,
+        results[0].score
+      );
+      return { option: results[0].item, score: results[0].score ?? 1 };
+    }
+    return null;
+  }
+  matchOperator(candidate, field) {
+    const fuse = (field && this.perFieldOpFuse.get(field.value)) ?? this.opFuse;
+    const results = fuse.search(candidate);
+    if (results.length > 0 && (results[0].score ?? 1) <= 0.4) {
+      const alias = results[0].item.alias;
+      const candidateWords = candidate.split(/\s+/).length;
+      const aliasWords = alias.split(/\s+/).length;
+      if (candidateWords !== aliasWords) return null;
+      if (candidate.length < alias.length * 0.5) return null;
+      log(
+        "operator match: %s -> %s (score: %f)",
+        candidate,
+        results[0].item.operator.value,
+        results[0].score
+      );
+      return { option: results[0].item.operator, score: results[0].score ?? 1 };
+    }
+    return null;
+  }
+  static matchValue(raw, fieldConfig) {
+    const knownValues = fieldConfig?.fieldValues;
+    const validateValue = fieldConfig?.validateValue;
+    const fieldType = fieldConfig?.type;
+    if (knownValues && knownValues.length > 0) {
+      return _MatchEngine.matchKnownValue(raw, knownValues, validateValue);
+    }
+    if (raw.length === 0) return Value.empty();
+    if (validateValue) {
+      const result = validateValue(raw);
+      if (result !== true) return Value.invalid(raw, result);
+      return Value.valid(raw);
+    }
+    if (fieldType === "number" && !isFinite(Number(raw))) {
+      valueLog("numeric validation failed: raw=%s", raw);
+      return Value.invalid(raw, "Expected a number");
+    }
+    return Value.valid(raw);
+  }
+  static matchKnownValue(raw, knownValues, validateValue) {
+    const lower = raw.toLowerCase();
+    const exact = knownValues.find(
+      (v) => v.value.toLowerCase() === lower || v.label.toLowerCase() === lower
+    );
+    if (exact) {
+      valueLog("exact match: raw=%s -> %s", raw, exact.value);
+      return _MatchEngine.applyValidator(raw, exact, validateValue);
+    }
+    if (raw.length === 0) return Value.invalid(raw, "Value not recognized");
+    const fuse = new Fuse(knownValues, {
+      keys: ["label", "value"],
+      threshold: 0.4,
+      includeScore: true
+    });
+    const results = fuse.search(raw);
+    if (results.length > 0 && (results[0].score ?? 1) <= 0.4) {
+      valueLog(
+        "fuzzy match: raw=%s -> %s (score: %f)",
+        raw,
+        results[0].item.value,
+        results[0].score
+      );
+      return _MatchEngine.applyValidator(raw, results[0].item, validateValue);
+    }
+    valueLog("no match: raw=%s", raw);
+    return Value.invalid(raw, "Value not recognized");
+  }
+  static applyValidator(raw, matched, validateValue) {
+    if (validateValue) {
+      const result = validateValue(raw);
+      if (result !== true) return Value.invalid(raw, result);
+    }
+    return Value.valid(raw, matched);
+  }
+  resolveOpsForField(field, allOps) {
+    if (field.operators) return field.operators;
+    if (field.type) {
+      const allowed = TYPE_ALLOWED_OPS[field.type];
+      return allOps.filter((op) => allowed.has(op.value));
+    }
+    return allOps;
+  }
+};
+
+// src/fuzzy/score.ts
+var AMBIGUOUS_OP_WORDS = /* @__PURE__ */ new Set(["is", "has"]);
+var AMBIGUITY_PENALTY = 0.35;
+var LINKING_VERB_PENALTY = 0.35;
+var LENGTH_BONUS_PER_WORD = 0.01;
+var GAP_PENALTY_PER_WORD = 0.3;
+var UNPARSED_PENALTY = 10;
+var FREETEXT_WORD_COST = 0.1;
+function adjustOperatorScore(baseScore, words, start, end) {
+  let score = baseScore;
+  const firstWord = words[start];
+  if (end - start === 1 && AMBIGUOUS_OP_WORDS.has(firstWord)) {
+    score += AMBIGUITY_PENALTY;
+  } else if (end - start > 1 && AMBIGUOUS_OP_WORDS.has(firstWord)) {
+    score += LINKING_VERB_PENALTY;
+  }
+  score -= (end - start) * LENGTH_BONUS_PER_WORD;
+  if (start > 0) {
+    score += start * GAP_PENALTY_PER_WORD;
+  }
+  return score;
+}
+function scoreConditions(conditions, segmentCount) {
+  const unparsed = segmentCount - conditions.length;
+  let score = unparsed * UNPARSED_PENALTY;
+  for (const c of conditions) {
+    score += c.score;
+    if (!c.field.isValid) score += UNPARSED_PENALTY;
+    if (!c.operator.isValid) score += UNPARSED_PENALTY;
+    if (!c.value.isValid) score += UNPARSED_PENALTY;
+    if (c.value.isValid && c.value.matchedOption === null) {
+      score += c.value.raw.split(/\s+/).length * FREETEXT_WORD_COST;
+    }
+  }
+  return score;
+}
+
+// src/fuzzy/word-utils.ts
+var NOISE_WORDS = /* @__PURE__ */ new Set([
+  "when",
+  "if",
+  "the",
+  "where",
+  "show",
+  "that",
+  "then",
+  "a",
+  "an",
+  "for",
+  "while",
+  "can",
+  "expect",
+  "check",
+  "verify",
+  "ensure",
+  "find",
+  "get",
+  "list",
+  "filter",
+  "only",
+  "all",
+  "with",
+  "having",
+  "whose",
+  "which",
+  "given",
+  "assuming",
+  "suppose",
+  "i",
+  "want",
+  "need",
+  "like",
+  "please",
+  "me",
+  "my"
+]);
+function powerSet(items) {
+  const result = [];
+  const total = 1 << items.length;
+  for (let mask = 1; mask < total; mask++) {
+    const subset = [];
+    for (let i = 0; i < items.length; i++) {
+      if (mask & 1 << i) subset.push(items[i]);
+    }
+    result.push(subset);
+  }
+  return result;
+}
+function splitAtIndices(words, indices) {
+  const segments = [];
+  let start = 0;
+  for (const idx of indices) {
+    segments.push(words.slice(start, idx).join(" "));
+    start = idx + 1;
+  }
+  segments.push(words.slice(start).join(" "));
+  return segments;
+}
+function stripLeadingNoise(words) {
+  let i = 0;
+  while (i < words.length && NOISE_WORDS.has(words[i])) i++;
+  const result = words.slice(i);
+  return result;
+}
+
+// src/conditions/parser.ts
+var log2 = createLogger("parser");
+var TYPE_ALLOWED_OPS2 = {
+  number: /* @__PURE__ */ new Set(["eq", "ne", "gt", "lt", "gte", "lte"]),
+  enum: /* @__PURE__ */ new Set(["eq", "ne"]),
+  text: /* @__PURE__ */ new Set(["eq", "ne", "contains", "starts_with"])
+};
+var ConditionParser = class {
+  constructor(engine) {
+    this.fields = engine.fields;
+    this.operators = engine.operators;
+    this.engine = engine;
+  }
+  parse(text) {
+    const input = text.trim().toLowerCase();
+    if (!input) return null;
+    const allWords = input.split(/\s+/);
+    const words = stripLeadingNoise(allWords);
+    if (words.length === 0) return null;
+    const fieldResult = this.identifyField(words);
+    if (!fieldResult) return null;
+    if (fieldResult.remaining.length === 0) {
+      return {
+        field: fieldResult.field,
+        operator: Operator.invalid(""),
+        value: Value.empty(),
+        score: fieldResult.fieldScore
+      };
+    }
+    const { operator, value, operatorScore } = this.resolveOperator(
+      fieldResult.remaining,
+      fieldResult.fieldOption
+    );
+    const result = {
+      field: fieldResult.field,
+      operator,
+      value,
+      score: fieldResult.fieldScore + operatorScore
+    };
+    log2(
+      "result: field=%s(%s) op=%s(%s) value=%s (valid: %o)",
+      result.field.value,
+      result.field.label,
+      result.operator.value,
+      result.operator.label,
+      result.value.value,
+      {
+        field: result.field.isValid,
+        op: result.operator.isValid,
+        value: result.value.isValid
+      }
+    );
+    return result;
+  }
+  identifyField(words) {
+    let best = null;
+    for (let i = words.length; i >= 1; i--) {
+      const candidate = words.slice(0, i).join(" ");
+      const match = this.engine.matchField(candidate);
+      if (match && (!best || match.score < best.match.score)) {
+        best = { candidate, match, wordCount: i };
+      }
+    }
+    if (!best) return null;
+    return {
+      field: new Field(best.candidate, best.match.option.value, best.match.option.label),
+      fieldOption: best.match.option,
+      fieldScore: best.match.score,
+      remaining: words.slice(best.wordCount)
+    };
+  }
+  getOperatorCandidates(words, fieldOption) {
+    const candidates = [];
+    for (let start = 0; start < words.length; start++) {
+      for (let end = start + 1; end <= words.length; end++) {
+        const opRaw = words.slice(start, end).join(" ");
+        const opMatch = this.engine.matchOperator(opRaw, fieldOption);
+        if (!opMatch) continue;
+        const adjustedScore = adjustOperatorScore(opMatch.score, words, start, end);
+        candidates.push({
+          match: opMatch,
+          raw: opRaw,
+          endIdx: end,
+          adjustedScore
+        });
+      }
+    }
+    candidates.sort((a, b) => a.adjustedScore - b.adjustedScore);
+    if (candidates.length > 0) {
+      log2(
+        "operator candidates: %o",
+        candidates.map(
+          (c) => `${c.raw} -> ${c.match.option.value} (${c.adjustedScore.toFixed(3)})`
+        )
+      );
+    }
+    return candidates;
+  }
+  resolveOperator(words, fieldOption) {
+    const candidates = this.getOperatorCandidates(words, fieldOption);
+    if (candidates.length === 0) {
+      return {
+        operator: Operator.invalid(words.join(" ")),
+        value: Value.empty(),
+        operatorScore: 1
+      };
+    }
+    for (const candidate of candidates) {
+      const valueRaw2 = words.slice(candidate.endIdx).join(" ");
+      const value = MatchEngine.matchValue(valueRaw2, fieldOption);
+      if (value.isValid) {
+        const op = candidate.match.option;
+        return {
+          operator: new Operator(candidate.raw, op.value, op.label),
+          value,
+          operatorScore: candidate.adjustedScore
+        };
+      }
+      log2(
+        "operator '%s' (%s) rejected \u2014 value '%s' invalid, trying next",
+        candidate.raw,
+        candidate.match.option.value,
+        valueRaw2
+      );
+    }
+    const best = candidates[0];
+    const bestOp = best.match.option;
+    const valueRaw = words.slice(best.endIdx).join(" ");
+    return {
+      operator: new Operator(best.raw, bestOp.value, bestOp.label),
+      value: MatchEngine.matchValue(valueRaw, fieldOption),
+      operatorScore: best.adjustedScore
+    };
+  }
+  resolveOpsForField(field, allOps) {
+    if (field.operators) return field.operators;
+    if (field.type) {
+      const allowed = TYPE_ALLOWED_OPS2[field.type];
+      return allOps.filter((op) => allowed.has(op.value));
+    }
+    return allOps;
+  }
+  allowedOpsForField(field) {
+    return this.resolveOpsForField(field, this.operators);
+  }
+  prefixMatch(partial, candidates) {
+    const matches = this.prefixMatches(partial, candidates);
+    return matches.length > 0 ? matches[0] : null;
+  }
+  prefixMatches(partial, candidates, limit = 6) {
+    const lower = partial.toLowerCase();
+    const results = [];
+    for (const candidate of candidates) {
+      const cl = candidate.toLowerCase();
+      if (cl.startsWith(lower) && cl !== lower) {
+        results.push({ completion: cl.slice(lower.length), display: candidate });
+        if (results.length >= limit) break;
+      }
+    }
+    return results;
+  }
+};
+
+// src/consts.ts
+var AND_CONJUNCTION = "and";
+var OR_CONJUNCTION = "or";
+
+// src/fuzzy/providers/suggestions.ts
+var SuggestionsProvider = class {
+  constructor(parser, segmentResolver) {
+    this.parser = parser;
+    this.segmentResolver = segmentResolver;
+  }
+  getCompletions(text, limit = 6) {
+    const { last, before } = this.splitForSuggestion(text);
+    const trailingSpace = /\s$/.test(text) ? " " : "";
+    const direct = this.completionsForSegment(last + trailingSpace, limit);
+    if (direct.length > 0) return direct;
+    if (!before) return [];
+    const { conditions } = this.segmentResolver.resolve(before);
+    const previous = conditions[conditions.length - 1];
+    if (!previous) return [];
+    const inherited = `${previous.field.raw} ${previous.operator.raw} ${last}${trailingSpace}`;
+    return this.completionsForSegment(inherited, limit);
+  }
+  getSuggestion(text) {
+    if (!text.trim()) return null;
+    const results = this.getCompletions(text, 1);
+    if (results.length === 0) return null;
+    const r = results[0];
+    if (r.completion === r.display && /\s$/.test(text)) return null;
+    return r;
+  }
+  completionsForSegment(text, limit) {
+    const input = text.trimStart().toLowerCase();
+    if (!input) {
+      return this.parser.fields.slice(0, limit).map((f) => ({ completion: f.label, display: f.label }));
+    }
+    const endsWithSpace = /\s$/.test(input);
+    const words = input.split(/\s+/).filter(Boolean);
+    if (words.length === 0) return [];
+    const fieldResult = this.parser.identifyField(words);
+    if (!fieldResult) {
+      if (endsWithSpace) return [];
+      return this.parser.prefixMatches(
+        words.join(" "),
+        this.parser.fields.map((f) => f.label),
+        limit
+      );
+    }
+    const fieldOption = fieldResult.fieldOption;
+    if (fieldResult.remaining.length === 0) {
+      if (endsWithSpace) {
+        const ops = this.parser.allowedOpsForField(fieldOption);
+        return ops.slice(0, limit).map((op) => ({ completion: op.label, display: op.label }));
+      }
+      return this.parser.prefixMatches(
+        words.join(" "),
+        this.parser.fields.map((f) => f.label),
+        limit
+      );
+    }
+    const candidates = this.parser.getOperatorCandidates(fieldResult.remaining, fieldOption);
+    const bestOp = candidates[0];
+    if (!bestOp || bestOp.endIdx > fieldResult.remaining.length) {
+      if (endsWithSpace) return [];
+      const ops = this.parser.allowedOpsForField(fieldOption);
+      const aliases = ops.flatMap((op) => op.aliases);
+      const opPartial = fieldResult.remaining.join(" ");
+      return this.parser.prefixMatches(opPartial, aliases, limit);
+    }
+    const valueRaw = fieldResult.remaining.slice(bestOp.endIdx).join(" ");
+    if (!valueRaw) {
+      if (endsWithSpace) {
+        const fieldValues2 = fieldOption.fieldValues;
+        if (!fieldValues2?.length) return [];
+        return fieldValues2.slice(0, limit).map((v) => ({ completion: v.label, display: v.label }));
+      }
+      const ops = this.parser.allowedOpsForField(fieldOption);
+      const aliases = ops.flatMap((op) => op.aliases);
+      const opPartial = fieldResult.remaining.join(" ");
+      return this.parser.prefixMatches(opPartial, aliases, limit);
+    }
+    if (endsWithSpace) return [];
+    const fieldValues = fieldOption.fieldValues;
+    if (!fieldValues?.length) return [];
+    return this.parser.prefixMatches(
+      valueRaw,
+      fieldValues.map((v) => v.label),
+      limit
+    );
+  }
+  splitForSuggestion(text) {
+    const words = text.split(/\s+/);
+    for (let i = words.length - 1; i > 0; i--) {
+      const lower = words[i].toLowerCase();
+      if (lower === AND_CONJUNCTION || lower === OR_CONJUNCTION) {
+        const last = words.slice(i + 1).join(" ");
+        if (!last) break;
+        return {
+          before: words.slice(0, i).join(" "),
+          last
+        };
+      }
+    }
+    return { last: text, before: null };
+  }
+};
+
+// src/fuzzy/providers/diagnostics.ts
+var DiagnosticsProvider = class {
+  constructor(parser, segmentResolver) {
+    this.parser = parser;
+    this.segmentResolver = segmentResolver;
+  }
+  diagnose(text) {
+    const input = text.trim();
+    if (!input) return [{ start: 0, end: text.length || 1, message: "Empty condition" }];
+    const { segments, conditions } = this.segmentResolver.resolve(input);
+    const diagnostics = [];
+    if (conditions.length === 0) {
+      return [
+        { start: 0, end: input.length, message: "Could not understand this condition" }
+      ];
+    }
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i];
+      const offset = input.toLowerCase().indexOf(seg.toLowerCase());
+      const condition = conditions[i];
+      if (!condition) {
+        diagnostics.push({
+          start: offset,
+          end: offset + seg.length,
+          message: "Could not understand this condition"
+        });
+        continue;
+      }
+      if (!condition.operator.isValid) {
+        const fieldEnd = offset + condition.field.raw.length;
+        const fieldConfig = this.parser.fields.find(
+          (f) => f.value === condition.field.value
+        );
+        const hasRestriction = fieldConfig?.operators || fieldConfig?.type;
+        diagnostics.push({
+          start: fieldEnd,
+          end: offset + seg.length,
+          message: hasRestriction ? `Operator not supported for ${condition.field.label}` : "Unknown operator"
+        });
+      }
+      if (condition.operator.isValid && !condition.value.isValid) {
+        if (!condition.value.raw) {
+          diagnostics.push({
+            start: offset + seg.length,
+            end: offset + seg.length + 1,
+            message: "Missing value"
+          });
+        } else {
+          const valStart = offset + seg.toLowerCase().lastIndexOf(condition.value.raw.toLowerCase());
+          diagnostics.push({
+            start: valStart,
+            end: valStart + condition.value.raw.length,
+            message: condition.value.errorMessage ?? `Value not recognized for ${condition.field.label}`
+          });
+        }
+      }
+    }
+    return diagnostics;
+  }
+};
+
+// src/fuzzy/segments.ts
+import { log as log3 } from "debug";
+
+// src/id.ts
+var counter = 0;
+var generateId = () => {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return `id-${Date.now()}-${++counter}`;
+};
+
+// src/fuzzy/segments.ts
+var SegmentResolver = class {
+  constructor(parser) {
+    this.parser = parser;
+  }
+  resolve(text) {
+    const originalWords = text.split(/\s+/);
+    const lowerWords = originalWords.map((w) => w.toLowerCase());
+    const conjIndices = [];
+    for (let i = 0; i < lowerWords.length; i++) {
+      if (lowerWords[i] === AND_CONJUNCTION || lowerWords[i] === OR_CONJUNCTION) {
+        conjIndices.push({ index: i, conjunction: lowerWords[i] });
+      }
+    }
+    if (conjIndices.length === 0) {
+      const single = this.parser.parse(text);
+      return {
+        segments: [text],
+        conditions: single ? [single] : [],
+        connector: AND_CONJUNCTION
+      };
+    }
+    const noSplit = this.parser.parse(text);
+    let best = {
+      segments: [text],
+      conditions: noSplit ? [noSplit] : [],
+      connector: AND_CONJUNCTION
+    };
+    let bestScore = scoreConditions(best.conditions, 1);
+    for (const subset of powerSet(conjIndices)) {
+      const connector = subset[0].conjunction;
+      if (subset.some((s) => s.conjunction !== connector)) continue;
+      const splitIndices = subset.map((s) => s.index);
+      const segments = splitAtIndices(originalWords, splitIndices);
+      if (segments.some((s) => !s)) continue;
+      const conditions = this.parseSegments(segments);
+      const score = scoreConditions(conditions, segments.length);
+      if (score < bestScore) {
+        bestScore = score;
+        best = { segments, conditions, connector };
+      }
+    }
+    if (best.conditions.length === 1 && best.conditions[0].value.isValid && best.conditions[0].value.matchedOption === null) {
+      const valueWords = best.conditions[0].value.raw.split(/\s+/);
+      const conjInValue = valueWords.find(
+        (w) => w.toLowerCase() === AND_CONJUNCTION || w.toLowerCase() === OR_CONJUNCTION
+      );
+      if (conjInValue) {
+        const connector = conjInValue.toLowerCase();
+        const matching = conjIndices.filter((c) => c.conjunction === connector);
+        for (const subset of powerSet(matching).reverse()) {
+          const splitIndices = subset.map((s) => s.index);
+          const segments = splitAtIndices(originalWords, splitIndices);
+          if (segments.some((s) => !s)) continue;
+          const conditions = this.parseSegments(segments);
+          if (conditions.length === segments.length && conditions.every((c) => c.field.isValid && c.operator.isValid)) {
+            return { segments, conditions, connector };
+          }
+        }
+      }
+    }
+    return best;
+  }
+  parseConditions(text) {
+    const input = text.trim();
+    if (!input) return null;
+    const { conditions, connector } = this.resolve(input);
+    if (conditions.length === 0) return null;
+    const entries = conditions.map((condition) => ({
+      id: generateId(),
+      condition,
+      connector
+    }));
+    return { id: generateId(), entries };
+  }
+  parseSegments(segments) {
+    const conditions = [];
+    for (const segment of segments) {
+      const previous = conditions[conditions.length - 1] ?? null;
+      const result = this.getInherited(segment, previous) ?? this.parser.parse(segment);
+      if (result) conditions.push(result);
+    }
+    return conditions;
+  }
+  getInherited(segment, previous) {
+    if (!previous) return null;
+    const direct = this.parser.parse(segment);
+    if (direct && direct.operator.isValid) return direct;
+    const inheritField = `${previous.field.raw} ${segment}`;
+    const fieldOnly = this.parser.parse(inheritField);
+    if (fieldOnly && fieldOnly.operator.isValid) {
+      log3("inheriting field for segment: %s -> %s", segment, inheritField);
+      return fieldOnly;
+    }
+    const inheritAll = `${previous.field.raw} ${previous.operator.raw} ${segment}`;
+    const full = this.parser.parse(inheritAll);
+    if (full) {
+      log3("inheriting field+op for segment: %s -> %s", segment, inheritAll);
+      return full;
+    }
+    return direct;
+  }
+};
+
+// src/condition-data-provider.ts
+var ConditionDataProvider = class {
+  constructor(fields, operators) {
+    const engine = new MatchEngine(fields, operators);
+    const parser = new ConditionParser(engine);
+    this.segments = new SegmentResolver(parser);
+    this.suggestions = new SuggestionsProvider(parser, this.segments);
+    this.diagnostics = new DiagnosticsProvider(parser, this.segments);
+  }
+  parseComplexCondition(text) {
+    return this.segments.parseConditions(text);
+  }
+  getCompletions(text, limit = 6) {
+    return this.suggestions.getCompletions(text, limit);
+  }
+  getSuggestion(text) {
+    return this.suggestions.getSuggestion(text);
+  }
+  diagnose(text) {
+    return this.diagnostics.diagnose(text);
+  }
+};
+
+// src/hooks/useConditionDataProvider.ts
+function useConditionDataProvider({
+  fields,
+  operators = DEFAULT_OPERATORS
+}) {
+  const provider = useMemo(
+    () => new ConditionDataProvider(fields, operators),
+    [fields, operators]
+  );
+  const parseComplexCondition = useCallback(
+    (text) => provider.parseComplexCondition(text),
+    [provider]
+  );
+  const getCompletions = useCallback(
+    (text, limit) => provider.getCompletions(text, limit),
+    [provider]
+  );
+  const getSuggestion = useCallback((text) => provider.getSuggestion(text), [provider]);
+  const diagnose = useCallback((text) => provider.diagnose(text), [provider]);
+  return { provider, parseComplexCondition, getCompletions, getSuggestion, diagnose };
+}
+
+// src/hooks/useConditionalInput.ts
+function useConditionalInput({
+  fields,
+  operators = DEFAULT_OPERATORS,
+  value,
+  onChange,
+  onSubmit
+}) {
+  const [internal, setInternal] = useState("");
+  const [diagnostics, setDiagnostics] = useState([]);
+  const text = value ?? internal;
+  const { parseComplexCondition, getSuggestion, getCompletions, diagnose } = useConditionDataProvider({
+    fields,
+    operators
+  });
+  const handleChange = useCallback2(
+    (next) => {
+      if (value === void 0) setInternal(next);
+      onChange?.(next);
+      setDiagnostics([]);
+    },
+    [value, onChange]
+  );
+  const handleSubmit = useCallback2(() => {
+    const group = parseComplexCondition(text);
+    if (group) {
+      const hasInvalid = group.entries.some(
+        (e) => !e.condition.field.isValid || !e.condition.operator.isValid || !e.condition.value.isValid
+      );
+      if (!hasInvalid) {
+        onSubmit?.(group);
+        setDiagnostics([]);
+        if (value === void 0) setInternal("");
+        onChange?.("");
+        return;
+      }
+    }
+    setDiagnostics(diagnose(text));
+  }, [text, parseComplexCondition, diagnose, value, onChange, onSubmit]);
+  return { text, diagnostics, handleChange, handleSubmit, getSuggestion, getCompletions };
+}
+
+// src/components/Input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Input(props) {
+  if (isStandalone(props)) {
+    return /* @__PURE__ */ jsx(StandaloneInput, { ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    InputView,
+    {
+      value: props.value,
+      onChange: props.onChange,
+      onSubmit: props.onSubmit,
+      getSuggestion: props.getSuggestion,
+      getCompletions: props.getCompletions,
+      diagnostics: props.diagnostics,
+      placeholder: props.placeholder,
+      className: props.className,
+      style: props.style
+    }
+  );
+}
+function isStandalone(props) {
+  return props.fields !== void 0;
+}
+function buildOverlaySegments(value, diagnostics) {
+  const sorted = [...diagnostics].sort((a, b) => a.start - b.start);
+  const segments = [];
+  let cursor = 0;
+  for (const d of sorted) {
+    if (d.start > cursor) segments.push({ text: value.slice(cursor, d.start) });
+    segments.push({ text: value.slice(d.start, d.end), diagnostic: d });
+    cursor = d.end;
+  }
+  if (cursor < value.length) segments.push({ text: value.slice(cursor) });
+  return segments;
+}
+var GhostInput = forwardRef(function GhostInput2({ ghost, diagnosticSegments, inputValue, onCursorOffset, className, ...inputProps }, ref) {
+  const innerRef = useRef(null);
+  const mirrorRef = useRef(null);
+  const ghostRef = useRef(null);
+  const squigglyRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!mirrorRef.current || !innerRef.current) return;
+    const padding = parseFloat(getComputedStyle(innerRef.current).paddingLeft) || 0;
+    const left = mirrorRef.current.offsetWidth + padding;
+    if (ghostRef.current) ghostRef.current.style.left = `${left}px`;
+    if (squigglyRef.current) {
+      squigglyRef.current.style.paddingLeft = `${padding}px`;
+      squigglyRef.current.style.paddingRight = `${padding}px`;
+    }
+    onCursorOffset?.(left);
+  });
+  const setRefs = useCallback3(
+    (el) => {
+      innerRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  const showSquiggly = diagnosticSegments && diagnosticSegments.some((s) => s.diagnostic);
+  return /* @__PURE__ */ jsxs("div", { className: "rcui-input-inner", children: [
+    /* @__PURE__ */ jsx("input", { ref: setRefs, className, ...inputProps }),
+    /* @__PURE__ */ jsx("span", { ref: mirrorRef, className: "rcui-mirror", "aria-hidden": "true", children: inputValue }),
+    ghost && /* @__PURE__ */ jsx("span", { ref: ghostRef, className: "rcui-ghost", "aria-hidden": "true", children: ghost }),
+    showSquiggly && /* @__PURE__ */ jsx("span", { ref: squigglyRef, className: "rcui-squiggly-layer", "aria-hidden": "true", children: diagnosticSegments.map(
+      (seg, i) => seg.diagnostic ? /* @__PURE__ */ jsx("span", { className: "rcui-squiggly", title: seg.diagnostic.message, children: seg.text }, i) : /* @__PURE__ */ jsx("span", { children: seg.text }, i)
+    ) })
+  ] });
+});
+function StandaloneInput({
+  fields,
+  operators,
+  value: controlledValue,
+  onChange: controlledOnChange,
+  onSubmit: onGroupParsed,
+  placeholder,
+  className,
+  style
+}) {
+  const { text, diagnostics, handleChange, handleSubmit, getSuggestion, getCompletions } = useConditionalInput({
+    fields,
+    operators,
+    value: controlledValue,
+    onChange: controlledOnChange,
+    onSubmit: onGroupParsed
+  });
+  return /* @__PURE__ */ jsx(
+    InputView,
+    {
+      value: text,
+      onChange: handleChange,
+      onSubmit: handleSubmit,
+      getSuggestion,
+      getCompletions,
+      diagnostics,
+      placeholder,
+      className,
+      style
+    }
+  );
+}
+function InputView({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "e.g. age greater than 18, ctrl+space for suggestions",
+  getSuggestion,
+  getCompletions,
+  diagnostics = [],
+  className,
+  style
+}) {
+  const [completions, setCompletions] = useState2([]);
+  const [activeIndex, setActiveIndex] = useState2(-1);
+  const [cursorLeft, setCursorLeft] = useState2(0);
+  const listRef = useRef(null);
+  const ghost = getSuggestion && value ? getSuggestion(value)?.completion ?? null : null;
+  function closeCompletions() {
+    setCompletions([]);
+    setActiveIndex(-1);
+  }
+  function openCompletions() {
+    if (!getCompletions) return;
+    const items = getCompletions(value);
+    setCompletions(items);
+    setActiveIndex(items.length > 0 ? 0 : -1);
+  }
+  function acceptCompletion(item) {
+    onChange(value + item.completion);
+    closeCompletions();
+  }
+  function handleChange(e) {
+    onChange(e.target.value);
+    closeCompletions();
+  }
+  function acceptGhost() {
+    if (ghost) onChange(value + ghost);
+  }
+  function handleKeyDown(e) {
+    if (e.key === " " && e.ctrlKey) {
+      e.preventDefault();
+      openCompletions();
+      return;
+    }
+    if (completions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => (i + 1) % completions.length);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => (i - 1 + completions.length) % completions.length);
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (activeIndex >= 0) {
+          acceptCompletion(completions[activeIndex]);
+        } else {
+          closeCompletions();
+          onSubmit();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeCompletions();
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        if (activeIndex >= 0) {
+          acceptCompletion(completions[activeIndex]);
+        }
+        return;
+      }
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onSubmit();
+      return;
+    }
+    if (e.key === "Tab" && ghost) {
+      e.preventDefault();
+      acceptGhost();
+    }
+  }
+  const hasErrors = diagnostics.length > 0;
+  const errorSummary = diagnostics.map((d) => d.message).join("; ");
+  const diagnosticSegments = hasErrors ? buildOverlaySegments(value, diagnostics) : null;
+  const ghostInputProps = {
+    ghost,
+    diagnosticSegments,
+    inputValue: value,
+    onCursorOffset: setCursorLeft
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["rcui-input-wrapper", className].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        variant: "outlined",
+        size: "small",
+        placeholder,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onBlur: () => setTimeout(closeCompletions, 150),
+        className: "rcui-input",
+        slotProps: {
+          input: {
+            inputComponent: GhostInput,
+            inputProps: ghostInputProps,
+            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: hasErrors ? /* @__PURE__ */ jsx(Tooltip, { title: errorSummary, arrow: true, children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onSubmit, edge: "end", children: /* @__PURE__ */ jsx(
+              ErrorOutlineIcon,
+              {
+                fontSize: "small",
+                className: "rcui-adornment-error"
+              }
+            ) }) }) : /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onSubmit, edge: "end", children: /* @__PURE__ */ jsx(
+              KeyboardReturnIcon,
+              {
+                fontSize: "small",
+                className: "rcui-adornment-enter"
+              }
+            ) }) })
+          }
+        }
+      }
+    ),
+    completions.length > 0 && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listRef,
+        className: "rcui-completions",
+        role: "listbox",
+        style: { left: cursorLeft },
+        children: completions.map((item, i) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `rcui-completion-${i}`,
+            role: "option",
+            "aria-selected": i === activeIndex,
+            className: `rcui-completion-item${i === activeIndex ? " rcui-completion-item--active" : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              acceptCompletion(item);
+            },
+            onMouseEnter: () => setActiveIndex(i),
+            children: item.display
+          },
+          item.display
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/Output.tsx
+import Chip3 from "@mui/material/Chip";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { useDroppable } from "@dnd-kit/core";
+
+// src/components/OutputRow.tsx
+import { useState as useState3 } from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import Chip from "@mui/material/Chip";
+import Popover from "@mui/material/Popover";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import TextField2 from "@mui/material/TextField";
+import IconButton2 from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function OutputRow({
+  id,
+  condition,
+  fields,
+  operators,
+  onUpdate,
+  onRemove
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : 1
+  };
+  const [popover, setPopover] = useState3(null);
+  const [valueEdit, setValueEdit] = useState3("");
+  const openPopover = (target, anchor) => {
+    setPopover({ target, anchor });
+    if (target === "value") setValueEdit(condition.value.raw ?? "");
+  };
+  const closePopover = () => setPopover(null);
+  const editable = !!onUpdate;
+  const resolveFieldValues = (f) => f.fieldValues;
+  const resolveOperators = (f) => f.operators ?? operators;
+  const selectField = (f) => {
+    onUpdate?.({
+      ...condition,
+      field: new Field(f.label, f.value, f.label),
+      value: MatchEngine.matchValue(condition.value.raw, f)
+    });
+    closePopover();
+  };
+  const selectOperator = (op) => {
+    onUpdate?.({
+      ...condition,
+      operator: new Operator(op.label, op.value, op.label)
+    });
+    closePopover();
+  };
+  const submitValue = (raw) => {
+    const fieldConfig = fields.find((f) => f.value === condition.field.value);
+    onUpdate?.({
+      ...condition,
+      value: MatchEngine.matchValue(raw, fieldConfig)
+    });
+    closePopover();
+  };
+  const currentField = fields.find((f) => f.value === condition.field.value);
+  const fieldValues = currentField ? resolveFieldValues(currentField) : void 0;
+  const activeOperators = currentField ? resolveOperators(currentField) : operators;
+  const rowClass = ["rcui-row", isOver && !isDragging ? "rcui-row--over" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("div", { ref: setNodeRef, style, className: rowClass, children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ...attributes,
+        ...listeners,
+        className: "rcui-drag-handle",
+        "aria-label": "drag handle",
+        children: /* @__PURE__ */ jsx2(DragIndicatorIcon, { fontSize: "small" })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Chip,
+      {
+        label: condition.field.label,
+        color: condition.field.isValid ? "primary" : "error",
+        variant: "filled",
+        onClick: editable ? (e) => openPopover("field", e.currentTarget) : void 0,
+        className: condition.field.isValid ? "rcui-chip-field" : "rcui-chip-field--error"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Chip,
+      {
+        label: condition.operator.label,
+        color: condition.operator.isValid ? "secondary" : "error",
+        variant: "filled",
+        onClick: editable ? (e) => openPopover("operator", e.currentTarget) : void 0,
+        className: condition.operator.isValid ? "rcui-chip-operator" : "rcui-chip-operator--error"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Chip,
+      {
+        label: condition.value.label || "\u2026",
+        variant: "filled",
+        onClick: editable ? (e) => openPopover("value", e.currentTarget) : void 0,
+        className: "rcui-chip-value"
+      }
+    ),
+    onRemove && /* @__PURE__ */ jsx2(IconButton2, { size: "small", onClick: onRemove, "aria-label": "remove condition", children: /* @__PURE__ */ jsx2(CloseIcon, { fontSize: "small" }) }),
+    editable && /* @__PURE__ */ jsxs2(
+      Popover,
+      {
+        open: !!popover,
+        anchorEl: popover?.anchor,
+        onClose: closePopover,
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        children: [
+          popover?.target === "field" && /* @__PURE__ */ jsx2(List, { dense: true, children: fields.map((f) => /* @__PURE__ */ jsx2(
+            ListItemButton,
+            {
+              selected: f.value === condition.field.value,
+              onClick: () => selectField(f),
+              children: /* @__PURE__ */ jsx2(ListItemText, { primary: f.label })
+            },
+            f.value
+          )) }),
+          popover?.target === "operator" && /* @__PURE__ */ jsx2(List, { dense: true, children: activeOperators.map((op) => /* @__PURE__ */ jsx2(
+            ListItemButton,
+            {
+              selected: op.value === condition.operator.value,
+              onClick: () => selectOperator(op),
+              children: /* @__PURE__ */ jsx2(ListItemText, { primary: op.label })
+            },
+            op.value
+          )) }),
+          popover?.target === "value" && (fieldValues ? /* @__PURE__ */ jsx2(List, { dense: true, children: fieldValues.map((v) => /* @__PURE__ */ jsx2(
+            ListItemButton,
+            {
+              selected: v.value === condition.value.value,
+              onClick: () => submitValue(v.value),
+              children: /* @__PURE__ */ jsx2(ListItemText, { primary: v.label })
+            },
+            v.value
+          )) }) : /* @__PURE__ */ jsx2("div", { className: "rcui-popover-value-edit", children: /* @__PURE__ */ jsx2(
+            TextField2,
+            {
+              size: "small",
+              autoFocus: true,
+              value: valueEdit,
+              onChange: (e) => setValueEdit(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") submitValue(valueEdit);
+              },
+              placeholder: "Enter value"
+            }
+          ) }))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ConnectorChip.tsx
+import Chip2 from "@mui/material/Chip";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ConnectorChip({ connector, onToggle }) {
+  const chipClass = ["rcui-connector-chip", onToggle ? "rcui-connector-chip--clickable" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("div", { className: "rcui-connector", children: /* @__PURE__ */ jsx3(
+    Chip2,
+    {
+      label: connector.toUpperCase(),
+      size: "small",
+      variant: "filled",
+      onClick: onToggle,
+      className: chipClass
+    }
+  ) });
+}
+
+// src/components/OutputDndContext.tsx
+import { useCallback as useCallback4, useState as useState4 } from "react";
+import {
+  DndContext,
+  DragOverlay,
+  pointerWithin,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+// src/components/output-drag-end.ts
+var UNGROUP_ZONE_ID = "ungrouped-drop-zone";
+var GROUP_DROPPABLE_PREFIX = "group:";
+function findGroupByEntryId(groups, entryId) {
+  for (const group of groups) {
+    if (group.entries.some((e) => e.id === entryId)) return group;
+  }
+  return null;
+}
+function applyOutputDragEnd(groups, activeId, overId, mutations) {
+  if (!overId || activeId === overId) return;
+  const sourceGroup = findGroupByEntryId(groups, activeId);
+  if (!sourceGroup) return;
+  if (overId === UNGROUP_ZONE_ID) {
+    mutations.ungroupEntry(sourceGroup.id, activeId);
+    return;
+  }
+  if (overId.startsWith(GROUP_DROPPABLE_PREFIX)) {
+    const targetGroupId = overId.slice(GROUP_DROPPABLE_PREFIX.length);
+    if (targetGroupId !== sourceGroup.id) {
+      mutations.moveBetweenGroups(sourceGroup.id, targetGroupId, activeId, null);
+    }
+    return;
+  }
+  const targetGroup = findGroupByEntryId(groups, overId);
+  if (targetGroup && sourceGroup.id === targetGroup.id) {
+    mutations.reorderWithinGroup(sourceGroup.id, activeId, overId);
+  } else if (targetGroup) {
+    mutations.moveBetweenGroups(sourceGroup.id, targetGroup.id, activeId, overId);
+  } else {
+    mutations.ungroupEntry(sourceGroup.id, activeId);
+  }
+}
+
+// src/components/OutputDndContext.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function OutputDndContext({ groups, mutations, children, renderOverlay }) {
+  const [activeEntry, setActiveEntry] = useState4(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragStart = useCallback4(
+    (event) => {
+      const entryId = String(event.active.id);
+      for (const group of groups) {
+        const entry = group.entries.find((e) => e.id === entryId);
+        if (entry) {
+          setActiveEntry(entry);
+          return;
+        }
+      }
+    },
+    [groups]
+  );
+  const handleDragEnd = useCallback4(
+    (event) => {
+      setActiveEntry(null);
+      const over = event.over;
+      applyOutputDragEnd(
+        groups,
+        String(event.active.id),
+        over ? String(over.id) : null,
+        mutations
+      );
+    },
+    [groups, mutations]
+  );
+  return /* @__PURE__ */ jsxs3(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: pointerWithin,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        children,
+        /* @__PURE__ */ jsx4(DragOverlay, { dropAnimation: null, children: activeEntry && renderOverlay ? renderOverlay(activeEntry) : null })
+      ]
+    }
+  );
+}
+
+// src/hooks/useConditionalOutput.ts
+import { useState as useState5, useCallback as useCallback5, useRef as useRef2, useEffect } from "react";
+function useConditionalOutput({
+  groups: controlledGroups,
+  onGroupsChange
+} = {}) {
+  const [internalGroups, setInternalGroups] = useState5([]);
+  const isControlled = controlledGroups !== void 0;
+  const groups = isControlled ? controlledGroups : internalGroups;
+  const onGroupsChangeRef = useRef2(onGroupsChange);
+  useEffect(() => {
+    onGroupsChangeRef.current = onGroupsChange;
+  }, [onGroupsChange]);
+  const didMount = useRef2(false);
+  useEffect(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      onGroupsChangeRef.current?.(groups);
+    }
+  }, []);
+  const commit = useCallback5(
+    (next) => {
+      if (!isControlled) setInternalGroups(next);
+      onGroupsChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  const addGroup = useCallback5(
+    (group) => {
+      commit([...groups, group]);
+    },
+    [groups, commit]
+  );
+  const removeEntry = useCallback5(
+    (groupId, entryId) => {
+      commit(
+        groups.map(
+          (g) => g.id === groupId ? { ...g, entries: g.entries.filter((e) => e.id !== entryId) } : g
+        ).filter((g) => g.entries.length > 0)
+      );
+    },
+    [groups, commit]
+  );
+  const toggleConnector = useCallback5(
+    (groupId, entryId) => {
+      commit(
+        groups.map((g) => {
+          if (g.id !== groupId) return g;
+          return {
+            ...g,
+            entries: g.entries.map(
+              (e) => e.id === entryId ? {
+                ...e,
+                connector: e.connector === "and" ? "or" : "and"
+              } : e
+            )
+          };
+        })
+      );
+    },
+    [groups, commit]
+  );
+  const updateCondition = useCallback5(
+    (groupId, entryId, condition) => {
+      commit(
+        groups.map((g) => {
+          if (g.id !== groupId) return g;
+          return {
+            ...g,
+            entries: g.entries.map((e) => e.id === entryId ? { ...e, condition } : e)
+          };
+        })
+      );
+    },
+    [groups, commit]
+  );
+  const updateGroupConfig = useCallback5(
+    (groupId, config) => {
+      commit(
+        groups.map(
+          (g) => g.id === groupId ? { ...g, config: { ...g.config, ...config } } : g
+        )
+      );
+    },
+    [groups, commit]
+  );
+  const reorderWithinGroup = useCallback5(
+    (groupId, activeId, overId) => {
+      commit(
+        groups.map((g) => {
+          if (g.id !== groupId) return g;
+          const oldIdx = g.entries.findIndex((e) => e.id === activeId);
+          const newIdx = g.entries.findIndex((e) => e.id === overId);
+          if (oldIdx === -1 || newIdx === -1) return g;
+          const entries = [...g.entries];
+          const [moved] = entries.splice(oldIdx, 1);
+          entries.splice(newIdx, 0, moved);
+          return { ...g, entries };
+        })
+      );
+    },
+    [groups, commit]
+  );
+  const moveBetweenGroups = useCallback5(
+    (sourceGroupId, targetGroupId, entryId, overEntryId) => {
+      const sourceGroup = groups.find((g) => g.id === sourceGroupId);
+      const targetGroup = groups.find((g) => g.id === targetGroupId);
+      if (!sourceGroup || !targetGroup) return;
+      const entry = sourceGroup.entries.find((e) => e.id === entryId);
+      if (!entry) return;
+      const targetConnector = targetGroup.entries.length > 0 ? targetGroup.entries[0].connector : "and";
+      const movedEntry = { ...entry, connector: targetConnector };
+      let newGroups = groups.map((g) => {
+        if (g.id === sourceGroupId) {
+          return { ...g, entries: g.entries.filter((e) => e.id !== entryId) };
+        }
+        if (g.id === targetGroupId) {
+          const entries = [...g.entries];
+          if (overEntryId) {
+            const idx = entries.findIndex((e) => e.id === overEntryId);
+            entries.splice(idx + 1, 0, movedEntry);
+          } else {
+            entries.push(movedEntry);
+          }
+          return { ...g, entries };
+        }
+        return g;
+      });
+      commit(newGroups.filter((g) => g.entries.length > 0));
+    },
+    [groups, commit]
+  );
+  const ungroupEntry = useCallback5(
+    (groupId, entryId) => {
+      const group = groups.find((g) => g.id === groupId);
+      if (!group) return;
+      const entry = group.entries.find((e) => e.id === entryId);
+      if (!entry) return;
+      const newGroup = {
+        id: generateId(),
+        entries: [{ ...entry, connector: "and" }]
+      };
+      let newGroups = groups.map(
+        (g) => g.id === groupId ? { ...g, entries: g.entries.filter((e) => e.id !== entryId) } : g
+      ).filter((g) => g.entries.length > 0);
+      newGroups.push(newGroup);
+      commit(newGroups);
+    },
+    [groups, commit]
+  );
+  const setGroups = useCallback5((next) => commit(next), [commit]);
+  const mutations = {
+    addGroup,
+    removeEntry,
+    toggleConnector,
+    updateCondition,
+    updateGroupConfig,
+    reorderWithinGroup,
+    moveBetweenGroups,
+    ungroupEntry,
+    setGroups
+  };
+  return { groups, mutations };
+}
+
+// src/components/Output.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_GROUP_CONFIG = {
+  editable: true,
+  removable: true,
+  variant: "outlined"
+};
+function Output({
+  fields,
+  operators,
+  groups: controlledGroups,
+  onGroupsChange,
+  defaultGroupConfig,
+  className,
+  style
+}) {
+  const { groups, mutations } = useConditionalOutput({
+    groups: controlledGroups,
+    onGroupsChange
+  });
+  const readOnly = controlledGroups !== void 0 && !onGroupsChange;
+  const effectiveDefault = readOnly ? { editable: false, removable: false, ...defaultGroupConfig } : defaultGroupConfig;
+  const rootClass = ["rcui-output", className].filter(Boolean).join(" ");
+  const renderOverlay = (entry) => /* @__PURE__ */ jsxs4("div", { className: "rcui-overlay", children: [
+    /* @__PURE__ */ jsx5(Chip3, { label: entry.condition.field.label, size: "small", className: "rcui-chip-field" }),
+    /* @__PURE__ */ jsx5(
+      Chip3,
+      {
+        label: entry.condition.operator.label,
+        size: "small",
+        className: "rcui-chip-operator"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      Chip3,
+      {
+        label: entry.condition.value.label || "\u2026",
+        size: "small",
+        className: "rcui-chip-value"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx5(OutputDndContext, { groups, mutations, renderOverlay, children: /* @__PURE__ */ jsx5(DropZone, { className: rootClass, style, children: groups.length === 0 ? /* @__PURE__ */ jsx5(Typography, { variant: "body2", color: "text.secondary", children: "Parsed condition will appear here\u2026" }) : groups.map((group) => /* @__PURE__ */ jsx5(
+    GroupCard,
+    {
+      group,
+      fields,
+      operators,
+      config: resolveConfig(group.config, effectiveDefault),
+      mutations
+    },
+    group.id
+  )) }) });
+}
+function resolveConfig(groupConfig, defaultConfig) {
+  return { ...DEFAULT_GROUP_CONFIG, ...defaultConfig, ...groupConfig };
+}
+function GroupCard({
+  group,
+  fields,
+  operators,
+  config,
+  mutations
+}) {
+  const allIds = group.entries.map((e) => e.id);
+  const isMulti = group.entries.length > 1;
+  const { setNodeRef, isOver } = useDroppable({ id: `group:${group.id}` });
+  const entries = /* @__PURE__ */ jsxs4(SortableContext, { items: allIds, strategy: verticalListSortingStrategy, children: [
+    config.label && /* @__PURE__ */ jsx5(Typography, { variant: "caption", color: "text.secondary", className: "rcui-group-label", children: config.label }),
+    /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: group.entries.map((entry, idx) => /* @__PURE__ */ jsxs4("div", { children: [
+      idx > 0 && /* @__PURE__ */ jsx5(
+        ConnectorChip,
+        {
+          connector: entry.connector,
+          onToggle: config.editable ? () => mutations.toggleConnector(group.id, entry.id) : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        OutputRow,
+        {
+          id: entry.id,
+          condition: entry.condition,
+          fields,
+          operators,
+          onUpdate: config.editable ? (c) => mutations.updateCondition(group.id, entry.id, c) : void 0,
+          onRemove: config.removable ? () => mutations.removeEntry(group.id, entry.id) : void 0
+        }
+      )
+    ] }, entry.id)) })
+  ] });
+  if (!isMulti) {
+    const singleClass = ["rcui-droppable-single", isOver ? "rcui-droppable-single--over" : ""].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx5("div", { ref: setNodeRef, className: singleClass, children: entries });
+  }
+  const paperClass = ["rcui-group-paper", isOver ? "rcui-group-paper--over" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5(
+    Paper,
+    {
+      ref: setNodeRef,
+      variant: config.variant,
+      className: paperClass,
+      children: entries
+    }
+  );
+}
+function DropZone({
+  children,
+  className,
+  style
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: UNGROUP_ZONE_ID });
+  const zoneClass = ["rcui-drop-zone", isOver ? "rcui-drop-zone--over" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5("div", { ref: setNodeRef, className: zoneClass, style, children });
+}
+
+// src/components/ConditionalUI.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ConditionalUI({
+  fields,
+  operators = DEFAULT_OPERATORS,
+  value,
+  onChange,
+  onConditionsChange,
+  className,
+  style
+}) {
+  const { groups, mutations } = useConditionalOutput({
+    onGroupsChange: onConditionsChange
+  });
+  const rootClass = ["rcui-root", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("div", { className: rootClass, style, children: [
+    /* @__PURE__ */ jsx6(
+      Input,
+      {
+        fields,
+        operators,
+        value,
+        onChange,
+        onSubmit: mutations.addGroup
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Output,
+      {
+        groups,
+        fields,
+        operators,
+        onGroupsChange: mutations.setGroups
+      }
+    )
+  ] });
+}
+export {
+  ConditionDataProvider,
+  ConditionDataProvider as ConditionParser,
+  ConditionalUI,
+  DEFAULT_OPERATORS,
+  Input,
+  Output,
+  useConditionDataProvider,
+  useConditionalInput,
+  useConditionalOutput
+};
+//# sourceMappingURL=index.js.map