@fuzdev/fuz_app 0.113.0 → 0.114.0

package/dist/testing/ws_round_trip.js

@@ -223,6 +223,7 @@ export const create_ws_test_harness = (options) => {
         // test closed the socket.
         const close_waiters = [];
         let is_closed = false;
+        let close_code = null;
         // Captured in `ws.close` below; `client.close(...)` returns it so
         // tests can await async `on_socket_close` cleanup.
         let close_pending = null;
@@ -240,6 +241,7 @@ export const create_ws_test_harness = (options) => {
                 if (is_closed)
                     return;
                 is_closed = true;
+                close_code = code ?? 1000;
                 for (const resolve of close_waiters.splice(0))
                     resolve();
                 const close_event = new Event('close');
@@ -326,6 +328,9 @@ export const create_ws_test_harness = (options) => {
                 if (close_pending)
                     await close_pending;
             },
+            get close_code() {
+                return close_code;
+            },
             wait_for: wait_for_impl,
             wait_for_close: (timeout_ms = WS_CLIENT_DEFAULT_TIMEOUT_MS) => {
                 if (is_closed)

package/dist/ui/form_state.svelte.d.ts

@@ -5,8 +5,12 @@
  * `attempted` state (set on submit attempt). Errors show after a field is blurred or
  * after a submit attempt, avoiding premature validation while the user is still typing.
  *
- * The `FormState.form` attachment also handles Enter key advancing
- * between focusable elements.
+ * The `FormState.form` attachment also handles the Enter key: in an input
+ * followed by another input it moves focus to that input (past any button
+ * between), and in the last input it submits the form (`requestSubmit`) —
+ * so Enter in a login form's password field logs in, even when the form's
+ * button is `type="button"`, as `PendingButton` is. Hidden inputs don't count, and an Enter that commits
+ * IME composition is left alone.
  *
  * All trackable inputs must have a `name` attribute — an error is thrown in dev
  * if an input without `name` loses focus.
@@ -48,8 +52,9 @@ export declare class FormState {
      */
     get attempted(): boolean;
     /**
-     * Creates a form attachment that handles Enter key advancing between
-     * focusable elements and tracks field touched state via delegated `focusout`.
+     * Creates a form attachment that handles the Enter key (advance focus to
+     * the next input, or submit from the last one) and tracks field touched
+     * state via delegated `focusout`.
      *
      * Fields are identified by their `name` attribute.
      *

package/dist/ui/form_state.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/form_state.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AASrD,qBAAa,SAAS;;IAKrB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;;;;;;;OAQG;IACH,IAAI,IAAI,UAAU,CAAC,eAAe,CAAC;IAuCnC;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlC;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAI5B;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiB1B;;;;OAIG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,KAAK,IAAI,IAAI;CAIb"}
+{"version":3,"file":"form_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/form_state.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUrD,qBAAa,SAAS;;IAKrB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;;;;;;;;OASG;IACH,IAAI,IAAI,UAAU,CAAC,eAAe,CAAC;IAmDnC;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIlC;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAI5B;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAiB1B;;;;OAIG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,KAAK,IAAI,IAAI;CAIb"}

package/dist/ui/form_state.svelte.js

@@ -5,8 +5,12 @@
  * `attempted` state (set on submit attempt). Errors show after a field is blurred or
  * after a submit attempt, avoiding premature validation while the user is still typing.
  *
- * The `FormState.form` attachment also handles Enter key advancing
- * between focusable elements.
+ * The `FormState.form` attachment also handles the Enter key: in an input
+ * followed by another input it moves focus to that input (past any button
+ * between), and in the last input it submits the form (`requestSubmit`) —
+ * so Enter in a login form's password field logs in, even when the form's
+ * button is `type="button"`, as `PendingButton` is. Hidden inputs don't count, and an Enter that commits
+ * IME composition is left alone.
  *
  * All trackable inputs must have a `name` attribute — an error is thrown in dev
  * if an input without `name` loses focus.
@@ -43,7 +47,8 @@
 import { DEV } from 'esm-env';
 import { on } from 'svelte/events';
 import { SvelteSet } from 'svelte/reactivity';
-const FOCUSABLE_SELECTOR = 'input:not(:disabled), button:not(:disabled)';
+/** Inputs Enter moves between — disabled and hidden ones are skipped. */
+const ENTER_INPUT_SELECTOR = 'input:not(:disabled):not([type=hidden])';
 const FORM_INPUT_SELECTOR = 'input, textarea, select';
 export class FormState {
     #touched = new SvelteSet();
@@ -56,8 +61,9 @@ export class FormState {
         return this.#attempted;
     }
     /**
-     * Creates a form attachment that handles Enter key advancing between
-     * focusable elements and tracks field touched state via delegated `focusout`.
+     * Creates a form attachment that handles the Enter key (advance focus to
+     * the next input, or submit from the last one) and tracks field touched
+     * state via delegated `focusout`.
      *
      * Fields are identified by their `name` attribute.
      *
@@ -73,14 +79,28 @@ export class FormState {
             const keydown_cleanup = on(form, 'keydown', (e) => {
                 if (e.key !== 'Enter')
                     return;
+                // an IME composing text commits it with Enter — not a submit; Safari
+                // reports that Enter with `isComposing` false but `keyCode` 229 — the
+                // deprecated field is the only signal there
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                if (e.isComposing || e.keyCode === 229)
+                    return;
                 if (!(e.target instanceof HTMLInputElement))
                     return;
-                const elements = Array.from(form.querySelectorAll(FOCUSABLE_SELECTOR));
-                const index = elements.indexOf(e.target);
+                const inputs = Array.from(form.querySelectorAll(ENTER_INPUT_SELECTOR));
+                const index = inputs.indexOf(e.target);
                 if (index < 0)
                     return;
                 e.preventDefault();
-                elements[(index + 1) % elements.length].focus();
+                // advance to the next input, past any button between (a show-password
+                // toggle, say); the last input submits instead
+                const next_input = inputs[index + 1];
+                if (next_input) {
+                    next_input.focus();
+                }
+                else {
+                    form.requestSubmit();
+                }
             });
             const focusout_cleanup = on(form, 'focusout', (e) => {
                 const target = e.target;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_app",
-  "version": "0.113.0",
+  "version": "0.114.0",
   "description": "fullstack app library",
   "glyph": "🗝",
   "logo": "logo.svg",
@@ -75,7 +75,7 @@
     "@electric-sql/pglite": "^0.4.5",
     "@fuzdev/blake3-wasm": "^0.2.0",
     "@fuzdev/fuz_code": "^0.48.0",
-    "@fuzdev/fuz_css": "^0.63.3",
+    "@fuzdev/fuz_css": "^0.64.0",
     "@fuzdev/fuz_ui": "^0.208.0",
     "@fuzdev/fuz_util": "^0.69.0",
     "@fuzdev/gro": "^0.212.0",

package/dist/actions/request_tracker.svelte.d.ts

@@ -1,77 +0,0 @@
-/**
- * Request tracker — manages pending JSON-RPC requests with timeouts.
- *
- * Uses SvelteMap for reactive pending request tracking.
- *
- * @module
- */
-import { type Deferred, type AsyncStatus } from '@fuzdev/fuz_util/async.ts';
-import { SvelteMap } from 'svelte/reactivity';
-import { type JsonrpcErrorResponse, type JsonrpcRequestId, type JsonrpcResponseOrError } from '../http/jsonrpc.js';
-/** ISO datetime string for request creation timestamps. */
-type Datetime = string & {
-    readonly __brand: 'Datetime';
-};
-export declare class RequestTrackerItem {
-    readonly id: JsonrpcRequestId;
-    readonly deferred: Deferred<JsonrpcResponseOrError>;
-    readonly created: Datetime;
-    status: AsyncStatus;
-    timeout: NodeJS.Timeout | undefined;
-    constructor(id: JsonrpcRequestId, deferred: Deferred<JsonrpcResponseOrError>, created: Datetime, status: AsyncStatus, timeout: NodeJS.Timeout | undefined);
-}
-/**
- * Reactive pending-request store with per-request timeouts. Used by transports
- * that don't delegate request/response correlation to a `WebsocketRpcConnection`.
- */
-export declare class RequestTracker {
-    readonly pending_requests: SvelteMap<JsonrpcRequestId, RequestTrackerItem>;
-    readonly request_timeout_ms: number;
-    constructor(request_timeout_ms?: number);
-    /**
-     * Track a new request keyed by `id`.
-     *
-     * @returns deferred resolved on response, or rejected via the timeout
-     * @mutates this - inserts a `RequestTrackerItem` into `pending_requests`
-     *   and arms a timeout that auto-rejects after `request_timeout_ms`;
-     *   clears any prior timeout for the same id
-     */
-    track_request(id: JsonrpcRequestId): Deferred<JsonrpcResponseOrError>;
-    /**
-     * Resolve a pending request with its response.
-     *
-     * @mutates this - clears the timeout, marks status `'success'`,
-     *   resolves the deferred, and removes the entry from `pending_requests`
-     */
-    resolve_request(id: JsonrpcRequestId, response: JsonrpcResponseOrError): void;
-    /**
-     * Reject a pending request with `error_message`.
-     *
-     * @mutates this - clears the timeout, marks status `'failure'`,
-     *   rejects the deferred with a `ThrownJsonrpcError`, and removes the
-     *   entry from `pending_requests`
-     */
-    reject_request(id: JsonrpcRequestId, error_message: JsonrpcErrorResponse): void;
-    /**
-     * Handles an incoming JSON-RPC message. Resolves or rejects the associated request.
-     * Ignores notifications and unknown/invalid messages.
-     */
-    handle_message(message: any): void;
-    /**
-     * Cancel a pending request without rejecting its deferred — just
-     * cleanup. The caller's promise stays unsettled; pair with an external
-     * resolution if needed.
-     *
-     * @mutates this - clears the timeout and removes the entry from `pending_requests`
-     */
-    cancel_request(id: JsonrpcRequestId): void;
-    /**
-     * Cancel all pending requests.
-     * @param reason - optional reason to include in rejection
-     * @mutates this - clears every timeout, marks each status `'failure'`,
-     *   rejects each deferred with `internal_error`, and empties `pending_requests`
-     */
-    cancel_all_requests(reason?: string): void;
-}
-export {};
-//# sourceMappingURL=request_tracker.svelte.d.ts.map

package/dist/actions/request_tracker.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"request_tracker.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/actions/request_tracker.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAmB,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAEN,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,EAC3B,MAAM,oBAAoB,CAAC;AAG5B,2DAA2D;AAC3D,KAAK,QAAQ,GAAG,MAAM,GAAG;IAAE,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAA;CAAE,CAAC;AAM1D,qBAAa,kBAAkB;IAC9B,QAAQ,CAAC,EAAE,EAAE,gBAAgB,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC;IACpD,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAiB;IACpC,OAAO,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS,CAAgB;gBAGlD,EAAE,EAAE,gBAAgB,EACpB,QAAQ,EAAE,QAAQ,CAAC,sBAAsB,CAAC,EAC1C,OAAO,EAAE,QAAQ,EACjB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO,GAAG,SAAS;CAQpC;AAED;;;GAGG;AACH,qBAAa,cAAc;IAC1B,QAAQ,CAAC,gBAAgB,EAAE,SAAS,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAmB;IAC7F,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;gBAExB,kBAAkB,SAAU;IAIxC;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,EAAE,gBAAgB,GAAG,QAAQ,CAAC,sBAAsB,CAAC;IA6BrE;;;;;OAKG;IACH,eAAe,CAAC,EAAE,EAAE,gBAAgB,EAAE,QAAQ,EAAE,sBAAsB,GAAG,IAAI;IAkB7E;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,GAAG,IAAI;IAuB/E;;;OAGG;IACH,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAiBlC;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,EAAE,gBAAgB,GAAG,IAAI;IAe1C;;;;;OAKG;IACH,mBAAmB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;CAiB1C"}

package/dist/actions/request_tracker.svelte.js

@@ -1,169 +0,0 @@
-/**
- * Request tracker — manages pending JSON-RPC requests with timeouts.
- *
- * Uses SvelteMap for reactive pending request tracking.
- *
- * @module
- */
-import { create_deferred } from '@fuzdev/fuz_util/async.ts';
-import { SvelteMap } from 'svelte/reactivity';
-import { JSONRPC_INTERNAL_ERROR } from '../http/jsonrpc.js';
-import { ThrownJsonrpcError, JSONRPC_ERROR_CODES } from '../http/jsonrpc_errors.js';
-const get_datetime_now = () => new Date().toISOString();
-// TODO what if this uses a tracker id param that's an opaque UUID but can be used for action association?
-// TODO name, like `TrackedRequest`? or is this implicit namespacing and generic name preferred
-export class RequestTrackerItem {
-    id;
-    deferred;
-    created;
-    status = $state.raw();
-    timeout = $state.raw();
-    constructor(id, deferred, created, status, timeout) {
-        this.id = id;
-        this.deferred = deferred;
-        this.created = created;
-        this.status = status;
-        this.timeout = timeout;
-    }
-}
-/**
- * Reactive pending-request store with per-request timeouts. Used by transports
- * that don't delegate request/response correlation to a `WebsocketRpcConnection`.
- */
-export class RequestTracker {
-    pending_requests = new SvelteMap();
-    request_timeout_ms;
-    constructor(request_timeout_ms = 120_000) {
-        this.request_timeout_ms = request_timeout_ms;
-    }
-    /**
-     * Track a new request keyed by `id`.
-     *
-     * @returns deferred resolved on response, or rejected via the timeout
-     * @mutates this - inserts a `RequestTrackerItem` into `pending_requests`
-     *   and arms a timeout that auto-rejects after `request_timeout_ms`;
-     *   clears any prior timeout for the same id
-     */
-    track_request(id) {
-        const deferred = create_deferred();
-        const created = get_datetime_now();
-        // If we're tracking a request with the same id, clean up the previous one first
-        const existing_request = this.pending_requests.get(id);
-        if (existing_request?.timeout) {
-            clearTimeout(existing_request.timeout);
-        }
-        // Set up a timeout to automatically reject the request after a delay
-        const timeout = setTimeout(() => {
-            // Create a proper timeout error message
-            this.reject_request(id, {
-                jsonrpc: '2.0',
-                id,
-                error: { code: JSONRPC_INTERNAL_ERROR, message: `request timed out: ${id}` }
-            });
-        }, this.request_timeout_ms);
-        // Store the request tracker using the new class
-        this.pending_requests.set(id, new RequestTrackerItem(id, deferred, created, 'pending', timeout));
-        return deferred;
-    }
-    /**
-     * Resolve a pending request with its response.
-     *
-     * @mutates this - clears the timeout, marks status `'success'`,
-     *   resolves the deferred, and removes the entry from `pending_requests`
-     */
-    resolve_request(id, response) {
-        const request = this.pending_requests.get(id);
-        if (!request) {
-            console.warn(`received response for unknown request: ${id}`);
-            return;
-        }
-        // Clear the timeout and resolve the promise
-        if (request.timeout) {
-            clearTimeout(request.timeout);
-            request.timeout = undefined;
-        }
-        request.status = 'success';
-        request.deferred.resolve(response);
-        this.pending_requests.delete(id);
-    }
-    /**
-     * Reject a pending request with `error_message`.
-     *
-     * @mutates this - clears the timeout, marks status `'failure'`,
-     *   rejects the deferred with a `ThrownJsonrpcError`, and removes the
-     *   entry from `pending_requests`
-     */
-    reject_request(id, error_message) {
-        const request = this.pending_requests.get(id);
-        if (!request) {
-            console.warn(`received error for unknown request: ${id}`);
-            return;
-        }
-        // Clear the timeout and reject the promise
-        if (request.timeout) {
-            clearTimeout(request.timeout);
-            request.timeout = undefined;
-        }
-        request.status = 'failure';
-        const error = new ThrownJsonrpcError(error_message.error.code, error_message.error.message, error_message.error.data);
-        request.deferred.reject(error);
-        this.pending_requests.delete(id);
-    }
-    /**
-     * Handles an incoming JSON-RPC message. Resolves or rejects the associated request.
-     * Ignores notifications and unknown/invalid messages.
-     */
-    handle_message(message) {
-        if (!message)
-            return; // ignore invalid values
-        const { id } = message;
-        // TODO maybe log a warning/error?
-        if (id == null)
-            return; // ignore notifications and errors without ids
-        // JSON-RPC responses require both an `id` and either a `result` or `error` field, but not both
-        if ('result' in message) {
-            this.resolve_request(id, message);
-        }
-        else if ('error' in message) {
-            this.reject_request(id, message);
-        }
-        // ignore other messages
-    }
-    /**
-     * Cancel a pending request without rejecting its deferred — just
-     * cleanup. The caller's promise stays unsettled; pair with an external
-     * resolution if needed.
-     *
-     * @mutates this - clears the timeout and removes the entry from `pending_requests`
-     */
-    cancel_request(id) {
-        const request = this.pending_requests.get(id);
-        if (!request) {
-            return;
-        }
-        if (request.timeout) {
-            clearTimeout(request.timeout);
-            request.timeout = undefined;
-        }
-        // We don't reject the promise here, just clean up the tracking
-        this.pending_requests.delete(id);
-    }
-    /**
-     * Cancel all pending requests.
-     * @param reason - optional reason to include in rejection
-     * @mutates this - clears every timeout, marks each status `'failure'`,
-     *   rejects each deferred with `internal_error`, and empties `pending_requests`
-     */
-    cancel_all_requests(reason) {
-        for (const [id, request] of this.pending_requests.entries()) {
-            if (request.timeout) {
-                clearTimeout(request.timeout);
-                request.timeout = undefined;
-            }
-            request.status = 'failure';
-            request.deferred.reject(new ThrownJsonrpcError(JSONRPC_ERROR_CODES.internal_error, // TODO canceled error?
-            reason || 'request cancelled'));
-            this.pending_requests.delete(id);
-        }
-    }
-}