@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/dist/field/number-field.js

@@ -0,0 +1,179 @@
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { define } from "../base/element.js";
+import { BoundField } from "./bound-field.js";
+import { formatValue, parseInput } from "./values.js";
+import { canonicalNumeric, compareNumeric, numericAligned, stepNumeric } from "./numeric.js";
+const INTEGER = new Set(["Edm.Byte", "Edm.SByte", "Edm.Int16", "Edm.Int32", "Edm.Int64"]);
+export class NumberField extends BoundField {
+    #value = this.prop(null);
+    #type = this.prop("decimal");
+    #min = this.prop(undefined);
+    #max = this.prop(undefined);
+    #step = this.prop(undefined);
+    #buttons = this.prop(false);
+    #prefix = this.prop("");
+    #suffix = this.prop("");
+    #placeholder = this.prop("");
+    #readOnly = this.prop(false);
+    #draft = this.prop(undefined);
+    #focused = this.prop(false);
+    #format = this.prop(undefined);
+    #last;
+    get value() { return this.#value.value; }
+    set value(v) { this.#draft.value = undefined; this.#value.value = v; }
+    get numericType() { return this.#type.value; }
+    set numericType(v) { if (!["decimal", "integer", "float"].includes(v))
+        throw new TypeError("Unknown numeric type"); this.#type.value = v; }
+    get min() { return this.#min.value; }
+    set min(v) { if (v !== undefined)
+        canonicalNumeric(v); this.#min.value = v; }
+    get max() { return this.#max.value; }
+    set max(v) { if (v !== undefined)
+        canonicalNumeric(v); this.#max.value = v; }
+    get step() { return this.#step.value; }
+    set step(v) { if (v !== undefined && compareNumeric(v, 0) <= 0)
+        throw new TypeError("Step must be positive"); this.#step.value = v; }
+    get stepButtons() { return this.#buttons.value; }
+    set stepButtons(v) { this.#buttons.value = v; }
+    get prefixText() { return this.#prefix.value; }
+    set prefixText(v) { this.#prefix.value = v; }
+    get suffixText() { return this.#suffix.value; }
+    set suffixText(v) { this.#suffix.value = v; }
+    get placeholder() { return this.#placeholder.value; }
+    set placeholder(v) { this.#placeholder.value = v; }
+    get readOnly() { return this.#readOnly.value; }
+    set readOnly(v) { this.#readOnly.value = v; }
+    get format() { return this.#format.value; }
+    set format(v) { this.#format.value = v; }
+    focus(options) { this.querySelector("input")?.focus(options); }
+    #kind(meta) {
+        return meta ? INTEGER.has(meta.type) ? "integer" : meta.type === "Edm.Decimal" ? "decimal" : "float" : this.#type.value;
+    }
+    #bounds(meta) {
+        let min = meta?.minimum, max = meta?.maximum;
+        if (this.#min.value !== undefined && (min === undefined || compareNumeric(this.#min.value, min) > 0))
+            min = this.#min.value;
+        if (this.#max.value !== undefined && (max === undefined || compareNumeric(this.#max.value, max) < 0))
+            max = this.#max.value;
+        return { ...(min === undefined ? {} : { min }), ...(max === undefined ? {} : { max }) };
+    }
+    validation(meta, boundValue) {
+        const value = this.model ? boundValue : this.#value.value;
+        try {
+            const { min, max } = this.#bounds(meta);
+            if (min !== undefined && max !== undefined && compareNumeric(min, max) > 0)
+                return "Minimum exceeds maximum";
+            if (this.#kind(meta) === "integer" && this.#step.value !== undefined && !numericAligned(this.#step.value, 1))
+                return "Integer fields require an integer step";
+            if (value === undefined || value === null || value === "")
+                return undefined;
+            if (typeof value === "boolean")
+                return "Enter a number";
+            canonicalNumeric(value);
+            if (this.#kind(meta) === "integer" && !numericAligned(value, 1))
+                return "Enter a whole number";
+            if (min !== undefined && (compareNumeric(value, min) < 0 || meta?.exclusiveMinimum && compareNumeric(value, meta.minimum) === 0))
+                return `Enter a number ${meta?.exclusiveMinimum ? "greater than" : "at least"} ${min}`;
+            if (max !== undefined && (compareNumeric(value, max) > 0 || meta?.exclusiveMaximum && compareNumeric(value, meta.maximum) === 0))
+                return `Enter a number ${meta?.exclusiveMaximum ? "less than" : "at most"} ${max}`;
+            if (this.#step.value !== undefined && !numericAligned(value, this.#step.value, min ?? 0))
+                return `Use increments of ${this.#step.value}${min === undefined ? "" : ` from ${min}`}`;
+            return undefined;
+        }
+        catch {
+            return "Enter a number";
+        }
+    }
+    #write(text, meta) {
+        let value;
+        if (meta)
+            value = meta.type === "Edm.Decimal" || meta.type === "Edm.Int64" ? text.trim() === "" ? null : text.trim() : parseInput(meta, text);
+        else {
+            value = text.trim() === "" ? null : text;
+            if (value !== null && this.#type.peek() === "float") {
+                try {
+                    const number = Number(canonicalNumeric(value));
+                    if (Number.isFinite(number))
+                        value = number;
+                }
+                catch { /* Retain incomplete text. */ }
+            }
+        }
+        this.#last = value;
+        this.#draft.value = text;
+        if (this.model)
+            this.write(value);
+        else
+            this.#value.value = value;
+        this.emit("value-change", { value });
+    }
+    #next(direction, c) {
+        try {
+            const value = this.model ? c.value : this.#value.value;
+            if (value === undefined || typeof value === "boolean")
+                return undefined;
+            if (this.#kind(c.meta) === "integer" && this.#step.value !== undefined && !numericAligned(this.#step.value, 1))
+                return undefined;
+            const { min, max } = this.#bounds(c.meta);
+            if (min !== undefined && max !== undefined && compareNumeric(min, max) > 0)
+                return undefined;
+            let next = stepNumeric(value, direction, (this.#step.value ?? (c.meta?.scale ? `0.${"0".repeat(c.meta.scale - 1)}1` : 1)), min, max);
+            if (next !== undefined && (c.meta?.exclusiveMinimum && compareNumeric(next, c.meta.minimum) === 0 || c.meta?.exclusiveMaximum && compareNumeric(next, c.meta.maximum) === 0)) {
+                next = stepNumeric(next, direction, (this.#step.value ?? (c.meta?.scale ? `0.${"0".repeat(c.meta.scale - 1)}1` : 1)), min, max);
+            }
+            return next;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    control(c) {
+        const current = this.model ? c.value : this.#value.value;
+        const draft = this.#draft.value;
+        const entered = draft !== undefined && current === this.#last ? draft : current === null || current === undefined ? "" : String(current);
+        let display = formatValue(c.meta, current);
+        const formatter = this.#format.value;
+        if (formatter && current !== undefined && typeof current !== "boolean") {
+            try {
+                if (current !== null)
+                    canonicalNumeric(current);
+                display = formatter(current);
+            }
+            catch { /* Invalid text stays visible. */ }
+        }
+        const text = this.#focused.value ? entered : display;
+        const readOnly = this.#readOnly.value || c.state.readOnly;
+        const step = (direction) => { if (readOnly)
+            return; const next = this.#next(direction, c); if (next !== undefined)
+            this.#write(next, c.meta); };
+        return html `<div class="aster-field aster-number" data-ring-owner>
+      ${this.#prefix.value ? html `<span class="aster-number-affix">${this.#prefix.value}</span>` : nothing}
+      <input id=${c.id} type="text" inputmode=${this.#kind(c.meta) === "integer" ? "numeric" : "decimal"}
+        .value=${live(text)} aria-label=${this.labelled ? nothing : c.label} aria-describedby=${c.describedBy ?? nothing}
+        aria-required=${c.state.required ? "true" : nothing} aria-invalid=${c.invalid ? "true" : nothing}
+        ?readonly=${readOnly} placeholder=${this.#placeholder.value || nothing} autocomplete="off" spellcheck="false"
+        @focus=${(e) => {
+            this.#focused.value = true;
+            if (display !== entered)
+                queueMicrotask(() => e.target.select());
+        }} @blur=${() => this.#focused.value = false}
+        @input=${(e) => this.#write(e.target.value, c.meta)}
+        @keydown=${(e) => {
+            if (readOnly || !this.#buttons.peek() || e.altKey || e.ctrlKey || e.metaKey || !["ArrowUp", "ArrowDown"].includes(e.key))
+                return;
+            e.preventDefault();
+            step(e.key === "ArrowUp" ? 1 : -1);
+        }}>
+      ${this.#suffix.value ? html `<span class="aster-number-affix">${this.#suffix.value}</span>` : nothing}
+      ${this.#buttons.value ? html `<span class="aster-number-steps">
+        ${[-1, 1].map(d => html `<button type="button" aria-label=${`${d === 1 ? "Increase" : "Decrease"} ${c.label}`} ?disabled=${readOnly || this.#next(d, c) === undefined}
+          @mousedown=${(e) => { if (e.button === 0)
+            e.preventDefault(); }} @click=${() => step(d)}>
+          <svg viewBox="0 0 16 16" aria-hidden="true"><path d=${d === 1 ? "M3 8h10M8 3v10" : "M3 8h10"}/></svg>
+        </button>`)}
+      </span>` : nothing}
+    </div>`;
+    }
+}
+define("aster-number-field", NumberField);

package/dist/field/numeric.d.ts

@@ -0,0 +1,4 @@
+export declare function compareNumeric(a: string | number, b: string | number): number;
+export declare function canonicalNumeric(value: string | number): string;
+export declare function numericAligned(value: string | number, step: string | number, base?: string | number): boolean;
+export declare function stepNumeric(value: string | number | null, direction: 1 | -1, step: string | number, min?: string | number, max?: string | number): string | undefined;

package/dist/field/numeric.js

@@ -0,0 +1,57 @@
+const LIMIT = 1000;
+function decimal(value) {
+    const match = /^([+-]?)(\d*)(?:\.(\d*))?(?:[eE]([+-]?\d+))?$/.exec(String(value));
+    if (!match || !(match[2] || match[3]))
+        throw new TypeError("Enter a number");
+    const exponent = Number(match[4] ?? 0);
+    if (!Number.isSafeInteger(exponent) || Math.abs(exponent) > LIMIT || String(value).length > LIMIT)
+        throw new TypeError("Number is too large");
+    let scale = (match[3]?.length ?? 0) - exponent;
+    let coefficient = BigInt(`${match[1] === "-" ? "-" : ""}${match[2] || "0"}${match[3] ?? ""}`);
+    if (scale < 0) {
+        coefficient *= 10n ** BigInt(-scale);
+        scale = 0;
+    }
+    return { coefficient, scale };
+}
+function coefficient(d, scale) { return d.coefficient * 10n ** BigInt(scale - d.scale); }
+function text(value, scale) {
+    const sign = value < 0n ? "-" : "";
+    const digits = (value < 0n ? -value : value).toString().padStart(scale + 1, "0");
+    return scale ? `${sign}${digits.slice(0, -scale)}.${digits.slice(-scale)}`.replace(/\.?0+$/, "") : `${sign}${digits}`;
+}
+export function compareNumeric(a, b) {
+    const x = decimal(a), y = decimal(b), scale = Math.max(x.scale, y.scale);
+    const delta = coefficient(x, scale) - coefficient(y, scale);
+    return delta < 0n ? -1 : delta > 0n ? 1 : 0;
+}
+export function canonicalNumeric(value) { const d = decimal(value); return text(d.coefficient, d.scale); }
+export function numericAligned(value, step, base = 0) {
+    const v = decimal(value), s = decimal(step), b = decimal(base), scale = Math.max(v.scale, s.scale, b.scale);
+    const stride = coefficient(s, scale);
+    if (stride <= 0n)
+        throw new TypeError("Step must be positive");
+    return (coefficient(v, scale) - coefficient(b, scale)) % stride === 0n;
+}
+function floor(a, b) { const q = a / b; return a < 0n && a % b !== 0n ? q - 1n : q; }
+export function stepNumeric(value, direction, step, min, max) {
+    const v = decimal(value ?? 0), s = decimal(step), b = decimal(min ?? 0);
+    const lower = min === undefined ? undefined : decimal(min), upper = max === undefined ? undefined : decimal(max);
+    const scale = Math.max(v.scale, s.scale, b.scale, lower?.scale ?? 0, upper?.scale ?? 0);
+    const stride = coefficient(s, scale), base = coefficient(b, scale), entered = coefficient(v, scale);
+    if (stride <= 0n)
+        throw new TypeError("Step must be positive");
+    const offset = entered - base, q = floor(offset, stride), aligned = offset % stride === 0n;
+    let next = base + (direction === 1 ? q + 1n : aligned ? q - 1n : q) * stride;
+    if (value === null)
+        next = base + (direction === 1 && !aligned ? q + 1n : q) * stride;
+    if (lower && next < coefficient(lower, scale))
+        next = base;
+    if (upper && next > coefficient(upper, scale))
+        next = base + floor(coefficient(upper, scale) - base, stride) * stride;
+    if (lower && next < coefficient(lower, scale) || upper && next > coefficient(upper, scale))
+        return undefined;
+    if (value !== null && (direction === 1 && next <= entered || direction === -1 && next >= entered))
+        return undefined;
+    return text(next, scale);
+}

package/dist/field/values.d.ts

@@ -0,0 +1,14 @@
+import type { Field, Value } from "@getaster/data";
+/**
+ * What the user typed, as the field's value. Text that doesn't parse stays
+ * text, so validation reports it in words and nothing typed is lost. Empty
+ * is null, except on a non-nullable text field.
+ */
+export declare function parseInput(field: Field | undefined, text: string): Value;
+/** A value as the text a control shows; a Decimal shows its scale's places ("7.50"). */
+export declare function formatValue(field: Field | undefined, value: Value | undefined): string;
+/** The input type and mode that suit a field. */
+export declare function inputKind(field: Field | undefined): {
+    type: string;
+    inputmode?: string;
+};

package/dist/field/values.js

@@ -0,0 +1,60 @@
+const INTEGER = new Set(["Edm.Byte", "Edm.SByte", "Edm.Int16", "Edm.Int32"]);
+/**
+ * What the user typed, as the field's value. Text that doesn't parse stays
+ * text, so validation reports it in words and nothing typed is lost. Empty
+ * is null, except on a non-nullable text field.
+ */
+export function parseInput(field, text) {
+    if (!field)
+        return text;
+    const t = text.trim();
+    if (field.type === "Edm.String")
+        return text === "" && field.nullable ? null : text;
+    if (t === "")
+        return null;
+    if (INTEGER.has(field.type))
+        return /^-?\d+$/.test(t) ? Number(t) : text;
+    if (field.type === "Edm.Single" || field.type === "Edm.Double") {
+        const n = Number(t);
+        return Number.isFinite(n) ? n : text;
+    }
+    if (field.type === "Edm.Decimal" || field.type === "Edm.Int64")
+        return t.replaceAll(",", "");
+    return t;
+}
+/** A value as the text a control shows; a Decimal shows its scale's places ("7.50"). */
+export function formatValue(field, value) {
+    if (value === null || value === undefined)
+        return "";
+    const allowed = field?.allowedValues?.find((a) => a.value === value);
+    if (allowed?.label)
+        return allowed.label;
+    if (field?.type === "Edm.Decimal" && field.scale !== undefined)
+        return padScale(String(value), field.scale);
+    return String(value);
+}
+/** Exact decimal text with at least `scale` places; other text is left as it is. */
+function padScale(text, scale) {
+    const m = /^(-?\d+)(?:\.(\d*))?$/.exec(text);
+    if (!m || scale === 0)
+        return text;
+    const places = m[2] ?? "";
+    return places.length >= scale ? text : `${m[1]}.${places.padEnd(scale, "0")}`;
+}
+/** The input type and mode that suit a field. */
+export function inputKind(field) {
+    switch (field?.type) {
+        case "Edm.Byte":
+        case "Edm.SByte":
+        case "Edm.Int16":
+        case "Edm.Int32":
+        case "Edm.Int64":
+            return { type: "text", inputmode: "numeric" };
+        case "Edm.Decimal":
+        case "Edm.Single":
+        case "Edm.Double":
+            return { type: "text", inputmode: "decimal" };
+        default:
+            return { type: "text" };
+    }
+}

package/dist/filter/filter-builder.d.ts

@@ -0,0 +1,18 @@
+import { type FilterDraft } from "@getaster/data";
+import { AsterElement, type View } from "../base/element.ts";
+/** A standalone metadata-driven Criteria editor, with local drafts and cancellable apply/cancel events. */
+export declare class FilterBuilder extends AsterElement {
+    #private;
+    /** A data-layer draft; no record list or database writes are required. */
+    get model(): FilterDraft | undefined;
+    set model(value: FilterDraft | undefined);
+    /** Accessible name of the editor and its root condition group. */
+    get label(): string;
+    set label(value: string);
+    /** A reason shown instead of editable controls. */
+    get readOnlyReason(): string | undefined;
+    set readOnlyReason(value: string | undefined);
+    focus(options?: FocusOptions): void;
+    protected render(): View;
+    protected updated(): void;
+}

package/dist/filter/filter-builder.js

@@ -0,0 +1,305 @@
+import { filterOperators, describeCriteria } from "@getaster/data";
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import { signal } from "@preact/signals-core";
+import { AsterElement, define, each, uid } from "../base/element.js";
+import { ChoiceState, choiceView } from "../select/choice.js";
+import { filterOperatorLabel } from "../rule/operators.js";
+import { manyView } from "../select/many.js";
+import { inputView } from "../field/input.js";
+import { inputKind } from "../field/values.js";
+const plus = html `<svg viewBox="0 0 14 14" aria-hidden="true"><path d="M7 2.5v9M2.5 7h9"/></svg>`;
+const RELATIVE = [
+    { label: "Today", value: '{"relative":"today"}' }, { label: "Yesterday", value: '{"relative":"today","days":-1}' },
+    { label: "Tomorrow", value: '{"relative":"today","days":1}' }, { label: "Start of this week", value: '{"relative":"today","startOf":"week"}' },
+    { label: "Start of this month", value: '{"relative":"today","startOf":"month"}' }, { label: "Now", value: '{"relative":"now"}' },
+    { label: "Custom relative date", value: "custom" },
+];
+/** A standalone metadata-driven Criteria editor, with local drafts and cancellable apply/cancel events. */
+export class FilterBuilder extends AsterElement {
+    #model = this.prop(undefined);
+    #label = this.prop("Advanced filter");
+    #readOnly = this.prop(undefined);
+    #choices = new Map();
+    #lists = new Map();
+    #customRelative = signal(new Set());
+    #id = uid("aster-filter");
+    #focus;
+    /** A data-layer draft; no record list or database writes are required. */
+    get model() { return this.#model.value; }
+    set model(value) {
+        if (value !== this.#model.peek()) {
+            this.#choices.clear();
+            this.#lists.clear();
+            this.#customRelative.value = new Set();
+        }
+        this.#model.value = value;
+    }
+    /** Accessible name of the editor and its root condition group. */
+    get label() { return this.#label.value; }
+    set label(value) { this.#label.value = value; }
+    /** A reason shown instead of editable controls. */
+    get readOnlyReason() { return this.#readOnly.value; }
+    set readOnlyReason(value) { this.#readOnly.value = value; }
+    focus(options) { this.querySelector("[role=combobox], input, button")?.focus(options); }
+    render() {
+        const model = this.#model.value;
+        if (!model)
+            return nothing;
+        const root = model.root.value;
+        const result = model.result.value;
+        const readOnly = this.#readOnly.value;
+        return html `<section class="aster-filter-builder" aria-labelledby=${`${this.#id}-title`}>
+      <h3 id=${`${this.#id}-title`}>${this.#label.value}</h3>
+      ${readOnly ? html `<p class="aster-hint" role="status">${readOnly}</p>` : nothing}
+      <fieldset class="aster-filter-controls" ?disabled=${readOnly !== undefined}>
+        <legend class="aster-sr-only">${this.#label.value} conditions</legend>
+        ${this.#node(root, this.#label.value, 0, true)}
+      </fieldset>
+      <p class="aster-filter-preview" aria-label="Expression preview">${result.valid ? describeCriteria(result.criteria, model.schema.set(model.set).type) : "Complete all conditions before applying."}</p>
+      ${result.problems.length ? html `<p class="aster-hint" role="status">${result.problems.length} ${result.problems.length === 1 ? "condition needs" : "conditions need"} attention.</p>` : nothing}
+      ${readOnly === undefined ? html `<div class="aster-filter-buttons">
+        <button type="button" class="aster-button" ?disabled=${!result.valid} @click=${() => this.#apply()}>Apply filter</button>
+        <button type="button" class="aster-button" @click=${() => { model.cancel(); this.emit("cancel"); }}>Cancel</button>
+        <button type="button" class="aster-grid-tool" @click=${() => { model.clear(); this.#focus = { id: model.root.peek().id, action: "add" }; }}>Clear expression</button>
+      </div>` : nothing}
+    </section>`;
+    }
+    #choice(key, label, value, options, choose, problem) {
+        let state = this.#choices.get(key);
+        if (!state) {
+            state = new ChoiceState();
+            this.#choices.set(key, state);
+        }
+        const known = options.some((o) => o.value === value);
+        const offered = !known && value !== undefined && value !== "" ? [{ value, label: `Unavailable: ${String(value)}` }, ...options] : options;
+        return choiceView(state, { id: `${this.#id}-${key}`, label, value, options: offered, placeholder: "Choose…", readOnly: this.#readOnly.value !== undefined,
+            invalid: problem !== undefined, ...(problem ? { describedBy: problem } : {}), choose: (v) => choose(String(v ?? "")) });
+    }
+    #node(node, name, depth, root = false) {
+        const model = this.#model.value;
+        const type = model.typeFor(node.id);
+        const incomplete = node.kind === "condition" && (!node.field || (node.mode === "value" && (node.text === "" || (node.op === "in" && node.text === "[]"))));
+        const problem = incomplete ? undefined : model.result.value.problems.find((p) => p.id === node.id);
+        const errorId = problem ? `${this.#id}-${node.id}-error` : undefined;
+        const error = problem ? html `<p class="aster-error" id=${errorId}>${problem.message}</p>` : nothing;
+        const remove = !root ? html `<button type="button" class="aster-list-edit-action" aria-label=${`Remove ${name}`} @click=${() => this.#remove(node.id)}>Remove</button>` : nothing;
+        if (node.kind === "condition") {
+            const field = this.#field(type, node.field);
+            const operators = filterOperators(field);
+            return html `<div class="aster-filter-condition" role="group" aria-label=${name} data-clause=${node.id}>
+        <div class="aster-filter-condition-fields">
+          ${this.#choice(`${node.id}-field`, `${name}: field`, node.field, this.#fields(type), (field) => model.change(node.id, { field }), errorId)}
+          ${node.field ? this.#choice(`${node.id}-op`, `${name}: test`, operators.includes(node.op) ? node.op : undefined, operators.map((op) => ({ value: op, label: filterOperatorLabel(op) })), (op) => model.change(node.id, { op }), errorId) : nothing}
+          ${node.field ? this.#value(node, field, type, name, errorId) : html `<span class="aster-filter-start aster-hint">Choose a field to begin.</span>`}${remove}
+        </div>${error}
+      </div>`;
+        }
+        const related = node.kind === "related";
+        const nav = related ? type?.navigation(node.field) : undefined;
+        const options = related ? nav?.collection === false ? ["via"] : ["any", "all"] : ["and", "or", "not"];
+        return html `<div class="aster-rule-group aster-filter-group" role="group" aria-label=${name} data-clause=${node.id} style=${`--depth:${depth}`}>
+      <div class="aster-rule-head">
+        ${related ? this.#choice(`${node.id}-navigation`, `${name}: relationship`, node.field, (type?.navigations ?? []).map((n) => ({ value: n.name, label: n.name })), (field) => {
+            const next = type?.navigation(field);
+            model.change(node.id, { field, op: next?.collection ? "any" : "via" });
+        }, errorId) : nothing}
+        ${this.#choice(`${node.id}-match`, `${name}: match`, node.op, options.map((op) => ({ value: op, label: filterOperatorLabel(op) })), (op) => model.change(node.id, { op }), errorId)}
+        <span>${related ? "matches" : "of these conditions"}</span>${remove}
+      </div>
+      <div class="aster-rule-body">${each(node.children, (c) => c.id, (c) => this.#node(c, `${name}, ${c.kind === "condition" ? "condition" : "group"} ${node.children.indexOf(c) + 1}`, depth + 1))}
+        ${node.children.length === 0 ? html `<p class="aster-hint">${root ? "No expression. Other query constraints still apply." : related && !nav ? "Choose a relationship before adding conditions." : "Add a condition to this group."}</p>` : nothing}
+        <div class="aster-rule-adds">
+          <button type="button" class="aster-list-edit-add" data-action="add" ?disabled=${related && !nav} aria-label=${`Add condition to ${name}`} @click=${() => this.#add(node.id, "condition")}>${plus}Add condition</button>
+          <button type="button" class="aster-list-edit-add" ?disabled=${related && !nav} aria-label=${`Add group to ${name}`} @click=${() => this.#add(node.id, "group")}>${plus}Add group</button>
+          ${(related ? nav ? model.schema.set(nav.target).type : undefined : type)?.navigations.length ? html `<button type="button" class="aster-list-edit-add" aria-label=${`Add related condition to ${name}`} @click=${() => this.#add(node.id, "related")}>${plus}Add related condition</button>` : nothing}
+        </div>${error}
+      </div>
+    </div>`;
+    }
+    #fields(type) { return (type?.fields ?? []).filter((f) => f.type !== "Edm.Binary").map((f) => ({ value: f.name, label: f.title ?? f.name })); }
+    #field(type, name) { return type?.field(name); }
+    #value(node, field, type, name, error) {
+        if (node.op === "isnull" || node.op === "notnull")
+            return html `<span></span>`;
+        const model = this.#model.value;
+        const comparison = ["eq", "ne", "gt", "ge", "lt", "le"].includes(node.op);
+        const modes = [{ value: "value", label: "Value" }, ...(comparison ? [{ value: "field", label: "Another field" }] : []),
+            ...(comparison && (field?.type === "Edm.Date" || field?.type === "Edm.DateTimeOffset") ? [{ value: "relative", label: "Relative date" }] : [])];
+        const change = (text) => model.change(node.id, { text });
+        let input;
+        switch (node.mode) {
+            case "field":
+                input = this.#choice(`${node.id}-other`, `${name}: comparison field`, node.other, this.#fields(type).filter((o) => this.#field(type, String(o.value))?.type === field?.type), (other) => model.change(node.id, { other }), error);
+                break;
+            case "relative": {
+                const preset = !this.#customRelative.value.has(node.id) && RELATIVE.some((o) => o.value === node.text);
+                input = html `${this.#choice(`${node.id}-relative`, `${name}: relative date`, preset ? node.text : "custom", RELATIVE, (v) => {
+                    const custom = new Set(this.#customRelative.peek());
+                    if (v === "custom")
+                        custom.add(node.id);
+                    else
+                        custom.delete(node.id);
+                    this.#customRelative.value = custom;
+                    change(v === "custom" ? '{"relative":"today","days":0}' : v);
+                }, error)}
+          ${!preset ? this.#relative(node, name, error) : nothing}`;
+                break;
+            }
+            default: {
+                if (node.op === "in")
+                    input = this.#options(field) ? this.#many(node, field, name, error) : this.#list(node, field, name, error);
+                else if (field?.allowedValues || field?.type === "Edm.Boolean") {
+                    const options = field.allowedValues ? field.allowedValues.map((a) => ({ value: String(a.value), label: a.label ?? String(a.value) })) : [{ value: "true", label: "Yes" }, { value: "false", label: "No" }];
+                    input = this.#choice(`${node.id}-value`, `${name}: value`, node.text, options, change, error);
+                }
+                else
+                    input = this.#input(node, name, field?.type === "Edm.Date" && node.op !== "in" ? "date" : "text", error, field?.type === "Edm.DateTimeOffset" ? "Timestamp with offset" : "Value", inputKind(field).inputmode ?? "");
+            }
+        }
+        const modeChoice = this.#choice(`${node.id}-mode`, `${name}: compare with`, node.mode, modes, (mode) => {
+            model.change(node.id, { mode: mode });
+            this.#focus = { id: node.id, action: mode };
+        }, error);
+        return html `<div class="aster-filter-value" data-mode=${node.mode}>
+      ${node.mode !== "value" ? modeChoice : nothing}${input}
+      ${node.mode === "value" && modes.length > 1 ? html `<details class="aster-filter-comparison"><summary>Compare with…</summary>${modeChoice}</details>` : nothing}
+      ${["contains", "startswith", "endswith"].includes(node.op) ? html `<label><input type="checkbox" .checked=${node.caseInsensitive} @change=${(e) => model.change(node.id, { caseInsensitive: e.target.checked })}>Ignore case</label>` : nothing}
+    </div>`;
+    }
+    #input(node, name, type, error, placeholder, keyboard = "") {
+        return inputView({ id: `${this.#id}-${node.id}-value`, label: `${name}: value`, type, value: node.text, keyboard, placeholder,
+            invalid: error !== undefined, ...(error ? { describedBy: error } : {}), input: (text) => this.#model.value.change(node.id, { text }) });
+    }
+    #options(field) {
+        if (field?.allowedValues)
+            return field.allowedValues.map((o) => ({ value: o.value, label: o.label ?? String(o.value) }));
+        return field?.type === "Edm.Boolean" ? [{ value: true, label: "Yes" }, { value: false, label: "No" }] : undefined;
+    }
+    #many(node, field, name, error) {
+        let values = [];
+        try {
+            const parsed = JSON.parse(node.text);
+            if (Array.isArray(parsed))
+                values = parsed;
+        }
+        catch { /* The draft remains invalid until a choice is made. */ }
+        const options = this.#options(field) ?? [];
+        return html `<div class="aster-filter-choices">${manyView({ label: `${name}: values`, options: [...options, ...(field.nullable ? [{ value: null, label: "Empty (null)" }] : [])], values,
+            invalid: error !== undefined, ...(error ? { describedBy: error } : {}), readOnly: this.#readOnly.value !== undefined,
+            change: (values) => this.#model.value.change(node.id, { text: JSON.stringify(values) }) })}
+      ${values.length ? nothing : html `<span class="aster-hint">Choose one or more values.</span>`}</div>`;
+    }
+    #list(node, field, name, error) {
+        let values = [];
+        try {
+            const parsed = JSON.parse(node.text);
+            if (Array.isArray(parsed))
+                values = parsed;
+        }
+        catch { /* Validation retains the malformed draft. */ }
+        const cached = this.#lists.get(node.id);
+        const text = cached?.encoded === node.text ? cached.text : values.filter((v) => v !== null).join("\n");
+        const includeNull = values.includes(null);
+        const write = (text, nulls) => {
+            const values = text === "" ? [] : text.split("\n").map((line) => {
+                switch (field?.type) {
+                    case "Edm.Boolean": return line === "true" ? true : line === "false" ? false : line;
+                    case "Edm.Byte":
+                    case "Edm.SByte":
+                    case "Edm.Int16":
+                    case "Edm.Int32":
+                    case "Edm.Single":
+                    case "Edm.Double":
+                        return line.trim() && Number.isFinite(Number(line)) ? Number(line) : line;
+                    default: return line;
+                }
+            });
+            if (nulls)
+                values.push(null);
+            const encoded = JSON.stringify(values);
+            this.#lists.set(node.id, { text, encoded });
+            this.#model.value.change(node.id, { text: encoded });
+        };
+        return html `<div class="aster-filter-list"><label class="aster-field aster-field-prose" data-ring-owner>
+      <span>Values, one per line${field?.type === "Edm.Boolean" ? " (true or false)" : ""}</span>
+      <textarea rows="3" aria-label=${`${name}: values, one per line`} .value=${live(text)} aria-invalid=${error ? "true" : nothing} aria-describedby=${error ?? nothing}
+        @input=${(e) => write(e.target.value, includeNull)}></textarea></label>
+      <label><input type="checkbox" .checked=${includeNull} @change=${(e) => write(text, e.target.checked)}>Include empty (null) values</label>
+    </div>`;
+    }
+    #relative(node, name, error) {
+        let value = {};
+        try {
+            const parsed = JSON.parse(node.text);
+            if (parsed && typeof parsed === "object" && !Array.isArray(parsed))
+                value = parsed;
+        }
+        catch { /* Validation retains the malformed draft. */ }
+        const write = (patch) => {
+            this.#customRelative.value = new Set([...this.#customRelative.peek(), node.id]);
+            this.#model.value.change(node.id, { text: JSON.stringify({ relative: "today", ...value, ...patch }) });
+        };
+        return html `<div class="aster-filter-relative">
+      ${this.#choice(`${node.id}-base`, `${name}: relative base`, String(value.relative ?? "today"), [{ value: "today", label: "Today" }, { value: "now", label: "Now" }], (relative) => write({ relative }), error)}
+      ${["days", "weeks", "months"].map((unit) => html `<label class="aster-field" data-ring-owner><span>${unit} (+/−)</span>
+        <input type="number" step="1" aria-label=${`${name}: offset ${unit}`} aria-invalid=${error ? "true" : nothing} aria-describedby=${error ?? nothing}
+          .value=${live(String(value[unit] ?? 0))} @input=${(e) => { const text = e.target.value; write({ [unit]: text.trim() ? Number(text) : "" }); }}></label>`)}
+      ${this.#choice(`${node.id}-align`, `${name}: align date`, String(value.startOf ?? "none"), [{ value: "none", label: "No alignment" }, { value: "week", label: "Start of week" }, { value: "month", label: "Start of month" }], (startOf) => write({ startOf: startOf === "none" ? undefined : startOf }), error)}
+      <span class="aster-hint">Negative offsets go back; positive offsets go forward. Dates use UTC.</span>
+    </div>`;
+    }
+    #add(parent, kind) {
+        const id = this.#model.value.add(parent, kind);
+        this.#focus = { id };
+    }
+    #remove(id) {
+        const root = this.#model.value.root.peek();
+        const parentOf = (n) => n.kind === "condition" ? undefined : n.children.some((c) => c.id === id) ? n.id : n.children.map(parentOf).find((p) => p !== undefined);
+        this.#focus = { id: parentOf(root) ?? root.id, action: "add" };
+        this.#model.value.remove(id);
+        const ids = new Set();
+        const collect = (n) => { ids.add(n.id); if (n.kind !== "condition")
+            n.children.forEach(collect); };
+        collect(this.#model.value.root.peek());
+        for (const key of this.#choices.keys())
+            if (!ids.has(key.split("-")[0]))
+                this.#choices.delete(key);
+        for (const key of this.#lists.keys())
+            if (!ids.has(key))
+                this.#lists.delete(key);
+        this.#customRelative.value = new Set([...this.#customRelative.peek()].filter((id) => ids.has(id)));
+    }
+    #apply() {
+        const model = this.#model.value;
+        const result = model?.result.peek();
+        if (!model || !result?.valid)
+            return;
+        if (this.emit("apply", result.criteria))
+            model.apply();
+    }
+    updated() {
+        const focus = this.#focus;
+        if (!focus)
+            return;
+        const node = this.querySelector(`[data-clause="${CSS.escape(focus.id)}"]`);
+        let target;
+        switch (focus.action) {
+            case "add":
+                target = node?.querySelector("[data-action=add]");
+                break;
+            case "field":
+            case "relative":
+            case "value": {
+                const suffix = focus.action === "field" ? "other" : focus.action;
+                target = node?.querySelector(`#${CSS.escape(`${this.#id}-${focus.id}-${suffix}`)}`)
+                    ?? node?.querySelector(".aster-filter-value input, .aster-filter-value textarea, .aster-filter-value [role=combobox]");
+                break;
+            }
+            default: target = node?.querySelector("[role=combobox], input, button");
+        }
+        target?.focus();
+        this.#focus = undefined;
+    }
+}
+define("aster-filter-builder", FilterBuilder);