@swiftbrowser/react 0.28.4 → 0.28.5

package/dist/index.js

@@ -989,11 +989,23 @@ function findStack(node) {
   for (const child of node.children) {
     if (child.kind === "sheet" || child.kind === "alert") continue;
     if (child.kind === "navstack") return child;
+    if (child.kind === "navsplit") return splitDetailStack(child);
     const found = findStack(child);
     if (found) return found;
   }
   return null;
 }
+function findSplit(node) {
+  for (const child of node.children) {
+    if (child.kind === "sheet" || child.kind === "alert" || child.kind === "navstack") continue;
+    if (child.kind === "navsplit") return child;
+    const found = findSplit(child);
+    if (found) return found;
+  }
+  return null;
+}
+const splitSidebarStack = (split) => split.children[0]?.kind === "navstack" ? split.children[0] : null;
+const splitDetailStack = (split) => split.children[1]?.kind === "navstack" ? split.children[1] : null;
 const screensOf = (stack) => stack ? stack.children.filter((child) => child.kind === "navscreen") : [];
 function renderNode(root, node, stack, elements) {
   if (node.kind === "host") return null;
@@ -1001,6 +1013,7 @@ function renderNode(root, node, stack, elements) {
     const first = screensOf(stack)[0];
     return createElement(Fragment, { key: node.id }, first ? renderScreen(root, first, stack, elements) : null);
   }
+  if (node.kind === "navsplit" && stack && splitDetailStack(node) === stack) return createElement(Fragment, { key: node.id }, renderNode(root, stack, stack, elements));
   const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack, elements)) : void 0;
   const own = elements && Object.prototype.hasOwnProperty.call(elements, node.kind) ? elements[node.kind] : void 0;
   if (own) return createElement(Fragment, { key: node.id }, own(node.props, children));
@@ -1025,6 +1038,86 @@ function RemoteScreen({ root, id, elements }) {
   if (!screen?.parent) return null;
   return renderScreen(root, screen, findStack(root.root), elements);
 }
+function useScreenValues(root, elements) {
+  const values = useRef(/* @__PURE__ */ new Map());
+  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const keyOf2 = (screen) => `${screen.id}:${JSON.stringify(screen.props["route"] ?? null)}`;
+  const valueFor = (screen) => {
+    const key = keyOf2(screen);
+    let value = values.current.get(key);
+    if (!value) {
+      value = "route" in screen.props ? { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }), route: screen.props["route"] } : { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }) };
+      values.current.set(key, value);
+      ours.current.add(value);
+    }
+    return value;
+  };
+  const isOurs = (value) => typeof value === "object" && value !== null && ours.current.has(value);
+  const forget = (keys) => {
+    for (const key of values.current.keys()) if (!keys.includes(key)) values.current.delete(key);
+  };
+  return { valueFor, keyOf: keyOf2, isOurs, forget };
+}
+function useRemoteSidebar(root, path, setPath, options = {}) {
+  const shown = options.shown ?? true;
+  useSyncExternalStore(root ? root.subscribe : noSubscribe, root ? root.getVersion : zero, root ? root.getVersion : zero);
+  const { valueFor, keyOf: keyOf2, isOurs, forget } = useScreenValues(root ?? NO_ROOT, options.elements);
+  const split = root ? findSplit(root.root) : null;
+  const screens = split ? screensOf(splitSidebarStack(split)) : [];
+  const dismissed = useRef(false);
+  const lastKeys = useRef([]);
+  const lastMine = useRef(0);
+  const last = useRef({ root: null, shown: false, generation: void 0 });
+  useLayoutEffect(() => {
+    if (last.current.root !== root || !last.current.shown && shown || last.current.generation !== options.generation) dismissed.current = false;
+    last.current = { root, shown, generation: options.generation };
+    const keys = screens.map(keyOf2);
+    const wanted = shown && !dismissed.current ? screens.map(valueFor) : [];
+    forget(keys);
+    const hosts = path.filter((value) => !isOurs(value));
+    const mine = path.filter(isOurs);
+    const childMoved = keys.length !== lastKeys.current.length || keys.some((key, i) => key !== lastKeys.current[i]);
+    lastKeys.current = keys;
+    const popped = mine.length < lastMine.current;
+    lastMine.current = mine.length;
+    if (root && wanted.length > 0 && !childMoved && popped && mine.length < wanted.length && mine.every((value, i) => value === wanted[i])) {
+      if (mine.length === 0) {
+        dismissed.current = true;
+        return;
+      }
+      root.dispatch({ type: "tap", id: screens[mine.length].id });
+      return;
+    }
+    if (mine.length === wanted.length && mine.every((value, i) => value === wanted[i])) return;
+    lastMine.current = wanted.length;
+    setPath([...hosts, ...wanted]);
+  });
+}
+const noSubscribe = () => () => {
+};
+const zero = () => 0;
+const NO_ROOT = {
+  applyOps() {
+  },
+  onEvent() {
+  },
+  onEnvironment() {
+  },
+  dispatch() {
+  },
+  setEnvironment() {
+  },
+  subscribe: noSubscribe,
+  getVersion: zero,
+  root: { id: 0, kind: "root", props: {}, children: [], parent: null },
+  node: () => void 0,
+  rootProps: {},
+  handlersFor: () => ({}),
+  attach() {
+  },
+  dispose() {
+  }
+};
 function RemoteTree({ root, initialPath, elements }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const environment = useContext(EnvironmentContext);
@@ -1041,20 +1134,8 @@ function RemoteTree({ root, initialPath, elements }) {
   }, [root, environment]);
   const stack = navigation ? findStack(root.root) : null;
   const pushed = screensOf(stack).slice(1);
