@x-tech-laboratories/x-libs 0.6.0 → 0.8.0

package/dist/web/react/toasts.d.ts

@@ -14,4 +14,16 @@ export interface ToastOptions {
 }
 export type ToastCloseReason = "timeout" | "dismissed" | "action" | "closed";
 export declare function toast(message: string, options?: ToastOptions): () => void;
+export interface UndoableOptions {
+    commit: () => void;
+    undo: () => void;
+    duration_in_milliseconds?: number;
+    undo_label?: string;
+}
+export interface Undoable {
+    finish: () => void;
+    undo: () => void;
+    readonly settled: boolean;
+}
+export declare function undoable(message: string, { commit, undo, duration_in_milliseconds, undo_label }: UndoableOptions): Undoable;
 export declare function Toasts(): import("react").JSX.Element;

package/dist/web/react/toasts.js

@@ -25,6 +25,37 @@ export function toast(message, options = {}) {
         setTimeout(() => close_toast(id, "timeout"), options.duration_in_milliseconds ?? 6000);
     return () => close_toast(id, "closed");
 }
+// Shows the message with an Undo button, then either undoes or commits the action, exactly once.
+export function undoable(message, { commit, undo, duration_in_milliseconds = 8000, undo_label = "Undo" }) {
+    let settled = false;
+    let undo_wanted = false;
+    const settle = (reason) => {
+        if (settled)
+            return;
+        settled = true;
+        if (reason === "action" || undo_wanted)
+            undo();
+        else
+            commit();
+    };
+    const close = toast(message, {
+        action: { text: undo_label, run: () => { } },
+        duration_in_milliseconds,
+        on_close: settle,
+    });
+    return {
+        finish: () => close(),
+        undo: () => {
+            if (settled)
+                return;
+            undo_wanted = true;
+            close();
+        },
+        get settled() {
+            return settled;
+        },
+    };
+}
 // ── Host ─────────────────────────────────────────────────────────────────────
 // Where toasts stack; the Shell holds one, and a page without the Shell renders its own.
 export function Toasts() {

package/dist/web/react/tree.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEvent, type ReactNode } from "react";
+import { type DragEvent, type MouseEvent, type ReactNode } from "react";
 import { type DropPlacement, type TreeItem, type TreeMove } from "../tree.ts";
 export type { DropPlacement, TreeItem, TreeMove } from "../tree.ts";
 interface TreeProps<Item extends TreeItem> {
@@ -10,7 +10,10 @@ interface TreeProps<Item extends TreeItem> {
     collapsed: ReadonlySet<string>;
     on_collapsed_change: (collapsed: Set<string>) => void;
     selected_id?: string | null;
+    selected_ids?: ReadonlySet<string>;
     on_select?: (item: Item) => void;
+    on_activate?: (item: Item) => void;
+    row_class?: (item: Item) => string | undefined;
     on_move?: (item: Item, move: TreeMove) => void;
     can_drop?: (dragged: Item, target: Item, placement: DropPlacement) => boolean;
     allow_inside?: boolean;
@@ -19,5 +22,7 @@ interface TreeProps<Item extends TreeItem> {
         form: ReactNode;
     } | null;
     on_context_menu?: (event: MouseEvent<HTMLElement>, item: Item) => void;
+    accepts_external?: (event: DragEvent<HTMLElement>, item: Item) => boolean;
+    on_external_drop?: (event: DragEvent<HTMLElement>, item: Item) => void;
 }
-export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, on_select, on_move, can_drop, allow_inside, new_item, on_context_menu, }: TreeProps<Item>): import("react").JSX.Element;
+export declare function Tree<Item extends TreeItem>({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id, selected_ids, on_select, on_activate, row_class: class_of, on_move, can_drop, allow_inside, new_item, on_context_menu, accepts_external, on_external_drop, }: TreeProps<Item>): import("react").JSX.Element;

package/dist/web/react/tree.js

