@multiplatform.one/components 7.7.6 → 7.10.0

package/src/views/TreeView.tsx

@@ -35,7 +35,7 @@ import React, {
   type ReactNode,
 } from "react";
 import { useTranslation } from "../shared/i18n";
-import { Text, View, XStack, YStack, type YStackProps } from "tamagui";
+import { Text, View, XStack, YStack, isWeb, type YStackProps } from "tamagui";
 import { autoScrollVelocity } from "./kanbanDnd";
 import {
   applyTreeMove,
@@ -54,6 +54,7 @@ import {
   type TreeDropTarget,
 } from "./treeViewDnd";
 import { diffVisibleRows, flattenVisibleIds, isEmptyDiff } from "./treeViewMotion";
+import { treeRevealExpansion, treeRevealOffset } from "./treeViewReveal";
 import {
   TREE_LIFT_SHADOW,
   treeDefaultHeight,
@@ -135,6 +136,12 @@ export interface TreeViewProps<T = unknown> extends Omit<YStackProps, "children"
   height?: number;
   /** Message shown when there are no nodes */
   emptyMessage?: string;
+  /** Controlled expansion; takes precedence over initial expansion props. */
+  expandedIds?: string[];
+  /** Next complete expansion set from a user toggle or explicit reveal. */
+  onExpandedIdsChange?: (ids: string[]) => void;
+  /** Expand ancestors and reveal this row. Change requestId to reveal the same ID again. */
+  revealRequest?: { id: string; requestId: number };
   /** Initially expanded node IDs (wins over expandByDefault when provided) */
   defaultExpandedIds?: string[];
   /** Expand every branch on initial load */
@@ -293,6 +300,9 @@ export function TreeView<T = unknown>({
   height: heightProp,
   emptyMessage: emptyMessageProp,
   defaultExpandedIds,
+  expandedIds: controlledExpandedIds,
+  onExpandedIdsChange,
+  revealRequest,
   expandByDefault = false,
   display = "default",
   showExpansionArrows = true,
@@ -357,12 +367,25 @@ export function TreeView<T = unknown>({
   const handleContainerBlur = useCallback(() => {
     setKeyboardRing(false);
   }, []);
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => {
+  const [internalExpandedIds, setInternalExpandedIds] = useState<Set<string>>(() => {
     if (defaultExpandedIds) return new Set(defaultExpandedIds);
     if (expandByDefault) return collectBranchIds(nodes);
     return new Set();
   });
 
+  const expandedIds = useMemo(
+    () =>
+      controlledExpandedIds === undefined ? internalExpandedIds : new Set(controlledExpandedIds),
+    [controlledExpandedIds, internalExpandedIds],
+  );
+  const setExpandedIds = useCallback(
+    (next: ReadonlySet<string>) => {
+      if (controlledExpandedIds === undefined) setInternalExpandedIds(new Set(next));
+      onExpandedIdsChange?.([...next]);
+    },
+    [controlledExpandedIds, onExpandedIdsChange],
+  );
+
   // ── Expand/collapse motion (FLIP + enter fade; Axiom 4) ────────────────
   const [motion, setMotion] = useState<TreeMotion | null>(null);
   const rowHeights = useRef(new Map<string, number>());
@@ -379,24 +402,30 @@ export function TreeView<T = unknown>({
       } else {
         next.add(node.id);
       }
-      // Mount never animates and `animation: none` / reduced motion skips
-      // the machine entirely — the toggle then renders in one jump.
-      if (transition) {
-        const diff = diffVisibleRows(
-          flattenVisibleIds(nodes, expandedIds),
-          flattenVisibleIds(nodes, next),
-          getRowHeight,
-        );
-        setMotion(isEmptyDiff(diff) ? null : { phase: "armed", ...diff });
-      } else {
-        setMotion(null);
-      }
       setExpandedIds(next);
       onNodeToggle?.(node);
     },
-    [expandedIds, nodes, transition, getRowHeight, onNodeToggle],
+    [expandedIds, setExpandedIds, onNodeToggle],
   );
 
+  const previousExpandedIds = useRef(expandedIds);
+  useLayoutEffect(() => {
+    const previous = previousExpandedIds.current;
+    previousExpandedIds.current = expandedIds;
+    if (previous.size === expandedIds.size && [...previous].every((id) => expandedIds.has(id)))
+      return;
+    if (transition) {
+      const diff = diffVisibleRows(
+        flattenVisibleIds(nodes, previous),
+        flattenVisibleIds(nodes, expandedIds),
+        getRowHeight,
+      );
+      setMotion(isEmptyDiff(diff) ? null : { phase: "armed", ...diff });
+    } else {
+      setMotion(null);
+    }
+  }, [expandedIds, nodes, transition, getRowHeight]);
+
   // Release the FLIP one frame after the armed styles paint so the tween
   // runs from the previous layout to the new one.
   useLayoutEffect(() => {
@@ -432,6 +461,108 @@ export function TreeView<T = unknown>({
     return result;
   }, [nodes, expandedIds]);
 
+  const revealIntent = useRef<
+    | {
+        id: string;
+        requestId: number;
+        complete: boolean;
+        notifiedExpansion?: ReadonlySet<string>;
+      }
+    | undefined
+  >(undefined);
+  const revealFrame = useRef<number | undefined>(undefined);
+  const revealStep = useRef<() => void>(() => {});
+  const renderedRows = useRef(new Set<string>());
+  const scheduleReveal = useCallback(() => {
+    if (!revealIntent.current || revealIntent.current.complete || revealFrame.current !== undefined)
+      return;
+    revealFrame.current = requestAnimationFrame(() => {
+      revealFrame.current = undefined;
+      revealStep.current();
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!revealRequest) {
+      revealIntent.current = undefined;
+    } else if (
+      revealIntent.current?.id !== revealRequest.id ||
+      revealIntent.current?.requestId !== revealRequest.requestId
+    ) {
+      revealIntent.current = { ...revealRequest, complete: false };
+    }
+    revealStep.current = () => {
+      const intent = revealIntent.current;
+      if (!intent || intent.complete) return;
+      const next = treeRevealExpansion(nodes, expandedIds, intent.id);
+      if (!next) return;
+      if (next !== expandedIds) {
+        const notified = intent.notifiedExpansion;
+        if (!notified || notified.size !== next.size || [...next].some((id) => !notified.has(id))) {
+          intent.notifiedExpansion = next;
+          setExpandedIds(next);
+        }
+        return;
+      }
+      if (motion) {
+        setMotion(null);
+        return;
+      }
+      const list = flashListRef.current;
+      const index = flatNodes.findIndex((item) => item.node.id === intent.id);
+      if (!list || index < 0) return;
+      if (isWeb) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0) return;
+      }
+      const viewport = list.getWindowSize();
+      if (viewport.width <= 0) return;
+      const layout = list.getLayout(index);
+      if (!layout) return;
+      const offset = list.getAbsoluteLastScrollOffset();
+      const nextOffset = treeRevealOffset(
+        { y: layout.y + list.getFirstItemOffset(), height: layout.height },
+        offset,
+        viewport.height,
+      );
+      if (nextOffset === undefined) return;
+      if (Math.abs(nextOffset - offset) < 1) {
+        const visible = list.computeVisibleIndices();
+        if (
+          layout.isHeightMeasured &&
+          renderedRows.current.has(intent.id) &&
+          index >= visible.startIndex &&
+          index <= visible.endIndex
+        )
+          intent.complete = true;
+        return;
+      }
+      // FlashList's scrollToIndex has uncancellable delayed steps. Immediate offsets
+      // let the next layout/scroll event correct estimates using only the latest intent.
+      list.scrollToOffset({ offset: nextOffset, animated: false });
+    };
+    scheduleReveal();
+  }, [
+    nodes,
+    expandedIds,
+    setExpandedIds,
+    flatNodes,
+    revealRequest?.id,
+    revealRequest?.requestId,
+    height,
+    motion,
+    scheduleReveal,
+  ]);
+
+  useLayoutEffect(
+    () => () => {
+      revealIntent.current = undefined;
+      if (revealFrame.current !== undefined) cancelAnimationFrame(revealFrame.current);
+      revealFrame.current = undefined;
+    },
+    [],
+  );
+
   const scrollToIndex = useCallback(
     (index: number) => {
       if (index >= 0 && index < flatNodes.length) {
@@ -1153,6 +1284,7 @@ export function TreeView<T = unknown>({
         onFocus={handleContainerFocus}
         onBlur={handleContainerBlur}
         onKeyDown={handleTreeKeyDown}
+        onLayout={revealRequest ? scheduleReveal : undefined}
         position="relative"
         style={{
           height,
@@ -1163,6 +1295,10 @@ export function TreeView<T = unknown>({
           data={flatNodes}
           drawDistance={overscan * estimateSize}
           keyExtractor={(item) => item.node.id}
+          {...(revealRequest && {
+            onLoad: scheduleReveal,
+            onCommitLayoutEffect: scheduleReveal,
+          })}
           extraData={{
             focused: effectiveFocused,
             selectedId,
@@ -1173,13 +1309,14 @@ export function TreeView<T = unknown>({
             keyboardRing,
             collapsedSelectedAncestors,
           }}
-          {...(canReorder && {
+          {...((canReorder || revealRequest) && {
             onScroll: (e: any) => {
               const y = e?.nativeEvent?.contentOffset?.y;
               if (typeof y === "number") {
                 scrollOffsetRef.current = y;
                 if (dragUiRef.current) setDragScrollY(y);
               }
+              scheduleReveal();
             },
             scrollEventThrottle: 16,
           })}
@@ -1239,6 +1376,11 @@ export function TreeView<T = unknown>({
                 // Remount when a recycled cell switches nodes so state fills
                 // and the caret never tween across two different rows.
                 key={node.id}
+                ref={(row) => {
+                  if (row) renderedRows.current.add(node.id);
+                  else renderedRows.current.delete(node.id);
+                  scheduleReveal();
+                }}
                 id={`${treeId}-node-${index}`}
                 {...{ "data-treeview-row": node.id }}
                 {...(isDropParent && { "data-treeview-drop-parent": "true" })}
@@ -1265,6 +1407,7 @@ export function TreeView<T = unknown>({
                 onLayout={(e: any) => {
                   const h = e?.nativeEvent?.layout?.height;
                   if (typeof h === "number" && h > 0) rowHeights.current.set(node.id, h);
+                  scheduleReveal();
                 }}
                 backgroundColor={
                   // Nest-into parent highlight wins while a drag is active

package/src/views/ganttMath.ts

@@ -190,6 +190,25 @@ export function dateToX(date: Date, rangeStart: Date, pxPerDay: number): number
   return (dayPart + minutePart) * pxPerDay;
 }
 
+/**
+ * Anchor near the viewport's logical start. Wide canvases keep the existing
+ * label-width inset; narrow canvases reserve room for the date and its marker.
+ * A null viewport is provisional and must be re-anchored after layout.
+ */
+export function scrollAnchorX(
+  date: Date,
+  rangeStart: Date,
+  pxPerDay: number,
+  options: { labelWidth: number; chartWidth: number; viewportWidth: number | null; rtl: boolean },
+): number {
+  const { labelWidth, chartWidth, viewportWidth, rtl } = options;
+  const inset =
+    viewportWidth === null ? labelWidth : Math.min(labelWidth, Math.floor(viewportWidth / 3));
+  const maxScroll = Math.max(0, chartWidth - (viewportWidth ?? 0));
+  const ltrX = Math.min(maxScroll, Math.max(0, dateToX(date, rangeStart, pxPerDay) - inset));
+  return rtl ? Math.min(maxScroll, Math.max(0, maxScroll - ltrX)) : ltrX;
+}
+
 /** Start-of-day date at a horizontal px offset (fractional days floor). */
 export function xToDate(x: number, rangeStart: Date, pxPerDay: number): Date {
   return addDays(startOfDay(rangeStart), Math.floor(x / pxPerDay));
@@ -221,16 +240,116 @@ export function barGeometry(
   return { x, width };
 }
 
+// ── Open-ended spans ──────────────────────────────────────────
+
+/**
+ * A span whose bounds are BOTH optional: an absent bound means the span is
+ * open at that end, not that the caller forgot it.
+ *
+ * The distinction is the whole point. A thing live from a date with no end,
+ * or live forever with no dates at all, cannot be spelled as a `GanttSpan`
+ * without inventing the missing edge — and an invented edge reads to the
+ * viewer as a date somebody chose. So absence stays absent all the way to
+ * the paint, where `openBarGeometry` reports it as `openStart` / `openEnd`
+ * and the renderer draws a shape that says "this end is not an end".
+ */
+export interface GanttOpenSpan {
+  start?: Date;
+  end?: Date;
+}
+
+/** Neither bound set: the span names no date at all and is live throughout. */
+export function isEternalSpan(span: GanttOpenSpan): boolean {
+  return span.start === undefined && span.end === undefined;
+}
+
+/** Both bounds set — the only shape drag, resize and keyboard moves accept. */
+export function isBoundedSpan(span: GanttOpenSpan): span is GanttSpan {
+  return span.start !== undefined && span.end !== undefined;
+}
+
+/**
+ * What an open span contributes to the chart RANGE.
+ *
+ * An eternal span contributes nothing — it names no date, so it must not
+ * stretch the axis. A half-open span contributes the one date it does name,
+ * as a degenerate span, so the range always reaches far enough to show where
+ * that end opens.
+ */
+export function openSpanExtent(span: GanttOpenSpan): GanttSpan | undefined {
+  const start = span.start ?? span.end;
+  const end = span.end ?? span.start;
+  if (start === undefined || end === undefined) return undefined;
+  return { start, end };
+}
+
+/** Every range-contributing extent in a list of open spans, eternals dropped. */
+export function openSpanExtents(spans: readonly GanttOpenSpan[]): GanttSpan[] {
+  const extents: GanttSpan[] = [];
+  for (const span of spans) {
+    const extent = openSpanExtent(span);
+    if (extent) extents.push(extent);
+  }
+  return extents;
+}
+
+export interface GanttOpenBarGeometry extends GanttBarGeometry {
+  /** No start bound: the bar runs off the range's start edge, uncapped. */
+  openStart: boolean;
+  /** No end bound: the bar runs off the range's end edge, uncapped. */
+  openEnd: boolean;
+  /** Neither bound: the whole range, drawn as a rail rather than a bar. */
+  eternal: boolean;
+}
+
+/**
+ * Bar geometry for a possibly-open span, clipped to the chart.
+ *
+ * A bounded span measures exactly as `barGeometry` measures it (same
+ * normalized inclusive edges) — the range always covers it, so the clip is a
+ * no-op there. An open end runs to the matching edge of the chart, and an
+ * eternal span covers the whole of it.
+ */
+export function openBarGeometry(
+  span: GanttOpenSpan,
+  range: GanttRange,
+  pxPerDay: number,
+  minWidthPx = 6,
+): GanttOpenBarGeometry {
+  const chartWidth = rangeDays(range) * pxPerDay;
+  const openStart = span.start === undefined;
+  const openEnd = span.end === undefined;
+  const extent = openSpanExtent(span);
+  if (!extent) {
+    return { x: 0, width: chartWidth, openStart: true, openEnd: true, eternal: true };
+  }
+  const { startEdge, endEdge } = normalizeSpanEdges(extent);
+  const rawStart = openStart ? 0 : dateToX(startEdge, range.start, pxPerDay);
+  const rawEnd = openEnd ? chartWidth : dateToX(endEdge, range.start, pxPerDay);
+  const x = Math.max(0, Math.min(chartWidth, rawStart));
+  const right = Math.max(0, Math.min(chartWidth, rawEnd));
+  return { x, width: Math.max(minWidthPx, right - x), openStart, openEnd, eternal: false };
+}
+
+/**
+ * X offset of a date's column CENTRE within the range, or null when the date
+ * falls outside it. The today line and the controlled marker are the same
+ * measurement taken at different dates.
+ */
+export function dateLineX(range: GanttRange, pxPerDay: number, date: Date): number | null {
+  const day = startOfDay(date);
+  if (day.getTime() < range.start.getTime() || day.getTime() >= range.end.getTime()) return null;
+  // Line sits at the middle of that date's column.
+  return dateToX(day, range.start, pxPerDay) + pxPerDay / 2;
+}
+
 /** X offset of the today line, or null when today is outside the range. */
 export function todayLineX(
   range: GanttRange,
   pxPerDay: number,
   today: Date = new Date(),
 ): number | null {
-  const day = startOfDay(today);
-  if (day.getTime() < range.start.getTime() || day.getTime() >= range.end.getTime()) return null;
-  // Line sits at the middle of today's column.
-  return dateToX(day, range.start, pxPerDay) + pxPerDay / 2;
+  return dateLineX(range, pxPerDay, today);
 }
 
 // ── Axis ticks ────────────────────────────────────────────────
@@ -335,3 +454,22 @@ export function formatSpanLabel(span: GanttSpan): string {
   const endLabel = monthDayLabel(lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge);
   return startLabel === endLabel ? startLabel : `${startLabel} – ${endLabel}`;
 }
+
+/**
+ * The date halves of an open span's label, each absent exactly when its bound
+ * is. The WORDS around them belong to the view, which has `t()` — this stays
+ * pure and says only what the dates are.
+ */
+export function openSpanLabelParts(span: GanttOpenSpan): { start?: string; end?: string } {
+  const extent = openSpanExtent(span);
+  if (!extent) return {};
+  const { startEdge, endEdge } = normalizeSpanEdges(extent);
+  const lastDay = addDays(endEdge, -1);
+  return {
+    start: span.start === undefined ? undefined : monthDayLabel(startEdge),
+    end:
+      span.end === undefined
+        ? undefined
+        : monthDayLabel(lastDay.getTime() >= startEdge.getTime() ? lastDay : startEdge),
+  };
+}

package/src/views/index.ts

@@ -81,19 +81,62 @@ export {
   type ReportColumn,
   type GroupByConfig,
 } from "./ReportBuilder";
-export { GanttView, type GanttViewProps, type GanttTask, type GanttItemMoveRange } from "./Gantt";
 export {
+  GanttView,
+  type GanttViewProps,
+  type GanttTask,
+  type GanttTaskSpan,
+  type GanttSpanRef,
+  type GanttItemMoveRange,
+} from "./Gantt";
+// ganttMath is surfaced WHOLE, deliberately, against this barrel's otherwise
+// curated style (MPO-249). It is pure, side-effect-free, DOM-free day math —
+// there is nothing in it that is an implementation detail worth hiding, and
+// the curated subset had already drifted into an asymmetry that cost a
+// consumer real code: `dateToX` shipped and its inverse `xToDate` did not, so
+// anything positioning by date could read the axis but not read a pointer back
+// off it, which is the direction every drag, scrub and hit-test needs. The
+// day-math helpers (`startOfDay`, `addDays`, `dayDiff`, `rangeDays`) go with
+// them, because a consumer laying out its own timeline on `computeGanttRange`
+// needs the same DST-safe local wall-clock arithmetic the module uses
+// internally; re-deriving it is how two subtly different implementations of
+// "add a day" end up in one app. `views.spec.tsx` asserts this barrel
+// re-exports every `ganttMath` export, so the next omission fails a test
+// instead of shipping.
+export {
+  addDays,
   barGeometry,
+  clampResizeDayDelta,
   computeGanttRange,
+  dateLineX,
   dateToX,
+  dayDiff,
   dxToDayDelta,
+  formatRangeLabel,
+  formatSpanLabel,
   ganttTaskAccessibleLabel,
   generateTicks,
+  isBoundedSpan,
+  isEternalSpan,
+  MS_PER_DAY,
   normalizeSpanEdges,
+  openBarGeometry,
+  openSpanExtent,
+  openSpanExtents,
+  openSpanLabelParts,
+  rangeDays,
+  resizeSpanByDays,
+  scrollAnchorX,
   shiftSpanByDays,
+  spanInclusiveDays,
+  startOfDay,
   todayLineX,
+  xToDate,
   type GanttBarGeometry,
+  type GanttOpenBarGeometry,
+  type GanttOpenSpan,
   type GanttRange,
+  type GanttResizeEdge,
   type GanttSpan,
   type GanttTick,
   type GanttZoom,

package/src/views/treeViewReveal.spec.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { treeRevealExpansion, treeRevealOffset } from "./treeViewReveal";
+
+const nodes = [
+  {
+    id: "folders",
+    children: [
+      {
+        id: "archive",
+        children: Array.from({ length: 500 }, (_, index) => ({ id: `item-${index}` })),
+      },
+    ],
+  },
+  { id: "other", children: [{ id: "other-item" }] },
+];
+
+describe("tree reveal ancestors", () => {
+  it("finds the exact last leaf of a 500-item branch and preserves unrelated expansion", () => {
+    const expanded = new Set(["other"]);
+    expect(treeRevealExpansion(nodes, expanded, "item-499")).toEqual(
+      new Set(["other", "folders", "archive"]),
+    );
+    expect(expanded).toEqual(new Set(["other"]));
+  });
+
+  it("does not expand the target branch itself", () => {
+    expect(treeRevealExpansion(nodes, new Set(), "archive")).toEqual(new Set(["folders"]));
+  });
+
+  it("preserves the set when the target is already exposed", () => {
+    const expanded = new Set(["folders", "archive"]);
+    expect(treeRevealExpansion(nodes, expanded, "item-499")).toBe(expanded);
+  });
+
+  it("does not substitute a prefix, ancestor or similarly named leaf for a missing ID", () => {
+    expect(treeRevealExpansion(nodes, new Set(), "item-500")).toBeUndefined();
+    expect(treeRevealExpansion(nodes, new Set(), "item")).toBeUndefined();
+    expect(treeRevealExpansion([], new Set(), "folders")).toBeUndefined();
+  });
+
+  it("reveals a root without expanding its children", () => {
+    const expanded = new Set<string>();
+    expect(treeRevealExpansion(nodes, expanded, "folders")).toBe(expanded);
+  });
+});
+
+describe("tree reveal measured offsets", () => {
+  it("uses the actual layout of a distant variable-height row, not index times an estimate", () => {
+    const heights = Array.from({ length: 500 }, (_, index) => (index % 2 === 0 ? 32 : 80));
+    const y = heights.slice(0, 499).reduce((sum, height) => sum + height, 0);
+    expect(y).toBe(27920);
+    expect(treeRevealOffset({ y, height: heights[499] }, 0, 240)).toBe(27760);
+    expect(treeRevealOffset({ y, height: heights[499] }, 27760, 240)).toBe(27760);
+  });
+
+  it("corrects again when virtualization replaces an estimate with a taller measurement", () => {
+    expect(treeRevealOffset({ y: 27920, height: 32 }, 0, 240)).toBe(27712);
+    expect(treeRevealOffset({ y: 27920, height: 80 }, 27712, 240)).toBe(27760);
+  });
+
+  it("leaves a fully visible row in place", () => {
+    expect(treeRevealOffset({ y: 300, height: 80 }, 250, 240)).toBe(250);
+  });
+
+  it("reveals a row above the viewport at its top", () => {
+    expect(treeRevealOffset({ y: 120, height: 80 }, 250, 240)).toBe(120);
+  });
+
+  it("aligns the top of a row taller than the viewport without oscillating", () => {
+    expect(treeRevealOffset({ y: 120, height: 300 }, 250, 240)).toBe(120);
+    expect(treeRevealOffset({ y: 120, height: 300 }, 120, 240)).toBe(120);
+  });
+
+  it.each([
+    [{ y: 20, height: 32 }, 0, 0],
+    [{ y: 20, height: 0 }, 0, 240],
+    [{ y: Number.NaN, height: 32 }, 0, 240],
+    [{ y: 20, height: 32 }, Number.NaN, 240],
+    [{ y: 20, height: 32 }, 0, Number.POSITIVE_INFINITY],
+  ])("waits for usable geometry: %o, %s, %s", (layout, offset, height) => {
+    expect(treeRevealOffset(layout, offset, height)).toBeUndefined();
+  });
+});

package/src/views/treeViewReveal.ts

@@ -0,0 +1,45 @@
+interface RevealTreeNode {
+  id: string;
+  children?: readonly RevealTreeNode[];
+}
+
+export function treeRevealExpansion(
+  nodes: readonly RevealTreeNode[],
+  expandedIds: ReadonlySet<string>,
+  targetId: string,
+): ReadonlySet<string> | undefined {
+  const ancestors: string[] = [];
+  const find = (items: readonly RevealTreeNode[]): boolean => {
+    for (const node of items) {
+      if (node.id === targetId) return true;
+      if (node.children?.length) {
+        ancestors.push(node.id);
+        if (find(node.children)) return true;
+        ancestors.pop();
+      }
+    }
+    return false;
+  };
+  if (!find(nodes)) return undefined;
+  if (ancestors.every((id) => expandedIds.has(id))) return expandedIds;
+  return new Set([...expandedIds, ...ancestors]);
+}
+
+export function treeRevealOffset(
+  layout: { y: number; height: number },
+  offset: number,
+  viewportHeight: number,
+): number | undefined {
+  if (
+    ![layout.y, layout.height, offset, viewportHeight].every(Number.isFinite) ||
+    viewportHeight <= 0 ||
+    layout.height <= 0
+  ) {
+    return undefined;
+  }
+  if (layout.height > viewportHeight || layout.y < offset) return Math.max(0, layout.y);
+  if (layout.y + layout.height > offset + viewportHeight) {
+    return Math.max(0, layout.y + layout.height - viewportHeight);
+  }
+  return offset;
+}