@parqui/react 1.1.1

package/dist/index.cjs

@@ -0,0 +1,3177 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FileDropZone: () => FileDropZone,
+  HEADER_HEIGHT: () => HEADER_HEIGHT,
+  ParquetExplorer: () => ParquetExplorer,
+  ParquetViewer: () => ParquetViewer,
+  ParquiLogo: () => ParquiLogo,
+  ROW_HEIGHT: () => ROW_HEIGHT,
+  useColumnManager: () => useColumnManager,
+  useContainerSize: () => useContainerSize,
+  useKeyboardNavigation: () => useKeyboardNavigation,
+  useParquetData: () => useParquetData,
+  useVirtualScroll: () => useVirtualScroll
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ParquetViewer.tsx
+var import_react9 = require("react");
+
+// src/hooks/useContainerSize.ts
+var import_react = require("react");
+function useContainerSize() {
+  const containerRef = (0, import_react.useRef)(null);
+  const [size, setSize] = (0, import_react.useState)({ width: 0, height: 0 });
+  const rafRef = (0, import_react.useRef)(0);
+  const handleResize = (0, import_react.useCallback)((entries) => {
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(() => {
+      const entry = entries[0];
+      if (entry) {
+        const { width, height } = entry.contentRect;
+        setSize((prev) => {
+          if (Math.abs(prev.width - width) < 1 && Math.abs(prev.height - height) < 1) {
+            return prev;
+          }
+          return { width, height };
+        });
+      }
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(el);
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      observer.disconnect();
+    };
+  }, [handleResize]);
+  return { containerRef, size };
+}
+
+// src/hooks/useParquetData.ts
+var import_react2 = require("react");
+var import_core = require("@parqui/core");
+
+// src/source.ts
+function makeSliceablePromise(input) {
+  const promise = Promise.resolve(input);
+  promise.slice = (start, end) => promise.then((buffer) => buffer.slice(start, end));
+  return promise;
+}
+var sourceCache = /* @__PURE__ */ new WeakMap();
+function normalizeParquetSource(source) {
+  const cached = sourceCache.get(source);
+  if (cached) return cached;
+  const wrapped = {
+    byteLength: source.byteLength,
+    slice(start, end) {
+      return makeSliceablePromise(
+        Promise.resolve(source.slice(start, end))
+      );
+    }
+  };
+  sourceCache.set(source, wrapped);
+  return wrapped;
+}
+function isFileSource(value) {
+  return typeof File !== "undefined" && value instanceof File;
+}
+function isArrayBufferSource(value) {
+  return value instanceof ArrayBuffer;
+}
+function isParquetSource(value) {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value;
+  return typeof candidate.byteLength === "number" && typeof candidate.slice === "function";
+}
+function resolveSourceInput(source) {
+  if (source === void 0) return {};
+  if (isFileSource(source)) return { file: source };
+  if (isArrayBufferSource(source)) return { data: source };
+  if (typeof source === "string") return { url: source };
+  if (isParquetSource(source)) return { source: normalizeParquetSource(source) };
+  return {};
+}
+function sourceToDisplayName(source) {
+  if (isFileSource(source)) return source.name;
+  if (typeof source === "string") return urlToName(source);
+  return "";
+}
+function sourceToDisplaySize(source) {
+  if (isFileSource(source)) return source.size;
+  return void 0;
+}
+function urlToName(url) {
+  try {
+    const pathname = new URL(url).pathname;
+    return pathname.split("/").pop() ?? url;
+  } catch {
+    return url;
+  }
+}
+
+// src/hooks/useParquetData.ts
+var PARQUI_DEBUG_NS = "[parqui/react/useParquetData]";
+function debugEnabled() {
+  const g = globalThis;
+  return g?.__PARQUI_DEBUG ?? false;
+}
+function dbg(message, details) {
+  if (!debugEnabled()) return;
+  if (details !== void 0) {
+    console.log(`${PARQUI_DEBUG_NS} ${message}`, details);
+  } else {
+    console.log(`${PARQUI_DEBUG_NS} ${message}`);
+  }
+}
+function dbgError(message, error) {
+  if (!debugEnabled()) return;
+  console.error(`${PARQUI_DEBUG_NS} ${message}`, error);
+}
+var CHUNK_SIZE = 500;
+var MAX_DISPLAY_CHUNKS = 10;
+var SOURCE_CACHE_MAX = 5e3;
+var MAX_CONCURRENT_READS = 4;
+var GAP_TOLERANCE = 200;
+function useParquetData(inputSource, columns) {
+  dbg("hook:init", {
+    hasInputSource: inputSource !== void 0,
+    columns: columns ?? null
+  });
+  const [sourceState, setSourceState] = (0, import_react2.useState)({ metadata: null, source: null, loading: false, error: null, totalRows: 0 });
+  const [pipeline, setPipeline] = (0, import_react2.useState)(import_core.createEmptyPipeline);
+  const [computing, setComputing] = (0, import_react2.useState)(false);
+  const [mapping, setMapping] = (0, import_react2.useState)(null);
+  const [groups, setGroups] = (0, import_react2.useState)([]);
+  const [renderTick, setRenderTick] = (0, import_react2.useState)(0);
+  const sourceRef = (0, import_react2.useRef)(null);
+  const columnsRef = (0, import_react2.useRef)(columns);
+  const mountedRef = (0, import_react2.useRef)(true);
+  const metadataRef = (0, import_react2.useRef)(null);
+  const mappingRef = (0, import_react2.useRef)(null);
+  const genRef = (0, import_react2.useRef)(0);
+  const chunksRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const loadingChunksRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const sourceRowCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const columnCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const uniqueCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  columnsRef.current = columns;
+  const filteredRowCount = mapping ? mapping.length : sourceState.totalRows;
+  const tick = (0, import_react2.useCallback)(() => setRenderTick((v) => v + 1), []);
+  const clearCaches = (0, import_react2.useCallback)(() => {
+    chunksRef.current.clear();
+    loadingChunksRef.current.clear();
+    sourceRowCacheRef.current.clear();
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    dbg("source:init:start", {
+      inputType: inputSource === void 0 ? "undefined" : inputSource instanceof File ? "File" : inputSource instanceof ArrayBuffer ? "ArrayBuffer" : typeof inputSource
+    });
+    mountedRef.current = true;
+    clearCaches();
+    sourceRef.current = null;
+    metadataRef.current = null;
+    mappingRef.current = null;
+    columnCacheRef.current.clear();
+    uniqueCacheRef.current.clear();
+    genRef.current++;
+    setSourceState({
+      metadata: null,
+      source: null,
+      loading: true,
+      error: null,
+      totalRows: 0
+    });
+    setPipeline((0, import_core.createEmptyPipeline)());
+    setMapping(null);
+    setGroups([]);
+    setComputing(false);
+    let cancelled = false;
+    async function init() {
+      try {
+        let source;
+        const resolved = resolveSourceInput(inputSource);
+        dbg("source:init:resolved", {
+          hasFile: !!resolved.file,
+          hasData: !!resolved.data,
+          hasUrl: !!resolved.url,
+          hasSource: !!resolved.source
+        });
+        if (resolved.source) source = resolved.source;
+        else if (resolved.data) source = (0, import_core.sourceFromBuffer)(resolved.data);
+        else if (resolved.file) source = (0, import_core.sourceFromFile)(resolved.file);
+        else if (resolved.url) source = await (0, import_core.sourceFromUrl)(resolved.url);
+        else {
+          dbg("source:init:none");
+          setSourceState({
+            metadata: null,
+            source: null,
+            loading: false,
+            error: null,
+            totalRows: 0
+          });
+          return;
+        }
+        if (cancelled) return;
+        sourceRef.current = source;
+        const metadata = await (0, import_core.readParquetMetadata)(source);
+        if (cancelled) return;
+        dbg("source:init:metadata-loaded", {
+          rowCount: metadata.rowCount,
+          columns: metadata.columns.length,
+          rowGroups: metadata.rowGroups
+        });
+        metadataRef.current = metadata;
+        setSourceState({
+          metadata,
+          source,
+          loading: false,
+          error: null,
+          totalRows: metadata.rowCount
+        });
+      } catch (err) {
+        dbgError("source:init:error", err);
+        if (!cancelled) {
+          setSourceState({
+            metadata: null,
+            source: null,
+            loading: false,
+            error: err instanceof Error ? err.message : "Failed to load file",
+            totalRows: 0
+          });
+        }
+      }
+    }
+    init();
+    return () => {
+      cancelled = true;
+      mountedRef.current = false;
+    };
+  }, [inputSource, clearCaches]);
+  (0, import_react2.useEffect)(() => {
+    const source = sourceRef.current;
+    const metadata = metadataRef.current;
+    const totalRows = metadata?.rowCount ?? 0;
+    if (!source || !metadata || totalRows === 0) {
+      dbg("pipeline:skip-no-source-or-metadata", {
+        hasSource: !!source,
+        hasMetadata: !!metadata,
+        totalRows
+      });
+      mappingRef.current = null;
+      setMapping(null);
+      setGroups([]);
+      setComputing(false);
+      genRef.current++;
+      return;
+    }
+    const { sorts, filters, groups: groupDefs } = pipeline;
+    dbg("pipeline:run", {
+      sorts,
+      filtersCount: filters.length,
+      groups: groupDefs,
+      totalRows
+    });
+    if (sorts.length === 0 && filters.length === 0 && groupDefs.length === 0) {
+      const hadMapping = mappingRef.current !== null;
+      mappingRef.current = null;
+      genRef.current++;
+      setMapping(null);
+      setGroups([]);
+      setComputing(false);
+      if (hadMapping) {
+        clearCaches();
+      }
+      dbg("pipeline:fast-path");
+      tick();
+      return;
+    }
+    const gen = ++genRef.current;
+    const isStale = () => gen !== genRef.current;
+    clearCaches();
+    setComputing(true);
+    tick();
+    async function compute() {
+      try {
+        dbg("pipeline:compute:start", { gen });
+        const neededCols = /* @__PURE__ */ new Set();
+        for (const s of sorts) neededCols.add(s.column);
+        for (const f of filters) neededCols.add(f.column);
+        for (const g of groupDefs) neededCols.add(g.column);
+        const toRead = [...neededCols].filter(
+          (c) => !columnCacheRef.current.has(c)
+        );
+        if (toRead.length > 0) {
+          dbg("pipeline:compute:read-columns", { toRead });
+          const newCols = await (0, import_core.readColumnValues)(source, toRead, isStale);
+          if (isStale()) return;
+          for (const [key, vals] of newCols) {
+            columnCacheRef.current.set(key, vals);
+          }
+        }
+        if (isStale()) return;
+        await yieldToUI();
+        let indices = (0, import_core.buildFilterIndex)(totalRows, filters, columnCacheRef.current);
+        if (indices === null) {
+          indices = Array.from({ length: totalRows }, (_, i) => i);
+        }
+        if (isStale()) return;
+        await yieldToUI();
+        if (sorts.length > 0) {
+          dbg("pipeline:compute:sort:start", { sortsCount: sorts.length, indices: indices.length });
+          const colValues = columnCacheRef.current;
+          const compareFn = (a, b) => {
+            for (const sort of sorts) {
+              const col = colValues.get(sort.column);
+              if (!col) continue;
+              const va = col[a];
+              const vb = col[b];
+              const cmp = compareValues(va, vb);
+              if (cmp !== 0) return sort.direction === "asc" ? cmp : -cmp;
+            }
+            return a - b;
+          };
+          if (indices.length > 1e5) {
+            indices = await asyncSort(indices, compareFn, isStale);
+          } else {
+            indices.sort(compareFn);
+          }
+        }
+        if (isStale()) return;
+        let groupNodes = [];
+        if (groupDefs.length > 0) {
+          dbg("pipeline:compute:groups:start", { groupDefs });
+          groupNodes = (0, import_core.buildGroups)(indices, groupDefs, columnCacheRef.current);
+        }
+        mappingRef.current = indices;
+        setMapping(indices);
+        setGroups(groupNodes);
+        dbg("pipeline:compute:done", {
+          mappedRows: indices.length,
+          groups: groupNodes.length
+        });
+        tick();
+      } catch (error) {
+        dbgError("pipeline:compute:error", error);
+      } finally {
+        if (!isStale()) {
+          setComputing(false);
+        }
+      }
+    }
+    compute();
+  }, [sourceState.source, sourceState.metadata, sourceState.totalRows, pipeline, clearCaches, tick]);
+  const fetchSourceRows = (0, import_react2.useCallback)(
+    async (neededIndices, gen) => {
+      dbg("fetchSourceRows:start", {
+        needed: neededIndices.length,
+        gen
+      });
+      if (!sourceRef.current || !metadataRef.current || neededIndices.length === 0) return;
+      const totalRows = metadataRef.current.rowCount;
+      const unique = [...new Set(neededIndices)].filter(
+        (idx) => !sourceRowCacheRef.current.has(idx)
+      );
+      if (unique.length === 0) return;
+      unique.sort((a, b) => a - b);
+      const clusters = [];
+      let curStart = unique[0];
+      let curEnd = unique[0] + 1;
+      let curNeeded = /* @__PURE__ */ new Set([unique[0]]);
+      for (let i = 1; i < unique.length; i++) {
+        if (unique[i] <= curEnd + GAP_TOLERANCE) {
+          curEnd = unique[i] + 1;
+          curNeeded.add(unique[i]);
+        } else {
+          clusters.push({ start: curStart, end: curEnd, needed: curNeeded });
+          curStart = unique[i];
+          curEnd = unique[i] + 1;
+          curNeeded = /* @__PURE__ */ new Set([unique[i]]);
+        }
+      }
+      clusters.push({ start: curStart, end: curEnd, needed: curNeeded });
+      dbg("fetchSourceRows:clusters", {
+        clusters: clusters.length,
+        uniqueIndices: unique.length
+      });
+      await runWithConcurrency(clusters, MAX_CONCURRENT_READS, async (cluster) => {
+        if (gen !== genRef.current) return;
+        try {
+          const readStart = Math.max(0, cluster.start);
+          const readEnd = Math.min(cluster.end, totalRows);
+          const result = await (0, import_core.readParquetData)(sourceRef.current, {
+            columns: columnsRef.current,
+            offset: readStart,
+            limit: readEnd - readStart
+          });
+          if (!mountedRef.current || gen !== genRef.current) return;
+          for (let i = 0; i < result.rows.length; i++) {
+            const sourceIdx = readStart + i;
+            if (cluster.needed.has(sourceIdx)) {
+              sourceRowCacheRef.current.set(sourceIdx, result.rows[i]);
+            }
+          }
+          dbg("fetchSourceRows:cluster:done", {
+            readStart,
+            readEnd,
+            rows: result.rows.length
+          });
+        } catch (error) {
+          dbgError("fetchSourceRows:cluster:error", error);
+        }
+      });
+      const cache = sourceRowCacheRef.current;
+      if (cache.size > SOURCE_CACHE_MAX) {
+        const toDelete = cache.size - SOURCE_CACHE_MAX;
+        let count = 0;
+        for (const key of cache.keys()) {
+          if (count >= toDelete) break;
+          cache.delete(key);
+          count++;
+        }
+      }
+    },
+    []
+  );
+  const loadChunk = (0, import_react2.useCallback)(
+    async (chunkIndex) => {
+      dbg("loadChunk:start", { chunkIndex });
+      if (loadingChunksRef.current.has(chunkIndex)) return;
+      if (chunksRef.current.has(chunkIndex)) return;
+      if (!sourceRef.current) return;
+      loadingChunksRef.current.add(chunkIndex);
+      const gen = genRef.current;
+      try {
+        const curMapping = mappingRef.current;
+        const displayStart = chunkIndex * CHUNK_SIZE;
+        if (curMapping) {
+          const displayEnd = Math.min(displayStart + CHUNK_SIZE, curMapping.length);
+          const sourceIndices = curMapping.slice(displayStart, displayEnd);
+          dbg("loadChunk:mapped", {
+            chunkIndex,
+            displayStart,
+            displayEnd,
+            sourceIndices: sourceIndices.length
+          });
+          const uncached = sourceIndices.filter(
+            (idx) => !sourceRowCacheRef.current.has(idx)
+          );
+          if (uncached.length > 0) {
+            dbg("loadChunk:mapped:fetch-uncached", {
+              chunkIndex,
+              uncached: uncached.length
+            });
+            await fetchSourceRows(uncached, gen);
+            if (!mountedRef.current || gen !== genRef.current) return;
+          }
+          const rows = [];
+          for (const sourceIdx of sourceIndices) {
+            rows.push(sourceRowCacheRef.current.get(sourceIdx) ?? {});
+          }
+          if (mountedRef.current && gen === genRef.current) {
+            chunksRef.current.set(chunkIndex, { rows, loadedAt: Date.now() });
+            evictOldChunks(chunksRef.current);
+            dbg("loadChunk:mapped:done", {
+              chunkIndex,
+              rows: rows.length
+            });
+            tick();
+          }
+        } else {
+          dbg("loadChunk:sequential", {
+            chunkIndex,
+            displayStart,
+            limit: CHUNK_SIZE
+          });
+          const result = await (0, import_core.readParquetData)(sourceRef.current, {
+            columns: columnsRef.current,
+            offset: displayStart,
+            limit: CHUNK_SIZE
+          });
+          if (mountedRef.current && gen === genRef.current) {
+            chunksRef.current.set(chunkIndex, {
+              rows: result.rows,
+              loadedAt: Date.now()
+            });
+            evictOldChunks(chunksRef.current);
+            dbg("loadChunk:sequential:done", {
+              chunkIndex,
+              rows: result.rows.length
+            });
+            tick();
+          }
+        }
+      } catch (error) {
+        dbgError("loadChunk:error", error);
+      } finally {
+        loadingChunksRef.current.delete(chunkIndex);
+      }
+    },
+    [fetchSourceRows, tick]
+  );
+  const getRow = (0, import_react2.useCallback)(
+    (displayIndex) => {
+      const chunkIndex = Math.floor(displayIndex / CHUNK_SIZE);
+      const chunk = chunksRef.current.get(chunkIndex);
+      if (!chunk) return void 0;
+      return chunk.rows[displayIndex - chunkIndex * CHUNK_SIZE];
+    },
+    []
+  );
+  const ensureRange = (0, import_react2.useCallback)(
+    (start, end) => {
+      dbg("ensureRange", { start, end, computing });
+      if (computing) return;
+      const startChunk = Math.floor(start / CHUNK_SIZE);
+      const endChunk = Math.floor(Math.max(0, end - 1) / CHUNK_SIZE);
+      for (let i = startChunk; i <= endChunk; i++) {
+        if (!chunksRef.current.has(i) && !loadingChunksRef.current.has(i)) {
+          loadChunk(i);
+        }
+      }
+    },
+    [loadChunk, computing]
+  );
+  const ensureIndices = (0, import_react2.useCallback)(
+    (displayIndices) => {
+      dbg("ensureIndices", {
+        displayIndices: displayIndices.length,
+        computing
+      });
+      if (computing) return;
+      const chunkSet = /* @__PURE__ */ new Set();
+      for (const idx of displayIndices) {
+        chunkSet.add(Math.floor(idx / CHUNK_SIZE));
+      }
+      for (const chunkIdx of chunkSet) {
+        if (!chunksRef.current.has(chunkIdx) && !loadingChunksRef.current.has(chunkIdx)) {
+          loadChunk(chunkIdx);
+        }
+      }
+    },
+    [loadChunk, computing]
+  );
+  const toggleSort = (0, import_react2.useCallback)((column) => {
+    setPipeline((prev) => {
+      const existing = prev.sorts.find((s) => s.column === column);
+      let newSorts;
+      if (!existing) {
+        newSorts = [...prev.sorts, { column, direction: "asc" }];
+      } else if (existing.direction === "asc") {
+        newSorts = prev.sorts.map(
+          (s) => s.column === column ? { ...s, direction: "desc" } : s
+        );
+      } else {
+        newSorts = prev.sorts.filter((s) => s.column !== column);
+      }
+      return { ...prev, sorts: newSorts };
+    });
+  }, []);
+  const setSort = (0, import_react2.useCallback)((sorts) => {
+    setPipeline((prev) => ({ ...prev, sorts }));
+  }, []);
+  const clearSort = (0, import_react2.useCallback)(() => {
+    setPipeline((prev) => ({ ...prev, sorts: [] }));
+  }, []);
+  const getSortDirection = (0, import_react2.useCallback)(
+    (column) => {
+      return pipeline.sorts.find((s) => s.column === column)?.direction ?? null;
+    },
+    [pipeline.sorts]
+  );
+  const getSortPriority = (0, import_react2.useCallback)(
+    (column) => {
+      const idx = pipeline.sorts.findIndex((s) => s.column === column);
+      return idx >= 0 ? idx + 1 : null;
+    },
+    [pipeline.sorts]
+  );
+  const setFilter = (0, import_react2.useCallback)((filter) => {
+    setPipeline((prev) => ({
+      ...prev,
+      filters: [
+        ...prev.filters.filter((f) => f.column !== filter.column),
+        filter
+      ]
+    }));
+  }, []);
+  const removeFilter = (0, import_react2.useCallback)((column) => {
+    setPipeline((prev) => ({
+      ...prev,
+      filters: prev.filters.filter((f) => f.column !== column)
+    }));
+  }, []);
+  const clearFilters = (0, import_react2.useCallback)(() => {
+    setPipeline((prev) => ({ ...prev, filters: [] }));
+  }, []);
+  const getFilter = (0, import_react2.useCallback)(
+    (column) => {
+      return pipeline.filters.find((f) => f.column === column);
+    },
+    [pipeline.filters]
+  );
+  const getUniqueValues = (0, import_react2.useCallback)(
+    async (column) => {
+      if (uniqueCacheRef.current.has(column)) {
+        return uniqueCacheRef.current.get(column);
+      }
+      const source = sourceRef.current;
+      if (!source) return [];
+      let values = columnCacheRef.current.get(column);
+      if (!values) {
+        const cols = await (0, import_core.readColumnValues)(source, [column]);
+        values = cols.get(column) ?? [];
+        columnCacheRef.current.set(column, values);
+      }
+      const unique = (0, import_core.collectUniqueValues)(values, 500);
+      uniqueCacheRef.current.set(column, unique);
+      return unique;
+    },
+    []
+  );
+  const setGroupDefs = (0, import_react2.useCallback)((groupDefs) => {
+    setPipeline((prev) => ({ ...prev, groups: groupDefs }));
+  }, []);
+  const toggleGroup = (0, import_react2.useCallback)((column) => {
+    setPipeline((prev) => {
+      const exists = prev.groups.some((g) => g.column === column);
+      const newGroups = exists ? prev.groups.filter((g) => g.column !== column) : [...prev.groups, { column }];
+      return { ...prev, groups: newGroups };
+    });
+  }, []);
+  const clearGroups = (0, import_react2.useCallback)(() => {
+    setPipeline((prev) => ({ ...prev, groups: [] }));
+  }, []);
+  const toggleGroupExpanded = (0, import_react2.useCallback)((groupIndex) => {
+    setGroups(
+      (prev) => prev.map(
+        (g, i) => i === groupIndex ? { ...g, expanded: !g.expanded } : g
+      )
+    );
+  }, []);
+  const resetAll = (0, import_react2.useCallback)(() => {
+    setPipeline((0, import_core.createEmptyPipeline)());
+    mappingRef.current = null;
+    genRef.current++;
+    clearCaches();
+    setMapping(null);
+    setGroups([]);
+    setComputing(false);
+    columnCacheRef.current.clear();
+    uniqueCacheRef.current.clear();
+    tick();
+  }, [clearCaches, tick]);
+  return {
+    metadata: sourceState.metadata,
+    loading: sourceState.loading,
+    error: sourceState.error,
+    totalRows: sourceState.totalRows,
+    pipeline,
+    computing,
+    filteredRowCount,
+    groups,
+    getRow,
+    ensureRange,
+    ensureIndices,
+    renderTick,
+    toggleSort,
+    setSort,
+    clearSort,
+    getSortDirection,
+    getSortPriority,
+    setFilter,
+    removeFilter,
+    clearFilters,
+    getFilter,
+    getUniqueValues,
+    setGroups: setGroupDefs,
+    toggleGroup,
+    clearGroups,
+    toggleGroupExpanded,
+    resetAll
+  };
+}
+function evictOldChunks(chunks) {
+  if (chunks.size <= MAX_DISPLAY_CHUNKS) return;
+  const entries = [...chunks.entries()].sort(
+    (a, b) => a[1].loadedAt - b[1].loadedAt
+  );
+  const toRemove = entries.length - MAX_DISPLAY_CHUNKS;
+  for (let i = 0; i < toRemove; i++) {
+    chunks.delete(entries[i][0]);
+  }
+}
+function compareValues(a, b) {
+  if (a === null || a === void 0)
+    return b === null || b === void 0 ? 0 : 1;
+  if (b === null || b === void 0) return -1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (typeof a === "bigint" && typeof b === "bigint")
+    return a < b ? -1 : a > b ? 1 : 0;
+  if (typeof a === "boolean" && typeof b === "boolean")
+    return Number(a) - Number(b);
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() - b.getTime();
+  return String(a).localeCompare(String(b));
+}
+function yieldToUI() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+async function asyncSort(arr, compareFn, isCancelled) {
+  const CHUNK = 5e4;
+  const chunks = [];
+  for (let i = 0; i < arr.length; i += CHUNK) {
+    if (isCancelled()) return arr;
+    const chunk = arr.slice(i, i + CHUNK);
+    chunk.sort(compareFn);
+    chunks.push(chunk);
+    await yieldToUI();
+  }
+  while (chunks.length > 1) {
+    if (isCancelled()) return arr;
+    const merged = [];
+    for (let i = 0; i < chunks.length; i += 2) {
+      if (i + 1 < chunks.length) {
+        merged.push(mergeSorted(chunks[i], chunks[i + 1], compareFn));
+      } else {
+        merged.push(chunks[i]);
+      }
+    }
+    chunks.length = 0;
+    chunks.push(...merged);
+    await yieldToUI();
+  }
+  return chunks[0] ?? [];
+}
+function mergeSorted(a, b, compareFn) {
+  const result = new Array(a.length + b.length);
+  let i = 0, j = 0, k = 0;
+  while (i < a.length && j < b.length) {
+    if (compareFn(a[i], b[j]) <= 0) result[k++] = a[i++];
+    else result[k++] = b[j++];
+  }
+  while (i < a.length) result[k++] = a[i++];
+  while (j < b.length) result[k++] = b[j++];
+  return result;
+}
+async function runWithConcurrency(items, maxConcurrency, fn) {
+  let index = 0;
+  const workers = Array.from(
+    { length: Math.min(maxConcurrency, items.length) },
+    async () => {
+      while (index < items.length) {
+        const i = index++;
+        await fn(items[i]);
+      }
+    }
+  );
+  await Promise.all(workers);
+}
+
+// src/hooks/useVirtualScroll.ts
+var import_react3 = require("react");
+var ROW_HEIGHT = 32;
+var HEADER_HEIGHT = 36;
+var OVERSCAN = 10;
+var MAX_SCROLL_HEIGHT = 15e5;
+function useVirtualScroll(containerHeight, totalRows, resetKey) {
+  const elRef = (0, import_react3.useRef)(null);
+  const roRef = (0, import_react3.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react3.useState)(0);
+  const [measuredHeight, setMeasuredHeight] = (0, import_react3.useState)(0);
+  const paramsRef = (0, import_react3.useRef)({
+    rawStart: 0,
+    scaled: false,
+    totalHeight: 0,
+    totalRows: 0
+  });
+  const scrollRef = (0, import_react3.useCallback)((el) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    elRef.current = el;
+    if (!el) return;
+    setMeasuredHeight(el.clientHeight);
+    setScrollTop(el.scrollTop);
+    roRef.current = new ResizeObserver(() => {
+      const newClientHeight = el.clientHeight;
+      const p = paramsRef.current;
+      if (p.scaled && p.totalRows > 0) {
+        const newBodyHeight = Math.max(1, newClientHeight - HEADER_HEIGHT);
+        const newMaxScroll = Math.max(1, p.totalHeight - newBodyHeight);
+        const newFullyVisible = Math.floor(newBodyHeight / ROW_HEIGHT);
+        const newMaxFirstRow = Math.max(1, p.totalRows - newFullyVisible);
+        const targetRaw = Math.min(p.rawStart, newMaxFirstRow);
+        const newScrollTop = targetRaw / newMaxFirstRow * newMaxScroll;
+        el.scrollTop = newScrollTop;
+        setScrollTop(el.scrollTop);
+      } else {
+        setScrollTop(el.scrollTop);
+      }
+      setMeasuredHeight(newClientHeight);
+    });
+    roRef.current.observe(el);
+  }, []);
+  const liveHeight = elRef.current?.clientHeight ?? 0;
+  const effectiveHeight = liveHeight > 0 ? liveHeight : measuredHeight > 0 ? measuredHeight : containerHeight;
+  (0, import_react3.useEffect)(() => {
+    setScrollTop(0);
+    if (elRef.current) {
+      elRef.current.scrollTop = 0;
+    }
+  }, [resetKey]);
+  const bodyHeight = Math.max(1, effectiveHeight - HEADER_HEIGHT);
+  const visibleCount = Math.ceil(bodyHeight / ROW_HEIGHT);
+  const naturalHeight = totalRows * ROW_HEIGHT;
+  const scaled = naturalHeight > MAX_SCROLL_HEIGHT;
+  const totalHeight = scaled ? MAX_SCROLL_HEIGHT : naturalHeight + ROW_HEIGHT;
+  let startIndex;
+  let endIndex;
+  let offsetY;
+  let rawStart;
+  if (scaled) {
+    const maxScroll = Math.max(1, totalHeight - bodyHeight);
+    const scrollFraction = Math.min(1, Math.max(0, scrollTop / maxScroll));
+    const fullyVisibleRows = Math.floor(bodyHeight / ROW_HEIGHT);
+    const maxFirstRow = Math.max(0, totalRows - fullyVisibleRows);
+    rawStart = Math.round(scrollFraction * maxFirstRow);
+    startIndex = Math.max(0, rawStart - OVERSCAN);
+    endIndex = Math.min(totalRows, rawStart + visibleCount + OVERSCAN);
+    const overscanAbove = rawStart - startIndex;
+    offsetY = scrollTop - overscanAbove * ROW_HEIGHT;
+  } else {
+    rawStart = Math.floor(scrollTop / ROW_HEIGHT);
+    startIndex = Math.max(0, rawStart - OVERSCAN);
+    endIndex = Math.min(totalRows, rawStart + visibleCount + OVERSCAN);
+    offsetY = startIndex * ROW_HEIGHT;
+  }
+  paramsRef.current = { rawStart, scaled, totalHeight, totalRows };
+  const onScroll = (0, import_react3.useCallback)((e) => {
+    const el = e.currentTarget;
+    setScrollTop(el.scrollTop);
+    setMeasuredHeight((prev) => {
+      const h = el.clientHeight;
+      return h === prev ? prev : h;
+    });
+  }, []);
+  const scrollToRow = (0, import_react3.useCallback)(
+    (rowIndex) => {
+      const el = elRef.current;
+      if (!el) return;
+      const idx = Math.max(0, Math.min(totalRows - 1, rowIndex));
+      const actualBodyHeight = el.clientHeight - HEADER_HEIGHT;
+      if (scaled) {
+        const maxScroll = Math.max(1, totalHeight - actualBodyHeight);
+        const fullyVisible = Math.floor(actualBodyHeight / ROW_HEIGHT);
+        const maxFirstRow = Math.max(1, totalRows - fullyVisible);
+        const frac = Math.min(1, Math.max(0, el.scrollTop / maxScroll));
+        const renderRawStart = Math.round(frac * maxFirstRow);
+        if (idx < renderRawStart) {
+          el.scrollTop = idx / maxFirstRow * maxScroll;
+        } else if (idx >= renderRawStart + fullyVisible) {
+          el.scrollTop = (idx - fullyVisible + 1) / maxFirstRow * maxScroll;
+          const checkFrac = Math.min(1, Math.max(0, el.scrollTop / maxScroll));
+          const checkRaw = Math.round(checkFrac * maxFirstRow);
+          if (idx >= checkRaw + fullyVisible) {
+            el.scrollTop += 1;
+          }
+        }
+      } else {
+        const rowTop = idx * ROW_HEIGHT;
+        const rowBottom = rowTop + ROW_HEIGHT;
+        const viewTop = el.scrollTop;
+        const viewBottom = viewTop + actualBodyHeight;
+        if (rowTop < viewTop) {
+          el.scrollTop = rowTop;
+        } else if (rowBottom > viewBottom) {
+          el.scrollTop = rowBottom - actualBodyHeight;
+        }
+      }
+      setScrollTop(el.scrollTop);
+      setMeasuredHeight(el.clientHeight);
+    },
+    [scaled, totalHeight, totalRows]
+  );
+  return {
+    scrollTop,
+    startIndex,
+    endIndex,
+    visibleCount,
+    totalHeight,
+    offsetY,
+    onScroll,
+    scrollToRow,
+    scrollRef,
+    scrollEl: elRef
+  };
+}
+
+// src/hooks/useColumnManager.ts
+var import_react4 = require("react");
+var DEFAULT_COL_WIDTH = 150;
+var MIN_COL_WIDTH = 50;
+function useColumnManager(columnNames, initialWidths) {
+  const [columns, setColumns] = (0, import_react4.useState)(
+    () => columnNames.map((key) => ({
+      key,
+      width: initialWidths?.[key] ?? DEFAULT_COL_WIDTH,
+      visible: true
+    }))
+  );
+  const prevNamesRef = (0, import_react4.useRef)(columnNames);
+  if (columnNames.length !== prevNamesRef.current.length || columnNames.some((n, i) => n !== prevNamesRef.current[i])) {
+    prevNamesRef.current = columnNames;
+    const newCols = columnNames.map((key) => ({
+      key,
+      width: initialWidths?.[key] ?? DEFAULT_COL_WIDTH,
+      visible: true
+    }));
+    setColumns(newCols);
+  }
+  const [dragState, setDragState] = (0, import_react4.useState)({
+    dragKey: null,
+    insertIndex: null
+  });
+  const dragRef = (0, import_react4.useRef)(dragState);
+  dragRef.current = dragState;
+  const [resizeState, setResizeState] = (0, import_react4.useState)({
+    columnKey: null,
+    startX: 0,
+    startWidth: 0
+  });
+  const visibleColumns = columns.filter((c) => c.visible);
+  const totalWidth = visibleColumns.reduce((sum, c) => sum + c.width, 0);
+  const startDrag = (0, import_react4.useCallback)((key) => {
+    setDragState({ dragKey: key, insertIndex: null });
+  }, []);
+  const updateDragOver = (0, import_react4.useCallback)(
+    (overKey, mouseXInColumn, columnWidth) => {
+      setDragState((prev) => {
+        if (!prev.dragKey || prev.dragKey === overKey) {
+          return { ...prev, insertIndex: null };
+        }
+        const visibleCols = columns.filter((c) => c.visible);
+        const overIdx = visibleCols.findIndex((c) => c.key === overKey);
+        if (overIdx === -1) return prev;
+        const isLeftHalf = mouseXInColumn < columnWidth / 2;
+        const insertIndex = isLeftHalf ? overIdx : overIdx + 1;
+        return { ...prev, insertIndex };
+      });
+    },
+    [columns]
+  );
+  const updateDragOverEnd = (0, import_react4.useCallback)(() => {
+    setDragState((prev) => {
+      if (!prev.dragKey) return prev;
+      const visibleCols = columns.filter((c) => c.visible);
+      return { ...prev, insertIndex: visibleCols.length };
+    });
+  }, [columns]);
+  const endDrag = (0, import_react4.useCallback)(() => {
+    const { dragKey, insertIndex } = dragRef.current;
+    setDragState({ dragKey: null, insertIndex: null });
+    if (!dragKey || insertIndex === null) return;
+    setColumns((cols) => {
+      const visibleCols = cols.filter((c) => c.visible);
+      const fromIdx = visibleCols.findIndex((c) => c.key === dragKey);
+      if (fromIdx === -1) return cols;
+      if (insertIndex === fromIdx || insertIndex === fromIdx + 1) return cols;
+      const visibleToFullIdx = [];
+      cols.forEach((c, fullIdx) => {
+        if (c.visible) visibleToFullIdx.push(fullIdx);
+      });
+      const fullFromIdx = visibleToFullIdx[fromIdx];
+      const moved = cols[fullFromIdx];
+      const newCols = cols.filter((_, i) => i !== fullFromIdx);
+      let targetFullIdx;
+      if (insertIndex >= visibleCols.length) {
+        const lastVisibleFullIdx = visibleToFullIdx[visibleCols.length - 1];
+        targetFullIdx = lastVisibleFullIdx > fullFromIdx ? lastVisibleFullIdx : lastVisibleFullIdx + 1;
+      } else {
+        const adjustedInsertIdx = insertIndex > fromIdx ? insertIndex - 1 : insertIndex;
+        const remainingVisible = newCols.filter((c) => c.visible);
+        const targetKey = remainingVisible[adjustedInsertIdx]?.key;
+        targetFullIdx = targetKey ? newCols.findIndex((c) => c.key === targetKey) : newCols.length;
+      }
+      newCols.splice(targetFullIdx, 0, moved);
+      return newCols;
+    });
+  }, []);
+  const startResize = (0, import_react4.useCallback)(
+    (key, clientX) => {
+      const col = columns.find((c) => c.key === key);
+      if (col) {
+        setResizeState({
+          columnKey: key,
+          startX: clientX,
+          startWidth: col.width
+        });
+      }
+    },
+    [columns]
+  );
+  const updateResize = (0, import_react4.useCallback)(
+    (clientX) => {
+      if (!resizeState.columnKey) return;
+      const delta = clientX - resizeState.startX;
+      const newWidth = Math.max(MIN_COL_WIDTH, resizeState.startWidth + delta);
+      setColumns(
+        (cols) => cols.map(
+          (c) => c.key === resizeState.columnKey ? { ...c, width: newWidth } : c
+        )
+      );
+    },
+    [resizeState]
+  );
+  const endResize = (0, import_react4.useCallback)(() => {
+    setResizeState({ columnKey: null, startX: 0, startWidth: 0 });
+  }, []);
+  const toggleColumn = (0, import_react4.useCallback)((key) => {
+    setColumns(
+      (cols) => cols.map((c) => c.key === key ? { ...c, visible: !c.visible } : c)
+    );
+  }, []);
+  const showAllColumns = (0, import_react4.useCallback)(() => {
+    setColumns((cols) => cols.map((c) => ({ ...c, visible: true })));
+  }, []);
+  const setColumnWidth = (0, import_react4.useCallback)((key, width) => {
+    setColumns(
+      (cols) => cols.map(
+        (c) => c.key === key ? { ...c, width: Math.max(MIN_COL_WIDTH, width) } : c
+      )
+    );
+  }, []);
+  return {
+    columns,
+    visibleColumns,
+    totalWidth,
+    startDrag,
+    updateDragOver,
+    updateDragOverEnd,
+    endDrag,
+    dragState,
+    startResize,
+    updateResize,
+    endResize,
+    resizeState,
+    toggleColumn,
+    showAllColumns,
+    setColumnWidth
+  };
+}
+
+// src/hooks/useKeyboardNavigation.ts
+var import_react5 = require("react");
+function useKeyboardNavigation(onScrollToCell, isNavigable) {
+  const [activeCell, setActiveCell] = (0, import_react5.useState)(null);
+  const moveTo = (0, import_react5.useCallback)(
+    (row, col, totalRows, totalCols) => {
+      let r = Math.max(0, Math.min(totalRows - 1, row));
+      const clampedCol = Math.max(0, Math.min(totalCols - 1, col));
+      if (isNavigable) {
+        if (!isNavigable(r)) {
+          const currentRow = activeCell?.row ?? 0;
+          const direction = row >= currentRow ? 1 : -1;
+          let candidate = r;
+          while (candidate >= 0 && candidate < totalRows && !isNavigable(candidate)) {
+            candidate += direction;
+          }
+          if (candidate >= 0 && candidate < totalRows) {
+            r = candidate;
+          } else {
+            candidate = r;
+            while (candidate >= 0 && candidate < totalRows && !isNavigable(candidate)) {
+              candidate -= direction;
+            }
+            if (candidate >= 0 && candidate < totalRows) {
+              r = candidate;
+            } else {
+              return;
+            }
+          }
+        }
+      }
+      setActiveCell({ row: r, col: clampedCol });
+      onScrollToCell?.(r, clampedCol);
+    },
+    [onScrollToCell, isNavigable, activeCell?.row]
+  );
+  const handleKeyDown = (0, import_react5.useCallback)(
+    (e, totalRows, totalCols) => {
+      if (!activeCell) {
+        if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+          e.preventDefault();
+          moveTo(0, 0, totalRows, totalCols);
+        }
+        return;
+      }
+      const { row, col } = activeCell;
+      const PAGE_SIZE = 20;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          moveTo(row + 1, col, totalRows, totalCols);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveTo(row - 1, col, totalRows, totalCols);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          moveTo(row, col + 1, totalRows, totalCols);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          moveTo(row, col - 1, totalRows, totalCols);
+          break;
+        case "Tab":
+          e.preventDefault();
+          if (e.shiftKey) {
+            if (col > 0) {
+              moveTo(row, col - 1, totalRows, totalCols);
+            } else if (row > 0) {
+              moveTo(row - 1, totalCols - 1, totalRows, totalCols);
+            }
+          } else {
+            if (col < totalCols - 1) {
+              moveTo(row, col + 1, totalRows, totalCols);
+            } else if (row < totalRows - 1) {
+              moveTo(row + 1, 0, totalRows, totalCols);
+            }
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          if (e.ctrlKey) {
+            moveTo(0, 0, totalRows, totalCols);
+          } else {
+            moveTo(row, 0, totalRows, totalCols);
+          }
+          break;
+        case "End":
+          e.preventDefault();
+          if (e.ctrlKey) {
+            moveTo(totalRows - 1, totalCols - 1, totalRows, totalCols);
+          } else {
+            moveTo(row, totalCols - 1, totalRows, totalCols);
+          }
+          break;
+        case "PageDown":
+          e.preventDefault();
+          moveTo(row + PAGE_SIZE, col, totalRows, totalCols);
+          break;
+        case "PageUp":
+          e.preventDefault();
+          moveTo(row - PAGE_SIZE, col, totalRows, totalCols);
+          break;
+        case "Escape":
+          e.preventDefault();
+          setActiveCell(null);
+          break;
+      }
+    },
+    [activeCell, moveTo]
+  );
+  const handleCellClick = (0, import_react5.useCallback)((row, col) => {
+    setActiveCell({ row, col });
+  }, []);
+  return {
+    activeCell,
+    setActiveCell,
+    handleKeyDown,
+    handleCellClick
+  };
+}
+
+// src/components/ColumnHeader.tsx
+var import_react6 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ColumnHeader({
+  column,
+  visibleIndex,
+  dragState,
+  sortDirection,
+  sortPriority,
+  hasFilter,
+  isGrouped,
+  onDragStart,
+  onDragOver,
+  onDragEnd,
+  onResizeStart,
+  onSortClick,
+  onContextMenu
+}) {
+  const cellRef = (0, import_react6.useRef)(null);
+  const isDragging = dragState.dragKey === column.key;
+  const showLeftIndicator = dragState.dragKey !== null && dragState.dragKey !== column.key && dragState.insertIndex === visibleIndex;
+  const showRightIndicator = dragState.dragKey !== null && dragState.dragKey !== column.key && dragState.insertIndex === visibleIndex + 1;
+  const handleDragStart = (0, import_react6.useCallback)(
+    (e) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", column.key);
+      onDragStart(column.key);
+    },
+    [column.key, onDragStart]
+  );
+  const handleDragOver = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      const rect = cellRef.current?.getBoundingClientRect();
+      if (rect) {
+        const mouseXInColumn = e.clientX - rect.left;
+        onDragOver(column.key, mouseXInColumn, rect.width);
+      }
+    },
+    [column.key, onDragOver]
+  );
+  const handleDrop = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      onDragEnd();
+    },
+    [onDragEnd]
+  );
+  const handleNativeDragEnd = (0, import_react6.useCallback)(() => {
+    onDragEnd();
+  }, [onDragEnd]);
+  const handleResizeMouseDown = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onResizeStart(column.key, e.clientX);
+    },
+    [column.key, onResizeStart]
+  );
+  const handleClick = (0, import_react6.useCallback)(
+    (e) => {
+      if (e.target.dataset.resize) return;
+      onSortClick(column.key);
+    },
+    [column.key, onSortClick]
+  );
+  const handleContextMenu = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      onContextMenu(column.key, e.clientX, e.clientY);
+    },
+    [column.key, onContextMenu]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: cellRef,
+      draggable: true,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onDragEnd: handleNativeDragEnd,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      style: {
+        ...headerStyles.cell,
+        width: column.width,
+        minWidth: column.width,
+        maxWidth: column.width,
+        height: HEADER_HEIGHT,
+        opacity: isDragging ? 0.4 : 1
+      },
+      title: column.key,
+      children: [
+        showLeftIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: headerStyles.indicatorLeft }),
+        showRightIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: headerStyles.indicatorRight }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: headerStyles.label, children: column.key }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: headerStyles.indicators, children: [
+          hasFilter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: headerStyles.filterDot }),
+          isGrouped && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: headerStyles.groupIcon, children: "\u25A6" }),
+          sortDirection && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: headerStyles.sortArrow, children: [
+            sortDirection === "asc" ? "\u2191" : "\u2193",
+            sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: headerStyles.sortPriority, children: sortPriority })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-resize": "true",
+            onMouseDown: handleResizeMouseDown,
+            style: headerStyles.resizeHandle,
+            role: "separator",
+            "aria-orientation": "vertical"
+          }
+        )
+      ]
+    }
+  );
+}
+function ColumnDropEndZone({
+  dragState,
+  totalColumns,
+  onDragOverEnd,
+  onDragEnd
+}) {
+  const showIndicator = dragState.dragKey !== null && dragState.insertIndex === totalColumns;
+  const handleDragOver = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      onDragOverEnd();
+    },
+    [onDragOverEnd]
+  );
+  const handleDrop = (0, import_react6.useCallback)(
+    (e) => {
+      e.preventDefault();
+      onDragEnd();
+    },
+    [onDragEnd]
+  );
+  if (!dragState.dragKey) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      style: headerStyles.endZone,
+      children: showIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: headerStyles.indicatorLeft })
+    }
+  );
+}
+var headerStyles = {
+  cell: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 12px",
+    backgroundColor: "#f6f9fc",
+    borderBottom: "2px solid rgba(0,0,0,0.06)",
+    borderRight: "1px solid rgba(0,0,0,0.06)",
+    fontWeight: 600,
+    fontSize: 13,
+    color: "#0a2540",
+    cursor: "pointer",
+    userSelect: "none",
+    overflow: "hidden",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    gap: 4
+  },
+  label: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1
+  },
+  indicators: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    flexShrink: 0
+  },
+  sortArrow: {
+    display: "flex",
+    alignItems: "center",
+    fontSize: 12,
+    color: "#6366f1",
+    fontWeight: 700
+  },
+  sortPriority: {
+    fontSize: 9,
+    marginLeft: 1
+  },
+  filterDot: {
+    width: 5,
+    height: 5,
+    borderRadius: "50%",
+    backgroundColor: "#f59e0b"
+  },
+  groupIcon: {
+    fontSize: 11,
+    color: "#8b5cf6"
+  },
+  resizeHandle: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 6,
+    cursor: "col-resize",
+    zIndex: 2,
+    background: "transparent"
+  },
+  indicatorLeft: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    width: 3,
+    backgroundColor: "#6366f1",
+    zIndex: 3,
+    borderRadius: "2px 0 0 2px"
+  },
+  indicatorRight: {
+    position: "absolute",
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 3,
+    backgroundColor: "#6366f1",
+    zIndex: 3,
+    borderRadius: "0 2px 2px 0"
+  },
+  endZone: {
+    position: "relative",
+    width: 32,
+    minWidth: 32,
+    flexShrink: 0,
+    backgroundColor: "#f6f9fc",
+    borderBottom: "2px solid rgba(0,0,0,0.06)"
+  }
+};
+
+// src/components/ColumnContextMenu.tsx
+var import_react7 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ColumnContextMenu({
+  column,
+  x,
+  y,
+  sortDirection,
+  sortPriority,
+  activeFilter,
+  isGrouped,
+  onClose,
+  onSortAsc,
+  onSortDesc,
+  onSortClear,
+  onFilterSet,
+  onFilterClear,
+  onGroupToggle,
+  loadUniqueValues
+}) {
+  const [showFilterPanel, setShowFilterPanel] = (0, import_react7.useState)(false);
+  const [uniqueValues, setUniqueValues] = (0, import_react7.useState)(null);
+  const [selectedValues, setSelectedValues] = (0, import_react7.useState)(/* @__PURE__ */ new Set());
+  const [filterSearch, setFilterSearch] = (0, import_react7.useState)("");
+  const [loadingValues, setLoadingValues] = (0, import_react7.useState)(false);
+  const menuRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const handle = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [onClose]);
+  (0, import_react7.useEffect)(() => {
+    const handle = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handle);
+    return () => document.removeEventListener("keydown", handle);
+  }, [onClose]);
+  (0, import_react7.useEffect)(() => {
+    if (showFilterPanel && uniqueValues === null && !loadingValues) {
+      setLoadingValues(true);
+      loadUniqueValues().then((values) => {
+        setUniqueValues(values);
+        if (activeFilter?.operator === "in" && Array.isArray(activeFilter.value)) {
+          setSelectedValues(new Set(activeFilter.value.map(String)));
+        } else {
+          setSelectedValues(new Set(values.map((v) => String(v))));
+        }
+        setLoadingValues(false);
+      });
+    }
+  }, [showFilterPanel, uniqueValues, loadingValues, loadUniqueValues, activeFilter]);
+  const handleFilterApply = (0, import_react7.useCallback)(() => {
+    if (!uniqueValues) return;
+    const allSelected = selectedValues.size === uniqueValues.length;
+    if (allSelected) {
+      onFilterClear();
+    } else {
+      onFilterSet({
+        column,
+        operator: "in",
+        value: [...selectedValues]
+      });
+    }
+    onClose();
+  }, [column, selectedValues, uniqueValues, onFilterSet, onFilterClear, onClose]);
+  const toggleValue = (0, import_react7.useCallback)((val) => {
+    setSelectedValues((prev) => {
+      const next = new Set(prev);
+      if (next.has(val)) next.delete(val);
+      else next.add(val);
+      return next;
+    });
+  }, []);
+  const selectAll = (0, import_react7.useCallback)(() => {
+    if (uniqueValues) {
+      setSelectedValues(new Set(uniqueValues.map((v) => String(v))));
+    }
+  }, [uniqueValues]);
+  const selectNone = (0, import_react7.useCallback)(() => {
+    setSelectedValues(/* @__PURE__ */ new Set());
+  }, []);
+  const adjustedX = Math.min(x, window.innerWidth - 260);
+  const adjustedY = Math.min(y, window.innerHeight - 400);
+  const filteredUniqueValues = uniqueValues?.filter(
+    (v) => filterSearch ? String(v).toLowerCase().includes(filterSearch.toLowerCase()) : true
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      style: { ...menuStyles.overlay, left: adjustedX, top: adjustedY },
+      onContextMenu: (e) => e.preventDefault(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.container, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.sectionLabel, children: "Sort" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: {
+              ...menuStyles.item,
+              ...sortDirection === "asc" ? menuStyles.itemActive : {}
+            },
+            onClick: () => {
+              onSortAsc();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: "\u2191" }),
+              "Sort ascending",
+              sortPriority && sortPriority > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.badge, children: sortPriority })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: {
+              ...menuStyles.item,
+              ...sortDirection === "desc" ? menuStyles.itemActive : {}
+            },
+            onClick: () => {
+              onSortDesc();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: "\u2193" }),
+              "Sort descending"
+            ]
+          }
+        ),
+        sortDirection && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: menuStyles.item,
+            onClick: () => {
+              onSortClear();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: "\u2715" }),
+              "Clear sort"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.sectionLabel, children: "Filter" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: {
+              ...menuStyles.item,
+              ...showFilterPanel ? menuStyles.itemActive : {}
+            },
+            onClick: () => setShowFilterPanel(!showFilterPanel),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: "\u229E" }),
+              "Filter by values...",
+              activeFilter && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.activeDot })
+            ]
+          }
+        ),
+        activeFilter && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: menuStyles.item,
+            onClick: () => {
+              onFilterClear();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: "\u2715" }),
+              "Clear filter"
+            ]
+          }
+        ),
+        showFilterPanel && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.filterPanel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search values...",
+              value: filterSearch,
+              onChange: (e) => setFilterSearch(e.target.value),
+              style: menuStyles.filterSearch,
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: menuStyles.filterActions, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: menuStyles.linkButton, onClick: selectAll, children: "Select all" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: menuStyles.linkButton, onClick: selectNone, children: "Select none" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.filterList, children: loadingValues ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.filterLoading, children: "Loading values..." }) : filteredUniqueValues?.map((val) => {
+            const key = String(val);
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { style: menuStyles.filterItem, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedValues.has(key),
+                  onChange: () => toggleValue(key),
+                  style: menuStyles.checkbox
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.filterValue, children: val === null || val === void 0 ? "(null)" : String(val) })
+            ] }, key);
+          }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: menuStyles.applyButton, onClick: handleFilterApply, children: "Apply filter" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: menuStyles.sectionLabel, children: "Group" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            style: {
+              ...menuStyles.item,
+              ...isGrouped ? menuStyles.itemActive : {}
+            },
+            onClick: () => {
+              onGroupToggle();
+              onClose();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: menuStyles.itemIcon, children: isGrouped ? "\u25A4" : "\u25A6" }),
+              isGrouped ? "Remove grouping" : "Group by this column"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+var menuStyles = {
+  overlay: {
+    position: "fixed",
+    zIndex: 1e4
+  },
+  container: {
+    backgroundColor: "white",
+    border: "1px solid rgba(0,0,0,0.06)",
+    borderRadius: 10,
+    boxShadow: "0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06)",
+    minWidth: 220,
+    maxWidth: 320,
+    padding: "4px 0",
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    fontSize: 13
+  },
+  sectionLabel: {
+    padding: "6px 12px 2px",
+    fontSize: 11,
+    fontWeight: 600,
+    color: "rgba(66,84,102,0.5)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  item: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    width: "100%",
+    padding: "7px 12px",
+    border: "none",
+    background: "none",
+    textAlign: "left",
+    fontSize: 13,
+    color: "#0a2540",
+    cursor: "pointer",
+    fontFamily: "inherit"
+  },
+  itemActive: {
+    backgroundColor: "#eef2ff",
+    color: "#6366f1"
+  },
+  itemIcon: {
+    width: 16,
+    textAlign: "center",
+    flexShrink: 0,
+    fontSize: 14
+  },
+  badge: {
+    marginLeft: "auto",
+    backgroundColor: "rgba(0,0,0,0.04)",
+    color: "#425466",
+    fontSize: 10,
+    fontWeight: 700,
+    padding: "1px 5px",
+    borderRadius: 4
+  },
+  activeDot: {
+    marginLeft: "auto",
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    backgroundColor: "#6366f1"
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "rgba(0,0,0,0.03)",
+    margin: "4px 0"
+  },
+  filterPanel: {
+    padding: "4px 12px 8px"
+  },
+  filterSearch: {
+    width: "100%",
+    padding: "6px 8px",
+    border: "1px solid rgba(0,0,0,0.06)",
+    borderRadius: 6,
+    fontSize: 12,
+    fontFamily: "inherit",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  filterActions: {
+    display: "flex",
+    gap: 12,
+    padding: "4px 0"
+  },
+  linkButton: {
+    background: "none",
+    border: "none",
+    color: "#6366f1",
+    fontSize: 11,
+    cursor: "pointer",
+    padding: 0,
+    fontFamily: "inherit"
+  },
+  filterList: {
+    maxHeight: 200,
+    overflowY: "auto",
+    border: "1px solid #f1f5f9",
+    borderRadius: 6,
+    marginBottom: 6
+  },
+  filterLoading: {
+    padding: 12,
+    textAlign: "center",
+    color: "rgba(66,84,102,0.5)",
+    fontSize: 12
+  },
+  filterItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "3px 8px",
+    cursor: "pointer",
+    fontSize: 12
+  },
+  checkbox: {
+    margin: 0,
+    flexShrink: 0
+  },
+  filterValue: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  applyButton: {
+    width: "100%",
+    padding: "6px 12px",
+    backgroundColor: "#6366f1",
+    color: "white",
+    border: "none",
+    borderRadius: 6,
+    fontSize: 12,
+    fontWeight: 500,
+    cursor: "pointer",
+    fontFamily: "inherit"
+  }
+};
+
+// src/components/ParquiLogo.tsx
+var import_react8 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ParquiLogo({
+  size = 28,
+  color = "#50ABF1",
+  style
+}) {
+  const clipId = (0, import_react8.useId)();
+  const r = size / 28 * 3;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 28 28",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { flexShrink: 0, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: clipId, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "28", height: "28", rx: r }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "rotate(45 14 14)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "-20", y: "-5", width: "68", height: "10", fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "-20", y: "9", width: "32", height: "10", fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "16", y: "9", width: "32", height: "10", fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "-20", y: "23", width: "68", height: "10", fill: color })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/ParquetViewer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function buildFlatItems(groups) {
+  const items = [];
+  for (let gi = 0; gi < groups.length; gi++) {
+    items.push({ type: "header", groupIndex: gi });
+    if (groups[gi].expanded) {
+      for (const displayIdx of groups[gi].rowIndices) {
+        items.push({ type: "row", displayIndex: displayIdx });
+      }
+    }
+  }
+  return items;
+}
+function ParquetViewer({
+  source,
+  columns,
+  onMetadataLoad,
+  className,
+  style
+}) {
+  const { containerRef, size } = useContainerSize();
+  const pq = useParquetData(source, columns);
+  const onMetadataLoadRef = (0, import_react9.useRef)(onMetadataLoad);
+  onMetadataLoadRef.current = onMetadataLoad;
+  (0, import_react9.useEffect)(() => {
+    if (pq.metadata) onMetadataLoadRef.current?.(pq.metadata);
+  }, [pq.metadata]);
+  const columnNames = (0, import_react9.useMemo)(() => {
+    if (columns) return columns;
+    return pq.metadata?.columns.map((c) => c.name) ?? [];
+  }, [columns, pq.metadata]);
+  const colManager = useColumnManager(columnNames);
+  const [contextMenu, setContextMenu] = (0, import_react9.useState)(
+    null
+  );
+  const isGrouped = pq.pipeline.groups.length > 0 && pq.groups.length > 0;
+  const flatItems = (0, import_react9.useMemo)(() => {
+    if (!isGrouped) return null;
+    return buildFlatItems(pq.groups);
+  }, [isGrouped, pq.groups]);
+  const scrollRowCount = flatItems ? flatItems.length : pq.filteredRowCount;
+  const fallbackHeight = size.height;
+  const vScroll = useVirtualScroll(fallbackHeight, scrollRowCount, pq.metadata);
+  const isNavigable = (0, import_react9.useMemo)(() => {
+    if (!flatItems) return void 0;
+    return (flatIdx) => {
+      const item = flatItems[flatIdx];
+      return item !== void 0 && item.type === "row";
+    };
+  }, [flatItems]);
+  const colLayoutRef = (0, import_react9.useRef)({
+    rowNumWidth: 50,
+    widths: []
+  });
+  const scrollToCell = (0, import_react9.useCallback)(
+    (row, col) => {
+      vScroll.scrollToRow(row);
+      const el = vScroll.scrollEl.current;
+      if (!el) return;
+      const { rowNumWidth: rowNumWidth2, widths } = colLayoutRef.current;
+      let colLeft = rowNumWidth2;
+      for (let i = 0; i < col; i++) colLeft += widths[i] ?? 0;
+      const colRight = colLeft + (widths[col] ?? 0);
+      const viewLeft = el.scrollLeft;
+      const viewRight = viewLeft + el.clientWidth;
+      if (colRight > viewRight) {
+        el.scrollLeft = colRight - el.clientWidth;
+      } else if (colLeft < viewLeft) {
+        el.scrollLeft = colLeft;
+      }
+    },
+    [vScroll.scrollToRow]
+  );
+  const keyboard = useKeyboardNavigation(scrollToCell, isNavigable);
+  (0, import_react9.useEffect)(() => {
+    if (scrollRowCount === 0) return;
+    if (flatItems) {
+      const displayIndices = [];
+      for (let i = vScroll.startIndex; i < vScroll.endIndex && i < flatItems.length; i++) {
+        const item = flatItems[i];
+        if (item.type === "row") displayIndices.push(item.displayIndex);
+      }
+      if (displayIndices.length > 0) pq.ensureIndices(displayIndices);
+    } else {
+      pq.ensureRange(vScroll.startIndex, vScroll.endIndex);
+    }
+  }, [
+    vScroll.startIndex,
+    vScroll.endIndex,
+    scrollRowCount,
+    pq.renderTick,
+    flatItems
+  ]);
+  (0, import_react9.useEffect)(() => {
+    if (!colManager.resizeState.columnKey) return;
+    const handleMouseMove = (e) => {
+      colManager.updateResize(e.clientX);
+    };
+    const handleMouseUp = () => {
+      colManager.endResize();
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    colManager.resizeState.columnKey,
+    colManager.updateResize,
+    colManager.endResize
+  ]);
+  const handleKeyDown = (0, import_react9.useCallback)(
+    (e) => {
+      keyboard.handleKeyDown(
+        e,
+        scrollRowCount,
+        colManager.visibleColumns.length
+      );
+    },
+    [keyboard, scrollRowCount, colManager.visibleColumns.length]
+  );
+  const handleSortClick = (0, import_react9.useCallback)(
+    (column) => {
+      pq.toggleSort(column);
+    },
+    [pq.toggleSort]
+  );
+  const handleContextMenu = (0, import_react9.useCallback)(
+    (column, x, y) => {
+      setContextMenu({ column, x, y });
+    },
+    []
+  );
+  const handleCloseContextMenu = (0, import_react9.useCallback)(() => {
+    setContextMenu(null);
+  }, []);
+  if (!source) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: { ...viewerStyles.container, ...style },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: viewerStyles.placeholder, children: "No parquet source provided" })
+      }
+    );
+  }
+  if (pq.loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: { ...viewerStyles.container, ...style },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: viewerStyles.placeholder, children: "Loading..." })
+      }
+    );
+  }
+  if (pq.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style: { ...viewerStyles.container, ...style },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: viewerStyles.error, children: pq.error })
+      }
+    );
+  }
+  const visibleCols = colManager.visibleColumns;
+  const displayRowCount = pq.filteredRowCount;
+  const rowNumWidth = Math.max(50, String(displayRowCount).length * 9 + 24);
+  colLayoutRef.current = {
+    rowNumWidth,
+    widths: visibleCols.map((c) => c.width)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { ...viewerStyles.container, ...style },
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      role: "grid",
+      "aria-rowcount": displayRowCount,
+      "aria-colcount": visibleCols.length,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        @keyframes parqui-shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            ref: vScroll.scrollRef,
+            onScroll: vScroll.onScroll,
+            style: viewerStyles.scrollContainer,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    ...viewerStyles.headerRow,
+                    width: colManager.totalWidth + rowNumWidth,
+                    minWidth: "100%"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        style: {
+                          ...viewerStyles.rowNumHeader,
+                          width: rowNumWidth,
+                          minWidth: rowNumWidth,
+                          height: HEADER_HEIGHT
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ParquiLogo, { size: 18, color: "#94a3b8" })
+                      }
+                    ),
+                    visibleCols.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      ColumnHeader,
+                      {
+                        column: col,
+                        visibleIndex: idx,
+                        dragState: colManager.dragState,
+                        sortDirection: pq.getSortDirection(col.key),
+                        sortPriority: pq.getSortPriority(col.key),
+                        hasFilter: !!pq.getFilter(col.key),
+                        isGrouped: pq.pipeline.groups.some(
+                          (g) => g.column === col.key
+                        ),
+                        onDragStart: colManager.startDrag,
+                        onDragOver: colManager.updateDragOver,
+                        onDragEnd: colManager.endDrag,
+                        onResizeStart: colManager.startResize,
+                        onSortClick: handleSortClick,
+                        onContextMenu: handleContextMenu
+                      },
+                      col.key
+                    )),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      ColumnDropEndZone,
+                      {
+                        dragState: colManager.dragState,
+                        totalColumns: visibleCols.length,
+                        onDragOverEnd: colManager.updateDragOverEnd,
+                        onDragEnd: colManager.endDrag
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    height: vScroll.totalHeight,
+                    position: "relative",
+                    width: colManager.totalWidth + rowNumWidth,
+                    minWidth: "100%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: vScroll.offsetY,
+                        left: 0,
+                        right: 0
+                      },
+                      children: flatItems ? renderFlatItems(
+                        flatItems,
+                        pq.groups,
+                        vScroll.startIndex,
+                        vScroll.endIndex,
+                        visibleCols,
+                        pq.getRow,
+                        rowNumWidth,
+                        keyboard.activeCell,
+                        keyboard.handleCellClick,
+                        pq.toggleGroupExpanded,
+                        colManager.totalWidth
+                      ) : renderRows(
+                        vScroll.startIndex,
+                        vScroll.endIndex,
+                        visibleCols,
+                        pq.getRow,
+                        rowNumWidth,
+                        keyboard.activeCell,
+                        keyboard.handleCellClick
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        contextMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          ColumnContextMenu,
+          {
+            column: contextMenu.column,
+            x: contextMenu.x,
+            y: contextMenu.y,
+            sortDirection: pq.getSortDirection(contextMenu.column),
+            sortPriority: pq.getSortPriority(contextMenu.column),
+            activeFilter: pq.getFilter(contextMenu.column),
+            isGrouped: pq.pipeline.groups.some(
+              (g) => g.column === contextMenu.column
+            ),
+            onClose: handleCloseContextMenu,
+            onSortAsc: () => {
+              pq.setSort([
+                ...pq.pipeline.sorts.filter(
+                  (s) => s.column !== contextMenu.column
+                ),
+                { column: contextMenu.column, direction: "asc" }
+              ]);
+            },
+            onSortDesc: () => {
+              pq.setSort([
+                ...pq.pipeline.sorts.filter(
+                  (s) => s.column !== contextMenu.column
+                ),
+                { column: contextMenu.column, direction: "desc" }
+              ]);
+            },
+            onSortClear: () => {
+              pq.setSort(
+                pq.pipeline.sorts.filter(
+                  (s) => s.column !== contextMenu.column
+                )
+              );
+            },
+            onFilterSet: (filter) => pq.setFilter(filter),
+            onFilterClear: () => pq.removeFilter(contextMenu.column),
+            onGroupToggle: () => pq.toggleGroup(contextMenu.column),
+            loadUniqueValues: () => pq.getUniqueValues(contextMenu.column)
+          }
+        )
+      ]
+    }
+  );
+}
+function renderRows(start, end, columns, getRow, rowNumWidth, activeCell, onCellClick) {
+  const rows = [];
+  for (let i = start; i < end; i++) {
+    const row = getRow(i);
+    rows.push(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        VirtualRow,
+        {
+          flatIndex: i,
+          displayIndex: i,
+          columns,
+          row,
+          rowNumWidth,
+          isActiveRow: activeCell?.row === i,
+          activeCol: activeCell?.row === i ? activeCell.col : -1,
+          onCellClick
+        },
+        i
+      )
+    );
+  }
+  return rows;
+}
+function renderFlatItems(flatItems, groups, start, end, columns, getRow, rowNumWidth, activeCell, onCellClick, onToggleGroup, totalColWidth) {
+  const items = [];
+  for (let i = start; i < end && i < flatItems.length; i++) {
+    const item = flatItems[i];
+    if (item.type === "header") {
+      const group = groups[item.groupIndex];
+      items.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          GroupHeaderRow,
+          {
+            group,
+            groupIndex: item.groupIndex,
+            onToggle: onToggleGroup,
+            totalWidth: totalColWidth + rowNumWidth
+          },
+          `gh-${item.groupIndex}`
+        )
+      );
+    } else {
+      const row = getRow(item.displayIndex);
+      items.push(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          VirtualRow,
+          {
+            flatIndex: i,
+            displayIndex: item.displayIndex,
+            columns,
+            row,
+            rowNumWidth,
+            isActiveRow: activeCell?.row === i,
+            activeCol: activeCell?.row === i ? activeCell.col : -1,
+            onCellClick
+          },
+          `r-${item.displayIndex}`
+        )
+      );
+    }
+  }
+  return items;
+}
+function GroupHeaderRow({
+  group,
+  groupIndex,
+  onToggle,
+  totalWidth
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: { ...viewerStyles.groupHeader, height: ROW_HEIGHT, width: totalWidth },
+      onClick: () => onToggle(groupIndex),
+      role: "row",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: viewerStyles.groupChevron, children: group.expanded ? "\u25BE" : "\u25B8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: viewerStyles.groupLabel, children: group.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: viewerStyles.groupCount, children: [
+          "(",
+          group.count.toLocaleString(),
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+function VirtualRow({
+  flatIndex,
+  displayIndex,
+  columns,
+  row,
+  rowNumWidth,
+  isActiveRow,
+  activeCol,
+  onCellClick
+}) {
+  const isAlt = displayIndex % 2 === 1;
+  const isLoading = !row;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        ...viewerStyles.row,
+        backgroundColor: isAlt ? "#fafbfc" : "#ffffff",
+        height: ROW_HEIGHT
+      },
+      role: "row",
+      "aria-rowindex": displayIndex + 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              ...viewerStyles.rowNum,
+              width: rowNumWidth,
+              minWidth: rowNumWidth,
+              height: ROW_HEIGHT
+            },
+            children: displayIndex + 1
+          }
+        ),
+        columns.map((col, colIdx) => {
+          const isActive = isActiveRow && activeCol === colIdx;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              onClick: () => onCellClick(flatIndex, colIdx),
+              style: {
+                ...viewerStyles.cell,
+                width: col.width,
+                minWidth: col.width,
+                maxWidth: col.width,
+                height: ROW_HEIGHT,
+                ...isActive ? viewerStyles.cellActive : void 0
+              },
+              role: "gridcell",
+              "aria-colindex": colIdx + 1,
+              "aria-selected": isActive,
+              children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: viewerStyles.cellSkeleton }) : formatCell(row[col.key])
+            },
+            col.key
+          );
+        })
+      ]
+    }
+  );
+}
+function formatCell(value) {
+  if (value === null || value === void 0) return "\u2205";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+var viewerStyles = {
+  container: {
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    fontSize: 13,
+    color: "#0a2540",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 200,
+    outline: "none",
+    position: "relative"
+  },
+  placeholder: {
+    padding: 40,
+    textAlign: "center",
+    color: "#94a3b8",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1
+  },
+  error: {
+    padding: 20,
+    color: "#ef4444",
+    textAlign: "center",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1
+  },
+  scrollContainer: {
+    overflow: "auto",
+    flex: 1,
+    minHeight: 0,
+    position: "relative"
+  },
+  headerRow: {
+    display: "flex",
+    position: "sticky",
+    top: 0,
+    zIndex: 2,
+    backgroundColor: "#f6f9fc"
+  },
+  rowNumHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#edf2f7",
+    borderBottom: "2px solid rgba(0,0,0,0.06)",
+    borderRight: "1px solid rgba(0,0,0,0.06)",
+    fontWeight: 600,
+    fontSize: 12,
+    color: "#94a3b8",
+    flexShrink: 0,
+    boxSizing: "border-box"
+  },
+  groupHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "0 12px",
+    backgroundColor: "#f6f9fc",
+    borderBottom: "1px solid rgba(0,0,0,0.06)",
+    cursor: "pointer",
+    userSelect: "none",
+    fontSize: 13,
+    fontWeight: 500,
+    boxSizing: "border-box"
+  },
+  groupChevron: {
+    fontSize: 12,
+    color: "#425466",
+    width: 12
+  },
+  groupLabel: {
+    color: "#0a2540"
+  },
+  groupCount: {
+    color: "rgba(66,84,102,0.5)",
+    fontSize: 12
+  },
+  row: {
+    display: "flex",
+    borderBottom: "1px solid rgba(0,0,0,0.03)",
+    boxSizing: "border-box"
+  },
+  rowNum: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    backgroundColor: "#f6f9fc",
+    borderRight: "1px solid rgba(0,0,0,0.06)",
+    fontSize: 11,
+    color: "rgba(66,84,102,0.5)",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    userSelect: "none"
+  },
+  cell: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0 12px",
+    borderRight: "1px solid rgba(0,0,0,0.03)",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    cursor: "default",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    color: "#0a2540"
+  },
+  cellActive: {
+    outline: "2px solid #6366f1",
+    outlineOffset: -2,
+    backgroundColor: "#eef2ff",
+    zIndex: 1
+  },
+  cellSkeleton: {
+    width: "60%",
+    height: 8,
+    borderRadius: 3,
+    background: "linear-gradient(90deg, #e9ecf0 25%, #f3f5f7 50%, #e9ecf0 75%)",
+    backgroundSize: "200% 100%",
+    animation: "parqui-shimmer 1.5s ease-in-out infinite",
+    opacity: 0.7
+  }
+};
+
+// src/FileDropZone.tsx
+var import_react10 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FileDropZone({
+  onFileSelect,
+  onCustomOpen,
+  accept = [".parquet"],
+  compact = false,
+  className,
+  label,
+  buttonLabel
+}) {
+  const [isDragOver, setIsDragOver] = (0, import_react10.useState)(false);
+  const inputRef = (0, import_react10.useRef)(null);
+  const acceptString = accept.join(",");
+  const handleDrop = (0, import_react10.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      const droppedFile = e.dataTransfer.files[0];
+      if (droppedFile && accept.some((ext) => droppedFile.name.endsWith(ext))) {
+        onFileSelect(droppedFile);
+      }
+    },
+    [onFileSelect, accept]
+  );
+  const handleDragOver = (0, import_react10.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react10.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+  const handleFileInput = (0, import_react10.useCallback)(
+    (e) => {
+      const selectedFile = e.target.files?.[0];
+      if (selectedFile) {
+        onFileSelect(selectedFile);
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [onFileSelect]
+  );
+  const handleClick = (0, import_react10.useCallback)(() => {
+    if (onCustomOpen) {
+      onCustomOpen();
+    } else {
+      inputRef.current?.click();
+    }
+  }, [onCustomOpen]);
+  const handleKeyDown = (0, import_react10.useCallback)(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": label ?? "Drop a file here or click to select",
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        style: {
+          ...compactStyles.zone,
+          ...isDragOver ? compactStyles.zoneDragOver : {}
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: compactStyles.icon, children: "+" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: compactStyles.text, children: buttonLabel ?? "Open file" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept: acceptString,
+              onChange: handleFileInput,
+              style: { display: "none" },
+              tabIndex: -1,
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": label ?? "Drop a parquet file here or click to select",
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      style: {
+        ...fullStyles.zone,
+        ...isDragOver ? fullStyles.zoneDragOver : {}
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: fullStyles.iconCircle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "svg",
+          {
+            width: "32",
+            height: "32",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "14 2 14 8 20 8" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: fullStyles.textGroup, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: fullStyles.title, children: label ?? "Open a Parquet file" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: fullStyles.hint, children: "Drag & drop a .parquet file here, or click to browse" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClick();
+            },
+            style: fullStyles.button,
+            children: buttonLabel ?? "Choose file"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: fullStyles.supportedLabel, children: ".parquet" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: acceptString,
+            onChange: handleFileInput,
+            style: { display: "none" },
+            tabIndex: -1,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+var fullStyles = {
+  zone: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 20,
+    padding: "56px 48px",
+    border: "2px dashed rgba(0,0,0,0.08)",
+    borderRadius: 16,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    backgroundColor: "#f6f9fc",
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    outline: "none",
+    maxWidth: 420,
+    width: "100%"
+  },
+  zoneDragOver: {
+    borderColor: "#6366f1",
+    backgroundColor: "#eef2ff",
+    transform: "scale(1.01)"
+  },
+  iconCircle: {
+    width: 72,
+    height: 72,
+    borderRadius: "50%",
+    backgroundColor: "rgba(0,0,0,0.04)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#425466",
+    transition: "background-color 0.2s, color 0.2s"
+  },
+  textGroup: {
+    textAlign: "center"
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 600,
+    color: "#0a2540",
+    margin: 0
+  },
+  hint: {
+    fontSize: 13,
+    color: "#425466",
+    margin: "6px 0 0"
+  },
+  button: {
+    padding: "10px 32px",
+    backgroundColor: "#0a2540",
+    color: "#ffffff",
+    border: "none",
+    borderRadius: 8,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    transition: "background-color 0.15s"
+  },
+  supportedLabel: {
+    fontSize: 11,
+    color: "rgba(66,84,102,0.5)",
+    margin: 0,
+    letterSpacing: "0.03em"
+  }
+};
+var compactStyles = {
+  zone: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 14px",
+    border: "1px dashed rgba(0,0,0,0.08)",
+    borderRadius: 8,
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    backgroundColor: "#f6f9fc",
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    fontSize: 13,
+    color: "#425466",
+    whiteSpace: "nowrap",
+    outline: "none"
+  },
+  zoneDragOver: {
+    borderColor: "#6366f1",
+    backgroundColor: "#eef2ff",
+    color: "#6366f1"
+  },
+  icon: {
+    fontSize: 16,
+    fontWeight: 700,
+    lineHeight: 1
+  },
+  text: {
+    lineHeight: 1
+  }
+};
+
+// src/ParquetExplorer.tsx
+var import_react11 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ParquetExplorer({
+  source,
+  onRequestOpen,
+  className,
+  style,
+  ...viewerProps
+}) {
+  const [currentSource, setCurrentSource] = (0, import_react11.useState)(source);
+  const [fileName, setFileName] = (0, import_react11.useState)(
+    source ? sourceToDisplayName(source) : ""
+  );
+  const [fileSize, setFileSize] = (0, import_react11.useState)(
+    source ? sourceToDisplaySize(source) : void 0
+  );
+  const [metadata, setMetadata] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => {
+    setCurrentSource(source);
+    setFileName(source ? sourceToDisplayName(source) : "");
+    setFileSize(source ? sourceToDisplaySize(source) : void 0);
+    setMetadata(null);
+  }, [source]);
+  const hasSource = !!currentSource;
+  const handleFileSelect = (0, import_react11.useCallback)((newFile) => {
+    setCurrentSource(newFile);
+    setFileName(newFile.name);
+    setFileSize(newFile.size);
+    setMetadata(null);
+  }, []);
+  const handleClose = (0, import_react11.useCallback)(() => {
+    setCurrentSource(void 0);
+    setFileName("");
+    setFileSize(void 0);
+    setMetadata(null);
+  }, []);
+  const handleCustomOpen = (0, import_react11.useCallback)(async () => {
+    if (!onRequestOpen) return;
+    const result = await onRequestOpen();
+    if (result) {
+      setCurrentSource(result.source);
+      setFileName(result.name);
+      setFileSize(void 0);
+      setMetadata(null);
+    }
+  }, [onRequestOpen]);
+  const handleMetadataLoad = (0, import_react11.useCallback)((meta) => {
+    setMetadata(meta);
+  }, []);
+  const dropZoneProps = onRequestOpen ? { onFileSelect: handleFileSelect, onCustomOpen: handleCustomOpen } : { onFileSelect: handleFileSelect };
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const handleOpenClick = (0, import_react11.useCallback)(() => {
+    if (onRequestOpen) {
+      handleCustomOpen();
+    } else {
+      fileInputRef.current?.click();
+    }
+  }, [onRequestOpen, handleCustomOpen]);
+  const handleInputChange = (0, import_react11.useCallback)(
+    (e) => {
+      const f = e.target.files?.[0];
+      if (f) handleFileSelect(f);
+      e.target.value = "";
+    },
+    [handleFileSelect]
+  );
+  const [showAbout, setShowAbout] = (0, import_react11.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className,
+      style: { ...styles.root, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.toolbar, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.toolbarLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleOpenClick,
+                style: styles.openButton,
+                title: "Open file (Ctrl+O)",
+                "aria-label": "Open file",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FolderOpenIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "Open" })
+                ]
+              }
+            ),
+            !onRequestOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".parquet",
+                style: { display: "none" },
+                onChange: handleInputChange
+              }
+            ),
+            hasSource && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.separator }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.fileInfoGroup, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.fileIcon, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileIcon, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.fileName, children: fileName }),
+                fileSize != null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.fileSizeBadge, children: formatBytes(fileSize) }),
+                metadata && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.statsGroup, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.statDot, children: "\xB7" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatChip, { value: formatNumber(metadata.rowCount), label: "rows" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.statDot, children: "\xB7" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatChip, { value: String(metadata.columns.length), label: "cols" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  style: styles.iconButton,
+                  title: "Close file",
+                  "aria-label": "Close file",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.toolbarRight, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles.iconButton,
+                title: "Settings",
+                "aria-label": "Settings",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SettingsIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles.iconButton,
+                  title: "About Parqui",
+                  "aria-label": "About Parqui",
+                  onClick: () => setShowAbout(!showAbout),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InfoIcon, {})
+                }
+              ),
+              showAbout && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AboutPopover, { onClose: () => setShowAbout(false) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.content, children: hasSource ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ParquetViewer,
+          {
+            source: currentSource,
+            onMetadataLoad: handleMetadataLoad,
+            ...viewerProps,
+            style: { height: "100%", width: "100%" }
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.dropZoneWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FileDropZone, { ...dropZoneProps }) }) })
+      ]
+    }
+  );
+}
+function StatChip({ value, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: styles.stat, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.statValue, children: value }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles.statLabel, children: label })
+  ] });
+}
+function AboutPopover({ onClose }) {
+  (0, import_react11.useEffect)(() => {
+    const handler = (e) => {
+      if (!e.target.closest("[data-about-popover]")) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { "data-about-popover": true, style: styles.aboutPopover, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.aboutTitle, children: "Parqui" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.aboutText, children: "A fast, lightweight Parquet file viewer." }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.aboutVersion, children: "v0.1.0" })
+  ] });
+}
+function FolderOpenIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) });
+}
+function FileIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "14 2 14 8 20 8" })
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function SettingsIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+  ] });
+}
+function InfoIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+  ] });
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function formatNumber(n) {
+  return n.toLocaleString("en-US");
+}
+var styles = {
+  root: {
+    fontFamily: "'Plus Jakarta Sans', 'Inter', system-ui, sans-serif",
+    display: "flex",
+    flexDirection: "column",
+    backgroundColor: "#ffffff",
+    color: "#0a2540",
+    overflow: "hidden"
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 6px",
+    backgroundColor: "#f6f9fc",
+    borderBottom: "1px solid rgba(0,0,0,0.06)",
+    flexShrink: 0,
+    height: 40,
+    userSelect: "none"
+  },
+  toolbarLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: 0,
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden"
+  },
+  toolbarRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: 2,
+    flexShrink: 0,
+    marginLeft: 8
+  },
+  openButton: {
+    display: "flex",
+    alignItems: "center",
+    gap: 5,
+    padding: "4px 10px",
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    color: "#0a2540",
+    backgroundColor: "transparent",
+    border: "1px solid rgba(0,0,0,0.08)",
+    borderRadius: 6,
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    height: 28,
+    transition: "background-color 0.15s, border-color 0.15s"
+  },
+  separator: {
+    width: 1,
+    height: 18,
+    backgroundColor: "rgba(0,0,0,0.06)",
+    margin: "0 10px",
+    flexShrink: 0
+  },
+  fileInfoGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden"
+  },
+  fileIcon: {
+    flexShrink: 0,
+    color: "#425466",
+    display: "flex",
+    alignItems: "center"
+  },
+  fileName: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "#0a2540",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  fileSizeBadge: {
+    fontSize: 11,
+    fontWeight: 500,
+    color: "#425466",
+    backgroundColor: "rgba(0,0,0,0.04)",
+    padding: "1px 6px",
+    borderRadius: 4,
+    whiteSpace: "nowrap",
+    flexShrink: 0
+  },
+  statsGroup: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    flexShrink: 99999,
+    minWidth: 0,
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  },
+  stat: {
+    display: "flex",
+    alignItems: "center",
+    gap: 3,
+    flexShrink: 0
+  },
+  statValue: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: "#0a2540"
+  },
+  statLabel: {
+    fontSize: 11,
+    color: "#425466"
+  },
+  statDot: {
+    color: "rgba(0,0,0,0.15)",
+    fontSize: 14,
+    lineHeight: 1,
+    flexShrink: 0
+  },
+  iconButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 28,
+    height: 28,
+    border: "none",
+    borderRadius: 6,
+    backgroundColor: "transparent",
+    color: "#425466",
+    cursor: "pointer",
+    flexShrink: 0,
+    transition: "background-color 0.15s, color 0.15s"
+  },
+  aboutPopover: {
+    position: "absolute",
+    top: "calc(100% + 6px)",
+    right: 0,
+    width: 200,
+    padding: "12px 14px",
+    backgroundColor: "#ffffff",
+    border: "1px solid rgba(0,0,0,0.06)",
+    borderRadius: 8,
+    boxShadow: "0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04)",
+    zIndex: 100
+  },
+  aboutTitle: {
+    fontSize: 13,
+    fontWeight: 700,
+    color: "#0a2540",
+    marginBottom: 4
+  },
+  aboutText: {
+    fontSize: 12,
+    color: "#425466",
+    lineHeight: 1.4,
+    marginBottom: 6
+  },
+  aboutVersion: {
+    fontSize: 11,
+    color: "rgba(66,84,102,0.5)"
+  },
+  content: {
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column"
+  },
+  dropZoneWrapper: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FileDropZone,
+  HEADER_HEIGHT,
+  ParquetExplorer,
+  ParquetViewer,
+  ParquiLogo,
+  ROW_HEIGHT,
+  useColumnManager,
+  useContainerSize,
+  useKeyboardNavigation,
+  useParquetData,
+  useVirtualScroll
+});
+//# sourceMappingURL=index.cjs.map