@@ -7,7 +7,7 @@ const KEY_MOVES = { ArrowUp: "up", ArrowDown: "down", ArrowRight: "indent", Arro
 function visible_nodes(nodes, collapsed) {
     return nodes.flatMap((node) => [node, ...(collapsed.has(node.item.id) ? [] : visible_nodes(node.children, collapsed))]);
 }
-export function Tree({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id = null, on_select, on_move, can_drop, allow_inside = true, new_item = null, on_context_menu, }) {
+export function Tree({ items, label, render_item, render_extra, name_of, collapsed, on_collapsed_change, selected_id = null, selected_ids, on_select, on_activate, row_class: class_of, on_move, can_drop, allow_inside = true, new_item = null, on_context_menu, accepts_external, on_external_drop, }) {
     const [focused_id, set_focused_id] = useState(null);
     const [dragged_id, set_dragged_id] = useState(null);
     const [drop_target, set_drop_target] = useState(null);
@@ -15,7 +15,9 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
     const moves_focus = useRef(false);
     const roots = nest([...items].sort(by_position), items);
     const shown = visible_nodes(roots, collapsed);
-    const tab_stop = [focused_id, selected_id].find((id) => id !== null && shown.some((node) => node.item.id === id)) ?? shown[0]?.item.id;
+    const is_selected = (id) => selected_id === id || Boolean(selected_ids?.has(id));
+    const first_selected = shown.find((node) => selected_ids?.has(node.item.id))?.item.id ?? null;
+    const tab_stop = [focused_id, selected_id, first_selected].find((id) => id !== null && shown.some((node) => node.item.id === id)) ?? shown[0]?.item.id;
     useEffect(() => {
         if (!moves_focus.current || focused_id === null)
             return;
@@ -53,17 +55,29 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
         const placement = placement_at(box.height > 0 ? (event.clientY - box.top) / box.height : 0.5, allow_inside);
         return is_allowed(dragged, target, placement) ? placement : null;
     }
+    // A drag from outside the tree, such as a task, lands inside the row that accepts it.
+    function accepts_from_outside(event, target) {
+        return dragged_id === null && Boolean(accepts_external?.(event, target));
+    }
     function drag_over(event, target) {
-        const placement = placement_over(event, target);
+        const external = accepts_from_outside(event, target);
+        const placement = external ? "inside" : placement_over(event, target);
         if (!placement)
             return;
         event.preventDefault();
-        if (event.dataTransfer)
+        // An outside drag keeps the effect its source allowed, which may not include a move.
+        if (event.dataTransfer && !external)
             event.dataTransfer.dropEffect = "move";
         if (drop_target?.id !== target.id || drop_target.placement !== placement)
             set_drop_target({ id: target.id, placement });
     }
     function drop(event, target) {
+        if (accepts_from_outside(event, target)) {
+            event.preventDefault();
+            end_drag();
+            on_external_drop?.(event, target);
+            return;
+        }
         const placement = placement_over(event, target);
         const dragged = items.find((item) => item.id === dragged_id);
         end_drag();
@@ -147,22 +161,23 @@ export function Tree({ items, label, render_item, render_extra, name_of, collaps
         const new_child = new_item_row(item.id);
         const row_class = [
             "tree-row",
+            class_of?.(item),
             dragged_id === item.id && "dragging",
             drop_target?.id === item.id && `drop-${drop_target.placement}`,
         ].filter(Boolean).join(" ");
         return (_jsxs("li", { ref: (element) => { if (element)
                 row_elements.current.set(item.id, element);
             else
-                row_elements.current.delete(item.id); }, role: "treeitem", className: "tree-item", "data-id": item.id, "aria-level": depth + 1, "aria-expanded": has_children ? !is_collapsed : undefined, "aria-selected": on_select ? selected_id === item.id : undefined, tabIndex: tab_stop === item.id ? 0 : -1, onFocus: (event) => { if (event.target === event.currentTarget)
+                row_elements.current.delete(item.id); }, role: "treeitem", className: "tree-item", "data-id": item.id, "aria-level": depth + 1, "aria-expanded": has_children ? !is_collapsed : undefined, "aria-selected": on_select || selected_ids ? is_selected(item.id) : undefined, tabIndex: tab_stop === item.id ? 0 : -1, onFocus: (event) => { if (event.target === event.currentTarget)
                 set_focused_id(item.id); }, children: [_jsxs("div", { className: row_class, draggable: on_move ? true : undefined, onDragStart: (event) => {
                         event.dataTransfer?.setData("text/plain", item.id);
                         if (event.dataTransfer)
                             event.dataTransfer.effectAllowed = "move";
                         set_dragged_id(item.id);
                     }, onDragEnd: end_drag, onDragOver: (event) => drag_over(event, item), onDragLeave: () => { if (drop_target?.id === item.id)
-                        set_drop_target(null); }, onDrop: (event) => drop(event, item), onClick: () => { focus_row(item.id); on_select?.(item); }, onContextMenu: on_context_menu && ((event) => on_context_menu(event, item)), children: [has_children
+                        set_drop_target(null); }, onDrop: (event) => drop(event, item), onClick: () => { focus_row(item.id); on_select?.(item); }, onDoubleClick: on_activate && (() => on_activate(item)), onContextMenu: on_context_menu && ((event) => on_context_menu(event, item)), children: [has_children
                             ? (_jsx("button", { type: "button", className: "tree-toggle", tabIndex: -1, "aria-label": is_collapsed ? `Expand ${name}` : `Collapse ${name}`, onClick: (event) => { event.stopPropagation(); set_collapsed(item.id, !is_collapsed); }, children: _jsx("span", { "aria-hidden": "true", children: is_collapsed ? "▸" : "▾" }) }))
                             : _jsx("span", { className: "tree-toggle", "aria-hidden": "true" }), _jsx("span", { className: "tree-label", children: render_item(item) }), render_extra && _jsx("span", { className: "tree-extra", children: render_extra(item) })] }), ((has_children && !is_collapsed) || new_child) && (_jsxs("ul", { role: "group", className: "tree-children", children: [!is_collapsed && children.map((child) => branch(child, depth + 1)), new_child] }))] }, item.id));
     }
-    return (_jsxs("ul", { role: "tree", className: "tree", "aria-label": label, onKeyDown: key_down, children: [roots.map((node) => branch(node, 0)), new_item_row(null)] }));
+    return (_jsxs("ul", { role: "tree", className: "tree", "aria-label": label, "aria-multiselectable": selected_ids ? true : undefined, onKeyDown: key_down, children: [roots.map((node) => branch(node, 0)), new_item_row(null)] }));
 }

package/dist/web/react/watch.d.ts

@@ -0,0 +1,3 @@
+import type { Watch } from "../watch.ts";
+export type { Watch } from "../watch.ts";
+export declare function use_watch(watch: Watch): number;

package/dist/web/react/watch.js

@@ -0,0 +1,5 @@
+// Redraws a component whenever a watch it reads is bumped.
+import { useSyncExternalStore } from "react";
+export function use_watch(watch) {
+    return useSyncExternalStore(watch.subscribe, watch.version);
+}

package/dist/web/selection.d.ts

@@ -0,0 +1,25 @@
+export type SelectionIntent = "replace" | "toggle" | "range" | "range-add";
+export declare function intent_for(modifiers: {
+    shift?: boolean;
+    ctrl?: boolean;
+}): SelectionIntent;
+export declare class Selection<Id = number> {
+    private readonly picked;
+    private anchor;
+    get size(): number;
+    has(id: Id): boolean;
+    ids(): Id[];
+    inspect(): {
+        size: number;
+        anchor: number | null;
+    };
+    clear(): void;
+    apply(ordered: readonly Id[], index: number, intent: SelectionIntent): void;
+    select_all(ordered: readonly Id[]): void;
+    invert(ordered: readonly Id[]): void;
+    retain(ordered: readonly Id[]): void;
+}
+export declare function toggled(picked: readonly string[], id: string): string[];
+export declare function with_range(order: readonly string[], picked: readonly string[], anchor_id: string | null, id: string): string[];
+export declare function still_shown(order: readonly string[], picked: readonly string[]): string[];
+export declare function row_after_key(key: string, current: number, last: number, rows_per_page: number): number | null;

package/dist/web/selection.js

@@ -0,0 +1,106 @@
+// Picking rows in a list: plain, Ctrl and Shift clicks, an anchor ranges measure from, and the row an arrow or page key moves to.
+export function intent_for(modifiers) {
+    if (modifiers.shift)
+        return modifiers.ctrl ? "range-add" : "range";
+    return modifiers.ctrl ? "toggle" : "replace";
+}
+// ── Selection ────────────────────────────────────────────────────────────────
+export class Selection {
+    picked = new Set();
+    anchor = null;
+    get size() {
+        return this.picked.size;
+    }
+    has(id) {
+        return this.picked.has(id);
+    }
+    ids() {
+        return [...this.picked];
+    }
+    // The picks and the anchor, for finding why a range came out wrong.
+    inspect() {
+        return { size: this.picked.size, anchor: this.anchor };
+    }
+    clear() {
+        this.picked.clear();
+        this.anchor = null;
+    }
+    // Applies a click on the row at index in the list as shown.
+    apply(ordered, index, intent) {
+        if (index < 0 || index >= ordered.length)
+            return;
+        const id = ordered[index];
+        if (intent === "replace") {
+            this.picked.clear();
+            this.picked.add(id);
+            this.anchor = index;
+            return;
+        }
+        if (intent === "toggle") {
+            if (this.picked.has(id))
+                this.picked.delete(id);
+            else
+                this.picked.add(id);
+            this.anchor = index;
+            return;
+        }
+        // The anchor stays put, so every extension measures from the same row.
+        const from = this.anchor ?? index;
+        const [low, high] = from <= index ? [from, index] : [index, from];
+        if (intent === "range")
+            this.picked.clear();
+        for (let row = low; row <= high; row += 1)
+            this.picked.add(ordered[row]);
+    }
+    select_all(ordered) {
+        for (const id of ordered)
+            this.picked.add(id);
+    }
+    invert(ordered) {
+        const next = ordered.filter((id) => !this.picked.has(id));
+        this.picked.clear();
+        for (const id of next)
+            this.picked.add(id);
+    }
+    // Drops picks no longer in the list, such as after a filter narrows it.
+    retain(ordered) {
+        const kept = new Set(ordered);
+        for (const id of this.picked)
+            if (!kept.has(id))
+                this.picked.delete(id);
+    }
+}
+// ── Ids ──────────────────────────────────────────────────────────────────────
+// The same picking as plain lists of ids held in an app's state, the anchor kept by id so it survives the rows moving between clicks.
+// Adds the id when missing and takes it out when there.
+export function toggled(picked, id) {
+    return picked.includes(id) ? picked.filter((each) => each !== id) : [...picked, id];
+}
+// Every id between the anchor and the id in the shown order, both included, added to those picked; just the id when the anchor is not shown.
+export function with_range(order, picked, anchor_id, id) {
+    const anchor_index = anchor_id === null ? -1 : order.indexOf(anchor_id);
+    const index = order.indexOf(id);
+    if (anchor_index === -1 || index === -1)
+        return [id];
+    const run = order.slice(Math.min(anchor_index, index), Math.max(anchor_index, index) + 1);
+    return [...picked.filter((each) => !run.includes(each)), ...run];
+}
+// Keeps only the picked ids still shown, in the shown order.
+export function still_shown(order, picked) {
+    const picked_ids = new Set(picked);
+    return order.filter((id) => picked_ids.has(id));
+}
+// ── Keys ─────────────────────────────────────────────────────────────────────
+// The row an arrow, page, Home or End key moves to, held inside the list, or null for any other key.
+export function row_after_key(key, current, last, rows_per_page) {
+    const clamp = (row) => Math.min(last, Math.max(0, row));
+    switch (key) {
+        case "ArrowDown": return clamp(current + 1);
+        case "ArrowUp": return clamp(current - 1);
+        case "PageDown": return clamp(current + rows_per_page);
+        case "PageUp": return clamp(current - rows_per_page);
+        case "Home": return 0;
+        case "End": return Math.max(0, last);
+        default: return null;
+    }
+}

package/dist/web/tables.d.ts

@@ -24,4 +24,5 @@ export declare function sort_after_click(sorting: readonly Sorting[], key: strin
 export declare function sorting_from(query: URLSearchParams, fallback: Sorting): Sorting;
 export declare function ordered_columns(saved_order: readonly string[], all_columns: readonly string[]): string[];
 export declare function move_column(order: readonly string[], column: string, target: string, after: boolean): string[];
+export declare function moved<Item>(items: readonly Item[], from: number, to: number): Item[];
 export declare function clamp_width(width: number, min?: number, max?: number): number;

package/dist/web/tables.js

@@ -74,6 +74,14 @@ export function move_column(order, column, target, after) {
     const index = rest.indexOf(target) + (after ? 1 : 0);
     return [...rest.slice(0, index), column, ...rest.slice(index)];
 }
+// Moves the item at from to to, such as for a list's up and down buttons.
+export function moved(items, from, to) {
+    if (from < 0 || from >= items.length)
+        return [...items];
+    const rest = items.filter((_, index) => index !== from);
+    rest.splice(Math.max(0, Math.min(to, rest.length)), 0, items[from]);
+    return rest;
+}
 // A width held between the column's narrowest and widest.
 export function clamp_width(width, min = 48, max = 960) {
     return Math.round(Math.min(max, Math.max(min, width)));

package/dist/web/tree.d.ts

@@ -13,20 +13,25 @@ export interface TreeMove {
     parent_id: string | null;
     position: number;
 }
+export interface DropOptions {
+    by_list_order?: boolean;
+}
 export declare function by_position<Item extends {
     position: number;
 }>(first: Item, second: Item): number;
 export declare function children_of<Item extends TreeItem>(parent_id: string | null, items: Item[]): Item[];
 export declare function subtree_ids(item_id: string, items: TreeItem[]): Set<string>;
 export declare function nest<Item extends TreeItem>(shown: Item[], all?: Item[]): TreeNode<Item>[];
+export declare function in_tree_order<Item extends TreeItem>(items: Item[], reversed?: boolean): Item[];
+export declare function path_names<Item extends TreeItem>(item: Item, items: Item[], name_of: (item: Item) => string): string[];
 export declare function placement_at(fraction_down: number, allow_inside: boolean): DropPlacement;
 export declare function can_drop(dragged_id: string, target_id: string, items: TreeItem[]): boolean;
 export declare function position_for_drop<Item extends {
     id: string;
     position: number;
-}>(dragged: Item, target: Item, placement: SidePlacement, items: Item[]): number;
-export declare function move_for_drop<Item extends TreeItem>(dragged: Item, target: Item, placement: DropPlacement, items: Item[]): TreeMove;
-export declare function moves_for_drop<Item extends TreeItem>(dragged: Item[], target: Item, placement: DropPlacement, items: Item[]): TreeMove[];
+}>(dragged: Item, target: Item, placement: SidePlacement, items: Item[], options?: DropOptions): number;
+export declare function move_for_drop<Item extends TreeItem>(dragged: Item, target: Item, placement: DropPlacement, items: Item[], options?: DropOptions): TreeMove;
+export declare function moves_for_drop<Item extends TreeItem>(dragged: Item[], target: Item, placement: DropPlacement, items: Item[], options?: DropOptions): TreeMove[];
 export type KeyMove = "up" | "down" | "indent" | "outdent";
 export declare function key_drop<Item extends TreeItem>(item: Item, direction: KeyMove, items: Item[]): {
     target: Item;

package/dist/web/tree.js

@@ -34,6 +34,27 @@ export function nest(shown, all = shown) {
     }
     return top_nodes;
 }
+// Every item in tree order: each followed by the items below it, siblings by position, each set of siblings reversed when asked.
+export function in_tree_order(items, reversed = false) {
+    const sorted = [...items].sort(by_position);
+    if (reversed)
+        sorted.reverse();
+    const walk = (nodes) => nodes.flatMap((node) => [node.item, ...walk(node.children)]);
+    const ordered = walk(nest(sorted, items));
+    const reached = new Set(ordered);
+    return [...ordered, ...sorted.filter((item) => !reached.has(item))];
+}
+// The names from the top of the tree down to the item, such as ["Work", "Clients"]; stops at a missing parent or a loop.
+export function path_names(item, items, name_of) {
+    const item_by_id = new Map(items.map((each) => [each.id, each]));
+    const path = [item];
+    let parent = item.parent_id === null ? undefined : item_by_id.get(item.parent_id);
+    while (parent && !path.includes(parent)) {
+        path.unshift(parent);
+        parent = parent.parent_id === null ? undefined : item_by_id.get(parent.parent_id);
+    }
+    return path.map(name_of);
+}
 // ── Dropping ─────────────────────────────────────────────────────────────────
 // The top and bottom quarters of a row drop beside it and the middle drops into it, or halves when nothing drops inside.
 export function placement_at(fraction_down, allow_inside) {
@@ -50,8 +71,8 @@ export function can_drop(dragged_id, target_id, items) {
     return !subtree_ids(dragged_id, items).has(target_id);
 }
 // Picks a position between the neighbours at the drop point, so only the moved item changes.
-function position_beside(siblings, target, placement) {
-    const sorted = [...siblings].sort(by_position);
+function position_beside(siblings, target, placement, options = {}) {
+    const sorted = options.by_list_order ? siblings : [...siblings].sort(by_position);
     const index = sorted.findIndex((sibling) => sibling.id === target.id);
     const neighbour = sorted[placement === "before" ? index - 1 : index + 1];
     if (!neighbour)
@@ -59,27 +80,29 @@ function position_beside(siblings, target, placement) {
     return (target.position + neighbour.position) / 2;
 }
 // For a flat list, where items only move before or after each other.
-export function position_for_drop(dragged, target, placement, items) {
-    return position_beside(items.filter((item) => item.id !== dragged.id), target, placement);
+export function position_for_drop(dragged, target, placement, items, options = {}) {
+    return position_beside(items.filter((item) => item.id !== dragged.id), target, placement, options);
 }
 // Inside drops after the target's last child; before and after drop among the target's siblings.
-export function move_for_drop(dragged, target, placement, items) {
+export function move_for_drop(dragged, target, placement, items, options = {}) {
     const others = items.filter((item) => item.id !== dragged.id);
     if (placement === "inside") {
         const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
         return { parent_id: target.id, position: last_child_position + 1 };
     }
-    return { parent_id: target.parent_id, position: position_beside(children_of(target.parent_id, others), target, placement) };
+    return { parent_id: target.parent_id, position: position_beside(children_of(target.parent_id, others), target, placement, options) };
 }
 // Moves several items together, keeping their order: inside the target after its last child, or in a run between it and its neighbour.
-export function moves_for_drop(dragged, target, placement, items) {
+export function moves_for_drop(dragged, target, placement, items, options = {}) {
     const dragged_ids = new Set(dragged.map((item) => item.id));
     const others = items.filter((item) => !dragged_ids.has(item.id));
     if (placement === "inside") {
         const last_child_position = Math.max(target.position, ...children_of(target.id, others).map((item) => item.position));
         return dragged.map((_, index) => ({ parent_id: target.id, position: last_child_position + index + 1 }));
     }
-    const siblings = children_of(target.parent_id, others).sort(by_position);
+    const siblings = children_of(target.parent_id, others);
+    if (!options.by_list_order)
+        siblings.sort(by_position);
     const index = siblings.findIndex((sibling) => sibling.id === target.id);
     const neighbour = siblings[placement === "before" ? index - 1 : index + 1];
     const low = placement === "before" ? (neighbour?.position ?? target.position - 1) : target.position;

package/dist/web/virtual.d.ts

@@ -0,0 +1,7 @@
+export interface VirtualWindow {
+    start: number;
+    end: number;
+    offset_px: number;
+    total_px: number;
+}
+export declare function virtual_window(total_rows: number, row_height: number, scroll_top: number, viewport_height: number, overscan?: number): VirtualWindow;

package/dist/web/virtual.js

@@ -0,0 +1,10 @@
+// Which rows of a long list a scrolled viewport needs, so only those are drawn.
+export function virtual_window(total_rows, row_height, scroll_top, viewport_height, overscan = 8) {
+    if (row_height <= 0)
+        throw new Error("row_height must be positive");
+    const first_visible = Math.floor(Math.max(0, scroll_top) / row_height);
+    const visible_count = Math.ceil(viewport_height / row_height);
+    const start = Math.max(0, first_visible - overscan);
+    const end = Math.min(total_rows, first_visible + visible_count + overscan);
+    return { start, end, offset_px: start * row_height, total_px: total_rows * row_height };
+}

package/dist/web/watch.d.ts

@@ -0,0 +1,6 @@
+export interface Watch {
+    version(): number;
+    bump(): void;
+    subscribe(listener: () => void): () => void;
+}
+export declare function create_watch(): Watch;

package/dist/web/watch.js

@@ -0,0 +1,17 @@
+// A change counter a store bumps and a page watches, so only what reads the store redraws when it changes.
+export function create_watch() {
+    let version = 0;
+    const listeners = new Set();
+    return {
+        version: () => version,
+        bump: () => {
+            version += 1;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => void listeners.delete(listener);
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-tech-laboratories/x-libs",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Code the X-apps share: agents and their long runs, passwords, durations, and the web page's helpers and widgets",
   "license": "GPL-3.0-or-later",
   "repository": {