mtrl-addons 0.1.1 → 0.2.1

package/src/core/list-manager/utils/speed-tracker.ts

@@ -1,273 +0,0 @@
-/**
- * Scroll speed tracking utility
- * Measures velocity and determines loading strategies
- */
-
-import type { SpeedTracker } from "../types";
-import { LIST_MANAGER_CONSTANTS } from "../constants";
-
-/**
- * Create a new speed tracker instance
- */
-export function createSpeedTracker(): SpeedTracker {
-  return {
-    velocity: 0,
-    direction: "forward",
-    isAccelerating: false,
-    lastMeasurement: Date.now(),
-  };
-}
-
-/**
- * Update speed tracker with new scroll position
- */
-export function updateSpeedTracker(
-  tracker: SpeedTracker,
-  newPosition: number,
-  previousPosition: number,
-  orientation: "vertical" | "horizontal" = "vertical"
-): SpeedTracker {
-  const now = Date.now();
-  const deltaTime = now - tracker.lastMeasurement;
-  const deltaPosition = newPosition - previousPosition;
-
-  // Calculate velocity (px/ms)
-  const currentVelocity =
-    deltaTime > 0 ? Math.abs(deltaPosition) / deltaTime : 0;
-
-  // Determine direction based on orientation
-  let direction: "forward" | "backward";
-  if (orientation === "vertical") {
-    direction = deltaPosition >= 0 ? "forward" : "backward"; // down/up
-  } else {
-    direction = deltaPosition >= 0 ? "forward" : "backward"; // right/left
-  }
-
-  // Check if accelerating
-  const isAccelerating = currentVelocity > tracker.velocity;
-
-  // Apply deceleration factor for smooth velocity tracking
-  const smoothedVelocity =
-    tracker.velocity *
-      LIST_MANAGER_CONSTANTS.SPEED_TRACKING.DECELERATION_FACTOR +
-    currentVelocity *
-      (1 - LIST_MANAGER_CONSTANTS.SPEED_TRACKING.DECELERATION_FACTOR);
-
-  return {
-    velocity: smoothedVelocity,
-    direction,
-    isAccelerating,
-    lastMeasurement: now,
-  };
-}
-
-/**
- * Determine if scroll speed is fast (should defer loading)
- */
-export function isFastScrolling(tracker: SpeedTracker): boolean {
-  return (
-    tracker.velocity >
-    LIST_MANAGER_CONSTANTS.SPEED_TRACKING.FAST_SCROLL_THRESHOLD
-  );
-}
-
-/**
- * Determine if scroll speed is slow (should load immediately)
- */
-export function isSlowScrolling(tracker: SpeedTracker): boolean {
-  return (
-    tracker.velocity <
-    LIST_MANAGER_CONSTANTS.SPEED_TRACKING.SLOW_SCROLL_THRESHOLD
-  );
-}
-
-/**
- * Get loading strategy based on current speed
- */
-export function getLoadingStrategy(
-  tracker: SpeedTracker
-): "defer" | "immediate" | "maintain" {
-  if (isFastScrolling(tracker)) {
-    return "defer"; // User is seeking rapidly - show placeholders
-  } else if (isSlowScrolling(tracker)) {
-    return "immediate"; // User is reading - load proactively
-  } else {
-    return "maintain"; // Medium speed - continue current strategy
-  }
-}
-
-/**
- * Calculate scroll momentum for prediction
- */
-export function calculateScrollMomentum(
-  tracker: SpeedTracker,
-  containerSize: number,
-  estimatedItemSize: number
-): { predictedItems: number; decelerationTime: number } {
-  const { velocity, isAccelerating } = tracker;
-
-  // If not accelerating, velocity will decay
-  const decelerationFactor =
-    LIST_MANAGER_CONSTANTS.SPEED_TRACKING.DECELERATION_FACTOR;
-
-  // Calculate time to decelerate to slow scroll threshold
-  const targetVelocity =
-    LIST_MANAGER_CONSTANTS.SPEED_TRACKING.SLOW_SCROLL_THRESHOLD;
-  const decelerationTime = isAccelerating
-    ? 0
-    : Math.log(targetVelocity / velocity) / Math.log(decelerationFactor);
-
-  // Calculate predicted distance based on momentum
-  const predictedDistance = velocity * decelerationTime;
-
-  // Convert to items for preloading
-  const predictedItems = Math.ceil(predictedDistance / estimatedItemSize);
-
-  return {
-    predictedItems: Math.max(0, predictedItems),
-    decelerationTime: Math.max(0, decelerationTime),
-  };
-}
-
-/**
- * Create speed-based loading configuration
- */
-export function createSpeedBasedLoadingConfig(
-  tracker: SpeedTracker,
-  containerSize: number,
-  estimatedItemSize: number
-): {
-  strategy: "defer" | "immediate" | "maintain";
-  prefetchCount: number;
-  deferTimeout: number;
-} {
-  const strategy = getLoadingStrategy(tracker);
-  const momentum = calculateScrollMomentum(
-    tracker,
-    containerSize,
-    estimatedItemSize
-  );
-
-  let prefetchCount = 0;
-  let deferTimeout = 0;
-
-  switch (strategy) {
-    case "defer":
-      // Fast scrolling - minimal prefetch, set defer timeout
-      prefetchCount = Math.ceil(containerSize / estimatedItemSize);
-      deferTimeout = LIST_MANAGER_CONSTANTS.PERFORMANCE.DEBOUNCE_LOADING;
-      break;
-
-    case "immediate":
-      // Slow scrolling - aggressive prefetch based on momentum
-      prefetchCount = Math.max(
-        momentum.predictedItems,
-        LIST_MANAGER_CONSTANTS.RANGE_LOADING.PREFETCH_RANGES *
-          LIST_MANAGER_CONSTANTS.RANGE_LOADING.DEFAULT_RANGE_SIZE
-      );
-      deferTimeout = 0;
-      break;
-
-    case "maintain":
-      // Medium speed - standard prefetch
-      prefetchCount =
-        LIST_MANAGER_CONSTANTS.RANGE_LOADING.PREFETCH_RANGES *
-        LIST_MANAGER_CONSTANTS.RANGE_LOADING.DEFAULT_RANGE_SIZE;
-      deferTimeout = LIST_MANAGER_CONSTANTS.PERFORMANCE.DEBOUNCE_LOADING / 2;
-      break;
-  }
-
-  return {
-    strategy,
-    prefetchCount,
-    deferTimeout,
-  };
-}
-
-/**
- * Reset speed tracker (useful for programmatic scrolling)
- */
-export function resetSpeedTracker(tracker: SpeedTracker): SpeedTracker {
-  return {
-    velocity: 0,
-    direction: tracker.direction,
-    isAccelerating: false,
-    lastMeasurement: Date.now(),
-  };
-}
-
-/**
- * Apply speed-based throttling to scroll events
- */
-export function getScrollThrottleInterval(tracker: SpeedTracker): number {
-  const baseInterval = LIST_MANAGER_CONSTANTS.PERFORMANCE.THROTTLE_SCROLL;
-
-  // Reduce throttling during fast scrolling for better responsiveness
-  if (isFastScrolling(tracker)) {
-    return Math.max(baseInterval / 2, 8); // Minimum 8ms (120fps)
-  }
-
-  // Increase throttling during slow scrolling to save CPU
-  if (isSlowScrolling(tracker)) {
-    return baseInterval * 2;
-  }
-
-  return baseInterval;
-}
-
-/**
- * Determine if scroll direction changed significantly
- */
-export function hasSignificantDirectionChange(
-  tracker: SpeedTracker,
-  previousDirection: "forward" | "backward"
-): boolean {
-  return (
-    tracker.direction !== previousDirection &&
-    tracker.velocity >
-      LIST_MANAGER_CONSTANTS.SPEED_TRACKING.SLOW_SCROLL_THRESHOLD
-  );
-}
-
-/**
- * Calculate adaptive overscan based on scroll speed
- */
-export function calculateAdaptiveOverscan(
-  tracker: SpeedTracker,
-  baseOverscan: number = LIST_MANAGER_CONSTANTS.VIRTUAL_SCROLL.OVERSCAN_BUFFER
-): number {
-  const { velocity } = tracker;
-
-  // Increase overscan during fast scrolling
-  if (isFastScrolling(tracker)) {
-    return baseOverscan * 2;
-  }
-
-  // Reduce overscan during slow scrolling
-  if (isSlowScrolling(tracker)) {
-    return Math.max(1, Math.floor(baseOverscan / 2));
-  }
-
-  return baseOverscan;
-}
-
-/**
- * Get debug information for speed tracker
- */
-export function getSpeedTrackerDebugInfo(tracker: SpeedTracker): {
-  velocity: string;
-  direction: string;
-  isAccelerating: boolean;
-  strategy: string;
-  isFast: boolean;
-  isSlow: boolean;
-} {
-  return {
-    velocity: `${tracker.velocity.toFixed(2)} px/ms`,
-    direction: tracker.direction,
-    isAccelerating: tracker.isAccelerating,
-    strategy: getLoadingStrategy(tracker),
-    isFast: isFastScrolling(tracker),
-    isSlow: isSlowScrolling(tracker),
-  };
-}

