@elaraai/e3-ui-components 1.0.56 → 1.0.58

package/dist/components/DatasetPreview.d.ts

@@ -13,5 +13,12 @@ export interface DatasetPreviewProps {
      *  this dataset path (for mutable inputs). Task outputs stay read-only. */
     editable?: boolean;
 }
+/** Human-readable byte size, shared with the paged preview. */
+export declare function formatSize(bytes: number): string;
+/** Download trigger with its own in-flight state, shared with the paged preview. */
+export declare function DownloadButton({ onClick, label }: {
+    onClick: () => void;
+    label?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const DatasetPreview: import('react').NamedExoticComponent<DatasetPreviewProps>;
 //# sourceMappingURL=DatasetPreview.d.ts.map

package/dist/components/DatasetPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasetPreview.d.ts","sourceRoot":"","sources":["../../src/components/DatasetPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAiB7D,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mDAAmD;IACnD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;+EAC2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAsBD,eAAO,MAAM,cAAc,2DAoGzB,CAAC"}
+{"version":3,"file":"DatasetPreview.d.ts","sourceRoot":"","sources":["../../src/components/DatasetPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAkB7D,MAAM,WAAW,mBAAmB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mDAAmD;IACnD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;+EAC2E;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,+DAA+D;AAC/D,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhD;AAED,oFAAoF;AACpF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAYzF;AAED,eAAO,MAAM,cAAc,2DAgIzB,CAAC"}

package/dist/components/PagedDatasetPreview.d.ts

@@ -0,0 +1,20 @@
+import { RequestOptions } from '@elaraai/e3-api-client';
+import { EastTypeValue } from '@elaraai/east';
+export interface PagedDatasetPreviewProps {
+    apiUrl: string;
+    repo: string;
+    workspace: string;
+    /** Dotted path string, e.g. "inputs.rows". */
+    path: string;
+    /** The dataset's East type (an Array/Set/Dict root). */
+    type: EastTypeValue;
+    /** Content hash of the current value — resets pages when it changes. */
+    hash: string;
+    /** Stored blob size, shown alongside the totals. */
+    sizeBytes: number;
+    requestOptions?: RequestOptions;
+    /** Triggers a whole-value download (the existing download flow). */
+    onDownload: () => void | Promise<void>;
+}
+export declare const PagedDatasetPreview: import('react').NamedExoticComponent<PagedDatasetPreviewProps>;
+//# sourceMappingURL=PagedDatasetPreview.d.ts.map

package/dist/components/PagedDatasetPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagedDatasetPreview.d.ts","sourceRoot":"","sources":["../../src/components/PagedDatasetPreview.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAkD,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAenG,MAAM,WAAW,wBAAwB;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,IAAI,EAAE,aAAa,CAAC;IACpB,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,oEAAoE;IACpE,UAAU,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAkCD,eAAO,MAAM,mBAAmB,gEAkIgH,CAAC"}

package/dist/components/index.d.ts

@@ -8,6 +8,7 @@ export { TaskLogs, type TaskLogsProps } from './TaskLogs.js';
 export { UITaskPreview, type UITaskPreviewProps } from './UITaskPreview.js';
 export { DataTaskPreview, type DataTaskPreviewProps } from './DataTaskPreview.js';
 export { DatasetPreview, type DatasetPreviewProps } from './DatasetPreview.js';
+export { PagedDatasetPreview, type PagedDatasetPreviewProps } from './PagedDatasetPreview.js';
 export { StatusDisplay, type StatusDisplayProps } from './StatusDisplay.js';
 export { EastValueViewer, type EastValueViewerProps } from './EastValueViewer.js';
 export { VirtualizedLogViewer, type VirtualizedLogViewerProps } from './VirtualizedLogViewer.js';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/debug.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Elara AI Pty Ltd
+ * Dual-licensed under AGPL-3.0 and commercial license. See LICENSE for details.
+ */
+/**
+ * Opt-in debug logging for the paged dataset preview (#497).
+ *
+ * Silent by default. Enable with `localStorage['e3-paging-debug'] = '1'`
+ * (any value except 'off') to trace page fetches, resets, and short-page
+ * clamps in the console — everything is prefixed `[e3-paging]`.
+ */
+export declare function pagingDebug(...args: unknown[]): void;
+//# sourceMappingURL=debug.d.ts.map

package/dist/debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../src/debug.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CASpD"}

package/dist/hooks/index.d.ts

@@ -11,5 +11,6 @@ export * from './tasks.js';
 export * from './executions.js';
 export { useDatasetStatus, type DatasetStatus, type UseDatasetStatusOptions } from './useDatasetStatus.js';
 export { useDatasetValue, useDatasetDownload, type DatasetValueResult, type UseDatasetValueOptions } from './useDatasetValue.js';
+export { useDatasetPage, type DatasetPageResult, type UseDatasetPageOptions, type DatasetPageWindow } from './useDatasetPage.js';
 export { useTaskDetails, getTaskKind, getTaskMetadata, type UseTaskDetailsOptions } from './useTaskDetails.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,KAAK,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAC3G,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACjI,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,KAAK,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAC3G,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AACjI,OAAO,EAAE,cAAc,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACjI,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/hooks/useDatasetPage.d.ts

@@ -0,0 +1,47 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { RequestOptions, DatasetPageWindow } from '@elaraai/e3-api-client';
+import { EastTypeValue } from '@elaraai/east';
+import { QueryOverrides } from './types.js';
+export type { DatasetPageWindow } from '@elaraai/e3-api-client';
+export interface UseDatasetPageOptions {
+    requestOptions?: RequestOptions;
+    queryOverrides?: QueryOverrides;
+    /** Set false to skip the fetch. Defaults to true. */
+    enabled?: boolean;
+    /**
+     * Content hash of the current dataset version — part of the query key so
+     * cached pages invalidate when the underlying data changes. The fetch is
+     * gated on it being non-null.
+     */
+    hash?: string | null;
+    /** East type to decode pages against. Required. */
+    type: EastTypeValue;
+    /** The window to read: an element window or one writer segment. */
+    window: DatasetPageWindow;
+}
+export interface DatasetPageResult {
+    /** The decoded window — a value of the dataset's own type. */
+    decoded: unknown;
+    /** Total elements in the dataset (pairs for Dict datasets). */
+    totalElements: number;
+    /** Byte size of the whole stored blob. */
+    totalBytes: number;
+    /** Whether `totalElements` is exact (segment windows of Set/Dict
+     *  datasets report an upper bound). */
+    totalExact: boolean;
+    /** Segments in the stored blob; 0 when the blob carries no index. */
+    segmentCount: number;
+    /** Global element offset of the window's first element. */
+    offset: number;
+    /** Elements actually in this page (the server may clamp the limit). */
+    count: number;
+}
+/**
+ * Fetch + decode one window of a collection (Array/Set/Dict) dataset.
+ *
+ * Pages are keyed by content hash and window, and the previous page is held
+ * on screen while the next loads, so stepping through windows never flashes
+ * the loading state.
+ */
+export declare function useDatasetPage(apiUrl: string, repo: string, workspace: string | null, datasetPath: string | null, options: UseDatasetPageOptions): UseQueryResult<DatasetPageResult, Error>;
+//# sourceMappingURL=useDatasetPage.d.ts.map

package/dist/hooks/useDatasetPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDatasetPage.d.ts","sourceRoot":"","sources":["../../src/hooks/useDatasetPage.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAA8B,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExF,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,WAAW,qBAAqB;IAClC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,mDAAmD;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,mEAAmE;IACnE,MAAM,EAAE,iBAAiB,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAC9B,8DAA8D;IAC9D,OAAO,EAAE,OAAO,CAAC;IACjB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB;2CACuC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,YAAY,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC1B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,WAAW,EAAE,MAAM,GAAG,IAAI,EAC1B,OAAO,EAAE,qBAAqB,GAC/B,cAAc,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAgC1C"}

package/dist/index.cjs

@@ -63857,6 +63857,35 @@ function useDatasetDownload(apiUrl, repo, workspace, datasetPath, requestOptions
     URL.revokeObjectURL(url);
   }, [apiUrl, repo, workspace, datasetPath, pathParts, reqOpts]);
 }
+function useDatasetPage(apiUrl, repo, workspace, datasetPath, options2) {
+  const { requestOptions, queryOverrides, enabled = true, hash: hash2, type, window: window3 } = options2;
+  const reqOpts = requestOptions ?? { token: null };
+  const pathParts = React.useMemo(
+    () => (datasetPath == null ? void 0 : datasetPath.split(".").filter(Boolean).map((v3) => east.variant("field", v3))) ?? [],
+    [datasetPath]
+  );
+  const windowKey = "segment" in window3 ? `s${window3.segment}` : `${window3.offset}+${window3.limit}`;
+  return reactQuery.useQuery({
+    queryKey: ["datasetPage", apiUrl, repo, workspace, datasetPath, hash2 ?? null, windowKey],
+    queryFn: async () => {
+      const pinned = hash2 != null ? { ...window3, hash: hash2 } : window3;
+      const page = await e3ApiClient.datasetGetPage(apiUrl, repo, workspace, pathParts, pinned, reqOpts);
+      const decoded = east.decodeBeast2For(type)(page.data);
+      return {
+        decoded,
+        totalElements: page.totalElements,
+        totalBytes: page.totalBytes,
+        totalExact: page.totalExact,
+        segmentCount: page.segmentCount,
+        offset: page.offset,
+        count: page.count
+      };
+    },
+    enabled: enabled && !!workspace && !!datasetPath && hash2 != null,
+    placeholderData: reactQuery.keepPreviousData,
+    ...queryOverrides
+  });
+}
 function useTaskDetails(apiUrl, repo, workspace, taskName, options2) {
   const reqOpts = (options2 == null ? void 0 : options2.requestOptions) ?? { token: null };
   return reactQuery.useQuery({
@@ -64000,6 +64029,158 @@ class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+function pagingDebug(...args) {
+  try {
+    if (typeof localStorage === "undefined") return;
+    const flag = localStorage.getItem("e3-paging-debug");
+    if (flag === null || flag === "off") return;
+  } catch {
+    return;
+  }
+  console.info("[e3-paging]", ...args);
+}
+const PAGE_SIZE = 500;
+function pageRows(type, decoded, offset) {
+  if (type.type === "Array") {
+    const elemType2 = type.value;
+    return decoded.map((el, i) => ({
+      node: eastUi.ValueTree.materialize(elemType2, el),
+      step: east.variant("index", BigInt(offset + i))
+    }));
+  }
+  if (type.type === "Dict") {
+    const { key: keyType, value: valueType } = type.value;
+    const printKey = east.printFor(keyType);
+    const stringKeys = keyType.type === "String";
+    return Array.from(decoded.entries()).map(([k2, v3], i) => ({
+      node: eastUi.ValueTree.materialize(valueType, v3),
+      step: stringKeys ? east.variant("key", k2) : east.variant("index", BigInt(offset + i)),
+      label: stringKeys ? k2 : printKey(k2)
+    }));
+  }
+  const elemType = type.value;
+  return Array.from(decoded.values()).map((el, i) => ({
+    node: eastUi.ValueTree.materialize(elemType, el),
+    step: east.variant("index", BigInt(offset + i))
+  }));
+}
+function emptyOf(type) {
+  return type.type === "Array" ? [] : type.type === "Dict" ? /* @__PURE__ */ new Map() : /* @__PURE__ */ new Set();
+}
+const PagedDatasetPreview = React.memo(function PagedDatasetPreview2({
+  apiUrl,
+  repo,
+  workspace,
+  path: path2,
+  type,
+  hash: hash2,
+  sizeBytes,
+  requestOptions,
+  onDownload
+}) {
+  const queryClient = reactQuery.useQueryClient();
+  const [pages, setPages] = React.useState(/* @__PURE__ */ new Map());
+  const [totals, setTotals] = React.useState(null);
+  const [loadingCount, setLoadingCount] = React.useState(0);
+  const [error3, setError] = React.useState(null);
+  const inflightRef = React.useRef(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    pagingDebug(`reset (path=${path2}, hash=${hash2.slice(0, 8)})`);
+    setPages(/* @__PURE__ */ new Map());
+    setTotals(null);
+    setError(null);
+    inflightRef.current.clear();
+  }, [path2, hash2]);
+  const loadPage = React.useCallback((pageIdx) => {
+    if (inflightRef.current.has(pageIdx)) return;
+    inflightRef.current.add(pageIdx);
+    setLoadingCount((n2) => n2 + 1);
+    pagingDebug(`fetch p${pageIdx} (offset=${pageIdx * PAGE_SIZE}, limit=${PAGE_SIZE}, hash=${hash2.slice(0, 8)})`);
+    const pathParts = path2.split(".").filter(Boolean).map((v3) => east.variant("field", v3));
+    const reqOpts = requestOptions ?? { token: null };
+    queryClient.fetchQuery({
+      queryKey: ["datasetPage", apiUrl, repo, workspace, path2, hash2, `p${pageIdx}`],
+      // Hash-pinned: the URL is a pure function of the bytes, so any
+      // HTTP cache between here and the server can hold it immutably.
+      queryFn: () => e3ApiClient.datasetGetPage(apiUrl, repo, workspace, pathParts, { offset: pageIdx * PAGE_SIZE, limit: PAGE_SIZE, hash: hash2 }, reqOpts),
+      staleTime: Infinity
+      // pages of one content hash are immutable
+    }).then((page) => {
+      const decoded = east.decodeBeast2For(type)(page.data);
+      const rows = pageRows(type, decoded, page.offset);
+      pagingDebug(
+        `p${pageIdx} ok: count=${page.count} rows=${rows.length} offset=${page.offset} total=${page.totalElements} segs=${page.segmentCount}`,
+        rows.length > 0 ? `first=${JSON.stringify(rows[0].label ?? "(derived)")}` : "(empty)"
+      );
+      if (page.count < PAGE_SIZE && page.offset + page.count < page.totalElements) {
+        pagingDebug(`p${pageIdx} SHORT page: server clamped ${PAGE_SIZE} → ${page.count}`);
+      }
+      setTotals({ elements: page.totalElements, bytes: page.totalBytes });
+      setPages((prev2) => new Map(prev2).set(pageIdx, rows));
+    }).catch((err) => {
+      pagingDebug(`p${pageIdx} FAILED:`, err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      inflightRef.current.delete(pageIdx);
+      setLoadingCount((n2) => n2 - 1);
+    });
+  }, [queryClient, apiUrl, repo, workspace, path2, hash2, requestOptions, type]);
+  React.useEffect(() => {
+    if (totals === null && error3 === null) loadPage(0);
+  }, [totals, error3, loadPage]);
+  const onNeedRows = React.useCallback((startRow, endRow) => {
+    const first2 = Math.max(0, Math.floor(startRow / PAGE_SIZE));
+    const last2 = Math.max(first2, Math.ceil(endRow / PAGE_SIZE) - 1);
+    const missing = [];
+    for (let p2 = first2; p2 <= last2; p2++) {
+      if (!pages.has(p2)) missing.push(p2);
+    }
+    pagingDebug(`need rows [${startRow}, ${endRow}) → pages ${first2}..${last2}, missing=[${missing.join(",")}], inflight=[${[...inflightRef.current].join(",")}]`);
+    for (const p2 of missing) loadPage(p2);
+  }, [pages, loadPage]);
+  const treeValue = React.useMemo(() => ({
+    root: eastUi.ValueTree.materialize(type, emptyOf(type)),
+    onEdit: east.none,
+    onInsert: east.none,
+    onRemove: east.none,
+    onTag: east.none,
+    style: east.some({ height: east.some("100%"), maxHeight: east.none, openDepth: east.none, toolbar: east.some(true) })
+  }), [type]);
+  const paging = React.useMemo(() => totals === null ? null : {
+    totalRows: totals.elements,
+    pageSize: PAGE_SIZE,
+    pages,
+    onNeedRows
+  }, [totals, pages, onNeedRows]);
+  if (error3 !== null) {
+    if (error3 instanceof e3ApiClient.ApiError && error3.code === "dataset_too_large") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { height: "100%", direction: "column", align: "center", justify: "center", gap: 3, p: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", color: "fg.warning", fontWeight: "bold", children: "Too large to page" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { color: "fg.muted", fontSize: "sm", textAlign: "center", maxW: "32rem", children: typeof error3.details === "string" ? error3.details : "This dataset cannot be paged server-side." }),
+        /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: onDownload, label: "Download value" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Paged load failed", message: error3.message });
+  }
+  if (paging === null || totals === null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "loading", title: "Loading..." });
+  }
+  const itemNoun = type.type === "Dict" ? "entries" : "items";
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", height: "100%", overflow: "hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 4, py: 2, gap: 2, align: "center", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: "fg.muted", whiteSpace: "nowrap", children: [
+        totals.elements.toLocaleString(),
+        " ",
+        itemNoun,
+        " · ",
+        formatSize(totals.bytes > 0 ? totals.bytes : sizeBytes)
+      ] }),
+      loadingCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", children: "Loading…" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { flex: 1, justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: onDownload }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, minHeight: 0, overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraValueTree, { value: treeValue, storageKey: `${path2}:page`, paging }) })
+  ] });
+}, (prev2, next2) => prev2.path === next2.path && prev2.workspace === next2.workspace && prev2.hash === next2.hash && prev2.sizeBytes === next2.sizeBytes);
 const DEFAULT_SIZE_LIMIT = 200 * 1024;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -64072,7 +64253,7 @@ const DatasetPreview = React.memo(function DatasetPreview2({
       onRemove: east.some((p2) => write(eastUi.ValueTree.applyEdit(type, decoded, p2, { kind: "remove" }))),
       onTag: east.some((p2, tag) => write(eastUi.ValueTree.applyEdit(type, decoded, p2, { kind: "tag", tag })))
     } : { onEdit: east.none, onInsert: east.none, onRemove: east.none, onTag: east.none };
-    return { root: root2, ...wire, style: east.some({ height: east.some("100%"), maxHeight: east.none }) };
+    return { root: root2, ...wire, style: east.some({ height: east.some("100%"), maxHeight: east.none, openDepth: east.none, toolbar: east.some(true) }) };
   }, [type, decoded, editable, write]);
   if (statusQuery.isLoading) return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "loading", title: "Loading..." });
   if (statusQuery.error) {
@@ -64082,6 +64263,23 @@ const DatasetPreview = React.memo(function DatasetPreview2({
   if (!status) return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "info", title: "No status" });
   if (!hasValue) return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "info", title: "No data available", message: "Waiting for a value to be set" });
   if (isOversized) {
+    const pageable = type !== void 0 && (type.type === "Array" || type.type === "Set" || type.type === "Dict");
+    if (pageable && workspace != null && path2 != null && status.hash != null) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        PagedDatasetPreview,
+        {
+          apiUrl,
+          repo,
+          workspace,
+          path: path2,
+          type,
+          hash: status.hash,
+          sizeBytes,
+          ...requestOptions != null && { requestOptions },
+          onDownload: download
+        }
+      );
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { height: "100%", direction: "column", align: "center", justify: "center", layerStyle: "banner.stale", borderRadius: "0", gap: 3, p: 6, children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", color: "fg.warning", fontWeight: "bold", children: "Value too large to display" }),
       /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { color: "fg.muted", fontSize: "sm", children: [
@@ -64096,9 +64294,14 @@ const DatasetPreview = React.memo(function DatasetPreview2({
   }
   if (valueQuery.isLoading || !valueQuery.data) return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "loading", title: "Loading..." });
   if (valueQuery.error) return /* @__PURE__ */ jsxRuntime.jsx(StatusDisplay, { variant: "error", title: "Decode failed", message: valueQuery.error.message });
+  const count = type === void 0 || decoded === void 0 ? null : type.type === "Array" ? decoded.length : type.type === "Set" || type.type === "Dict" ? decoded.size : null;
+  const countText = count === null ? "" : `${count.toLocaleString()} ${(type == null ? void 0 : type.type) === "Dict" ? "entries" : "items"} · `;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { direction: "column", height: "100%", overflow: "hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 4, py: 2, justify: "flex-end", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: formatSize(sizeBytes) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: [
+        countText,
+        formatSize(sizeBytes)
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, { onClick: download })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(react.Box, { flex: 1, minHeight: 0, overflow: "hidden", children: treeValue !== null && /* @__PURE__ */ jsxRuntime.jsx(eastUiComponents.EastChakraValueTree, { value: treeValue, storageKey: path2 ?? "value" }) })
@@ -65172,6 +65375,7 @@ exports.useDatasetListAt = useDatasetListAt;
 exports.useDatasetListRecursive = useDatasetListRecursive;
 exports.useDatasetListRecursivePaths = useDatasetListRecursivePaths;
 exports.useDatasetListWithStatus = useDatasetListWithStatus;
+exports.useDatasetPage = useDatasetPage;
 exports.useDatasetSet = useDatasetSet;
 exports.useDatasetStatus = useDatasetStatus;
 exports.useDatasetValue = useDatasetValue;