@uxland/primary-shell 6.0.5 → 6.0.6

package/dist/internal-plugins/activity-history/activity-history-item/list/UI/timeline/virtual-scroller.d.ts

@@ -0,0 +1,39 @@
+export interface VirtualScrollerOptions<T> {
+    items: T[];
+    estimatedItemHeight: number;
+    bufferSize: number;
+}
+export interface VirtualScrollerState {
+    viewportHeight: number;
+    scrollTop: number;
+    totalHeight: number;
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    containerOffset: number;
+    visibleItems: any[];
+}
+export declare class VirtualScroller<T = any> {
+    private _itemHeights;
+    private _itemOffsets;
+    private _totalHeight;
+    private _viewportHeight;
+    private _scrollTop;
+    private _visibleRange;
+    private _options;
+    private _viewport?;
+    private _content?;
+    private _resizeObserver?;
+    private _isScrolling;
+    private _scrollTimeout?;
+    constructor(options: VirtualScrollerOptions<T>);
+    private _initializeHeights;
+    setup(viewport: HTMLElement, content: HTMLElement, onStateChange: (state: VirtualScrollerState) => void): () => void;
+    updateItems(items: T[]): void;
+    private _measureActualHeights;
+    private _updateVisibleRange;
+    scrollToIndex(index: number, behavior?: ScrollBehavior): void;
+    getState(): VirtualScrollerState;
+    findClosestIndex<K>(getValue: (item: T) => K, targetValue: K, compare: (a: K, b: K) => number): number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/activity-history-timeline.ts

@@ -8,8 +8,7 @@ import styles from "./styles.css?inline";
 import { template } from "./template";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { isSomeCollectionLoadedAndOtherLoading, isCollectionInitialState } from "../../../add/handle-busy/selectors";
-import { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
-import "@lit-labs/virtualizer";
+import { VirtualScroller, VirtualScrollerState } from "./virtual-scroller";
 
 const createZIndexStyles = (max: number) => {
   let styles = "";
@@ -50,11 +49,27 @@ export class ActivityHistoryTimeline extends LitElement {
   @connectedProperty(activityHistorySearchStringSelector)
   searchString: string;
 
-  @query(".virtualizer") private _virtualizer!: HTMLElement;
+  @query(".virtual-container") private _virtualContainer!: HTMLElement;
+  @query(".virtual-viewport") private _viewport!: HTMLElement;
+  @query(".virtual-content") private _content!: HTMLElement;
 
   @state()
   renderGroupsControlTimeExpired = false;
 
+  // Virtual scroller instance and state
+  private _virtualScroller?: VirtualScroller<IActivityHistoryGroup>;
+  private _cleanupVirtualScroller?: () => void;
+
+  @state()
+  _virtualScrollerState: VirtualScrollerState = {
+    viewportHeight: 0,
+    scrollTop: 0,
+    totalHeight: 0,
+    visibleRange: { start: 0, end: 0 },
+    containerOffset: 0,
+    visibleItems: []
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
     setTimeout(() => {
@@ -64,12 +79,19 @@ export class ActivityHistoryTimeline extends LitElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this._cleanupVirtualScroller?.();
   }
 
   async updated(changedProperties) {
     if (changedProperties.has("historyGroups") && this.historyGroups?.length) {
       // Resolver los elementos antes de actualizar el template
       await this.prepareComponents(this.historyGroups);
+      this._updateVirtualScroller();
+    }
+    
+    // Setup virtualizer when DOM elements are available
+    if (this._viewport && this._content && !this._virtualScroller) {
+      setTimeout(() => this._setupVirtualScroller(), 0);
     }
   }
 
@@ -93,7 +115,6 @@ export class ActivityHistoryTimeline extends LitElement {
         );
       }
     }
-    this.requestUpdate(); // 🔥 Forzar actualización del template
   }
 
   highlightMatch(text: string, searchString: string): string {
@@ -106,29 +127,70 @@ export class ActivityHistoryTimeline extends LitElement {
     return text ? unsafeHTML(this.highlightMatch(text, this.searchString)) : null;
   }
 
+  // Public API for scrolling to date (maintains original functionality)
   _scrollIntoDate(selectedDate: number) {
-    let closestIndex = -1;
-    let closestDifference = Number.POSITIVE_INFINITY;
-
-    (this.historyGroups ?? []).forEach((group, index) => {
-      const dateStr = group.items?.[0]?.date || group.subGroups?.[0]?.items?.[0]?.date;
-      if (!dateStr) return;
+    if (!this._virtualScroller) return;
+
+    const closestIndex = this._virtualScroller.findClosestIndex(
+      (group) => {
+        const dateStr = group.items?.[0]?.date || group.subGroups?.[0]?.items?.[0]?.date;
+        return dateStr ? new Date(dateStr).getTime() : 0;
+      },
+      selectedDate,
+      (a, b) => a - b
+    );
+
+    if (closestIndex !== -1) {
+      this._virtualScroller.scrollToIndex(closestIndex);
+    }
+  }
 
-      const groupDate = new Date(dateStr).getTime();
-      const difference = Math.abs(groupDate - selectedDate);
+  // === VIRTUAL SCROLLER LOGIC ===
+  
+  private _setupVirtualScroller() {
+    if (!this._viewport || !this._content || this._virtualScroller) return;
+    
+    this._virtualScroller = new VirtualScroller({
+      items: this.historyGroups || [],
+      estimatedItemHeight: 200,
+      bufferSize: 50 // 50% buffer
+    });
 
-      if (difference < closestDifference) {
-        closestDifference = difference;
-        closestIndex = index;
+    this._cleanupVirtualScroller = this._virtualScroller.setup(
+      this._viewport, 
+      this._content, 
+      (state) => {
+        this._virtualScrollerState = state;
+        this.requestUpdate();
       }
-    });
+    );
 
-    if (closestIndex !== -1 && this._virtualizer) {
-      this._virtualizer[virtualizerRef].element(closestIndex).scrollIntoView({
-        block: "nearest",
-        inline: "nearest",
-        behavior: "smooth",
-      });
-    }
+    // Get initial state
+    this._virtualScrollerState = this._virtualScroller.getState();
+  }
+
+  private _updateVirtualScroller() {
+    if (!this._virtualScroller || !this.historyGroups?.length) return;
+    
+    this._virtualScroller.updateItems(this.historyGroups);
+    this._virtualScrollerState = this._virtualScroller.getState();
+  }
+
+  // Getters for template (maintaining original API)
+  get _visibleItems() {
+    return this._virtualScrollerState.visibleItems;
   }
-}
+  
+  get _containerOffset() {
+    return this._virtualScrollerState.containerOffset;
+  }
+
+  get _visibleRange() {
+    return this._virtualScrollerState.visibleRange;
+  }
+
+  // Scroll handler for template
+  _onScroll = () => {
+    // Virtual scroller handles this internally
+  };
+}

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/styles.css

@@ -5,11 +5,26 @@
   flex: 1 1 0%;
 }
 
-.virtualizer {
+.virtual-container {
   height: 100%;
+  position: relative;
+}
+
+.virtual-viewport {
+  height: 100%;
+  overflow: auto;
   padding-inline: 16px;
 }
 
+.virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+.virtual-items {
+  position: relative;
+}
+
 .container {
   min-height: 1px;
   height: 100%;

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/template.ts

@@ -27,53 +27,64 @@ export const template = (props: ActivityHistoryTimeline) => {
       ${
         props.historyGroups?.length > 0
           ? html`
-            <lit-virtualizer class="virtualizer"
-              ?scroller=${true}
-              .items=${props.historyGroups}
-              .renderItem=${(itemGroup: IActivityHistoryGroup, index: number) => html`
-                <div class="visit zIndex${props.historyGroups.length - index}"
-                     data-date=${ifDefined(itemGroup?.items[0]?.date || itemGroup?.subGroups[0]?.items[0]?.date)}>
-                  ${visitHeaderTemplate(props, itemGroup?.items[0] || itemGroup?.subGroups[0]?.items[0])}
-                  <div class="visit__items">
+            <div class="virtual-container">
+              <div class="virtual-viewport" @scroll=${props._onScroll}>
+                <div class="virtual-content">
+                  <div class="virtual-items" style="transform: translateY(${props._containerOffset}px)">
                     ${repeat(
-                      mergeHistoryItemsAndSubgroups(itemGroup),
-                      (entry) => (entry.type === "item" ? entry.item.id : entry.subGroup.id),
-                      (entry: ActivityHistoryEntry) => {
-                        if (entry.type === "item") {
-                          const item = entry.item;
-                          return html`
-                            <div
-                              class="item"
-                              ?has-divider=${hasItemDivider(item, itemGroup?.items as IActivityHistoryItemWithComponent[])}
-                            >
-                              ${item.component}
-                            </div>
-                          `;
-                        }
-                        const subGroup = entry.subGroup;
+                      props._visibleItems,
+                      (itemGroup, index) => itemGroup?.items?.[0]?.id || itemGroup?.subGroups?.[0]?.items?.[0]?.id,
+                      (itemGroup: IActivityHistoryGroup, localIndex: number) => {
+                        const globalIndex = props._visibleRange.start + localIndex;
                         return html`
-                          <div class="diagnostics">
-                            ${diagnosticHeaderTemplate(subGroup?.items[0])}
-                            <div class="diagnostics__items">
+                          <div class="visit zIndex${props.historyGroups.length - globalIndex}"
+                               data-date=${ifDefined(itemGroup?.items[0]?.date || itemGroup?.subGroups[0]?.items[0]?.date)}>
+                            ${visitHeaderTemplate(props, itemGroup?.items[0] || itemGroup?.subGroups[0]?.items[0])}
+                            <div class="visit__items">
                               ${repeat(
-                                subGroup?.items,
-                                (item) => item.id,
-                                (item: IActivityHistoryItemWithComponent) => html`
-                                  <div class="item"
-                                       ?has-divider=${hasItemDivider(item, subGroup?.items as IActivityHistoryItemWithComponent[])}>
-                                    ${item.component}
-                                  </div>
-                                `,
+                                mergeHistoryItemsAndSubgroups(itemGroup),
+                                (entry) => (entry.type === "item" ? entry.item.id : entry.subGroup.id),
+                                (entry: ActivityHistoryEntry) => {
+                                  if (entry.type === "item") {
+                                    const item = entry.item;
+                                    return html`
+                                      <div
+                                        class="item"
+                                        ?has-divider=${hasItemDivider(item, itemGroup?.items as IActivityHistoryItemWithComponent[])}
+                                      >
+                                        ${item.component}
+                                      </div>
+                                    `;
+                                  }
+                                  const subGroup = entry.subGroup;
+                                  return html`
+                                    <div class="diagnostics">
+                                      ${diagnosticHeaderTemplate(subGroup?.items[0])}
+                                      <div class="diagnostics__items">
+                                        ${repeat(
+                                          subGroup?.items,
+                                          (item) => item.id,
+                                          (item: IActivityHistoryItemWithComponent) => html`
+                                            <div class="item"
+                                                 ?has-divider=${hasItemDivider(item, subGroup?.items as IActivityHistoryItemWithComponent[])}>
+                                              ${item.component}
+                                            </div>
+                                          `,
+                                        )}
+                                      </div>
+                                    </div>
+                                  `;
+                                },
                               )}
                             </div>
                           </div>
                         `;
-                      },
+                      }
                     )}
                   </div>
                 </div>
-              `}
-            ></lit-virtualizer>
+              </div>
+            </div>
           `
           : noGroupsTemplate(props)
       }

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/virtual-scroller.ts

@@ -0,0 +1,239 @@
+export interface VirtualScrollerOptions<T> {
+  items: T[];
+  estimatedItemHeight: number;
+  bufferSize: number; // percentage of viewport height
+}
+
+export interface VirtualScrollerState {
+  viewportHeight: number;
+  scrollTop: number;
+  totalHeight: number;
+  visibleRange: { start: number; end: number };
+  containerOffset: number;
+  visibleItems: any[];
+}
+
+export class VirtualScroller<T = any> {
+  private _itemHeights: Map<number, number> = new Map();
+  private _itemOffsets: Map<number, number> = new Map();
+  private _totalHeight = 0;
+  private _viewportHeight = 0;
+  private _scrollTop = 0;
+  private _visibleRange = { start: 0, end: 0 };
+  private _options: VirtualScrollerOptions<T>;
+  
+  private _viewport?: HTMLElement;
+  private _content?: HTMLElement;
+  private _resizeObserver?: ResizeObserver;
+  private _isScrolling = false;
+  private _scrollTimeout?: number;
+
+  constructor(options: VirtualScrollerOptions<T>) {
+    this._options = options;
+    this._initializeHeights();
+  }
+
+  // Initialize with estimated heights
+  private _initializeHeights() {
+    const { items, estimatedItemHeight } = this._options;
+    let totalHeight = 0;
+    
+    this._itemHeights.clear();
+    this._itemOffsets.clear();
+    
+    for (let i = 0; i < items.length; i++) {
+      this._itemOffsets.set(i, totalHeight);
+      this._itemHeights.set(i, estimatedItemHeight);
+      totalHeight += estimatedItemHeight;
+    }
+    
+    this._totalHeight = totalHeight;
+  }
+
+  // Setup DOM references and observers
+  setup(viewport: HTMLElement, content: HTMLElement, onStateChange: (state: VirtualScrollerState) => void) {
+    this._viewport = viewport;
+    this._content = content;
+    
+    // Update viewport height
+    this._viewportHeight = viewport.clientHeight;
+    
+    // Set initial content height
+    content.style.height = this._totalHeight + 'px';
+    
+    // Calculate initial visible range
+    this._updateVisibleRange();
+    
+    // Setup scroll listener
+    const onScroll = () => {
+      if (!this._viewport) return;
+      
+      this._scrollTop = this._viewport.scrollTop;
+      this._isScrolling = true;
+      
+      if (this._scrollTimeout) {
+        clearTimeout(this._scrollTimeout);
+      }
+      
+      this._scrollTimeout = window.setTimeout(() => {
+        this._isScrolling = false;
+        // Measure heights after scrolling stops
+        setTimeout(() => {
+          this._measureActualHeights();
+          onStateChange(this.getState());
+        }, 50);
+      }, 150);
+      
+      const oldRange = {...this._visibleRange};
+      this._updateVisibleRange();
+      
+      // Only update if visible range changed
+      if (Math.abs(oldRange.start - this._visibleRange.start) > 0 || 
+          Math.abs(oldRange.end - this._visibleRange.end) > 0) {
+        onStateChange(this.getState());
+      }
+    };
+    
+    viewport.addEventListener('scroll', onScroll);
+    
+    // Setup resize observer
+    this._resizeObserver = new ResizeObserver(() => {
+      this._viewportHeight = viewport.clientHeight;
+      this._updateVisibleRange();
+      onStateChange(this.getState());
+    });
+    
+    this._resizeObserver.observe(viewport);
+    
+    // Return cleanup function
+    return () => {
+      viewport.removeEventListener('scroll', onScroll);
+      this._resizeObserver?.disconnect();
+      if (this._scrollTimeout) {
+        clearTimeout(this._scrollTimeout);
+      }
+    };
+  }
+
+  // Update items (when data changes)
+  updateItems(items: T[]) {
+    this._options.items = items;
+    this._initializeHeights();
+    
+    if (this._content) {
+      this._content.style.height = this._totalHeight + 'px';
+    }
+    
+    this._updateVisibleRange();
+  }
+
+  // Measure actual heights of rendered items
+  private _measureActualHeights() {
+    if (!this._content || this._isScrolling) return;
+    
+    const visitElements = this._content.querySelectorAll('.visit');
+    if (visitElements.length === 0) return;
+    
+    let hasChanges = false;
+    
+    visitElements.forEach((element, index) => {
+      const actualHeight = element.getBoundingClientRect().height;
+      const globalIndex = this._visibleRange.start + index;
+      const currentHeight = this._itemHeights.get(globalIndex) || 0;
+      
+      // Only update if there's a significant difference
+      if (Math.abs(actualHeight - currentHeight) > 5) {
+        hasChanges = true;
+        this._itemHeights.set(globalIndex, actualHeight);
+      }
+    });
+    
+    if (hasChanges) {
+      // Recalculate offsets and total height
+      let totalHeight = 0;
+      for (let i = 0; i < this._options.items.length; i++) {
+        this._itemOffsets.set(i, totalHeight);
+        const height = this._itemHeights.get(i) || this._options.estimatedItemHeight;
+        totalHeight += height;
+      }
+      
+      this._totalHeight = totalHeight;
+      if (this._content) {
+        this._content.style.height = this._totalHeight + 'px';
+      }
+    }
+  }
+
+  // Calculate visible range based on scroll position
+  private _updateVisibleRange() {
+    if (!this._options.items.length || this._viewportHeight === 0) return;
+    
+    const buffer = Math.floor(this._viewportHeight * (this._options.bufferSize / 100));
+    const startOffset = Math.max(0, this._scrollTop - buffer);
+    const endOffset = this._scrollTop + this._viewportHeight + buffer;
+    
+    let start = 0;
+    let end = this._options.items.length - 1;
+    
+    // Find start index
+    for (let i = 0; i < this._options.items.length; i++) {
+      const offset = this._itemOffsets.get(i) || 0;
+      if (offset >= startOffset) {
+        start = Math.max(0, i - 1);
+        break;
+      }
+    }
+    
+    // Find end index
+    for (let i = start; i < this._options.items.length; i++) {
+      const offset = this._itemOffsets.get(i) || 0;
+      if (offset > endOffset) {
+        end = i;
+        break;
+      }
+    }
+    
+    this._visibleRange = { start, end };
+  }
+
+  // Scroll to specific item index
+  scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth') {
+    if (!this._viewport) return;
+    
+    const offset = this._itemOffsets.get(index) || 0;
+    this._viewport.scrollTo({
+      top: offset,
+      behavior
+    });
+  }
+
+  // Get current state for rendering
+  getState(): VirtualScrollerState {
+    return {
+      viewportHeight: this._viewportHeight,
+      scrollTop: this._scrollTop,
+      totalHeight: this._totalHeight,
+      visibleRange: this._visibleRange,
+      containerOffset: this._itemOffsets.get(this._visibleRange.start) || 0,
+      visibleItems: this._options.items.slice(this._visibleRange.start, this._visibleRange.end + 1)
+    };
+  }
+
+  // Find closest item to a specific condition
+  findClosestIndex<K>(getValue: (item: T) => K, targetValue: K, compare: (a: K, b: K) => number): number {
+    let closestIndex = -1;
+    let closestDifference = Number.POSITIVE_INFINITY;
+
+    this._options.items.forEach((item, index) => {
+      const value = getValue(item);
+      const difference = Math.abs(compare(value, targetValue));
+      
+      if (difference < closestDifference) {
+        closestDifference = difference;
+        closestIndex = index;
+      }
+    });
+
+    return closestIndex;
+  }
+}