package/src/styles/components/_list.scss

@@ -1,244 +0,0 @@
-// mtrl-addons List Component Styles
-// Based on mtrl/src/styles/components/_list.scss
-// Only addons-specific enhancements that don't exist in base mtrl
-
-// Import mtrl base styles
-@use "../../../../mtrl/src/styles/abstract/base" as base;
-@use "../../../../mtrl/src/styles/abstract/variables" as v;
-@use "../../../../mtrl/src/styles/abstract/functions" as f;
-@use "../../../../mtrl/src/styles/abstract/mixins" as m;
-@use "../../../../mtrl/src/styles/abstract/theme" as t;
-
-// Component variables following mtrl pattern
-$base-component: "#{base.$prefix}-list";
-$addons-component: "#{base.$prefix}-list-addons";
-
-// Scrollbar variables
-$scrollbar-track-width: 8px;
-$scrollbar-thumb-min-height: 20px;
-$scrollbar-border-radius: 4px;
-$scrollbar-track-color: rgba(0, 0, 0, 0.1);
-$scrollbar-thumb-color: rgba(0, 0, 0, 0.3);
-$scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.5);
-$scrollbar-thumb-active-color: rgba(0, 0, 0, 0.6);
-$scrollbar-transition: all 0.2s ease;
-$scrollbar-fade-transition: opacity 0.2s ease;
-
-// Addons-specific enhancements only
-.#{$base-component}.#{$addons-component} {
-  // Collection data management integration (scroll optimization)
-  background-color: var(--mtrl-sys-color-surface);
-  &[data-addons="true"] {
-    // Enhanced scroll performance for large lists
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    position: relative; // Required for custom scrollbar positioning
-
-    // Hide native scrollbar completely for custom scrollbar
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    // Scrollbar track
-    .#{base.$prefix}-list__scrollbar.#{base.$prefix}-list__scrollbar-track {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: $scrollbar-track-width;
-      height: 100%;
-      background: $scrollbar-track-color;
-      opacity: 0;
-      transition: $scrollbar-fade-transition;
-      z-index: 1000;
-      cursor: pointer;
-
-      // Show on hover or interaction
-      &:hover,
-      &.#{base.$prefix}-list__scrollbar--scrolling,
-      &.#{base.$prefix}-list__scrollbar--dragging {
-        opacity: 1;
-      }
-
-      // Custom scrollbar thumb
-      .#{base.$prefix}-list__scrollbar-thumb {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        min-height: $scrollbar-thumb-min-height;
-        background: $scrollbar-thumb-color;
-        border-radius: $scrollbar-border-radius;
-        cursor: pointer;
-        transition: background-color 0.2s ease; // Only transition color, not position
-
-        &:hover {
-          background: $scrollbar-thumb-hover-color;
-        }
-
-        &:active,
-        &.#{base.$prefix}-list__scrollbar-thumb--dragging {
-          background: $scrollbar-thumb-active-color;
-          transition: none;
-        }
-      }
-    }
-
-    // Show scrollbar on container hover
-    &:hover
-      .#{base.$prefix}-list__scrollbar.#{base.$prefix}-list__scrollbar-track {
-      opacity: 1;
-    }
-
-    // Viewport styling for custom scrollbar compatibility
-    .#{base.$prefix}-list__viewport {
-      // Ensure viewport takes full height
-      height: 100%;
-      overflow: hidden; // Let custom scrollbar handle scrolling
-      position: relative;
-
-      // Scrollbar-enabled state
-      &.#{base.$prefix}-list__scrollbar-enabled {
-        // Specific adjustments when scrollbar is present
-        padding-right: $scrollbar-track-width;
-      }
-    }
-  }
-  // Placeholder styling
-  .#{base.$prefix}-list-item__placeholder {
-    opacity: 0.4;
-    transition: opacity 0.2s ease;
-
-    // Create solid blocks for placeholder content
-    .user-name,
-    .user-email,
-    .user-role,
-    [class*="__primary"],
-    [class*="__secondary"] {
-      position: relative;
-      display: inline-block; // Make width based on content
-
-      // Hide the actual text but keep it for width calculation
-      color: transparent;
-      background-color: var(--mtrl-sys-color-on-surface);
-      border-radius: 0.1em; // Smaller radius for thinner appearance
-      opacity: 0.7; // Adjust opacity for the blocks
-
-      // Remove any text decoration
-      text-decoration: none;
-
-      // Thinner blocks - adjust line height and padding
-      line-height: 1;
-      padding: 0.05em 0; // Much less padding for thinner blocks
-
-      // Ensure proper vertical alignment
-      vertical-align: middle;
-    }
-
-    // Ensure email and role are on separate lines
-    .user-email,
-    .user-role {
-      // display: block; // Force block display to ensure new lines
-      margin-top: 0.2em; // Small spacing between lines
-    }
-
-    // For avatar placeholder
-    .user-avatar {
-      background-color: var(--mtrl-sys-color-primary-container);
-      color: var(--mtrl-sys-color-primary-container);
-      opacity: 1;
-    }
-  }
-
-  // Dark theme support for scrollbar
-  @media (prefers-color-scheme: dark) {
-    &[data-addons="true"] {
-      .#{base.$prefix}-list__scrollbar.#{base.$prefix}-list__scrollbar-track {
-        background: rgba(255, 255, 255, 0.1);
-
-        .#{base.$prefix}-list__scrollbar-thumb {
-          background: rgba(255, 255, 255, 0.3);
-
-          &:hover {
-            background: rgba(255, 255, 255, 0.5);
-          }
-
-          &:active,
-          &.#{base.$prefix}-list__scrollbar-thumb--dragging {
-            background: rgba(255, 255, 255, 0.6);
-          }
-        }
-      }
-    }
-  }
-
-  // Future addons-specific features:
-  // - Advanced data grid functionality
-  // - Tree view capabilities
-  // - Advanced filtering/sorting UI
-  // - Custom selection modes beyond what mtrl provides
-  // - Integration with external data sources
-  // - Advanced virtualization strategies
-}
-
-// users list
-.#{base.$prefix}-list--users {
-  height: 600px;
-  width: 320px;
-
-  .user-item {
-    padding: 12px 16px;
-    display: flex;
-    align-items: start;
-    transition: background-color 0.2s ease;
-  }
-
-  .user-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--mtrl-sys-color-primary-container);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    flex-shrink: 0;
-  }
-
-  .user-details {
-    flex: 1;
-    min-width: 0;
-    margin-left: 12px;
-  }
-
-  .user-name {
-    font-weight: 500;
-  }
-
-  .user-email {
-    // color: #666;
-    font-size: 14px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-phone {
-    color: var(--mtrl-sys-color-primary);
-    font-size: 13px;
-    font-weight: 500;
-    margin-top: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .user-role {
-    color: var(--mtrl-sys-color-on-surface-variant);
-    font-size: 12px;
-    margin-top: 2px;
-  }
-}

package/src/types/mtrl.d.ts

@@ -1,6 +0,0 @@
-// src/types/mtrl.d.ts
-declare module "mtrl" {
-  export * from "mtrl/src/core";
-  export * from "mtrl/src/components";
-  export * from "mtrl/src/constants";
-}