@adecore/ui 0.14.0

package/src/useAsyncAction.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { messageOf } from './error-message.ts';
+
+export interface AsyncAction {
+    busy: boolean;
+    failure: string | null;
+    /* Says whether the work went through, so a caller closes or steps on only on the way out. */
+    run(work: () => Promise<unknown>): Promise<boolean>;
+    /* A refusal a surface can see for itself, which reads in the same line as one that came back. */
+    fail(message: string): void;
+    clear(): void;
+}
+
+/* One step a surface waits on: the button goes quiet while it runs and the reason stays on screen when it does not. */
+export function useAsyncAction(fallback?: string): AsyncAction {
+    const [busy, setBusy] = useState(false);
+    const [failure, setFailure] = useState<string | null>(null);
+    const run = async (work: () => Promise<unknown>): Promise<boolean> => {
+        setBusy(true);
+        setFailure(null);
+        try {
+            await work();
+            return true;
+        } catch (e) {
+            setFailure(messageOf(e, fallback));
+            return false;
+        } finally {
+            setBusy(false);
+        }
+    };
+    return { busy, failure, run, fail: setFailure, clear: () => setFailure(null) };
+}

package/src/useColumnResize.ts

@@ -0,0 +1,75 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+
+/* Which edge the column hangs from, and with it the axis the drag runs along. A column pinned to
+   the window's right edge grows as the pointer moves left; one that starts at its own left edge
+   grows as it moves right, and the same holds for a row between `top` and `bottom`. */
+export type ColumnEdge = 'left' | 'right' | 'top' | 'bottom';
+
+export interface ColumnResizeOptions {
+    /* What the column is wide, or the row is tall, right now, in whole pixels. */
+    size: number;
+    min: number;
+    from: ColumnEdge;
+    /* Read at drag time, so a window resize between two drags is taken into account. */
+    max?(): number;
+    /* Where the dragged size goes; called on every move, so the column follows the pointer. */
+    onSize(size: number): void;
+}
+
+export interface ColumnResize {
+    startResize(event: ReactPointerEvent<HTMLElement>): void;
+}
+
+export const clampColumnSize = (options: Pick<ColumnResizeOptions, 'min' | 'max'>, size: number): number => {
+    const max = Math.max(options.min, options.max?.() ?? Number.MAX_SAFE_INTEGER);
+    return Math.max(options.min, Math.min(Math.round(size), max));
+};
+
+/* Where the pointer sits on the axis this edge belongs to. */
+const along = (from: ColumnEdge, event: { clientX: number; clientY: number }): number => (from === 'left' || from === 'right' ? event.clientX : event.clientY);
+
+/* The edge the column is pinned to, in page coordinates, or the window's own when there is no box yet. */
+const anchorOf = (from: ColumnEdge, rect: DOMRect | undefined): number => {
+    switch (from) {
+        case 'left':
+            return rect?.left ?? 0;
+        case 'right':
+            return rect?.right ?? window.innerWidth;
+        case 'top':
+            return rect?.top ?? 0;
+        case 'bottom':
+            return rect?.bottom ?? window.innerHeight;
+    }
+};
+
+/*
+ * One resizable column or row: a handle that drags the size its owner keeps. The handle takes the
+ * pointer capture, so the drag survives leaving the few pixels it is wide, and `[data-resizing]` on
+ * the column turns off any transition on that size for as long as it lasts.
+ */
+export const useColumnResize = (ref: RefObject<HTMLElement | null>, options: ColumnResizeOptions): ColumnResize => {
+    const startResize = (event: ReactPointerEvent<HTMLElement>): void => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        const column = ref.current;
+        const anchor = anchorOf(options.from, column?.getBoundingClientRect());
+        /* The far edge grows as the pointer comes towards it; the near edge grows as it goes away. */
+        const growsTowardsAnchor = options.from === 'right' || options.from === 'bottom';
+        column?.setAttribute('data-resizing', 'true');
+        const onMove = (move: PointerEvent): void => {
+            const reach = along(options.from, move);
+            options.onSize(clampColumnSize(options, growsTowardsAnchor ? anchor - reach : reach - anchor));
+        };
+        const onUp = (): void => {
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', onUp);
+            handle.releasePointerCapture(event.pointerId);
+            column?.removeAttribute('data-resizing');
+        };
+        handle.setPointerCapture(event.pointerId);
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', onUp);
+    };
+
+    return { startResize };
+};

