@hachej/boring-ui-kit 0.3.2 → 0.4.1

package/dist/remote-chat.js

@@ -37,8 +37,31 @@ export async function createRemoteChat(options) {
             target.searchParams.set(key, value);
         return target;
     };
+    // The transport in use: `websocket` until its first socket fails to open, then `http` for good.
+    let mode = options.transport ?? 'http', current, seq = 0;
+    /** Calls sent over a socket and not answered yet, by call ID: sent again unchanged on the next socket. */
+    const outbox = new Map();
+    function exchange(op, init, extra) {
+        const http = () => new Request(url(op, extra), init);
+        if (mode !== 'websocket')
+            return send(http());
+        const id = `c${++seq}`;
+        const text = JSON.stringify({ kind: 'call', id, op, params: extra, ...(typeof init.body === 'string' ? { body: JSON.parse(init.body) } : {}) });
+        return new Promise((resolve, reject) => { outbox.set(id, { text, http, resolve, reject }); try {
+            current?.send(text);
+        }
+        catch { /* sent again on the next socket */ } });
+    }
+    /** Leave the socket for HTTP: calls still waiting for a socket go over HTTP, unchanged (same request ID, so the host deduplicates). */
+    function fallBack() {
+        mode = 'http';
+        const pending = [...outbox.values()];
+        outbox.clear();
+        for (const call of pending)
+            send(call.http()).then(call.resolve, call.reject);
+    }
     async function call(op, init = {}, extra = {}) {
-        const response = await send(new Request(url(op, extra), init));
+        const response = await exchange(op, init, extra);
         if (response.status === 402 && op === 'submit') {
             const refused = await response.json().catch(() => ({}));
             if (refused.reason === 'submission-refused')
@@ -50,13 +73,107 @@ export async function createRemoteChat(options) {
     }
     const post = (op, value) => call(op, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(value) });
     const lookup = async (requestId) => (await call('submission', {}, { requestId })).record ?? undefined;
-    async function watch() {
+    const ping = options.webSocket?.pingMs ?? 15_000;
+    const openSocket = options.webSocket?.open ?? ((target) => new WebSocket(target, 'boring.chat'));
+    function socketSource() {
+        return new Promise((ready, refuse) => {
+            const target = new URL(base);
+            target.protocol = target.protocol === 'https:' ? 'wss:' : 'ws:';
+            let socket;
+            try {
+                socket = openSocket(target);
+            }
+            catch (error) {
+                refuse(error);
+                return;
+            }
+            const frames = [];
+            let wake, closed = false, opened = false, heard = Date.now();
+            const notify = () => { const resume = wake; wake = undefined; resume?.(); };
+            const finish = () => {
+                if (closed)
+                    return;
+                closed = true;
+                clearInterval(timer);
+                if (current === socket)
+                    current = undefined;
+                notify();
+                if (!opened)
+                    refuse(new Error('Remote chat socket closed before its first view'));
+            };
+            const timer = setInterval(() => {
+                if (Date.now() - heard > ping * 2.5) {
+                    try {
+                        socket.close();
+                    }
+                    catch { /* closing */ }
+                    finish();
+                }
+                else if (socket.readyState === 1)
+                    socket.send('ping');
+            }, ping);
+            const next = async () => { while (frames.length === 0 && !closed)
+                await new Promise(resolve => { wake = resolve; }); return frames.shift(); };
+            const cancel = () => { try {
+                socket.close(1000);
+            }
+            catch { /* closing */ } finish(); };
+            socket.onclose = finish;
+            socket.onerror = () => { try {
+                socket.close();
+            }
+            catch { /* closing */ } finish(); };
+            socket.onmessage = event => {
+                heard = Date.now();
+                if (typeof event.data !== 'string' || event.data === 'pong')
+                    return;
+                let frame;
+                try {
+                    frame = JSON.parse(event.data);
+                }
+                catch {
+                    return;
+                }
+                if (frame.kind === 'reply') {
+                    const pending = outbox.get(frame.id);
+                    if (pending) {
+                        outbox.delete(frame.id);
+                        pending.resolve(new Response(JSON.stringify(frame.body), { status: frame.status, headers: { 'content-type': 'application/json' } }));
+                    }
+                    return;
+                }
+                if (frame.kind === 'event') {
+                    try {
+                        options.onEvent?.(frame.event);
+                    }
+                    catch { /* a host listener never breaks the chat */ }
+                    return;
+                }
+                if (!opened) {
+                    if (frame.kind !== 'view') {
+                        cancel();
+                        return;
+                    }
+                    opened = true;
+                    current = socket;
+                    // Unanswered calls go again, unchanged: a submit keeps its request ID, so the host runs it once.
+                    for (const pending of outbox.values())
+                        socket.send(pending.text);
+                    ready({ first: frame.view, next, cancel });
+                    return;
+                }
+                frames.push(frame);
+                notify();
+            };
+        });
+    }
+    async function httpSource() {
         const stopped = new AbortController();
         const response = await send(new Request(url('watch'), { signal: stopped.signal }));
         if (!response.ok || !response.body)
             throw new WatchRefused(`Remote chat watch failed: ${await reason(response)}`, response.status);
         const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
-        let pending = '', staleMs = 0, lost = false;
+        let pending = '', staleMs = 0;
         // Once the server has announced its heartbeat interval, a read waiting 2.5 intervals means the stream is dead even if the
         // socket still looks open (a proxy that dropped it silently).
         async function read() {
@@ -65,7 +182,7 @@ export async function createRemoteChat(options) {
             let timer;
             try {
                 return await Promise.race([reader.read(), new Promise((_, reject) => {
-                        timer = setTimeout(() => { lost = true; stopped.abort(); reject(new Error('Remote chat stream went silent')); }, staleMs);
+                        timer = setTimeout(() => { stopped.abort(); reject(new Error('Remote chat stream went silent')); }, staleMs);
                     })]);
             }
             finally {
@@ -97,11 +214,32 @@ export async function createRemoteChat(options) {
             stopped.abort();
             throw new Error('Remote chat watch ended before its first view');
         }
-        let value = first.view, started = false, settle, ended;
+        return { first: first.view, next, cancel: () => stopped.abort() };
+    }
+    let socketWorked = false;
+    async function watch() {
+        let source;
+        if (mode === 'websocket') {
+            try {
+                source = await socketSource();
+                socketWorked = true;
+            }
+            catch (error) {
+                if (socketWorked)
+                    throw error;
+                fallBack();
+                source = await httpSource();
+            }
+        }
+        else
+            source = await httpSource();
+        const { next } = source;
+        let lost = false;
+        let value = source.first, started = false, settle, ended;
         const closed = new Promise(resolve => { settle = resolve; });
         const finish = (end) => { if (!ended) {
             ended = end;
-            stopped.abort();
+            source.cancel();
             settle(end);
         } };
         const handle = {
@@ -316,7 +454,11 @@ export async function createRemoteChat(options) {
         // The controller only reconciles a submission by request ID; no other transaction work crosses the wire.
         commit: async (change, _context) => change({ submissionByRequest: (_conversationId, requestId) => lookup(requestId) }),
         abort: async () => { await post('abort', {}); },
-        entries: async (_query, limit, cursor) => (await call('entries', {}, { limit: String(limit), ...(cursor === undefined ? {} : { cursor: JSON.stringify(cursor) }) })).page,
+        entries: async (query, limit, cursor) => (await call('entries', {}, { limit: String(limit),
+            ...(query.maxEntryId === undefined ? {} : { maxEntryId: String(query.maxEntryId) }),
+            ...(query.minEntryId === undefined ? {} : { minEntryId: String(query.minEntryId) }),
+            ...(query.order === undefined ? {} : { order: query.order }),
+            ...(cursor === undefined ? {} : { cursor: JSON.stringify(cursor) }) })).page,
     };
     const context = Object.freeze({});
     const close = async () => { const first = unclaimed; unclaimed = undefined; await first?.stop(); };

package/dist/text-buffer.js

@@ -233,8 +233,9 @@ export function createTextBuffer(options) {
             return read;
         }
         if (sameBase(remote, state.base) && !discard) {
-            if (state.remote !== null)
-                update({ ...state, remote: null });
+            const resolved = state.save.kind === 'settled' && state.save.result.kind !== 'saved';
+            if (state.remote !== null || resolved)
+                update({ ...state, remote: null, save: resolved ? { kind: 'idle' } : state.save });
             return read;
         }
         if (state.dirty && (!discard || state.bufferVersion !== previousVersion)) {

package/dist/text-draft-controls.d.ts

@@ -1,9 +1,11 @@
 import type { TextDraftActions, TextDraftRecoveryState } from './text-draft-types.js';
+import type { ViewerComponents } from './viewer-components.js';
 export interface TextDraftControlsProps {
+    readonly components?: ViewerComponents | undefined;
     readonly recovery: TextDraftRecoveryState;
     readonly actions: TextDraftActions;
     readonly readOnly?: boolean;
     readonly blocked?: boolean;
 }
-export declare function TextDraftControls({ recovery, actions, readOnly, blocked }: TextDraftControlsProps): import("react").JSX.Element | null;
+export declare function TextDraftControls({ components, recovery, actions, readOnly, blocked }: TextDraftControlsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=text-draft-controls.d.ts.map

package/dist/text-draft-controls.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
-export function TextDraftControls({ recovery, actions, readOnly = false, blocked = false }) {
+export function TextDraftControls({ components, recovery, actions, readOnly = false, blocked = false }) {
+    const Control = components?.button ?? 'button';
     const owner = useRef({ actions, busy: false });
     const [pending, setPending] = useState(false);
     const [notice, setNotice] = useState();
@@ -29,5 +30,5 @@ export function TextDraftControls({ recovery, actions, readOnly = false, blocked
     const discovery = active ? recovery.discovery : undefined;
     const checkpoint = active ? recovery.checkpoint : undefined;
     const status = !active ? `Draft recovery ${recovery.kind}` : discovery?.kind === 'checking' ? 'Checking stored drafts' : checkpoint?.kind === 'pending' ? 'Storing draft' : checkpoint?.kind === 'stored' ? 'Draft stored for recovery. Storage is not a save receipt.' : checkpoint?.kind === 'failed' ? 'Draft recovery storage unavailable' : 'Draft recovery enabled';
-    return _jsxs("section", { "data-boring": "text-draft-controls", "aria-label": "Draft recovery", children: [_jsx("p", { role: "status", children: status }), _jsx("button", { type: "button", disabled: !active || pending || blocked || discovery?.kind === 'checking', onClick: () => run(actions.checkDrafts), children: "Check stored drafts" }), _jsx("button", { type: "button", disabled: !active || pending || readOnly, onClick: () => run(actions.checkpointDraft), children: "Store draft for recovery" }), discovery?.kind === 'empty' && _jsx("p", { children: "No stored drafts" }), discovery && 'reason' in discovery && _jsx("p", { role: "alert", children: discovery.reason }), checkpoint?.kind === 'failed' && _jsx("p", { role: "alert", children: checkpoint.result.reason }), discovery?.kind === 'offered' && _jsxs(_Fragment, { children: [discovery.truncated && _jsx("p", { children: "More stored drafts exist than this listing shows." }), discovery.choices.map(choice => _jsxs("div", { role: "group", "aria-label": "Stored draft", children: [_jsx("p", { children: choice.compatibility === 'conflict' ? 'Saved revision changed. Review this draft separately.' : 'Stored draft matches the checked saved revision.' }), _jsxs("details", { children: [_jsx("summary", { children: "Review stored draft" }), _jsx("pre", { children: choice.text })] }), _jsx("button", { type: "button", disabled: pending || blocked || readOnly || choice.compatibility !== 'exact', onClick: () => run(() => actions.restoreDraft(choice.selection)), children: "Restore draft" }), _jsx("button", { type: "button", disabled: pending || blocked, onClick: () => run(() => actions.discardDraft(choice.selection)), children: "Discard stored draft" })] }, `${choice.selection.offerId}:${choice.selection.draft.writerId}:${choice.selection.draft.sequence}`))] }), notice && _jsx("p", { role: "alert", children: notice })] });
+    return _jsxs("section", { "data-boring": "text-draft-controls", "aria-label": "Draft recovery", children: [_jsx("p", { role: "status", children: status }), _jsx(Control, { type: "button", disabled: !active || pending || blocked || discovery?.kind === 'checking', onClick: () => run(actions.checkDrafts), children: "Check stored drafts" }), _jsx(Control, { type: "button", disabled: !active || pending || readOnly, onClick: () => run(actions.checkpointDraft), children: "Store draft for recovery" }), discovery?.kind === 'empty' && _jsx("p", { children: "No stored drafts" }), discovery && 'reason' in discovery && _jsx("p", { role: "alert", children: discovery.reason }), checkpoint?.kind === 'failed' && _jsx("p", { role: "alert", children: checkpoint.result.reason }), discovery?.kind === 'offered' && _jsxs(_Fragment, { children: [discovery.truncated && _jsx("p", { children: "More stored drafts exist than this listing shows." }), discovery.choices.map(choice => _jsxs("div", { role: "group", "aria-label": "Stored draft", children: [_jsx("p", { children: choice.compatibility === 'conflict' ? 'Saved revision changed. Review this draft separately.' : 'Stored draft matches the checked saved revision.' }), _jsxs("details", { children: [_jsx("summary", { children: "Review stored draft" }), _jsx("pre", { children: choice.text })] }), _jsx(Control, { type: "button", disabled: pending || blocked || readOnly || choice.compatibility !== 'exact', onClick: () => run(() => actions.restoreDraft(choice.selection)), children: "Restore draft" }), _jsx(Control, { type: "button", disabled: pending || blocked, onClick: () => run(() => actions.discardDraft(choice.selection)), children: "Discard stored draft" })] }, `${choice.selection.offerId}:${choice.selection.draft.writerId}:${choice.selection.draft.sequence}`))] }), notice && _jsx("p", { role: "alert", children: notice })] });
 }

package/dist/viewer-components.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef, ComponentType, PropsWithChildren } from 'react';
+/** Host presentation for the document renderers. Bindings must forward refs and native input events. */
+export interface ViewerComponents {
+    readonly button: ComponentType<ComponentPropsWithRef<'button'>>;
+    readonly input: ComponentType<ComponentPropsWithRef<'input'>>;
+    readonly textarea: ComponentType<ComponentPropsWithRef<'textarea'>>;
+    readonly bubble?: ComponentType<PropsWithChildren>;
+    /** The host's separator: vertical between toolbar groups, horizontal above the phone formatting bar. */
+    readonly separator?: ComponentType<{
+        readonly orientation?: 'horizontal' | 'vertical';
+        readonly className?: string;
+    }>;
+}
+//# sourceMappingURL=viewer-components.d.ts.map

package/dist/viewer-components.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -12,12 +12,16 @@
     "dist/**/*.js",
     "dist/**/*.d.ts",
     "r/*.json",
+    "bin/*.mjs",
     "README.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md",
     "styles"
   ],
   "types": "./dist/index.d.ts",
+  "bin": {
+    "boring-ui-blocks": "./bin/boring-ui-blocks.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -110,7 +114,7 @@
     "./file-tree.css": "./styles/file-tree.css"
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.3.2",
+    "@hachej/boring-files": "^0.4.1",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -137,7 +141,7 @@
     "zod": "^4.6.5",
     "@tldraw/tlschema": "^5.5.2",
     "lucide-react": "^1.51.0",
-    "radix-ui": "^1.8.0"
+    "@base-ui/react": "1.9.0"
   },
   "peerDependenciesMeta": {
     "@hachej/boring-files": {
@@ -221,7 +225,7 @@
     "lucide-react": {
       "optional": true
     },
-    "radix-ui": {
+    "@base-ui/react": {
       "optional": true
     }
   },