-  const values = useRef(/* @__PURE__ */ new Map());
-  const ours = useRef(/* @__PURE__ */ new WeakSet());
+  const { valueFor, keyOf: keyOf2, isOurs, forget } = useScreenValues(root, elements);
   const lastPushed = useRef([]);
-  const keyOf2 = (screen) => `${screen.id}:${JSON.stringify(screen.props["route"] ?? null)}`;
-  const valueFor = (screen) => {
-    const key = keyOf2(screen);
-    let value = values.current.get(key);
-    if (!value) {
-      value = "route" in screen.props ? { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }), route: screen.props["route"] } : { view: /* @__PURE__ */ jsx(RemoteScreen, { root, id: screen.id, elements }) };
-      values.current.set(key, value);
-      ours.current.add(value);
-    }
-    return value;
-  };
   const restored = useRef(false);
   useLayoutEffect(() => {
     if (restored.current) return;
@@ -1067,10 +1148,10 @@ function RemoteTree({ root, initialPath, elements }) {
     if (!navigation) return;
     const keys = pushed.map(keyOf2);
     const wanted = pushed.map(valueFor);
-    for (const key of values.current.keys()) if (!keys.includes(key)) values.current.delete(key);
+    forget(keys);
     const tail = navigation.path.slice(depth);
     let shown = 0;
-    while (shown < tail.length && typeof tail[shown] === "object" && tail[shown] !== null && ours.current.has(tail[shown])) shown += 1;
+    while (shown < tail.length && isOurs(tail[shown])) shown += 1;
     const childMoved = keys.length !== lastPushed.current.length || keys.some((key, i) => key !== lastPushed.current[i]);
     lastPushed.current = keys;
     if (!childMoved && shown < wanted.length && tail.slice(0, shown).every((value, i) => value === wanted[i])) {
@@ -1544,29 +1625,49 @@ function marginedContent(children, margins, axis) {
 }
 const LAZY_BATCH = 12;
 const LazyContext = createContext(null);
+const LazyBatchContext = createContext(LAZY_BATCH);
+const LAZY_GRID_BATCH = 48;
+const LazyWindowContext = createContext(false);
+const LazyStackContext = createContext(false);
 function LazyGroup({ rows, start = 0, wrap: wrap2 }) {
   const axis = useContext(LazyContext);
+  const batch = useContext(LazyBatchContext);
   const request = useContext(ScrollRequestContext);
-  const [count, setCount] = useState(LAZY_BATCH);
+  const windowed = useContext(LazyWindowContext) && useContext(LazyStackContext) && axis !== null;
+  const [count, setCount] = useState(batch);
+  const [front, setFront] = useState({ from: 0, extents: [] });
   const target = request && "id" in request ? rows.findIndex((row) => rowMatches(row, request.id)) : -1;
-  const needed = target >= 0 ? Math.ceil((target + 1) / LAZY_BATCH) * LAZY_BATCH : 0;
+  const needed = target >= 0 ? Math.ceil((target + 1) / batch) * batch : 0;
   useEffect(() => {
     if (needed > count) setCount(needed);
-  }, [needed, count]);
+    if (target >= 0 && target < front.from) setFront({ from: Math.floor(target / batch) * batch, extents: front.extents.slice(0, Math.floor(target / batch)) });
+  }, [needed, count, target, front, batch]);
   const visible = Math.max(count, needed);
-  const shown = axis === null ? rows : rows.slice(0, visible);
-  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + index) : row);
-  if (axis === null || shown.length >= rows.length) return built;
-  return [
-    ...built,
-    createElement(
-      LazySpacer,
-      { key: `lazy-${visible}`, axis, remaining: rows.length - shown.length, more: () => setCount(visible + LAZY_BATCH) }
-    )
-  ];
-}
-function LazySpacer({ axis, remaining, more }) {
-  return sb("lazyspacer", { axis, remaining }, { lazy: more });
+  const from = windowed ? Math.min(front.from, Math.max(0, visible - batch)) : 0;
+  const shown = axis === null ? rows : rows.slice(from, visible);
+  const built = shown.map((row, index) => wrap2 ? wrap2(row, start + from + index) : row);
+  if (axis === null || !windowed && shown.length >= rows.length) return built;
+  const ask = (event) => {
+    if (event.drop && event.drop > 0) {
+      const drop = Math.min(event.drop, shown.length - batch);
+      if (drop > 0) setFront({ from: from + drop, extents: [...front.extents, ...(event.extents ?? []).slice(0, Math.ceil(drop / batch))] });
+    } else if (event.dropEnd && event.dropEnd > 0) {
+      setCount(Math.max(from + batch, visible - event.dropEnd));
+    } else if (from > 0) {
+      setFront({ from: Math.max(0, from - batch), extents: front.extents.slice(0, -1) });
+    }
+  };
+  const leading = windowed ? [createElement(LazySpacer, { key: `lazy-lead-${from}`, axis, remaining: from, edge: "leading", extent: front.extents.reduce((a, b) => a + b, 0), built: shown.length, batch, ask })] : [];
+  const trailing = visible < rows.length ? [createElement(LazySpacer, { key: `lazy-${visible}`, axis, remaining: rows.length - visible, ask: () => setCount(visible + batch) })] : [];
+  return [...leading, ...built, ...trailing];
+}
+function LazySpacer({
+  axis,
+  remaining,
+  ask,
+  ...leading
+}) {
+  return sb("lazyspacer", { axis, remaining, ...leading }, { lazy: ask });
 }
 function rowMatches(row, id) {
   if (row.key !== null && row.key === String(id)) return true;
@@ -1596,6 +1697,11 @@ function HStack(props) {
   if (own.pinnedViews && own.pinnedViews.length > 0) stack["pinned"] = own.pinnedViews;
   return applyModifiers(sb("hstack", stack, void 0, pinning(own.pinnedViews, own.children)), modifiers);
 }
+function FlowStack(props) {
+  const { own, modifiers } = splitProps(props);
+  const stack = { spacing: own.spacing ?? null, lineSpacing: own.lineSpacing ?? null, alignment: own.alignment ?? "center" };
+  return applyModifiers(sb("flowstack", stack, void 0, own.children), modifiers);
+}
 function ZStack(props) {
   const { own, modifiers } = splitProps(props);
   return applyModifiers(sb("zstack", { alignment: own.alignment ?? "center" }, void 0, own.children), modifiers);
@@ -1777,17 +1883,20 @@ function GridItem(spec = {}) {
 GridItem.flexible = (options = {}) => GridItem({ size: { flexible: options }, spacing: options.spacing, alignment: options.alignment });
 GridItem.fixed = (value, options = {}) => GridItem({ size: { fixed: value }, spacing: options.spacing, alignment: options.alignment });
 GridItem.adaptive = (options) => GridItem({ size: { adaptive: options }, spacing: options.spacing, alignment: options.alignment });
+function lazyCells(axis, children) {
+  return createElement(LazyContext.Provider, { value: axis }, createElement(LazyStackContext.Provider, { value: false }, createElement(LazyBatchContext.Provider, { value: LAZY_GRID_BATCH }, children)));
+}
 function LazyVGrid(props) {
   const { own, modifiers } = splitProps(props);
   const grid = { columns: own.columns, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
   if (own.pinnedViews && own.pinnedViews.length > 0) grid["pinned"] = own.pinnedViews;
-  return applyModifiers(sb("lazyvgrid", grid, void 0, pinning(own.pinnedViews, own.children)), modifiers);
+  return applyModifiers(sb("lazyvgrid", grid, void 0, lazyCells("vertical", pinning(own.pinnedViews, own.children))), modifiers);
 }
 function LazyHGrid(props) {
   const { own, modifiers } = splitProps(props);
   const grid = { rows: own.rows, spacing: own.spacing ?? null, alignment: own.alignment ?? "center" };
   if (own.pinnedViews && own.pinnedViews.length > 0) grid["pinned"] = own.pinnedViews;
-  return applyModifiers(sb("lazyhgrid", grid, void 0, pinning(own.pinnedViews, own.children)), modifiers);
+  return applyModifiers(sb("lazyhgrid", grid, void 0, lazyCells("horizontal", pinning(own.pinnedViews, own.children))), modifiers);
 }
 function Grid(props) {
   const { own, modifiers } = splitProps(props);
@@ -2117,10 +2226,11 @@ function NavigationSplitView(props) {
   const sidebarVisible = visibility !== "detailOnly";
   const toggle = () => withAnimation(() => setVisibility(sidebarVisible ? "detailOnly" : "all"));
   const detail = isValidElement(own.detail) && own.detail.type === NavigationStack ? own.detail : /* @__PURE__ */ jsx(NavigationStack, { children: own.detail });
-  const sidebar = own.sidebarWidth !== void 0 ? sb("styled", { style: { splitColumnWidth: splitColumnWidthHint(own.sidebarWidth) } }, void 0, own.sidebar) : own.sidebar;
+  const hinted = (content) => own.sidebarWidth !== void 0 ? sb("styled", { style: { splitColumnWidth: splitColumnWidthHint(own.sidebarWidth) } }, void 0, content) : content;
+  const sidebar = isValidElement(own.sidebar) && own.sidebar.type === NavigationStack ? hinted(own.sidebar) : /* @__PURE__ */ jsx(NavigationStack, { children: hinted(own.sidebar) });
   return applyModifiers(
     sb("navsplit", { sidebarVisible }, { tap: toggle, columnwidth: (event) => own.onSidebarWidthChange?.(event.width) }, [
-      /* @__PURE__ */ jsx(SplitColumn, { report, children: /* @__PURE__ */ jsx(NavigationStack, { children: sidebar }) }, "sidebar"),
+      /* @__PURE__ */ jsx(SplitColumn, { report, children: sidebar }, "sidebar"),
       /* @__PURE__ */ jsx(SplitColumn, { report: null, children: detail }, "detail")
     ]),
     modifiers
@@ -3666,7 +3776,7 @@ function mount(screen, element, options = {}) {
   }) : null;
   observer?.observe(screen);
   const stopScenePhase = typeof document !== "undefined" ? watchScenePhase((scenePhase) => root.setEnvironment({ scenePhase })) : null;
-  root.render(element);
+  root.render(createElement(LazyWindowContext.Provider, { value: true }, element));
   const mounted = {
     root,
     renderer,
@@ -5988,6 +6098,7 @@ function TextEditor(props) {
   if (focus) editor["focused"] = focus[0];
   if (selection) editor["selection"] = { start: selection[0].start, end: selection[0].end };
   if (own.onDeleteBackward) editor["deleteBackward"] = true;
+  if (own.marks && own.marks.length > 0) editor["marks"] = own.marks.map((mark) => ({ start: mark.start, end: mark.end, color: color(mark.color ?? MARK_COLOR) }));
   return applyModifiers(
     sb("texteditor", editor, {
       text: (event) => setText(rich ? AttributedText.replacingCharacters(text, event.value) : event.value),
@@ -6002,6 +6113,7 @@ function TextEditor(props) {
     modifiers
   );
 }
+const MARK_COLOR = opacity("accent", 0.25);
 function buttonDisabled(modifiers) {
   return modifiers.some(([key, value]) => key === "disabled" && value === true);
 }
@@ -6060,7 +6172,9 @@ ContainerRelativeShape.shape = { kind: "containerRelative", cornerRadius: null }
 function Shape(props) {
   const { own, modifiers } = splitProps(props);
   const [size, setSize] = useState(null);
-  const affine = affinePath(own.path);
+  const sized = useRef(false);
+  const affine = sized.current ? null : affinePath(own.path);
+  if (affine === null) sized.current = true;
   const shapeProps = {
     shape: "path",
     cornerRadius: 0,
@@ -6670,7 +6784,7 @@ function List(props) {
   const ownSettings = takeScrollSettings(modifiers);
   const edgeEffect = edgeEffectProp(useScrollSettings(ownSettings));
   if (edgeEffect) listProps["edgeEffect"] = edgeEffect;
-  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: sb("list", listProps, refresh.handlers, providingScrollSettings(ownSettings, wrapRows(own.children))) });
+  const element = /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: false, children: sb("list", listProps, refresh.handlers, providingScrollSettings(ownSettings, wrapRows(own.children))) }) });
   return applyModifiers(
     selection ? /* @__PURE__ */ jsx(ListSelectionContext.Provider, { value: selection, children: element }) : element,
     modifiers
@@ -7316,10 +7430,10 @@ function ViewThatFits(props) {
   return applyModifiers(sb("viewthatfits", { axes: own.axes ?? "both" }, void 0, own.children), modifiers);
 }
 function LazyVStack(props) {
-  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(VStack, { ...props }) });
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "vertical", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: true, children: /* @__PURE__ */ jsx(VStack, { ...props }) }) });
 }
 function LazyHStack(props) {
-  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "horizontal", children: /* @__PURE__ */ jsx(HStack, { ...props }) });
+  return /* @__PURE__ */ jsx(LazyContext.Provider, { value: "horizontal", children: /* @__PURE__ */ jsx(LazyStackContext.Provider, { value: true, children: /* @__PURE__ */ jsx(HStack, { ...props }) }) });
 }
 function ContentUnavailableView(props) {
   const { own, modifiers } = splitProps(props);
@@ -8200,6 +8314,7 @@ export {
   Divider,
   EditButton,
   Ellipse,
+  FlowStack,
   Font,
   ForEach,
   Form,
@@ -8354,6 +8469,7 @@ export {
   usePlatform,
   useRedacted,
   useRefreshable,
+  useRemoteSidebar,
   useReportSplitSelection,
   useScenePhase,
   useSpeechRecognition,