Velocity-Based Loading

// Shared data and utilities for velocity-loading example variants
// This file is imported by all framework implementations to avoid duplication

// =============================================================================
// Constants
// =============================================================================

export const CANCEL_LOAD_VELOCITY_THRESHOLD = 15; // px/ms
export const TOTAL_ITEMS = 1000000;
export const API_BASE = "http://localhost:3338";
export const ITEM_HEIGHT = 72;

// =============================================================================
// API State
// =============================================================================

let apiDelay = 0;
let useRealApi = true; // Start with live API by default

export const setApiDelay = (delay) => {
  apiDelay = delay;
};

export const setUseRealApi = (value) => {
  useRealApi = value;
};

export const getUseRealApi = () => useRealApi;

// =============================================================================
// Real API — fetches from vlist.dev backend
// =============================================================================

const fetchFromApi = async (offset, limit) => {
  const params = new URLSearchParams({
    offset: String(offset),
    limit: String(limit),
    total: String(TOTAL_ITEMS),
  });
  if (apiDelay > 0) params.set("delay", String(apiDelay));

  const res = await fetch(`${API_BASE}/api/users?${params}`);
  if (!res.ok) throw new Error(`API error: ${res.status}`);
  return res.json();
};

// =============================================================================
// Simulated API — deterministic in-memory fallback
// =============================================================================

const generateItem = (id) => ({
  id,
  name: `User ${id}`,
  email: `user${id}@example.com`,
  role: ["Admin", "Editor", "Viewer"][id % 3],
  avatar: String.fromCharCode(65 + (id % 26)),
});

const fetchSimulated = async (offset, limit) => {
  if (apiDelay > 0) await new Promise((r) => setTimeout(r, apiDelay));
  const items = [];
  const end = Math.min(offset + limit, TOTAL_ITEMS);
  for (let i = offset; i < end; i++) items.push(generateItem(i + 1));
  return { items, total: TOTAL_ITEMS, hasMore: end < TOTAL_ITEMS };
};

// =============================================================================
// Unified fetch
// =============================================================================

export const fetchItems = (offset, limit) =>
  useRealApi ? fetchFromApi(offset, limit) : fetchSimulated(offset, limit);

// =============================================================================
// Template — single template for both real items and placeholders.
// The renderer adds .vlist-item--placeholder on the wrapper element,
// so CSS handles the visual difference (skeleton blocks, shimmer, etc).
// Placeholder items carry the same fields as real data, filled with
// mask characters (x) sized to match actual data from the first batch.
// =============================================================================

export const itemTemplate = (item, index) => {
  const displayName = item.firstName
    ? `${item.firstName} ${item.lastName}`
    : item.name || "";
  const avatarText = item.avatar || displayName[0] || "";

  return `
    <div class="item-content">
      <div class="item-avatar">${avatarText}</div>
      <div class="item-details">
        <div class="item-name">${displayName} (#${index + 1})</div>
        <div class="item-email">${item.email || ""}</div>
        <div class="item-role">${item.role || ""}</div>
      </div>
    </div>
  `;
};

// =============================================================================
// Utilities
// =============================================================================

export const formatApiSource = (useRealApi) =>
  useRealApi ? "⚡ Live API" : "🧪 Simulated";

export const formatVelocity = (velocity) => velocity.toFixed(1);

export const formatLoadedCount = (count) => count.toLocaleString();

/* Basic Example — example-specific styles only
   Common styles (.container, h1, .description, .stats, footer)
   are provided by example/example.css using shell.css design tokens.
   Panel system (.split-layout, .split-panel, .panel-*)
   is also provided by example/example.css. */

/* List container height */
#list-container {
    height: 600px;
    max-width: 360px;
    margin: 0 auto;
}

/* ============================================================================
   Item Detail — example-specific avatar + email
   ============================================================================ */

.panel-detail__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.panel-detail__email {
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================================================
   Item styles (inside list)
   ============================================================================ */

.item-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    height: 100%;
}

.item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #667eea;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-email {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-role {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-index {
    font-size: 12px;
    min-width: 60px;
    text-align: right;
}

/* ============================================================================
   Placeholder skeleton — driven by .vlist-item--placeholder on the wrapper.
   The template is identical for real and placeholder items; mask characters
   (x) set the natural width, CSS hides them and shows skeleton blocks.
   ============================================================================ */

.vlist-item--placeholder .item-avatar {
    background-color: rgba(102, 126, 234, 0.9);
    color: transparent;
}

.vlist-item--placeholder .item-name {
    color: transparent;
    background-color: var(--vlist-placeholder-bg);
    border-radius: 4px;
    width: fit-content;
    min-width: 60%;
    line-height: 1.1;
    margin-bottom: 1px;
}

.vlist-item--placeholder .item-email {
    color: transparent;
    background-color: var(--vlist-placeholder-bg);
    border-radius: 4px;
    width: fit-content;
    min-width: 70%;
    line-height: 1;
    margin-bottom: 1px;
}

.vlist-item--placeholder .item-role {
    color: transparent;
    background-color: var(--vlist-placeholder-bg);
    border-radius: 4px;
    width: fit-content;
    min-width: 30%;
    line-height: 1;
}

/* ============================================================================
   Velocity-specific styles
   ============================================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stat-card {
    padding: 4px;
    background: var(--surface-container);
    border-radius: 12px;
    text-align: center;
}

.stat-card__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card__value--loading {
    color: #667eea;
}

.stat-card__value--idle {
    color: #43e97b;
}

.stat-card__label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.panel-section__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.velocity-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
    padding: 4px;
    background: var(--surface-container);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.velocity-display--fast {
    background: color-mix(in srgb, #fa709a 10%, transparent);
}

.velocity-display__value {
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.velocity-display__unit {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
}

.velocity-bar {
    position: relative;
    height: 16px;
    background: var(--surface-container);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.velocity-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #43e97b, #667eea);
    transition:
        width 0.3s ease,
        background 0.2s ease;
    border-radius: 8px;
    width: 0%;
}

.velocity-bar__fill--fast {
    background: linear-gradient(90deg, #667eea, #fa709a);
}

.velocity-bar__fill--slow {
    background: linear-gradient(90deg, #43e97b, #667eea);
}

.velocity-bar__marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--outline-variant, rgba(0, 0, 0, 0.3));
}

.velocity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.velocity-labels__threshold {
    font-weight: 600;
}

.velocity-status {
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.velocity-status--allowed {
    background: color-mix(in srgb, #43e97b 10%, transparent);
    color: var(--color-success, #2ea563);
}

.velocity-status--skipped {
    background: color-mix(in srgb, #fa709a 10%, transparent);
    color: var(--color-error, #d63c6f);
}

/* ============================================================================
   Button Group Enhancement
   ============================================================================ */

.panel-btn-group {
    display: flex;
    gap: 8px;
    background: var(--surface-container);
    padding: 4px;
    border-radius: 12px;
}

.panel-btn-group .panel-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-weight: 500;
}

.panel-btn-group .panel-btn:hover {
    background: var(--surface-container-high);
    color: var(--text-primary);
}

.panel-btn-group .panel-btn--active {
    background: var(--surface-container-highest);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.panel-btn-group .panel-btn--active:hover {
    background: var(--surface-container-highest);
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 820px) {
    #list-container {
        max-width: none;
        height: 400px;
    }
}