@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/src/containers/data-grid/data-source.ts

@@ -0,0 +1,144 @@
+// Server-side data: the async source contract and the block cache behind infinite scrolling.
+import type { Filters, SortRule } from "./types.js";
+
+export interface DataSourceRequest {
+  /** First row index, inclusive. */
+  startRow: number;
+  /** One past the last row index. */
+  endRow: number;
+  sort: SortRule[];
+  filters: Filters;
+  /** Quick search text. */
+  search: string;
+}
+
+export interface DataSourceResult<T> {
+  rows: readonly T[];
+  /** Row count of the whole (sorted, filtered) result set. */
+  total: number;
+}
+
+export interface DataSource<T> {
+  /** Resolves the rows of `[startRow, endRow)`; sort, filters and search are applied by the server. */
+  getRows(
+    request: DataSourceRequest,
+    options: { signal: AbortSignal },
+  ): Promise<DataSourceResult<T>>;
+  /** Rows per request in infinite mode (`pageSize` is used in paginated mode). 50 by default. */
+  blockSize?: number;
+}
+
+export type BlockStatus = "idle" | "loading" | "loaded" | "error";
+
+interface Block<T> {
+  status: Exclude<BlockStatus, "idle">;
+  rows: readonly T[];
+}
+
+/**
+ * Fixed-size blocks of rows fetched on demand. Loaded blocks beyond `maxBlocks` are evicted least
+ * recently used first, never the ones in the range being shown.
+ */
+export class BlockCache<T> {
+  readonly blockSize: number;
+  readonly maxBlocks: number;
+  total: number | null = null;
+  private readonly blocks = new Map<number, Block<T>>();
+
+  constructor(blockSize: number, maxBlocks = 20) {
+    this.blockSize = Math.max(1, Math.floor(blockSize));
+    this.maxBlocks = Math.max(1, Math.floor(maxBlocks));
+  }
+
+  blockOf(index: number): number {
+    return Math.floor(index / this.blockSize);
+  }
+
+  /** Block numbers that cover `[start, end)`, clamped to the known total. */
+  blocksFor(start: number, end: number): number[] {
+    const last = this.total === null ? end : Math.min(end, this.total);
+    if (last <= start) return [];
+    const out: number[] = [];
+    for (let block = this.blockOf(start); block <= this.blockOf(last - 1); block += 1) {
+      out.push(block);
+    }
+    return out;
+  }
+
+  status(block: number): BlockStatus {
+    return this.blocks.get(block)?.status ?? "idle";
+  }
+
+  getRow(index: number): T | undefined {
+    const block = this.blocks.get(this.blockOf(index));
+    if (block?.status !== "loaded") return undefined;
+    return block.rows[index - this.blockOf(index) * this.blockSize];
+  }
+
+  /** Blocks of the range that nobody has asked for yet (errors are only retried explicitly). */
+  missing(start: number, end: number): number[] {
+    return this.blocksFor(start, end).filter((block) => this.status(block) === "idle");
+  }
+
+  markLoading(block: number): void {
+    this.blocks.set(block, { status: "loading", rows: [] });
+  }
+
+  markError(block: number): void {
+    this.blocks.set(block, { status: "error", rows: [] });
+  }
+
+  /** Clears error blocks of the range so `missing` offers them again. */
+  retry(start: number, end: number): void {
+    for (const block of this.blocksFor(start, end)) {
+      if (this.status(block) === "error") this.blocks.delete(block);
+    }
+  }
+
+  hasError(start: number, end: number): boolean {
+    return this.blocksFor(start, end).some((block) => this.status(block) === "error");
+  }
+
+  isLoading(start: number, end: number): boolean {
+    return this.blocksFor(start, end).some((block) => this.status(block) === "loading");
+  }
+
+  /** Stores a response, learns the total and evicts old blocks outside `keep`. */
+  setBlock(block: number, rows: readonly T[], total: number, keep: readonly number[] = []): void {
+    this.total = total;
+    this.blocks.delete(block);
+    this.blocks.set(block, { status: "loaded", rows });
+    this.evict(new Set([...keep, block]));
+  }
+
+  /** Marks blocks as recently used. */
+  touch(blocks: readonly number[]): void {
+    for (const block of blocks) {
+      const entry = this.blocks.get(block);
+      if (entry?.status === "loaded") {
+        this.blocks.delete(block);
+        this.blocks.set(block, entry);
+      }
+    }
+  }
+
+  loadedBlocks(): number[] {
+    return [...this.blocks.entries()].filter(([, b]) => b.status === "loaded").map(([n]) => n);
+  }
+
+  clear(): void {
+    this.blocks.clear();
+    this.total = null;
+  }
+
+  private evict(keep: ReadonlySet<number>): void {
+    const loaded = this.loadedBlocks();
+    let excess = loaded.length - this.maxBlocks;
+    for (const block of loaded) {
+      if (excess <= 0) break;
+      if (keep.has(block)) continue;
+      this.blocks.delete(block);
+      excess -= 1;
+    }
+  }
+}

