Function useStreamingState

ui/src/composables/useStreamingState.ts:94–268

(options: UseStreamingStateOptions)

 * ```
 */
export function useStreamingState(options: UseStreamingStateOptions) {
  const {
    surfaceId,
    containerRef,
    preserveScroll = true,
    preserveFocus = true,
  } = options;

  const isRestoring = ref(false);

  /**
   * Save current scroll positions within the container
   */
  function saveScrollPositions(): void {
    if (!preserveScroll || !containerRef.value) return;

    const state = getPreservedState(surfaceId);
    state.scrollPositions.clear();

    // Save container scroll position
    state.scrollPositions.set('__container__', {
      top: containerRef.value.scrollTop,
      left: containerRef.value.scrollLeft,
    });

    // Save scroll positions of scrollable children
    const scrollableElements = containerRef.value.querySelectorAll('[data-scroll-preserve]');
    scrollableElements.forEach((el) => {
      const id = el.getAttribute('data-scroll-preserve') || el.id;
      if (id) {
        state.scrollPositions.set(id, {
          top: (el as HTMLElement).scrollTop,
          left: (el as HTMLElement).scrollLeft,
        });
      }
    });
  }

  /**
   * Restore saved scroll positions
   */
  function restoreScrollPositions(): void {
    if (!preserveScroll || !containerRef.value) return;

    const state = getPreservedState(surfaceId);

    // Restore container scroll position
    const containerScroll = state.scrollPositions.get('__container__');
    if (containerScroll) {
      containerRef.value.scrollTop = containerScroll.top;
      containerRef.value.scrollLeft = containerScroll.left;
    }

    // Restore scroll positions of scrollable children
    state.scrollPositions.forEach((pos, id) => {
      if (id === '__container__') return;

      const el = containerRef.value?.querySelector(`[data-scroll-preserve="${id}"]`)