@factorialco/f0-react 4.25.0 → 4.26.0

package/dist/experimental.d.ts

@@ -6230,6 +6230,19 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     loadNodePath?: (nodeId: string) => Promise<R[]>;
     /** Optional parent accessor used when linking the revealed ancestor path. */
     getParentId?: (record: R) => string | null;
+    /**
+     * Opt into two-phase (viewport-driven) hydration. When provided, the tree is
+     * built from whatever lightweight records `childrenFilters`/`fetchData`
+     * return, and the full record is fetched — batched, once per node — only for
+     * the nodes that enter the viewport, via this loader. The returned records
+     * replace each node's `data` (matched by node id) and clear its loading
+     * placeholder. Best paired with `enableNodeWindowing`. Omit for the current
+     * eager behavior (structure and data fetched together per expansion).
+     *
+     * The "lightness" of the initial records is entirely the source's choice and
+     * transparent to the hook — no special adapter mode is required.
+     */
+    loadNodeData?: (ids: string[]) => Promise<R[]>;
     /**
      * Id of the node representing the current user. When set, a "Find me" button
      * is shown in the controls that centers the viewport on that node.
@@ -6247,6 +6260,22 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     maxZoom?: number;
     /** Whether to render the zoom/fit controls. Defaults to `true`. */
     showControls?: boolean;
