@vortexm/vjt 0.1.15 → 0.1.17

package/dist/index.js

@@ -3865,7 +3865,7 @@ var NetworkRuntime = class {
     this.rerenderRoot = options.rerenderRoot;
   }
   connectSseStreams() {
-    if (typeof window === "undefined" || typeof EventSource === "undefined" || this.eventSources.length > 0) {
+    if (typeof window === "undefined" || this.eventSources.length > 0) {
       return;
     }
     for (const config of this.sseConfigs) {
@@ -3877,26 +3877,10 @@ var NetworkRuntime = class {
         logRuntimeError("sseConfig", new Error("Blocked unsafe SSE url"), { url: config.url });
         continue;
       }
-      const source = new EventSource(safeUrl);
-      this.eventSources.push(source);
-      for (const eventDefinition of config.events ?? []) {
-        if (!eventDefinition?.name) {
-          continue;
-        }
-        source.addEventListener(eventDefinition.name, (event) => {
-          void this.handleSseEvent(eventDefinition, event).catch((error) => {
-            logRuntimeError("handleSseEvent", error, {
-              eventName: eventDefinition.name,
-              url: safeUrl
-            });
-          });
-        });
+      const connection = this.createSseConnection(config, safeUrl);
+      if (connection) {
+        this.eventSources.push(connection);
       }
-      source.onerror = (event) => {
-        logRuntimeError("sseConnection", event, {
-          url: config.url
-        });
-      };
     }
   }
   async executeRequest(requestName, currentValue) {
@@ -4099,21 +4083,309 @@ var NetworkRuntime = class {
         return this.stringifyPrimitive(value);
     }
   }
-  async handleSseEvent(eventDefinition, event) {
+  createSseConnection(config, safeUrl) {
+    if (typeof fetch === "function" && typeof AbortController !== "undefined" && typeof TextDecoder !== "undefined" && typeof ReadableStream !== "undefined") {
+      return this.createFetchSseConnection(config, safeUrl);
+    }
+    if (typeof EventSource !== "undefined") {
+      return this.createNativeSseConnection(config, safeUrl);
+    }
+    logRuntimeError("sseConnection", new Error("SSE is not supported in this browser"), {
+      url: safeUrl
+    });
+    return null;
+  }
+  createNativeSseConnection(config, safeUrl) {
+    const source = new EventSource(safeUrl);
+    source.onopen = () => {
+      logRuntimeDebug(this.debugLogging, "sse-open", {
+        url: safeUrl,
+        transport: "event-source"
+      });
+    };
+    source.onmessage = (event) => {
+      const payload = typeof event.data === "string" ? event.data : "";
+      logRuntimeDebug(this.debugLogging, "sse-message", {
+        url: safeUrl,
+        transport: "event-source",
+        eventName: "message",
+        payloadLength: payload.length
+      });
+    };
+    for (const eventDefinition of config.events ?? []) {
+      if (!eventDefinition?.name) {
+        continue;
+      }
+      source.addEventListener(eventDefinition.name, (event) => {
+        void this.handleSseEvent(eventDefinition, event.data ?? "", safeUrl).catch((error) => {
+          logRuntimeError("handleSseEvent", error, {
+            eventName: eventDefinition.name,
+            url: safeUrl
+          });
+        });
+      });
+    }
+    source.onerror = (event) => {
+      logRuntimeError("sseConnection", event, {
+        url: config.url,
+        transport: "event-source"
+      });
+    };
+    logRuntimeDebug(this.debugLogging, "sse-connect", {
+      url: safeUrl,
+      transport: "event-source"
+    });
+    return {
+      close: () => {
+        source.close();
+      }
+    };
+  }
+  createFetchSseConnection(config, safeUrl) {
+    let closed = false;
+    let reconnectDelayMs = 2e3;
+    let reconnectTimeoutId = null;
+    let activeAbortController = null;
+    let lastEventId = "";
+    let connectionAttempt = 0;
+    const clearReconnectTimeout = () => {
+      if (reconnectTimeoutId !== null && typeof window !== "undefined") {
+        window.clearTimeout(reconnectTimeoutId);
+      }
+      reconnectTimeoutId = null;
+    };
+    const scheduleReconnect = (reason) => {
+      if (closed || typeof window === "undefined") {
+        return;
+      }
+      logRuntimeDebug(this.debugLogging, "sse-reconnect-scheduled", {
+        url: safeUrl,
+        transport: "fetch",
+        delayMs: reconnectDelayMs,
+        reason,
+        lastEventId
+      });
+      clearReconnectTimeout();
+      reconnectTimeoutId = window.setTimeout(() => {
+        reconnectTimeoutId = null;
+        void connectLoop().catch((error) => {
+          logRuntimeError("sseConnection", error, {
+            url: safeUrl,
+            transport: "fetch"
+          });
+        });
+      }, reconnectDelayMs);
+    };
+    const flushSseChunk = (eventName, dataLines) => {
+      if (!dataLines.length) {
+        return;
+      }
+      const payload = dataLines.join("\n");
+      const matchingDefinitions = (config.events ?? []).filter((definition) => definition?.name === eventName);
+      logRuntimeDebug(this.debugLogging, "sse-dispatch", {
+        url: safeUrl,
+        transport: "fetch",
+        eventName,
+        payloadLength: payload.length,
+        matchedHandlers: matchingDefinitions.length,
+        lastEventId
+      });
+      if (!matchingDefinitions.length) {
+        return;
+      }
+      for (const eventDefinition of matchingDefinitions) {
+        void this.handleSseEvent(eventDefinition, payload, safeUrl).catch((error) => {
+          logRuntimeError("handleSseEvent", error, {
+            eventName,
+            url: safeUrl
+          });
+        });
+      }
+    };
+    const processSseText = (chunk) => {
+      let eventName = "message";
+      let dataLines = [];
+      const normalized = chunk.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
+      const lines = normalized.split("\n");
+      for (const line of lines) {
+        if (!line) {
+          flushSseChunk(eventName, dataLines);
+          eventName = "message";
+          dataLines = [];
+          continue;
+        }
+        if (line.startsWith(":")) {
+          continue;
+        }
+        const separatorIndex = line.indexOf(":");
+        const field = separatorIndex >= 0 ? line.slice(0, separatorIndex) : line;
+        let value = separatorIndex >= 0 ? line.slice(separatorIndex + 1) : "";
+        if (value.startsWith(" ")) {
+          value = value.slice(1);
+        }
+        switch (field) {
+          case "event":
+            eventName = value || "message";
+            break;
+          case "data":
+            dataLines.push(value);
+            break;
+          case "id":
+            if (!value.includes("\0")) {
+              lastEventId = value;
+            }
+            break;
+          case "retry": {
+            const parsedDelay = Number.parseInt(value, 10);
+            if (Number.isFinite(parsedDelay) && parsedDelay >= 0) {
+              reconnectDelayMs = parsedDelay;
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+      flushSseChunk(eventName, dataLines);
+    };
+    const findEventBoundary = (value) => value.search(/\r?\n\r?\n/);
+    const connectLoop = async () => {
+      if (closed) {
+        return;
+      }
+      connectionAttempt += 1;
+      activeAbortController = new AbortController();
+      let reconnectReason = "stream-ended";
+      try {
+        logRuntimeDebug(this.debugLogging, "sse-connect-attempt", {
+          url: safeUrl,
+          transport: "fetch",
+          attempt: connectionAttempt,
+          lastEventId
+        });
+        const headers = {
+          Accept: "text/event-stream"
+        };
+        if (lastEventId) {
+          headers["Last-Event-ID"] = lastEventId;
+        }
+        const response = await fetch(safeUrl, {
+          method: "GET",
+          headers,
+          cache: "no-store",
+          credentials: "same-origin",
+          signal: activeAbortController.signal
+        });
+        if (!response.ok) {
+          throw new Error(`SSE connection failed: ${response.status} ${response.statusText}`);
+        }
+        const contentType = response.headers.get("content-type") ?? "";
+        if (!contentType.toLowerCase().includes("text/event-stream")) {
+          const previewText = await response.text().catch(() => "");
+          const normalizedPreview = previewText.replaceAll(/\s+/g, " ").trim().slice(0, 240);
+          const error = new Error(`SSE response has unexpected content-type: ${contentType || "<empty>"}`);
+          error.sseDetails = {
+            status: response.status,
+            statusText: response.statusText,
+            responseUrl: response.url,
+            redirected: response.redirected,
+            contentType,
+            bodyPreview: normalizedPreview
+          };
+          throw error;
+        }
+        logRuntimeDebug(this.debugLogging, "sse-open", {
+          url: safeUrl,
+          transport: "fetch",
+          status: response.status,
+          contentType,
+          attempt: connectionAttempt,
+          lastEventId,
+          requestUsesLastEventIdHeader: Boolean(lastEventId)
+        });
+        if (!response.body || typeof response.body.getReader !== "function") {
+          throw new Error("SSE streaming is not available in fetch response body");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let receivedChunkCount = 0;
+        let receivedByteCount = 0;
+        while (!closed) {
+          const { done, value } = await reader.read();
+          if (done) {
+            break;
+          }
+          receivedChunkCount += 1;
+          receivedByteCount += value?.byteLength ?? 0;
+          buffer += decoder.decode(value, { stream: true });
+          logRuntimeDebug(this.debugLogging, "sse-chunk", {
+            url: safeUrl,
+            transport: "fetch",
+            chunkIndex: receivedChunkCount,
+            chunkBytes: value?.byteLength ?? 0,
+            totalBytes: receivedByteCount,
+            bufferedChars: buffer.length
+          });
+          let boundaryIndex = findEventBoundary(buffer);
+          while (boundaryIndex >= 0) {
+            const rawChunk = buffer.slice(0, boundaryIndex);
+            processSseText(rawChunk);
+            buffer = buffer.slice(boundaryIndex).replace(/^\r?\n\r?\n/, "");
+            boundaryIndex = findEventBoundary(buffer);
+          }
+        }
+        buffer += decoder.decode();
+        if (buffer.trim()) {
+          processSseText(buffer);
+        }
+      } catch (error) {
+        if (closed || error instanceof DOMException && error.name === "AbortError") {
+          return;
+        }
+        reconnectReason = error instanceof Error ? error.message : "stream-error";
+        logRuntimeError("sseConnection", error, {
+          url: safeUrl,
+          transport: "fetch",
+          ...typeof error === "object" && error !== null && "sseDetails" in error ? { response: error.sseDetails } : {}
+        });
+      } finally {
+        activeAbortController = null;
+      }
+      scheduleReconnect(reconnectReason);
+    };
+    const connection = {
+      close: () => {
+        closed = true;
+        clearReconnectTimeout();
+        activeAbortController?.abort();
+        activeAbortController = null;
+      }
+    };
+    void connectLoop().catch((error) => {
+      logRuntimeError("sseConnection", error, {
+        url: safeUrl,
+        transport: "fetch"
+      });
+    });
+    return connection;
+  }
+  async handleSseEvent(eventDefinition, rawData, url) {
     let parsedMessage = {};
     try {
-      parsedMessage = event.data ? JSON.parse(event.data) : {};
+      parsedMessage = rawData ? JSON.parse(rawData) : {};
     } catch {
-      parsedMessage = { value: event.data ?? "" };
+      parsedMessage = { value: rawData ?? "" };
     }
     const message = eventDefinition.message ? sanitizeSchemaValue(eventDefinition.message, parsedMessage, `sse.${eventDefinition.name}`) : (() => {
       throw new Error(`SSE event ${eventDefinition.name} must define message schema`);
     })();
     logRuntimeDebug(this.debugLogging, "sse", {
       eventName: eventDefinition.name,
-      raw: event.data,
+      raw: rawData,
       parsedMessage,
-      message
+      message,
+      url
     });
     if (!eventDefinition.onEvent?.length) {
       return;
@@ -4479,6 +4751,10 @@ var ReferenceRuntime = class {
         return readPath(state, ["value"]);
       case "isHidden":
         return state.isHidden ?? true;
+      case "isScrolledToTop":
+        return state.isScrolledToTop ?? true;
+      case "isScrolledToBottom":
+        return state.isScrolledToBottom ?? true;
       case "url":
         return resolveInlineI18nValue(this.host, state.url ?? "");
       case "base64":
@@ -7720,6 +7996,19 @@ function isGeneratedElementId(value) {
 function isStepperEdit(node) {
   return node.type === "number" || node.type === "float";
 }
+function isScrollableWidgetNode(node) {
+  switch (node.widget) {
+    case "list":
+    case "grid-view":
+    case "listbox":
+    case "combobox":
+      return true;
+    case "container-layout":
+      return normalizeBoolean(node.verticallyScrollable, false);
+    default:
+      return false;
+  }
+}
 function getDateFormat(node) {
   return node.format === "yyyy-MM-dd" ? "yyyy-MM-dd" : DEFAULT_DATE_FORMAT;
 }
@@ -8056,6 +8345,7 @@ var RuntimeRenderer = class {
     this.attachInputBehavior(this.root);
     this.attachWidgetEvents(this.root);
     restoreElementState(this.root, preservedState, this.stateByKey);
+    this.syncAllScrollStateFlags();
     this.applyPendingScrollAction();
     this.applyPendingCursorAction();
     this.activeContextMenu = adjustContextMenuPosition(this.root, this.activeContextMenu);
@@ -8674,7 +8964,9 @@ var RuntimeRenderer = class {
           enabled: normalizeBoolean(node.enabled, true),
           definitionSignature: buildDefinitionSignature(node.elements ?? []),
           elements: deepClone(node.elements ?? []),
-          selected: toFiniteNumber3(node.item) ?? toFiniteNumber3(node.selected) ?? -1
+          selected: toFiniteNumber3(node.item) ?? toFiniteNumber3(node.selected) ?? -1,
+          isScrolledToTop: true,
+          isScrolledToBottom: true
         };
         break;
       case "listbox":
@@ -8686,7 +8978,9 @@ var RuntimeRenderer = class {
           enabled: normalizeBoolean(node.enabled, true),
           definitionSignature: buildDefinitionSignature(node.elements ?? []),
           listboxElements: deepClone(node.elements ?? []),
-          selected: toFiniteNumber3(node.selected) ?? 0
+          selected: toFiniteNumber3(node.selected) ?? 0,
+          isScrolledToTop: true,
+          isScrolledToBottom: true
         };
         break;
       case "combobox":
@@ -8698,7 +8992,9 @@ var RuntimeRenderer = class {
           enabled: normalizeBoolean(node.enabled, true),
           definitionSignature: buildDefinitionSignature(node.elements ?? []),
           comboboxElements: deepClone(node.elements ?? []),
-          selected: toFiniteNumber3(node.selected) ?? 0
+          selected: toFiniteNumber3(node.selected) ?? 0,
+          isScrolledToTop: true,
+          isScrolledToBottom: true
         };
         break;
       case "radio-group":
@@ -8750,7 +9046,9 @@ var RuntimeRenderer = class {
           widget: node.widget,
           id: stateId,
           name: node.name,
-          enabled: normalizeBoolean(node.enabled, true)
+          enabled: normalizeBoolean(node.enabled, true),
+          isScrolledToTop: isScrollableWidgetNode(node) ? true : void 0,
+          isScrolledToBottom: isScrollableWidgetNode(node) ? true : void 0
         };
         break;
     }
@@ -9207,6 +9505,19 @@ var RuntimeRenderer = class {
       redispatchUnderlyingClick: (x, y) => this.redispatchUnderlyingClick(x, y),
       runActions: (actions, inputValue, context) => this.actionRuntime.runActions(actions, inputValue, context)
     });
+    for (const element of Array.from(root.querySelectorAll("[data-widget-key]"))) {
+      const key = element.dataset.widgetKey;
+      if (!key) {
+        continue;
+      }
+      const node = this.nodeByKey.get(key);
+      if (!node || !isScrollableWidgetNode(node)) {
+        continue;
+      }
+      element.addEventListener("scroll", () => {
+        this.syncScrollStateForElement(element, key);
+      }, { passive: true });
+    }
   }
   updateOwningListElementDescriptor(element, mutate) {
     const listElement = element.closest(".vjt-list-element");
@@ -9525,6 +9836,7 @@ var RuntimeRenderer = class {
     }
     if (typeof window === "undefined") {
       initialElement.scrollTop = Math.max(0, Math.min(targetTop, getMaxScrollTop(initialElement)));
+      this.syncScrollStateForReference(reference, initialElement);
       return;
     }
     if (this.activeScrollAnimationFrameId !== null) {
@@ -9536,6 +9848,7 @@ var RuntimeRenderer = class {
     const delta = clampedTargetTop - startTop;
     if (Math.abs(delta) < 1) {
       initialElement.scrollTop = clampedTargetTop;
+      this.syncScrollStateForReference(reference, initialElement);
       return;
     }
     const durationMs = 300;
@@ -9551,10 +9864,12 @@ var RuntimeRenderer = class {
       const progress = Math.min(1, elapsed / durationMs);
       const liveTargetTop = Math.max(0, Math.min(clampedTargetTop, getMaxScrollTop(liveElement)));
       liveElement.scrollTop = startTop + (liveTargetTop - startTop) * easeInOutCubic(progress);
+      this.syncScrollStateForReference(reference, liveElement);
       if (progress < 1) {
         this.activeScrollAnimationFrameId = window.requestAnimationFrame(tick);
       } else {
         liveElement.scrollTop = liveTargetTop;
+        this.syncScrollStateForReference(reference, liveElement);
         this.activeScrollAnimationFrameId = null;
       }
     };
@@ -9608,6 +9923,48 @@ var RuntimeRenderer = class {
     }
     return null;
   }
+  syncAllScrollStateFlags() {
+    if (!(this.root instanceof HTMLElement)) {
+      return;
+    }
+    for (const element of Array.from(this.root.querySelectorAll("[data-widget-key]"))) {
+      const key = element.dataset.widgetKey;
+      if (!key) {
+        continue;
+      }
+      const node = this.nodeByKey.get(key);
+      if (!node || !isScrollableWidgetNode(node)) {
+        continue;
+      }
+      this.syncScrollStateForElement(element, key);
+    }
+  }
+  syncScrollStateForReference(reference, element) {
+    const widgetId = reference.split(".")[0]?.trim();
+    if (!widgetId) {
+      return;
+    }
+    const targetElement = element ?? this.findScrollableWidgetElement(reference);
+    if (!(targetElement instanceof HTMLElement)) {
+      return;
+    }
+    const key = targetElement.dataset.widgetKey ?? widgetId;
+    this.syncScrollStateForElement(targetElement, key);
+  }
+  syncScrollStateForElement(element, key) {
+    const state = this.stateByKey.get(key) ?? this.stateById.get(key);
+    if (!state) {
+      return;
+    }
+    const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+    if (maxScrollTop <= 1) {
+      state.isScrolledToTop = true;
+      state.isScrolledToBottom = true;
+      return;
+    }
+    state.isScrolledToTop = element.scrollTop <= 1;
+    state.isScrolledToBottom = element.scrollTop >= maxScrollTop - 1;
+  }
   toScrollableIndex(value) {
     if (typeof value === "number" && Number.isFinite(value)) {
       return Math.max(0, Math.trunc(value));

package/dist/lib/network.d.ts

@@ -1,4 +1,4 @@
-import type { ActionDefinition, PrimitiveRequestType, RequestMapInput, RequestSchema, SseConfig } from './types.js';
+import type { ActionDefinition, ClosableRuntimeResource, PrimitiveRequestType, RequestMapInput, RequestSchema, SseConfig } from './types.js';
 type ActionRunner = (actions: ActionDefinition[], inputValue: unknown, context: {
     currentValue: unknown;
     responseValue?: unknown;
@@ -8,7 +8,7 @@ type NetworkRuntimeOptions = {
     requestsMap: RequestMapInput;
     sseConfigs: SseConfig[];
     backendUrl?: string;
-    eventSources: EventSource[];
+    eventSources: ClosableRuntimeResource[];
     runActions: ActionRunner;
     rerenderRoot: () => Promise<void>;
 };
@@ -28,6 +28,9 @@ export declare class NetworkRuntime {
     private createRequestError;
     private toRequestErrorPayload;
     coercePrimitiveSchemaValue(type: PrimitiveRequestType, value: unknown): unknown;
+    private createSseConnection;
+    private createNativeSseConnection;
+    private createFetchSseConnection;
     private handleSseEvent;
 }
 export {};

package/dist/lib/types.d.ts

@@ -6,6 +6,9 @@ export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste';
 export type SystemEventName = 'onBeforeRender' | 'onAfterRender' | 'onBeforeNavigate' | 'onAfterNavigate' | 'onLayoutSwitchToMobile' | 'onLayoutSwitchToDesktop' | 'onSpeechDetected' | 'onRecordingStarted' | 'onRecordingStopped' | 'onRecordingError' | 'onListeningError' | 'onListeringError' | 'onPlayFinished' | 'onPlayingStopped';
 export type PrimitiveRequestType = 'int' | 'float' | 'boolean' | 'string';
+export type ClosableRuntimeResource = {
+    close: () => void;
+};
 export type RouteDefinition = {
     path: string;
     ui: string;
@@ -128,6 +131,8 @@ export type WidgetState = {
     modalHeight?: number;
     activeTab?: number;
     isHidden?: boolean;
+    isScrolledToTop?: boolean;
+    isScrolledToBottom?: boolean;
 };
 export type RuntimeSnapshot = {
     stateByKey: Array<[string, WidgetState]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexm/vjt",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/vjt-styles.css

@@ -557,6 +557,12 @@ body {
   grid-area: 1 / 1;
   min-width: 0;
   min-height: 0;
+  position: relative;
+  pointer-events: none;
+}
+
+.vjt-overlay-layer > * {
+  pointer-events: auto;
 }
 
 .vjt-overlay-layer > .vjt-static-text,