package/src/containers/data-grid/fill-series.ts

@@ -0,0 +1,282 @@
+// Pure planning of the fill handle: how far a drag extends a range, and the values it writes.
+// A numeric run continues linearly, dates continue by days, months or years, text ending in a
+// number counts up ("Silla 1" -> "Silla 2"), and anything else repeats. Dragging up or left runs
+// the series backwards (10, 20, 30 gives 0, -10; "Silla 3" gives "Silla 2").
+import type { CellValue } from "./types.js";
+
+export interface FillBounds {
+  r0: number;
+  r1: number;
+  c0: number;
+  c1: number;
+}
+
+export type HandleDirection = "down" | "right" | "up" | "left";
+
+export interface HandleExtent {
+  direction: HandleDirection;
+  /** The range once the fill is applied. */
+  bounds: FillBounds;
+}
+
+/** Whether a direction counts backwards (up and left continue the series in reverse). */
+export const isBackward = (direction: HandleDirection) =>
+  direction === "up" || direction === "left";
+
+/**
+ * Range a drag of the handle to cell `to` extends to, or null when the pointer is still inside the
+ * range. The axis with the larger overshoot (in cells) wins, so a drag stays a straight fill; the
+ * pointer above or left of the range fills up or left. `minR` / `minC` default to 0.
+ */
+export function handleExtent(
+  base: FillBounds,
+  to: { r: number; c: number },
+  limits: { maxR: number; maxC: number; minR?: number; minC?: number },
+): HandleExtent | null {
+  const down = Math.min(to.r, limits.maxR) - base.r1;
+  const right = Math.min(to.c, limits.maxC) - base.c1;
+  const up = base.r0 - Math.max(to.r, limits.minR ?? 0);
+  const left = base.c0 - Math.max(to.c, limits.minC ?? 0);
+  const best = Math.max(down, right, up, left);
+  if (best <= 0) return null;
+  if (down === best) return { direction: "down", bounds: { ...base, r1: base.r1 + down } };
+  if (right === best) return { direction: "right", bounds: { ...base, c1: base.c1 + right } };
+  if (up === best) return { direction: "up", bounds: { ...base, r0: base.r0 - up } };
+  return { direction: "left", bounds: { ...base, c0: base.c0 - left } };
+}
+
+/**
+ * Scroll step (pixels per frame) for a pointer at `pos` along an axis whose viewport spans
+ * `lo..hi`: zero in the middle, ramping up inside `zone` pixels of an edge and capped at `max`
+ * (also beyond the edge). Negative scrolls towards the start.
+ */
+export function edgeScrollStep(pos: number, lo: number, hi: number, zone = 40, max = 22): number {
+  const ratio = (limit: number, sign: 1 | -1) => sign * Math.min(1, Math.abs(limit) / zone) * max;
+  if (pos < lo + zone) return Math.round(ratio(lo + zone - pos, -1));
+  if (pos > hi - zone) return Math.round(ratio(pos - (hi - zone), 1));
+  return 0;
+}
+
+export interface FillLane {
+  /** Cells of the original range this lane reads, in order (a column going down, a row going right). */
+  source: Array<{ r: number; c: number }>;
+  /** Cells it writes, nearest first. */
+  targets: Array<{ r: number; c: number }>;
+}
+
+/**
+ * One lane per column (fill down or up) or row (fill right or left) of the original range. The
+ * source keeps reading order; targets run away from the range, nearest first.
+ */
+export function fillLanes(base: FillBounds, extent: HandleExtent): FillLane[] {
+  const lanes: FillLane[] = [];
+  const vertical = extent.direction === "down" || extent.direction === "up";
+  const outer = vertical ? [base.c0, base.c1] : [base.r0, base.r1];
+  for (let lane = outer[0] as number; lane <= (outer[1] as number); lane += 1) {
+    const cell = (index: number) => (vertical ? { r: index, c: lane } : { r: lane, c: index });
+    const [from, to] = vertical ? [base.r0, base.r1] : [base.c0, base.c1];
+    const source = [];
+    const targets = [];
+    for (let i = from; i <= to; i += 1) source.push(cell(i));
+    if (extent.direction === "down" || extent.direction === "right") {
+      const end = vertical ? extent.bounds.r1 : extent.bounds.c1;
+      for (let i = to + 1; i <= end; i += 1) targets.push(cell(i));
+    } else {
+      const end = vertical ? extent.bounds.r0 : extent.bounds.c0;
+      for (let i = from - 1; i >= end; i -= 1) targets.push(cell(i));
+    }
+    lanes.push({ source, targets });
+  }
+  return lanes;
+}
+
+/** A filled value: either computed (series) or a copy of the source cell at `from` (index in the lane). */
+export type FillResult = { value: CellValue } | { from: number };
+
+const isBlank = (value: CellValue) => value === null || value === undefined || value === "";
+const isFormula = (value: CellValue) =>
+  typeof value === "string" && value.trimStart().startsWith("=");
+
+const near = (a: number, b: number) =>
+  Math.abs(a - b) <= 1e-9 * Math.max(1, Math.abs(a), Math.abs(b));
+
+/** Constant difference between consecutive numbers, or null. A single number has none. */
+function constantStep(values: readonly number[]): number | null {
+  if (values.length < 2) return null;
+  const step = (values[1] as number) - (values[0] as number);
+  for (let i = 2; i < values.length; i += 1) {
+    if (!near((values[i] as number) - (values[i - 1] as number), step)) return null;
+  }
+  return step;
+}
+
+const DAY = 86_400_000;
+const utcDay = (date: Date) => Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
+
+/** The date `months` months after `date`, keeping the day of the month (clamped to the month's end). */
+export function addMonths(date: Date, months: number, endOfMonth = false): Date {
+  const total = date.getFullYear() * 12 + date.getMonth() + months;
+  const year = Math.floor(total / 12);
+  const month = ((total % 12) + 12) % 12;
+  const lastDay = new Date(year, month + 1, 0).getDate();
+  const next = new Date(date.getTime());
+  next.setFullYear(year, month, endOfMonth ? lastDay : Math.min(date.getDate(), lastDay));
+  return next;
+}
+
+export function addDays(date: Date, days: number): Date {
+  const next = new Date(date.getTime());
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+/**
+ * How a run of dates picks its step: "auto" reads months when they share the day of the month and
+ * days otherwise; "day" always counts days; "month" always counts whole months.
+ */
+export type DateStepMode = "auto" | "day" | "month";
+
+export type DateStep =
+  | { unit: "days"; amount: number }
+  /** `endOfMonth`: the dates are month ends (31 Jan, 28 Feb), so results stay month ends. */
+  | { unit: "months"; amount: number; endOfMonth: boolean };
+
+/**
+ * Step of a run of dates: a whole number of months when they share the day of the month (monthly
+ * and yearly series, e.g. the 1st of every month), otherwise a constant number of days (daily,
+ * weekly). Null when the dates do not follow one step.
+ */
+export function dateStep(dates: readonly Date[], mode: DateStepMode = "auto"): DateStep | null {
+  if (dates.length < 2) return null;
+  const first = dates[0] as Date;
+  const second = dates[1] as Date;
+  const monthly = (b: Date, a: Date) =>
+    (b.getFullYear() - a.getFullYear()) * 12 + b.getMonth() - a.getMonth();
+  const months = monthly(second, first);
+  const sameDay = dates.every((date) => date.getDate() === first.getDate());
+  const endOfMonth = dates.every(
+    (date) => date.getDate() === new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
+  );
+  if (mode === "month") {
+    const steady =
+      months !== 0 &&
+      dates.every((date, i) => i === 0 || monthly(date, dates[i - 1] as Date) === months);
+    return steady ? { unit: "months", amount: months, endOfMonth: endOfMonth && !sameDay } : null;
+  }
+  if (mode === "auto" && months !== 0 && (sameDay || endOfMonth)) {
+    const steady = dates.every(
+      (date, i) => i === 0 || monthly(date, dates[i - 1] as Date) === months,
+    );
+    return steady ? { unit: "months", amount: months, endOfMonth: endOfMonth && !sameDay } : null;
+  }
+  const days = Math.round((utcDay(second) - utcDay(first)) / DAY);
+  const steady = dates.every(
+    (date, i) =>
+      i === 0 || Math.round((utcDay(date) - utcDay(dates[i - 1] as Date)) / DAY) === days,
+  );
+  return steady && days !== 0 ? { unit: "days", amount: days } : null;
+}
+
+const TRAILING_NUMBER = /^(.*?)(\d+)$/s;
+
+interface Counted {
+  prefix: string;
+  value: number;
+  width: number;
+  padded: boolean;
+}
+
+function parseCounted(text: string): Counted | null {
+  const match = TRAILING_NUMBER.exec(text);
+  if (!match) return null;
+  const digits = match[2] as string;
+  return {
+    prefix: match[1] as string,
+    value: Number(digits),
+    width: digits.length,
+    padded: digits.length > 1 && digits.startsWith("0"),
+  };
+}
+
+function formatCounted(prefix: string, value: number, width: number, padded: boolean): string {
+  const digits = String(Math.abs(value));
+  return `${prefix}${value < 0 ? "-" : ""}${padded ? digits.padStart(width, "0") : digits}`;
+}
+
+/** Plain copy: the lane repeats from its first cell. */
+export const copyFill = (count: number, length: number, backward = false): FillResult[] =>
+  Array.from({ length: count }, (_unused, i) => ({
+    from: backward ? length - 1 - (i % length) : i % length,
+  }));
+
+export interface SeriesOptions {
+  /** Continue before the first cell (fill up or left): the run is read from its last cell backwards. */
+  backward?: boolean;
+  dateStep?: DateStepMode;
+  /** Step of a lone text counter; set internally so "Silla 3" going backwards gives "Silla 2". */
+  loneStep?: number;
+}
+
+/**
+ * The `count` values that continue `source` (a column read top to bottom, or a row left to right).
+ * Series are detected from the whole source; a lone number, date or word is copied, except text
+ * that ends in a number, which counts up. Formulas are always copied (the caller shifts them).
+ */
+export function seriesFill(
+  source: readonly CellValue[],
+  count: number,
+  options: SeriesOptions = {},
+): FillResult[] {
+  if (count <= 0 || source.length === 0) return [];
+  const backward = options.backward === true;
+  if (source.some(isFormula) || source.some(isBlank)) {
+    return copyFill(count, source.length, backward);
+  }
+  if (backward) {
+    const last = source.length - 1;
+    const reversed = source.slice().reverse();
+    return seriesFill(reversed, count, { ...options, backward: false, loneStep: -1 }).map((item) =>
+      "from" in item ? { from: last - item.from } : item,
+    );
+  }
+
+  if (source.every((value): value is number => typeof value === "number")) {
+    const step = constantStep(source);
+    if (step === null) return copyFill(count, source.length);
+    const last = source[source.length - 1] as number;
+    return Array.from({ length: count }, (_unused, i) => ({ value: last + step * (i + 1) }));
+  }
+
+  if (source.every((value): value is Date => value instanceof Date)) {
+    const step = dateStep(source, options.dateStep);
+    if (!step) return copyFill(count, source.length);
+    const last = source[source.length - 1] as Date;
+    return Array.from({ length: count }, (_unused, i) => ({
+      value:
+        step.unit === "months"
+          ? addMonths(last, step.amount * (i + 1), step.endOfMonth)
+          : addDays(last, step.amount * (i + 1)),
+    }));
+  }
+
+  if (source.every((value): value is string => typeof value === "string")) {
+    const counted = source.map(parseCounted);
+    const first = counted[0];
+    if (first && counted.every((item) => item !== null && item.prefix === first.prefix)) {
+      const items = counted as Counted[];
+      const step =
+        items.length === 1
+          ? (options.loneStep ?? 1)
+          : constantStep(items.map((item) => item.value));
+      if (step !== null) {
+        const last = items[items.length - 1] as Counted;
+        const padded = items.some((item) => item.padded);
+        const width = Math.max(...items.map((item) => item.width));
+        return Array.from({ length: count }, (_unused, i) => ({
+          value: formatCounted(first.prefix, last.value + step * (i + 1), width, padded),
+        }));
+      }
+    }
+  }
+  return copyFill(count, source.length);
+}

package/src/containers/data-grid/filter-builder-editor.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { Plus, Trash2 } from "lucide-react";
+import { cn } from "../../utils/cn.js";
+import {
+  addChild,
+  emptyGroup,
+  type FilterCondition,
+  type FilterGroup,
+  type FilterNode,
+  newCondition,
+  operatorNeedsValue,
+  operatorsFor,
+  removeNode,
+  updateNode,
+  valueKindOf,
+} from "./filter-builder.js";
+import { type DataGridLabels, DEFAULT_DATA_GRID_LABELS } from "./labels.js";
+import { filterKindOf } from "./model.js";
+import type { DataGridColumn } from "./types.js";
+
+export interface FilterBuilderProps<T> {
+  columns: readonly DataGridColumn<T>[];
+  value: FilterGroup;
+  onChange: (next: FilterGroup) => void;
+  /** Values offered for select-like columns; a text box is used when absent or empty. */
+  valuesOf?: (columnId: string) => string[];
+  labels?: Partial<DataGridLabels>;
+  className?: string;
+}
+
+const fieldClass =
+  "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+const buttonClass =
+  "inline-flex h-control-sm shrink-0 items-center gap-1.5 whitespace-nowrap rounded-control border-divider bg-surface-control px-2.5 font-[600] text-[12.5px] text-ink-2 hover:border-line-strong hover:text-ink [&_svg]:size-3.5";
+
+/**
+ * Builds a filter of nested AND / OR groups of conditions (column, operator, value). It is a
+ * controlled editor over a `FilterGroup`; `applyAdvancedFilter` evaluates it. It adapts to the
+ * width of its container: fields stack when it is narrow.
+ */
+export function FilterBuilder<T>({
+  columns,
+  value,
+  onChange,
+  valuesOf,
+  labels: labelsProp,
+  className,
+}: FilterBuilderProps<T>) {
+  const labels = { ...DEFAULT_DATA_GRID_LABELS, ...labelsProp };
+  const filterable = columns.filter((column) => column.filterable !== false);
+  return (
+    <div className={cn("@container/fb min-w-0", className)}>
+      <GroupEditor
+        group={value}
+        root={value}
+        isRoot
+        columns={filterable}
+        labels={labels}
+        valuesOf={valuesOf}
+        onChange={onChange}
+      />
+    </div>
+  );
+}
+
+interface EditorContext<T> {
+  root: FilterGroup;
+  columns: readonly DataGridColumn<T>[];
+  labels: DataGridLabels;
+  valuesOf?: (columnId: string) => string[];
+  onChange: (next: FilterGroup) => void;
+}
+
+function GroupEditor<T>({
+  group,
+  isRoot,
+  ...context
+}: EditorContext<T> & { group: FilterGroup; isRoot?: boolean }) {
+  const { root, columns, labels, onChange } = context;
+  const first = columns[0];
+  return (
+    <fieldset
+      className={cn(
+        "m-0 grid min-w-0 gap-2 border-0 p-0",
+        !isRoot && "border-line border-l-2 pl-2.5 @md/fb:pl-3",
+      )}
+    >
+      <legend className="sr-only">{labels.filterGroupLabel}</legend>
+      <div className="flex flex-wrap items-center gap-2">
+        <fieldset className="flex h-control-sm items-center rounded-control border-divider bg-surface-control p-0.5">
+          <legend className="sr-only">{labels.filterGroupLabel}</legend>
+          {(["and", "or"] as const).map((logic) => (
+            <button
+              key={logic}
+              type="button"
+              aria-pressed={group.logic === logic}
+              onClick={() =>
+                onChange(updateNode(root, group.id, (n) => ({ ...n, logic }) as FilterNode))
+              }
+              className="h-full rounded-xs px-2 font-[600] text-[12px] text-ink-3 hover:text-ink aria-pressed:bg-accent-soft aria-pressed:text-accent-ink"
+            >
+              {logic === "and" ? labels.matchAll : labels.matchAny}
+            </button>
+          ))}
+        </fieldset>
+        <span className="flex-1" />
+        {first ? (
+          <button
+            type="button"
+            className={buttonClass}
+            onClick={() => onChange(addChild(root, group.id, newCondition(first)))}
+          >
+            <Plus aria-hidden="true" />
+            {labels.addCondition}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          className={buttonClass}
+          onClick={() => onChange(addChild(root, group.id, emptyGroup("or")))}
+        >
+          <Plus aria-hidden="true" />
+          {labels.addGroup}
+        </button>
+        {isRoot ? null : (
+          <button
+            type="button"
+            className={cn(buttonClass, "px-2")}
+            aria-label={labels.removeNode}
+            title={labels.removeNode}
+            onClick={() => onChange(removeNode(root, group.id))}
+          >
+            <Trash2 aria-hidden="true" />
+          </button>
+        )}
+      </div>
+      {group.children.length === 0 ? (
+        <p className="px-1 text-[12.5px] text-ink-3">{labels.noConditions}</p>
+      ) : (
+        <ul className="grid gap-2">
+          {group.children.map((child, index) => (
+            <li key={child.id} className="grid gap-1">
+              {index > 0 ? (
+                <span className="font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]">
+                  {group.logic === "and" ? labels.filterAnd : labels.filterOr}
+                </span>
+              ) : null}
+              {child.type === "group" ? (
+                <GroupEditor group={child} {...context} />
+              ) : (
+                <ConditionEditor condition={child} {...context} />
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </fieldset>
+  );
+}
+
+function ConditionEditor<T>({
+  condition,
+  root,
+  columns,
+  labels,
+  valuesOf,
+  onChange,
+}: EditorContext<T> & { condition: FilterCondition }) {
+  const column = columns.find((c) => c.id === condition.columnId) ?? columns[0];
+  if (!column) return null;
+  const operators = operatorsFor(column);
+  const kind = valueKindOf(column);
+  const options = ["select", "set"].includes(filterKindOf(column))
+    ? (valuesOf?.(column.id) ?? [])
+    : [];
+  const patch = (next: Partial<FilterCondition>) =>
+    onChange(updateNode(root, condition.id, (node) => ({ ...node, ...next }) as FilterNode));
+  const needsValue = operatorNeedsValue(condition.operator);
+  const valueField = (key: "value" | "value2", label: string) =>
+    options.length > 0 ? (
+      <select
+        aria-label={label}
+        value={condition[key] ?? ""}
+        onChange={(event) => patch({ [key]: event.target.value })}
+        className={fieldClass}
+      >
+        <option value="" />
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    ) : (
+      <input
+        type={kind === "date" ? "date" : "text"}
+        inputMode={kind === "number" ? "decimal" : undefined}
+        aria-label={label}
+        placeholder={label}
+        value={condition[key] ?? ""}
+        onChange={(event) => patch({ [key]: event.target.value })}
+        className={fieldClass}
+      />
+    );
+
+  return (
+    <div className="grid gap-1.5 @md/fb:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1.2fr)_auto] @md/fb:items-center">
+      <select
+        aria-label={labels.filterColumn}
+        value={column.id}
+        onChange={(event) => {
+          const next = columns.find((c) => c.id === event.target.value);
+          if (next) {
+            patch({
+              columnId: next.id,
+              operator: operatorsFor(next)[0] ?? "contains",
+              value: "",
+              value2: "",
+            });
+          }
+        }}
+        className={fieldClass}
+      >
+        {columns.map((c) => (
+          <option key={c.id} value={c.id}>
+            {c.header}
+          </option>
+        ))}
+      </select>
+      <select
+        aria-label={labels.filterOperator}
+        value={condition.operator}
+        onChange={(event) => patch({ operator: event.target.value as FilterCondition["operator"] })}
+        className={fieldClass}
+      >
+        {operators.map((operator) => (
+          <option key={operator} value={operator}>
+            {labels.operators[operator]}
+          </option>
+        ))}
+      </select>
+      {needsValue ? (
+        <div className={cn("grid gap-1.5", condition.operator === "between" && "grid-cols-2")}>
+          {valueField("value", labels.filterValue)}
+          {condition.operator === "between" ? valueField("value2", labels.filterValueTo) : null}
+        </div>
+      ) : (
+        <span aria-hidden="true" className="hidden @md/fb:block" />
+      )}
+      <button
+        type="button"
+        className={cn(buttonClass, "justify-self-start px-2 @md/fb:justify-self-auto")}
+        aria-label={labels.removeNode}
+        title={labels.removeNode}
+        onClick={() => onChange(removeNode(root, condition.id))}
+      >
+        <Trash2 aria-hidden="true" />
+      </button>
+    </div>
+  );
+}