+    /**
+     * Opt into F0Graph node-array windowing (pass-through). Only the nodes near
+     * the viewport are handed to React Flow — for very large trees (thousands of
+     * expand-visible nodes). Off by default; non-breaking.
+     */
+    enableNodeWindowing?: boolean;
+    /** Flow-space px kept materialized around the viewport (pass-through). */
+    nodeWindowPadding?: number;
+    /**
+     * Viewport-driven data loading (pass-through). Called (debounced + batched)
+     * with the ids of nodes that entered the viewport, so the consumer can
+     * hydrate rich data on demand. Best paired with `enableNodeWindowing`.
+     */
+    loadVisibleNodeData?: (ids: string[]) => void;
+    /** Debounce (ms) before flushing a batch of newly-visible ids (pass-through). */
+    visibleDataDebounceMs?: number;
 };
 
 declare type GraphVisualizationSettings = {

package/dist/experimental.js

@@ -2,8 +2,8 @@ import { h as Va, B as Ga, i as Ka, j as qa, k as wn, l as lt, m as tt, n as Ya,
 import { cD as vm, cC as ym, cP as wm, cz as Nm, cA as Cm, cs as km, ct as Im, ct as Sm, cu as Fm, cS as Tm, cB as Am, cL as Em, cM as Rm, cQ as Dm, cv as Pm, cF as Lm, cE as Om, cw as _m, cx as zm, cN as $m, cT as Bm, cO as Mm, cR as jm, cK as Wm, cH as Hm, cJ as Um, cG as Vm, cy as Gm, cI as Km } from "./F0CanvasPanel-CYITfwlc.js";
 import { jsx as t, jsxs as d, Fragment as fe } from "react/jsx-runtime";
 import Te, { forwardRef as de, useRef as z, useTransition as Qi, useState as R, useLayoutEffect as Je, useId as Qt, useContext as Le, createContext as Ie, useEffect as K, useCallback as U, useMemo as J, Fragment as qe, isValidElement as Ji, cloneElement as jr, memo as Wr, Children as Hr } from "react";
-import { C as Xi, P as Zi, a as it, M as eo, p as to, b as no, R as Fn, c as Ur, u as ro, d as ao, e as so, f as io, g as oo, O as Vr, h as Gr, S as lo, A as co, B as uo, L as fo, i as mo, V as ho, j as po, k as go, l as bo } from "./useDataCollectionSource-DMGVHA_H.js";
-import { r as Ym, s as Qm, o as Jm, H as Xm, t as Zm, z as eh, a8 as th, G as nh, q as rh, aa as ah, a9 as sh, Q as ih, ad as oh, F as lh, Y as ch, U as dh, J as uh, af as fh, K as mh, Z as hh, _ as ph, v as gh, ab as bh, ac as xh, N as vh, $ as yh, a5 as wh, a7 as Nh, w as Ch, y as kh, D as Ih, W as Sh, ae as Fh, X as Th, T as Ah, ag as Eh, x as Rh, E as Dh, m as Ph, n as Lh, a1 as Oh, a2 as _h, a6 as zh, I as $h, a3 as Bh, a0 as Mh, a4 as jh } from "./useDataCollectionSource-DMGVHA_H.js";
+import { C as Xi, P as Zi, a as it, M as eo, p as to, b as no, R as Fn, c as Ur, u as ro, d as ao, e as so, f as io, g as oo, O as Vr, h as Gr, S as lo, A as co, B as uo, L as fo, i as mo, V as ho, j as po, k as go, l as bo } from "./useDataCollectionSource-B2Q8eTpY.js";
+import { r as Ym, s as Qm, o as Jm, H as Xm, t as Zm, z as eh, a8 as th, G as nh, q as rh, aa as ah, a9 as sh, Q as ih, ad as oh, F as lh, Y as ch, U as dh, J as uh, af as fh, K as mh, Z as hh, _ as ph, v as gh, ab as bh, ac as xh, N as vh, $ as yh, a5 as wh, a7 as Nh, w as Ch, y as kh, D as Ih, W as Sh, ae as Fh, X as Th, T as Ah, ag as Eh, x as Rh, E as Dh, m as Ph, n as Lh, a1 as Oh, a2 as _h, a6 as zh, I as $h, a3 as Bh, a0 as Mh, a4 as jh } from "./useDataCollectionSource-B2Q8eTpY.js";
 const xo = Va("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]

package/dist/f0.d.ts

@@ -12072,6 +12072,19 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     loadNodePath?: (nodeId: string) => Promise<R[]>;
     /** Optional parent accessor used when linking the revealed ancestor path. */
     getParentId?: (record: R) => string | null;
+    /**
+     * Opt into two-phase (viewport-driven) hydration. When provided, the tree is
+     * built from whatever lightweight records `childrenFilters`/`fetchData`
+     * return, and the full record is fetched — batched, once per node — only for
+     * the nodes that enter the viewport, via this loader. The returned records
+     * replace each node's `data` (matched by node id) and clear its loading
+     * placeholder. Best paired with `enableNodeWindowing`. Omit for the current
+     * eager behavior (structure and data fetched together per expansion).
+     *
+     * The "lightness" of the initial records is entirely the source's choice and
+     * transparent to the hook — no special adapter mode is required.
+     */
+    loadNodeData?: (ids: string[]) => Promise<R[]>;
     /**
      * Id of the node representing the current user. When set, a "Find me" button
      * is shown in the controls that centers the viewport on that node.
@@ -12089,6 +12102,22 @@ declare type GraphVisualizationOptions<R extends RecordType, Filters extends Fil
     maxZoom?: number;
     /** Whether to render the zoom/fit controls. Defaults to `true`. */
     showControls?: boolean;
+    /**
+     * Opt into F0Graph node-array windowing (pass-through). Only the nodes near
+     * the viewport are handed to React Flow — for very large trees (thousands of
+     * expand-visible nodes). Off by default; non-breaking.
+     */
+    enableNodeWindowing?: boolean;
+    /** Flow-space px kept materialized around the viewport (pass-through). */
+    nodeWindowPadding?: number;
+    /**
+     * Viewport-driven data loading (pass-through). Called (debounced + batched)
+     * with the ids of nodes that entered the viewport, so the consumer can
+     * hydrate rich data on demand. Best paired with `enableNodeWindowing`.
+     */
+    loadVisibleNodeData?: (ids: string[]) => void;
+    /** Debounce (ms) before flushing a batch of newly-visible ids (pass-through). */
+    visibleDataDebounceMs?: number;
 };
 
 declare type GraphVisualizationSettings = {

package/dist/f0.js

@@ -6,8 +6,8 @@ import React__default, { forwardRef, useRef, useImperativeHandle, Children, crea
 import { D as AIButton, E as ForwardRef$1, G as animate, H as ForwardRef$f, I as ForwardRef$j, J as ForwardRef$k, K as ForwardRef$o, L as ForwardRef$t, M as ForwardRef$x, N as ForwardRef$z, O as F0Box, P as ForwardRef$J, Q as ForwardRef$K, R as ForwardRef$L, S as ForwardRef$M, U as ForwardRef$N, F as FormCardValueFormatterProvider } from "./F0AiProcessingOverlay--OAyX7JL.js";
 import { A as ta, C as ea, t as ia, s as aa, v as na, y as la, l as ra, i as sa, q as oa, z as ca, B as da, p as ua, r as ha, j as ma, e as pa, g as ba, k as Za, T as ya, w as Ma, h as Na, a as ga, n as Wa, m as Ta, o as Ga, b as fa, f as va, x as La, c as Ya, d as Xa, u as Sa } from "./F0AiProcessingOverlay--OAyX7JL.js";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
-import { C as Carousel, F as F0SegmentedControl, ah as isFieldRequired, ai as evaluateRenderIf, aj as buildDynamicSchema, ak as renderFieldInput, al as useF0Form, am as F0Form, G as F0ActionBar, an as F0FormSection, ao as nanoid, ap as dequal, Y as F0TableOfContent, a8 as Dialog$1, aq as FormMessage, Q as F0NumberInput, ar as EmojiPicker, as as data, c as ReorderItem, R as ReorderGroup, u as useDragControls, W as ResourceHeader, O as OneEmptyState, at as UpsellRequestResponseDialog, au as Label$1, av as UpsellingButton, o as BaseBanner, d as useDataCollectionSource, $ as OneDataCollection, aw as extractDisplayValue, ax as navigationFilterTypes, ay as NavigationFilters, az as DialogDescription, aA as PrivacyModeProvider, M as MotionConfig } from "./useDataCollectionSource-DMGVHA_H.js";
-import { r as Va, s as Ia, H as Ra, t as wa, z as za, aR as Da, aQ as Ca, aM as ka, aC as Oa, aB as Fa, aD as ja, aE as Ea, aa as Ua, a9 as Ja, ad as Pa, U as Ka, J as Ha, af as Aa, K as Qa, v as Ba, aS as $a, ab as qa, ac as tn, N as en, w as an, P as nn, y as ln, D as rn, ae as sn, T as on, ag as dn, x as un, E as hn, aU as mn, m as pn, n as bn, aL as Zn, aH as yn, aG as Mn, aT as Nn, a6 as gn, aJ as Wn, aK as Tn, I as Gn, aV as fn, aW as vn, e as Ln, aN as Yn, aO as Xn, aP as Sn, aI as xn, f as Vn, h as In, aF as Rn, aX as wn } from "./useDataCollectionSource-DMGVHA_H.js";
+import { C as Carousel, F as F0SegmentedControl, ah as isFieldRequired, ai as evaluateRenderIf, aj as buildDynamicSchema, ak as renderFieldInput, al as useF0Form, am as F0Form, G as F0ActionBar, an as F0FormSection, ao as nanoid, ap as dequal, Y as F0TableOfContent, a8 as Dialog$1, aq as FormMessage, Q as F0NumberInput, ar as EmojiPicker, as as data, c as ReorderItem, R as ReorderGroup, u as useDragControls, W as ResourceHeader, O as OneEmptyState, at as UpsellRequestResponseDialog, au as Label$1, av as UpsellingButton, o as BaseBanner, d as useDataCollectionSource, $ as OneDataCollection, aw as extractDisplayValue, ax as navigationFilterTypes, ay as NavigationFilters, az as DialogDescription, aA as PrivacyModeProvider, M as MotionConfig } from "./useDataCollectionSource-B2Q8eTpY.js";
+import { r as Va, s as Ia, H as Ra, t as wa, z as za, aR as Da, aQ as Ca, aM as ka, aC as Oa, aB as Fa, aD as ja, aE as Ea, aa as Ua, a9 as Ja, ad as Pa, U as Ka, J as Ha, af as Aa, K as Qa, v as Ba, aS as $a, ab as qa, ac as tn, N as en, w as an, P as nn, y as ln, D as rn, ae as sn, T as on, ag as dn, x as un, E as hn, aU as mn, m as pn, n as bn, aL as Zn, aH as yn, aG as Mn, aT as Nn, a6 as gn, aJ as Wn, aK as Tn, I as Gn, aV as fn, aW as vn, e as Ln, aN as Yn, aO as Xn, aP as Sn, aI as xn, f as Vn, h as In, aF as Rn, aX as wn } from "./useDataCollectionSource-B2Q8eTpY.js";
 import { utils, write as writeSync } from "./xlsx-Bedf3nwD.js";
 import { defaultTranslations as Dn } from "./i18n-provider-defaults.js";
 import './f0.css';const CAROUSEL_COLUMNS = {