package/src/useContentSize.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface ContentSize {
+    width: number;
+    height: number;
+}
+
+/* Whole pixels, so a frame fitted into the space lands on them too. */
+export function useContentSize(): [(node: HTMLElement | null) => void, ContentSize] {
+    const [size, setSize] = useState<ContentSize>({ width: 0, height: 0 });
+    const observer = useRef<ResizeObserver | null>(null);
+    useEffect(() => () => observer.current?.disconnect(), []);
+    const measure = useCallback((node: HTMLElement | null): void => {
+        observer.current?.disconnect();
+        if (node === null) {
+            return;
+        }
+        const update = (width: number, height: number): void => {
+            const next = { width: Math.round(width), height: Math.round(height) };
+            setSize((current) => (current.width === next.width && current.height === next.height ? current : next));
+        };
+        update(node.clientWidth, node.clientHeight);
+        observer.current = new ResizeObserver(([entry]) => update(entry!.contentRect.width, entry!.contentRect.height));
+        observer.current.observe(node);
+    }, []);
+    return [measure, size];
+}

package/src/useMeasuredWidth.ts

@@ -0,0 +1,7 @@
+import { useContentSize } from './useContentSize.ts';
+
+/* A plot draws in real pixels rather than a stretched view box, so what it draws lands on whole ones. */
+export function useMeasuredWidth(): [(node: HTMLElement | null) => void, number] {
+    const [measure, size] = useContentSize();
+    return [measure, size.width];
+}

package/src/useNow.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';
+
+/*
+ * The clock a surface reads to say how long something has been running. One timer for the whole
+ * surface, ticking only while there is something to count, and starting at the time it was mounted
+ * so a panel that comes back mid-session does not read zero for a second first.
+ */
+export const useNow = (intervalMs: number, ticking = true): number => {
+    const [now, setNow] = useState(Date.now);
+
+    useEffect(() => {
+        if (!ticking) {
+            return;
+        }
+        const timer = window.setInterval(() => setNow(Date.now()), intervalMs);
+        return () => window.clearInterval(timer);
+    }, [intervalMs, ticking]);
+
+    return now;
+};
+
+/*
+ * A timer on one line of a long thread. The text is written straight into the node, because a chat
+ * that re-renders every second while an agent works re-renders every row it is drawing with it.
+ */
+export const useTickingText = (render: () => string, intervalMs = 1000): RefObject<HTMLSpanElement | null> => {
+    const ref = useRef<HTMLSpanElement>(null);
+    const latest = useRef(render);
+
+    const tick = useCallback((): void => {
+        if (ref.current !== null) {
+            ref.current.textContent = latest.current();
+        }
+    }, []);
+
+    useEffect(() => {
+        const timer = window.setInterval(tick, intervalMs);
+        return () => window.clearInterval(timer);
+    }, [intervalMs, tick]);
+
+    /* After every render as well, so the first one writes the line and a language or region change
+       lands on it without waiting for the next tick. */
+    useEffect(() => {
+        latest.current = render;
+        tick();
+    });
+
+    return ref;
+};

package/src/wipe-split.ts

@@ -0,0 +1,24 @@
+/* One press of an arrow moves the handle this share of the frame. */
+export const WIPE_KEY_STEP = 0.02;
+
+export const clampSplit = (split: number): number => Math.min(1, Math.max(0, split));
+
+/* A frame without a width has no place to point at, so the split stays where it is. */
+export const splitAt = (clientX: number, frame: { left: number; width: number }): number | null =>
+    frame.width > 0 ? clampSplit((clientX - frame.left) / frame.width) : null;
+
+/* Null for a key the handle does not answer, so it goes on to whatever is around it. */
+export const splitForKey = (split: number, key: string): number | null => {
+    switch (key) {
+        case 'ArrowLeft':
+            return clampSplit(split - WIPE_KEY_STEP);
+        case 'ArrowRight':
+            return clampSplit(split + WIPE_KEY_STEP);
+        case 'Home':
+            return 0;
+        case 'End':
+            return 1;
+        default:
+            return null;
+    }
+};

package/src/zoom.ts

@@ -0,0 +1,9 @@
+/* The percentages a zoom menu offers when the app names none. */
+export const ZOOM_PRESETS: readonly number[] = [25, 50, 75, 100, 150, 200];
+
+/* Compared on the rounded percent the readout shows, so 0.999 still ticks 100%. */
+export const activeZoomPreset = (zoom: number, presets: readonly number[]): number | null =>
+    presets.find((preset) => preset === Math.round(zoom * 100)) ?? null;
+
+/* Ten percent a click, on the readout's own rounded percent, so + and - come back where they were. */
+export const steppedZoom = (zoom: number, by: number): number => Math.round(zoom * 100 + by) / 100;