cx 26.6.0 → 26.7.1

package/src/ui/Rescope.ts

@@ -1,50 +1,50 @@
-import { Widget } from "./Widget";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { Binding } from "../data/Binding";
-import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-import { isObject } from "../util/isObject";
-import { StructuredProp } from "./Prop";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-
-export interface RescopeConfig extends PureContainerConfig {
-   bind: string | AccessorChain<any>;
-   rootName?: string | AccessorChain<any>;
-   rootAlias?: string | AccessorChain<any>;
-   data?: StructuredProp;
-}
-
-export class Rescope extends PureContainerBase<RescopeConfig> {
-   declare bind: string;
-   declare binding: any;
-   declare rootAlias?: string;
-   declare rootName: string;
-   declare data?: any;
-
-   init() {
-      this.binding = Binding.get(this.bind);
-      if (this.rootAlias) this.rootName = this.rootAlias;
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new ZoomIntoPropertyView({
-         store: instance.parentStore,
-         binding: this.binding,
-         rootName: this.rootName,
-         nestedData: isObject(this.data)
-            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
-            : undefined,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-
-Widget.alias("rescope", Rescope);
+import { Widget } from "./Widget";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+import { StructuredProp } from "./Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export interface RescopeConfig extends PureContainerConfig {
+   bind: string | AccessorChain<any>;
+   rootName?: string | AccessorChain<any>;
+   rootAlias?: string | AccessorChain<any>;
+   data?: StructuredProp;
+}
+
+export class Rescope extends PureContainerBase<RescopeConfig> {
+   declare bind: string;
+   declare binding: any;
+   declare rootAlias?: string;
+   declare rootName: string;
+   declare data?: any;
+
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : undefined,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);

package/src/ui/Restate.tsx

@@ -33,6 +33,12 @@ export interface RestateConfig extends PureContainerConfig {
    /** Set to `true` to disable batching of updates. */
    immediate?: boolean;
 
+   /** Cap re-entrant synchronous updates on the detached `Cx` this Restate renders: once a burst of
+    *  back-to-back updates gets too deep, defer the excess to the coalesced branch instead of updating
+    *  synchronously. Avoids React's "Maximum update depth exceeded" on very large synchronous render bursts.
+    *  Only applies in `detached` mode (a non-detached Restate has no `Cx` of its own). Off by default. */
+   limitSyncBursts?: boolean;
+
    /** Error handler callback. */
    onError?: (error: Error, instance: Instance) => void;
 
@@ -53,6 +59,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
    declare onError?: (error: Error, instance: Instance) => void;
    declare waitForIdle: boolean;
    declare immediate: boolean;
+   declare limitSyncBursts: boolean;
 
    declareData(...args: any[]) {
       return super.declareData(...args, {
@@ -138,6 +145,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
             deferredUntilIdle={instance.data.deferredUntilIdle}
             idleTimeout={instance.data.idleTimeout}
             immediate={this.immediate}
+            limitSyncBursts={this.limitSyncBursts}
             cultureInfo={instance.cultureInfo}
          />
       );
@@ -147,6 +155,7 @@ export class Restate<Config extends RestateConfig = RestateConfig> extends PureC
 Restate.prototype.detached = false;
 Restate.prototype.waitForIdle = false;
 Restate.prototype.immediate = false;
+Restate.prototype.limitSyncBursts = false;
 Restate.prototype.culture = null;
 
 export const PrivateStore = Restate;

package/src/ui/adapter/ArrayAdapter.ts

@@ -1,6 +1,6 @@
 import { DataAdapter, DataAdapterRecord, DataAdapterConfig } from "./DataAdapter";
 import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { sorter } from "../../data/comparer";
+import { sorter, type ExtendedSorter } from "../../data/comparer";
 import { isArray } from "../../util/isArray";
 import { ArrayElementView } from "../../data/ArrayElementView";
 import { Accessor, getAccessor } from "../../data/getAccessor";
@@ -9,7 +9,7 @@ import { isDefined, isObject } from "../../util";
 import { RenderingContext } from "../RenderingContext";
 import { Instance } from "../Instance";
 import { View } from "../../data/View";
-import { Prop, Sorter, CollatorOptions } from "../Prop";
+import { Prop, CollatorOptions } from "../Prop";
 
 export interface RecordStoreCache {
    recordStoreCache: WeakMap<any, View>;
@@ -26,10 +26,8 @@ export interface ArrayAdapterConfig extends DataAdapterConfig {
    preserveOrder?: boolean;
 }
 
-export interface ExtendedSorter extends Sorter {
-   comparer?: (a: any, b: any) => number;
-   sortOptions?: CollatorOptions;
-}
+// Re-exported for back-compat; the canonical definition lives in `data/comparer`.
+export type { ExtendedSorter } from "../../data/comparer";
 
 export interface ResolvedSorter {
    getter: (x: any) => any;
@@ -213,9 +211,9 @@ export class ArrayAdapter<T = any> extends DataAdapter<T> {
       }
    }
 
-   public sort(sorters?: Sorter[] | ExtendedSorter[]): void {
+   public sort(sorters?: ExtendedSorter[]): void {
       if (sorters) {
-         this.buildSorter(sorters as ExtendedSorter[]);
+         this.buildSorter(sorters);
       }
    }
 }

package/src/ui/adapter/GroupAdapter.spec.ts

@@ -39,4 +39,79 @@ describe("GroupAdapter", () => {
 
       assert.deepStrictEqual(newKeys, [], `Grouping config was mutated. New keys: ${newKeys.join(", ")}`);
    });
+
+   // Region totals after aggregation: A=10, B=30, C=20.
+   const records = [
+      { region: "A", sales: 10, product: "p3" },
+      { region: "B", sales: 30, product: "p1" },
+      { region: "C", sales: 20, product: "p2" },
+   ];
+
+   const baseGrouping: GroupingConfig = {
+      key: { region: { bind: "$record.region" } },
+      aggregates: { total: { type: "sum", value: { bind: "$record.sales" } } },
+   };
+
+   // Runs the full grouping pipeline and returns the resulting group order (region keys).
+   function groupOrder(grouping: GroupingConfig[], options?: { sortGroupsBySorters?: boolean }, sorters?: any[]) {
+      const adapter = new GroupAdapter({ groupings: grouping, ...options });
+      adapter.init();
+      if (sorters) adapter.sort(sorters);
+      const result = adapter.getRecords({} as any, {} as any, records, new Store({ data: {} }));
+      return result.filter((r) => r.type === "group-header").map((r: any) => r.group.region);
+   }
+
+   it("sorts groups by an aggregate via sortField/sortDirection", () => {
+      assert.deepStrictEqual(groupOrder([{ ...baseGrouping, sortField: "total", sortDirection: "DESC" }]), [
+         "B",
+         "C",
+         "A",
+      ]);
+   });
+
+   it("sorts groups by a key field via sortField", () => {
+      assert.deepStrictEqual(groupOrder([{ ...baseGrouping, sortField: "region", sortDirection: "DESC" }]), [
+         "C",
+         "B",
+         "A",
+      ]);
+   });
+
+   it("supports a multi-field sorters array", () => {
+      assert.deepStrictEqual(groupOrder([{ ...baseGrouping, sorters: [{ field: "total", direction: "ASC" }] }]), [
+         "A",
+         "C",
+         "B",
+      ]);
+   });
+
+   it("defaults to ascending sort by key", () => {
+      assert.deepStrictEqual(groupOrder([baseGrouping]), ["A", "B", "C"]);
+   });
+
+   it("lets an explicit comparer win over sortField", () => {
+      // Custom comparer sorts groups by total ascending, despite sortField asking for DESC.
+      const comparer = (a: any, b: any) => a.aggregates.total - b.aggregates.total;
+      assert.deepStrictEqual(groupOrder([{ ...baseGrouping, comparer, sortField: "total", sortDirection: "DESC" }]), [
+         "A",
+         "C",
+         "B",
+      ]);
+   });
+
+   it("reorders groups by the active column sort when sortGroupsBySorters is set", () => {
+      // The record-level value selector must be ignored; the column field drives group order.
+      const order = groupOrder([baseGrouping], { sortGroupsBySorters: true }, [
+         { field: "total", direction: "DESC", value: () => 999 },
+      ]);
+      assert.deepStrictEqual(order, ["B", "C", "A"]);
+   });
+
+   it("keeps configured group order when the sorted column is not a group field", () => {
+      // `product` is neither a key nor an aggregate, so groups keep their default (key ASC) order.
+      const order = groupOrder([baseGrouping], { sortGroupsBySorters: true }, [
+         { field: "product", direction: "DESC" },
+      ]);
+      assert.deepStrictEqual(order, ["A", "B", "C"]);
+   });
 });

package/src/ui/adapter/GroupAdapter.ts

@@ -4,11 +4,13 @@ import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
 import { View } from "../../data/View";
 import { isDataRecord } from "../../util";
 import { isArray } from "../../util/isArray";
+import { isDefined } from "../../util/isDefined";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
 import { Culture } from "../Culture";
 import { Instance } from "../Instance";
 import { Prop, SortDirection, Sorter, StructuredProp } from "../Prop";
 import { RenderingContext } from "../RenderingContext";
-import { ArrayAdapter, ArrayAdapterConfig, RecordStoreCache } from "./ArrayAdapter";
+import { ArrayAdapter, ArrayAdapterConfig, ExtendedSorter, RecordStoreCache } from "./ArrayAdapter";
 import { DataAdapterRecord } from "./DataAdapter";
 
 export interface GroupKey {
@@ -21,7 +23,17 @@ export interface GroupingConfig {
    text?: Prop<string>;
    includeHeader?: boolean;
    includeFooter?: boolean;
+   /** Custom group comparer. Takes precedence over `sortField`/`sortDirection`/`sorters`. */
    comparer?: ((a: any, b: any) => number) | null;
+   /**
+    * Sort groups by a single field resolved against the group's `key`, `aggregates` and `name`.
+    * Use an aggregate alias (e.g. `"total"`) to sort by an aggregate, or a key field to sort by key.
+    */
+   sortField?: string;
+   /** Sort direction used together with `sortField`. Defaults to `"ASC"`. */
+   sortDirection?: SortDirection;
+   /** Multi-field group sorting. Each sorter's `field` is resolved against the group's `key`, `aggregates` and `name`. */
+   sorters?: Sorter[];
    header?: any;
    footer?: any;
 }
@@ -50,6 +62,8 @@ export interface GroupAdapterConfig extends ArrayAdapterConfig {
    groupRecordsName?: string;
    groupings?: GroupingConfig[] | null;
    groupName?: string;
+   /** When enabled, the active record sorters also reorder groups (resolved against each group's key/aggregates/name). */
+   sortGroupsBySorters?: boolean;
 }
 
 export class GroupAdapter<T = any> extends ArrayAdapter<T> {
@@ -58,11 +72,41 @@ export class GroupAdapter<T = any> extends ArrayAdapter<T> {
    declare public groupRecordsName?: string;
    declare public groupings?: ResolvedGrouping[] | null;
    declare public groupName: string;
+   declare public sortGroupsBySorters?: boolean;
+
+   /**
+    * Per-level comparer derived from the active record sorters, used to reorder groups when
+    * `sortGroupsBySorters` is set. A level's entry is `null` when no active sorter maps to that
+    * level's key/aggregate, so the grouping's own configured order is kept.
+    */
+   protected groupSortComparers?: (((a: any, b: any) => number) | null)[];
 
    constructor(config?: GroupAdapterConfig) {
       super(config);
    }
 
+   public sort(sorters?: ExtendedSorter[]): void {
+      super.sort(sorters);
+
+      // When enabled, derive a group comparer from the active record sorters so that interactive
+      // column sorting also reorders the groups. A column only reorders groups at levels where its
+      // field is a group key or aggregate; other levels keep their configured order. The record-level
+      // value selector is ignored — the field is resolved against the group's key/aggregates/name.
+      if (this.sortGroupsBySorters && this.groupings) {
+         const cultureComparer = this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined;
+         const colSorters: ExtendedSorter[] = isNonEmptyArray(sorters)
+            ? sorters.map((s) => ({ field: s.field, direction: s.direction, comparer: s.comparer }))
+            : [];
+
+         this.groupSortComparers = this.groupings.map((g) => {
+            if (colSorters.length === 0) return null;
+            const fields = groupFieldNames(g, this.aggregates);
+            const applicable = colSorters.filter((s) => s.field && fields.has(s.field));
+            return applicable.length > 0 ? buildGroupComparer(applicable, cultureComparer) : null;
+         });
+      }
+   }
+
    public init(): void {
       super.init();
 
@@ -116,8 +160,13 @@ export class GroupAdapter<T = any> extends ArrayAdapter<T> {
       grouper.processAll(records);
       let results = grouper.getResults();
 
-      if (grouping.comparer && !this.preserveOrder) {
-         results.sort(grouping.comparer);
+      // An active column sort that maps to this level's key/aggregate (when `sortGroupsBySorters` is
+      // enabled) takes over; otherwise the grouping's configured comparer (or implicit key order) applies.
+      const dynamicComparer = this.sortGroupsBySorters ? this.groupSortComparers?.[level] : undefined;
+      const comparer = dynamicComparer ?? grouping.comparer;
+
+      if (comparer && !this.preserveOrder) {
+         results.sort(comparer);
       }
 
       results.forEach((gr) => {
@@ -208,15 +257,22 @@ export class GroupAdapter<T = any> extends ArrayAdapter<T> {
                g.text,
             );
 
+            const cultureComparer = this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined;
+
+            // Sort groups by an aggregate/key/name through `sortField`/`sortDirection` or a `sorters` array.
+            let sortSorters: Sorter[] | null = null;
+            if (isNonEmptyArray(g.sorters)) sortSorters = g.sorters!;
+            else if (g.sortField) sortSorters = [{ field: g.sortField, direction: g.sortDirection ?? "ASC" }];
+
+            // `comparer`, `sortField`/`sorters` and the implicit key order are equivalent alternatives; an
+            // explicit `comparer` wins, then declarative sorters, then sorting by key in declaration order.
             const comparer =
                g.comparer ??
-               (groupSorters.length > 0
-                  ? getComparer(
-                       groupSorters,
-                       (x: any) => x.key,
-                       this.sortOptions ? Culture.getComparer(this.sortOptions) : undefined,
-                    )
-                  : null);
+               (sortSorters
+                  ? buildGroupComparer(sortSorters, cultureComparer)
+                  : groupSorters.length > 0
+                    ? getComparer(groupSorters, (x: any) => x.key, cultureComparer)
+                    : null);
 
             return {
                ...g,
@@ -233,6 +289,43 @@ export class GroupAdapter<T = any> extends ArrayAdapter<T> {
 
 GroupAdapter.prototype.groupName = "$group";
 GroupAdapter.prototype.preserveOrder = false;
+GroupAdapter.prototype.sortGroupsBySorters = false;
+
+// The set of fields a group can be sorted by at a given level: its key fields, its aggregate aliases
+// and the group name. Used to decide whether an active column sort applies to that grouping level.
+function groupFieldNames(grouping: ResolvedGrouping, adapterAggregates?: StructuredProp): Set<string> {
+   const names = new Set<string>();
+   for (const k of grouping.grouper.keys) names.add(k.name);
+   const aggregates = { ...adapterAggregates, ...grouping.aggregates };
+   for (const a in aggregates) names.add(a);
+   names.add("name");
+   names.add("$name");
+   return names;
+}
+
+// Reads a sort field straight from the GroupResult — first its key fields, then its aggregates, then
+// its name. Returns a plain selector so groups can be sorted without cloning the result per comparison.
+function groupFieldSelector(field: string): (gr: any) => any {
+   if (field === "name" || field === "$name") return (gr) => gr?.name;
+   return (gr) => {
+      if (gr?.key && field in gr.key) return gr.key[field];
+      if (gr?.aggregates && field in gr.aggregates) return gr.aggregates[field];
+      return undefined;
+   };
+}
+
+// Builds a group comparer from a list of sorters. Each sorter resolves by its explicit `value`
+// selector, or by `field` looked up against the group's key/aggregates/name.
+function buildGroupComparer(
+   sorters: ExtendedSorter[],
+   cultureComparer?: (a: any, b: any) => number,
+): (a: any, b: any) => number {
+   return getComparer(
+      sorters.map((s) => (isDefined(s.value) || !s.field ? s : { ...s, value: groupFieldSelector(s.field) })),
+      undefined,
+      cultureComparer,
+   );
+}
 
 function serializeKey(data: any): string {
    if (isDataRecord(data)) {

package/src/ui/exprHelpers.ts

@@ -1,96 +1,96 @@
-import { computable } from "../data/computable";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-import { Selector } from "../data/Selector";
-import { Format } from "../util/Format";
-import { expr } from "./expr";
-
-/** Returns a selector that converts the value to boolean using !! */
-export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !!x);
-}
-
-/** Returns a selector that checks if the value is falsy using ! */
-export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !x);
-}
-
-/** Returns a selector that checks if the value is strictly true (=== true) */
-export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === true);
-}
-
-/** Returns a selector that checks if the value is strictly false (=== false) */
-export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === false);
-}
-
-/** Returns a selector that checks if the value is not null or undefined (x != null) */
-export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => x != null);
-}
-
-/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
-export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x == null || x.length === 0);
-}
-
-/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
-export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x != null && x.length > 0);
-}
-
-/** Returns a selector that checks if the value is less than the given value */
-export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x < value);
-}
-
-/** Returns a selector that checks if the value is less than or equal to the given value */
-export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x <= value);
-}
-
-/** Returns a selector that checks if the value is greater than the given value */
-export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x > value);
-}
-
-/** Returns a selector that checks if the value is greater than or equal to the given value */
-export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x >= value);
-}
-
-/** Returns a selector that checks if the value equals the given value using == */
-export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x == value);
-}
-
-/** Returns a selector that checks if the value does not equal the given value using != */
-export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x != value);
-}
-
-/** Returns a selector that checks if the value strictly equals the given value using === */
-export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x === value);
-}
-
-/** Returns a selector that checks if the value strictly does not equal the given value using !== */
-export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x !== value);
-}
-
-/** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2"
- * @param arg - The accessor chain to the value
- * @param fmt - The format string
- * @param nullText - Optional text to display for null/undefined values
- * @example
- * format(m.price, "n;2") // formats as number with 2 decimal places
- * format(m.date, "d") // formats as date
- * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
- * format(m.value, "n;2", "N/A") // shows "N/A" for null values
- */
-export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
-   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
-   return computable(arg, (x) => Format.value(x, f));
-}
+import { computable } from "../data/computable";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Format } from "../util/Format";
+import { expr } from "./expr";
+
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !!x);
+}
+
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !x);
+}
+
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === true);
+}
+
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === false);
+}
+
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => x != null);
+}
+
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x == null || x.length === 0);
+}
+
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x != null && x.length > 0);
+}
+
+/** Returns a selector that checks if the value is less than the given value */
+export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x < value);
+}
+
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x <= value);
+}
+
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x > value);
+}
+
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x >= value);
+}
+
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x == value);
+}
+
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x != value);
+}
+
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x === value);
+}
+
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x !== value);
+}
+
+/** Returns a selector that formats the value using the specified format string.
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
+ * @example
+ * format(m.price, "n;2") // formats as number with 2 decimal places
+ * format(m.date, "d") // formats as date
+ * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
+ */
+export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
+   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+   return computable(arg, (x) => Format.value(x, f));
+}

package/src/widgets/DocumentTitle.ts

@@ -80,6 +80,8 @@ export class DocumentTitle extends Widget<DocumentTitleConfig> {
    }
 
    prepare(context: RenderingContext, instance: Instance): void {
+      if (typeof document == "undefined") return;
+
       if ((context as any).documentTitle.activeInstance == instance)
          document.title = (context as any).documentTitle.title;
    }