@adminide-stack/yantra-mobile 12.0.141-alpha.1 → 12.0.141

package/lib/features/notion/NotionPageView.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useCallback,useEffect,useMemo}from'react';import {View,StyleSheet,ActivityIndicator,Text,Pressable,KeyboardAvoidingView,ScrollView,TextInput,RefreshControl,Keyboard,Platform,Alert}from'react-native';import {Ionicons}from'@expo/vector-icons';import {useNavigation,StackActions}from'@react-navigation/native';import {useApolloClient,useQuery}from'@apollo/client/index.js';import {useSafeAreaInsets}from'react-native-safe-area-context';import {mobileTokens}from'../../theme/mobileTokens.js';import {notionPalette}from'./notionTheme.js';import {NATIVE_NOTION_PAGE_TREE,NATIVE_NOTION_BLOCK,NATIVE_NOTION_UPDATE_BLOCK,NATIVE_NOTION_APPEND_CHILDREN,NATIVE_NOTION_TRANSFORM_BLOCK,NATIVE_NOTION_DELETE_BLOCK}from'./notionDocuments.js';import {blockTitle,blockIcon,toTitleProperty,editedLabel,isPageBlock,pageTitle,richTextToPlain}from'./notionBlocks.js';import {modelFromTree,newBlockId,isTextType,insertAfter,patchBlock,previousLineId,removeBlock,flattenModel,nextTypeAfter,TURN_INTO}from'./notionEditorModel.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useEffect,useRef,useCallback,useMemo}from'react';import {Keyboard,Platform,View,StyleSheet,ActivityIndicator,Text,Pressable,KeyboardAvoidingView,ScrollView,TextInput,RefreshControl,Share,Clipboard}from'react-native';import {Ionicons}from'@expo/vector-icons';import {useNavigation,StackActions}from'@react-navigation/native';import {useApolloClient,useQuery}from'@apollo/client/index.js';import {useSafeAreaInsets}from'react-native-safe-area-context';import {mobileTokens}from'../../theme/mobileTokens.js';import {RowPropertiesPanel}from'./database/RowPropertiesPanel.js';import {NEW_DATABASE_PROPERTIES}from'./database/useNotionDatabase.js';import {notionPalette}from'./notionTheme.js';import {NATIVE_NOTION_PAGE_TREE,NATIVE_NOTION_BLOCK,NATIVE_NOTION_UPDATE_BLOCK,NATIVE_NOTION_DELETE_BLOCK,NATIVE_NOTION_RESTORE_BLOCK,NATIVE_NOTION_APPEND_CHILDREN,NATIVE_NOTION_TRANSFORM_BLOCK,NATIVE_NOTION_BACKLINKS,NATIVE_NOTION_EXPORT_MARKDOWN,NATIVE_NOTION_IMPORT_MARKDOWN,NATIVE_NOTION_DUPLICATE_BLOCK,NATIVE_NOTION_REORDER_CHILDREN}from'./notionDocuments.js';import {blockTitle,blockIcon,toTitleProperty,editedLabel,pageTitle,isPageBlock,richTextToPlain}from'./notionBlocks.js';import {modelFromTree,patchBlock,snapshotSubtree,removeBlock,restoreSubtree,newBlockId,isTextType,insertAfter,previousLineId,flattenModel,emptyBlock,nextTypeAfter,TURN_INTO,toEditorBlock,moveAmongSiblings,columnLayout,insertTree,treeInput,firstTextId}from'./notionEditorModel.js';import {runsToTitleProperty,runsText,applyPlainTextEdit,applyInlineMarkdown,linkAt,rangeHasFormat,applyFormatRange,applyFormatToAll,replaceRange}from'./notionRichTitle.js';import {markdownShortcutFor}from'./notionMarkdownShortcuts.js';import {blockColorParts,textColorOf,washColorOf}from'./notionRichText.js';import {languageLabel}from'./notionCodeLanguages.js';import {ColorSheet,LanguageSheet}from'./NotionBlockSheets.js';import {fontFamilyOf,PageActionsSheet,TextPromptDialog}from'./NotionPageMenu.js';import {readPageSettings,serverErrorText,wordCount,pageFontPatch,pageSettingsPatch,pageLinkUrl}from'./notionPageActions.js';import {usePageActions,webOrigin}from'./usePageActions.js';import {MEDIA_TYPES,MediaBlock}from'./NotionMediaBlocks.js';import {MentionSheet}from'./NotionMentionSheet.js';import {recordRecent}from'./notionRecents.js';import {usePageComments,CommentsSheet}from'./NotionCommentsSheet.js';import {ShareSheet}from'./NotionShareSheet.js';import {HistorySheet}from'./NotionHistorySheet.js';import {useNotionWorkspace}from'./useNotionWorkspace.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -17,6 +17,15 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function scaled(style, small) {
+  if (!small) return style;
+  const s = style;
+  return __spreadValues(__spreadValues(__spreadValues({}, style), s.fontSize ? {
+    fontSize: Math.round(s.fontSize * 0.875)
+  } : {}), s.lineHeight ? {
+    lineHeight: Math.round(s.lineHeight * 0.875)
+  } : {});
+}
 const SAVE_DELAY_MS = 500;
 const PAGE_EMOJIS = ["\u{1F4C4}", "\u{1F4DD}", "\u{1F4CC}", "\u{1F4A1}", "\u{1F3AF}", "\u{1F680}", "\u{1F4DA}", "\u2705", "\u{1F5D3}\uFE0F", "\u{1F4BC}", "\u{1F3E0}", "\u2764\uFE0F", "\u2B50", "\u{1F525}", "\u{1F9E0}", "\u{1F3A8}"];
 const PLACEHOLDER = {
@@ -59,7 +68,7 @@ function NotionPageView({
   blockId,
   isDark
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const palette = notionPalette(isDark);
   const navigation = useNavigation();
   const client = useApolloClient();
@@ -99,6 +108,24 @@ function NotionPageView({
   const [save, setSave] = useState("idle");
   const [iconPicker, setIconPicker] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [keyboardShown, setKeyboardShown] = useState(false);
+  useEffect(() => {
+    const show = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow", () => setKeyboardShown(true));
+    const hide = Keyboard.addListener(Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide", () => setKeyboardShown(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  const [pageProps, setPageProps] = useState({});
+  const [importOpen, setImportOpen] = useState(false);
+  const [showBacklinks, setShowBacklinks] = useState(false);
+  const settings = readPageSettings(pageProps);
+  const look = {
+    fontFamily: fontFamilyOf(settings.font),
+    small: settings.smallText,
+    locked: settings.locked
+  };
   const modelRef = useRef(null);
   modelRef.current = model;
   const inputs = useRef(/* @__PURE__ */ new Map());
@@ -107,24 +134,32 @@ function NotionPageView({
   const savedTitles = useRef(/* @__PURE__ */ new Map());
   const inFlight = useRef(0);
   const applyTree = useCallback((next, pageBlock) => {
-    var _a2;
-    setModel(modelFromTree(next));
+    var _a2, _b2;
+    const seededModel = modelFromTree(next, pageBlock.id);
+    setModel(seededModel);
+    setCollapsed(new Set(Object.values(seededModel.blocks).filter((b) => b.type === "toggle").map((b) => b.id)));
     const t = blockTitle(pageBlock);
     setTitle(t);
     setIcon(blockIcon(pageBlock));
+    setPageProps((_a2 = pageBlock.properties) != null ? _a2 : {});
     savedTitles.current.set(pageBlock.id, t);
     const remember = (node) => {
       var _a3;
       savedTitles.current.set(node.block.id, blockTitle(node.block));
       ((_a3 = node.children) != null ? _a3 : []).forEach(remember);
     };
-    ((_a2 = next.children) != null ? _a2 : []).forEach(remember);
+    ((_b2 = next.children) != null ? _b2 : []).forEach(remember);
   }, []);
   const seeded = useRef(false);
   useEffect(() => {
     if (!tree || !page || seeded.current) return;
     seeded.current = true;
     applyTree(tree, page);
+    recordRecent(page.workspaceId, {
+      id: page.id,
+      title: blockTitle(page),
+      icon: blockIcon(page)
+    });
   }, [tree, page, applyTree]);
   useEffect(() => {
     if (!pendingFocus) return void 0;
@@ -145,6 +180,8 @@ function NotionPageView({
     if (!res.data) throw new Error("The server returned no data");
     return res;
   }, [client]);
+  const failed = useRef([]);
+  const [saveError, setSaveError] = useState(null);
   const enqueue = useCallback((id, op) => {
     var _a2;
     inFlight.current += 1;
@@ -152,39 +189,54 @@ function NotionPageView({
     const prev = (_a2 = chains.current.get(id)) != null ? _a2 : Promise.resolve();
     const next = prev.catch(() => void 0).then(op).then(() => {
       inFlight.current -= 1;
-      if (!inFlight.current && !pending.current.size) setSave("saved");
+      if (!inFlight.current && !pending.current.size && !failed.current.length) setSave("saved");
     }, (err) => {
       inFlight.current -= 1;
+      failed.current.push({
+        id,
+        op
+      });
+      setSaveError(serverErrorText(err));
       setSave("error");
-      if (__DEV__) console.warn("[NotionPage] save failed", err);
+      if (__DEV__) console.warn("[NotionPage] save failed", serverErrorText(err), err);
     });
     chains.current.set(id, next);
     return next;
   }, []);
-  const writeTitle = useCallback((id, text) => {
+  const retryFailed = useCallback(() => {
+    const again = failed.current;
+    failed.current = [];
+    setSaveError(null);
+    again.forEach(({
+      id,
+      op
+    }) => enqueue(id, op));
+  }, [enqueue]);
+  const writeTitle = useCallback((id, text, runs) => {
     var _a2;
     const baseTitle = (_a2 = savedTitles.current.get(id)) != null ? _a2 : "";
     savedTitles.current.set(id, text);
+    const title2 = runs ? runsToTitleProperty(runs) : toTitleProperty(text);
     return enqueue(id, () => write({
       mutation: NATIVE_NOTION_UPDATE_BLOCK,
       variables: {
         input: {
           id,
           properties: {
-            title: toTitleProperty(text)
+            title: title2
           },
           baseTitle
         }
       }
     }));
   }, [write, enqueue]);
-  const scheduleTitle = useCallback((id, text) => {
+  const scheduleTitle = useCallback((id, text, runs) => {
     var _a2;
     (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
     setSave("saving");
     const handle = setTimeout(() => {
       pending.current.delete(id);
-      writeTitle(id, text);
+      writeTitle(id, text, runs);
     }, SAVE_DELAY_MS);
     const cancel = () => {
       clearTimeout(handle);
@@ -194,13 +246,78 @@ function NotionPageView({
       cancel,
       flush: () => {
         cancel();
-        writeTitle(id, text);
+        writeTitle(id, text, runs);
       }
     });
   }, [writeTitle]);
-  useEffect(() => () => {
-    [...pending.current.values()].forEach((p) => p.flush());
+  const undoStack = useRef([]);
+  const redoStack = useRef([]);
+  const [, setHistoryTick] = useState(0);
+  const record = useCallback((entry) => {
+    const top = undoStack.current[undoStack.current.length - 1];
+    if (entry.key && (top == null ? void 0 : top.key) === entry.key && Date.now() - top.at < 1500) {
+      top.redo = entry.redo;
+      top.at = Date.now();
+    } else {
+      undoStack.current.push(__spreadProps(__spreadValues({}, entry), {
+        at: Date.now()
+      }));
+      if (undoStack.current.length > 100) undoStack.current.shift();
+    }
+    redoStack.current = [];
+    setHistoryTick((t) => t + 1);
   }, []);
+  const undo = () => {
+    const entry = undoStack.current.pop();
+    if (!entry) return;
+    entry.undo();
+    redoStack.current.push(entry);
+    setHistoryTick((t) => t + 1);
+  };
+  const redo = () => {
+    const entry = redoStack.current.pop();
+    if (!entry) return;
+    entry.redo();
+    undoStack.current.push(__spreadProps(__spreadValues({}, entry), {
+      at: 0
+    }));
+    setHistoryTick((t) => t + 1);
+  };
+  const setRuns = useCallback((id, runs) => {
+    const text = runsText(runs);
+    setModel((m) => m ? patchBlock(m, id, {
+      runs,
+      text
+    }) : m);
+    scheduleTitle(id, text, runs);
+  }, [scheduleTitle]);
+  const commitRuns = useCallback((id, before, after, key) => {
+    setRuns(id, after);
+    record({
+      key,
+      undo: () => setRuns(id, before),
+      redo: () => setRuns(id, after)
+    });
+  }, [record, setRuns]);
+  const latest = useRef({
+    title: "",
+    icon: null,
+    workspaceId: null
+  });
+  useEffect(
+    () => () => {
+      [...pending.current.values()].forEach((p) => p.flush());
+      if (blockId && latest.current.workspaceId) {
+        recordRecent(latest.current.workspaceId, {
+          id: blockId,
+          title: latest.current.title,
+          icon: latest.current.icon
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const updateProps = useCallback((id, properties) => enqueue(id, () => write({
     mutation: NATIVE_NOTION_UPDATE_BLOCK,
     variables: {
@@ -210,20 +327,44 @@ function NotionPageView({
       }
     }
   })), [write, enqueue]);
+  const removeLocal = useCallback((id) => {
+    var _a2;
+    const m = modelRef.current;
+    if (!m) return null;
+    const snap = snapshotSubtree(m, id);
+    (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
+    setModel((cur) => cur ? removeBlock(cur, id) : cur);
+    enqueue(id, () => write({
+      mutation: NATIVE_NOTION_DELETE_BLOCK,
+      variables: {
+        blockId: id
+      }
+    }));
+    return snap;
+  }, [write, enqueue]);
+  const bringBack = useCallback((snap) => {
+    if (!snap) return;
+    setModel((cur) => cur ? restoreSubtree(cur, snap) : cur);
+    enqueue(snap.id, () => write({
+      mutation: NATIVE_NOTION_RESTORE_BLOCK,
+      variables: {
+        blockId: snap.id
+      }
+    }));
+  }, [write, enqueue]);
   const addBlock = useCallback((parentId, afterId, type, extra = {}) => {
+    if (!parentId) {
+      setSaveError("This page has no id yet. Pull down to reload it.");
+      setSave("error");
+      return "";
+    }
     const id = newBlockId();
     const properties = __spreadValues(__spreadValues(__spreadValues({}, isTextType(type) || type === "page" ? {
       title: []
     } : {}), type === "todo" ? {
       checked: false
     } : {}), extra);
-    const block = {
-      id,
-      type,
-      parentId,
-      text: "",
-      properties
-    };
+    const block = emptyBlock(id, type, parentId, properties);
     setModel((m) => m ? insertAfter(m, block, afterId) : m);
     savedTitles.current.set(id, "");
     if (isTextType(type)) setPendingFocus(id);
@@ -247,54 +388,74 @@ function NotionPageView({
         })
       }
     }));
+    let snap = null;
+    record({
+      undo: () => {
+        snap = removeLocal(id);
+      },
+      redo: () => bringBack(snap)
+    });
     return id;
-  }, [write, enqueue]);
-  const turnInto = useCallback((id, type) => {
-    var _a2;
-    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
-    if (!block || block.type === type) return;
-    setModel((cur) => cur ? patchBlock(cur, id, {
-      type
-    }) : cur);
-    enqueue(id, async () => {
-      await write({
-        mutation: NATIVE_NOTION_TRANSFORM_BLOCK,
-        variables: {
-          blockId: id,
-          newType: type
-        }
-      });
-      if (type === "todo") {
+  }, [write, enqueue, record, removeLocal, bringBack]);
+  const turnInto = useCallback(
+    (id, type, extraProps, opts = {}) => {
+      var _a2;
+      const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+      if (!block || block.type === type) return;
+      const fromType = block.type;
+      const props = __spreadValues(__spreadValues({}, type === "todo" ? {
+        checked: false
+      } : {}), extraProps != null ? extraProps : {});
+      setModel((cur) => cur ? patchBlock(cur, id, {
+        type,
+        properties: __spreadValues(__spreadValues({}, block.properties), props)
+      }) : cur);
+      enqueue(id, async () => {
         await write({
-          mutation: NATIVE_NOTION_UPDATE_BLOCK,
+          mutation: NATIVE_NOTION_TRANSFORM_BLOCK,
           variables: {
-            input: {
-              id,
-              properties: {
-                checked: false
+            blockId: id,
+            newType: type
+          }
+        });
+        if (Object.keys(props).length) {
+          await write({
+            mutation: NATIVE_NOTION_UPDATE_BLOCK,
+            variables: {
+              input: {
+                id,
+                properties: props
               }
             }
-          }
+          });
+        }
+      });
+      if (opts.record !== false) {
+        record({
+          undo: () => turnInto(id, fromType, void 0, {
+            record: false
+          }),
+          redo: () => turnInto(id, type, extraProps, {
+            record: false
+          })
         });
       }
-    });
-  }, [write, enqueue]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [write, enqueue, record]
+  );
   const deleteLine = useCallback((id) => {
-    var _a2;
     const m = modelRef.current;
     if (!m) return;
     const prev = previousLineId(m, id);
-    (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
-    setModel(removeBlock(m, id));
+    const snap = removeLocal(id);
     if (prev) setPendingFocus(prev);
     else setFocusedId(null);
-    enqueue(id, () => write({
-      mutation: NATIVE_NOTION_DELETE_BLOCK,
-      variables: {
-        blockId: id
-      }
-    }));
-  }, [write, enqueue]);
+    record({
+      undo: () => bringBack(snap),
+      redo: () => removeLocal(id)
+    });
+  }, [record, removeLocal, bringBack]);
   const openPage = useCallback((id) => navigation.dispatch(StackActions.push("MainStack.NotionPage", {
     orgName,
     blockId: id
@@ -313,42 +474,594 @@ function NotionPageView({
       } : null
     });
   };
-  const trashPage = () => {
+  const notion = useNotionWorkspace();
+  const menuExtras = useRef(() => ({}));
+  const pageActions = usePageActions({
+    notion,
+    palette,
+    onOpenPage: openPage,
+    onTrashed: () => navigation.goBack(),
+    extrasFor: () => menuExtras.current(),
+    onRenamed: (id, newTitle) => {
+      var _a2;
+      if (id !== blockId) return;
+      (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
+      savedTitles.current.set(id, newTitle);
+      setTitle(newTitle);
+    }
+  });
+  const backlinksQuery = useQuery(NATIVE_NOTION_BACKLINKS, {
+    variables: {
+      blockId: blockId != null ? blockId : "",
+      limit: 50
+    },
+    skip: !blockId,
+    fetchPolicy: "cache-and-network"
+  });
+  const backlinks = ((_e = (_d = backlinksQuery.data) == null ? void 0 : _d.getBacklinks) != null ? _e : []).filter((b) => !b.inTrash && b.id !== blockId);
+  const pagePropsRef = useRef(pageProps);
+  pagePropsRef.current = pageProps;
+  const patchPage = (patch) => {
+    if (!blockId) return;
+    pagePropsRef.current = __spreadValues(__spreadValues({}, pagePropsRef.current), patch);
+    setPageProps(pagePropsRef.current);
+    updateProps(blockId, patch);
+  };
+  const exportMarkdown = async () => {
+    var _a2, _b2;
     if (!blockId) return;
-    Alert.alert("Move to Trash?", "You can restore it from Trash.", [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Move to Trash",
-      style: "destructive",
-      onPress: async () => {
-        try {
-          await write({
-            mutation: NATIVE_NOTION_DELETE_BLOCK,
-            variables: {
-              blockId
-            }
-          });
-          client.refetchQueries({
-            include: ["NativeNotionChildren"]
-          }).catch(() => void 0);
-          navigation.goBack();
-        } catch (err) {
-          Alert.alert("Couldn't move to Trash", err instanceof Error ? err.message : void 0);
+    try {
+      const res = await client.query({
+        query: NATIVE_NOTION_EXPORT_MARKDOWN,
+        variables: {
+          blockId
+        },
+        fetchPolicy: "network-only"
+      });
+      const md = (_b2 = (_a2 = res.data) == null ? void 0 : _a2.exportNotionPageMarkdown) != null ? _b2 : "";
+      await Share.share({
+        title: title.trim() || "Untitled",
+        message: md || `# ${title.trim() || "Untitled"}`
+      });
+    } catch (err) {
+      pageActions.showToast({
+        message: `Couldn't export. ${err instanceof Error ? err.message : ""}`.trim()
+      });
+    }
+  };
+  const importMarkdown = async (markdown) => {
+    var _a2, _b2;
+    if (!blockId) return;
+    await write({
+      mutation: NATIVE_NOTION_IMPORT_MARKDOWN,
+      variables: {
+        parentBlockId: blockId,
+        markdown
+      }
+    });
+    const [res, pageRes] = await Promise.all([refetch(), pageQuery.refetch()]);
+    const next = (_a2 = res.data) == null ? void 0 : _a2.getBlockTree;
+    const nextPage = (_b2 = pageRes.data) == null ? void 0 : _b2.getBlock;
+    if (next && nextPage && !pending.current.size && !inFlight.current) applyTree(next, nextPage);
+    pageActions.showToast({
+      message: "Imported"
+    });
+  };
+  latest.current = {
+    title,
+    icon,
+    workspaceId: page == null ? void 0 : page.workspaceId
+  };
+  menuExtras.current = () => {
+    const words = wordCount(title, modelRef.current);
+    return {
+      subtitle: page ? editedLabel(page.lastEditedTime) || void 0 : void 0,
+      pageSettings: {
+        settings,
+        onToggle: (key) => patchPage(pageSettingsPatch(pagePropsRef.current, key)),
+        onFont: (font) => patchPage(pageFontPatch(pagePropsRef.current, font)),
+        footer: `${words} ${words === 1 ? "word" : "words"}`
+      },
+      groups: [[{
+        key: "export",
+        label: "Export as Markdown\u2026",
+        icon: "share-outline",
+        onPress: exportMarkdown
+      }, {
+        key: "history",
+        label: "Page history",
+        icon: "time-outline",
+        onPress: () => setHistoryOpen(true)
+      }, {
+        key: "import",
+        label: "Import Markdown\u2026",
+        icon: "download-outline",
+        onPress: () => setImportOpen(true)
+      }]]
+    };
+  };
+  const openPageMenu = () => {
+    if (!page) return;
+    Keyboard.dismiss();
+    pageActions.open(__spreadProps(__spreadValues({}, page), {
+      properties: __spreadProps(__spreadValues({}, pageProps), {
+        title: toTitleProperty(title)
+      })
+    }));
+  };
+  const selections = useRef(/* @__PURE__ */ new Map());
+  const onChangeText = (id, text) => {
+    var _a2;
+    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+    if (!block) return;
+    const before = block.runs;
+    if (text === "/" && !block.text && block.type !== "code") {
+      setInsertFor({
+        mode: "replace",
+        id
+      });
+      return;
+    }
+    if (block.type !== "code" && text.length === block.text.length + 1) {
+      let at = 0;
+      while (at < block.text.length && text[at] === block.text[at]) at += 1;
+      if (text[at] === "@" && (at === 0 || /\s/.test(text[at - 1])) && text.slice(at + 1) === block.text.slice(at)) {
+        commitRuns(id, before, applyPlainTextEdit(before, text), `text:${id}`);
+        Keyboard.dismiss();
+        setMentionFor({
+          id,
+          at
+        });
+        return;
+      }
+    }
+    if (block.type !== "code") {
+      const sp = text.indexOf(" ");
+      if (sp > 0 && text.length === block.text.length + 1 && text.slice(0, sp) === block.text.slice(0, sp) && text.slice(sp + 1) === block.text.slice(sp)) {
+        const shortcut = markdownShortcutFor(text.slice(0, sp), block.type);
+        if (shortcut) {
+          setRuns(id, applyPlainTextEdit(before, text.slice(sp + 1)));
+          turnInto(id, shortcut.type, shortcut.properties);
+          return;
         }
       }
+      if (text === "```") {
+        setRuns(id, []);
+        turnInto(id, "code");
+        return;
+      }
+      if ((text === "---" || text === "***" || text === "___") && (block.type === "paragraph" || block.type === "text")) {
+        setRuns(id, []);
+        turnInto(id, "divider");
+        addBlock(block.parentId, id, "paragraph");
+        return;
+      }
+    }
+    let runs = applyPlainTextEdit(before, text);
+    if (block.type !== "code") {
+      let suffix = 0;
+      const old = block.text;
+      while (suffix < old.length && suffix < text.length && old[old.length - 1 - suffix] === text[text.length - 1 - suffix]) {
+        suffix += 1;
+      }
+      const md = applyInlineMarkdown(runs, text.length - suffix);
+      if (md) runs = md.runs;
+    }
+    commitRuns(id, before, runs, `text:${id}`);
+  };
+  const [colorFor, setColorFor] = useState(null);
+  const [linkFor, setLinkFor] = useState(null);
+  const [languageFor, setLanguageFor] = useState(null);
+  const [blockMenuFor, setBlockMenuFor] = useState(null);
+  const [insertFor, setInsertFor] = useState(null);
+  const [mentionFor, setMentionFor] = useState(null);
+  const [captionFor, setCaptionFor] = useState(null);
+  const [commentsFor, setCommentsFor] = useState(null);
+  const [shareOpen, setShareOpen] = useState(false);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const comments = usePageComments(blockId);
+  const openComments = [...comments.openCounts.values()].reduce((n, c) => n + c, 0);
+  const addTree = (tree2, parentId, afterId) => {
+    setModel((m) => m ? insertTree(m, tree2, parentId, afterId) : m);
+    enqueue(tree2.id, () => write({
+      mutation: NATIVE_NOTION_APPEND_CHILDREN,
+      variables: {
+        input: __spreadProps(__spreadValues({
+          parentId
+        }, afterId ? {
+          after: afterId
+        } : {}), {
+          children: [treeInput(tree2, parentId)]
+        })
+      }
+    }));
+    const focus = firstTextId(tree2);
+    if (focus) setPendingFocus(focus);
+    let snap = null;
+    record({
+      undo: () => {
+        snap = removeLocal(tree2.id);
+      },
+      redo: () => bringBack(snap)
+    });
+  };
+  const insertGroups = (target) => {
+    var _a2;
+    const m = modelRef.current;
+    if (!m) return [];
+    const anchor = target.id ? m.blocks[target.id] : null;
+    const parentId = (_a2 = anchor == null ? void 0 : anchor.parentId) != null ? _a2 : m.rootId;
+    const put = (type, props = {}) => () => {
+      var _a3;
+      if (type === "page") {
+        addSubPage();
+        return;
+      }
+      if (target.mode === "replace" && anchor && !anchor.text && type !== "database") {
+        setRuns(anchor.id, []);
+        turnInto(anchor.id, type, props);
+        if (!isTextType(type)) setFocusedId(null);
+        return;
+      }
+      addBlock(parentId, (_a3 = anchor == null ? void 0 : anchor.id) != null ? _a3 : lastTopId(m), type, props);
+    };
+    const columns = (n) => () => {
+      var _a3;
+      return addTree(columnLayout(n), parentId, (_a3 = anchor == null ? void 0 : anchor.id) != null ? _a3 : lastTopId(m));
+    };
+    return [[{
+      key: "image",
+      label: "Image",
+      icon: "image-outline",
+      onPress: put("image")
+    }, {
+      key: "video",
+      label: "Video",
+      icon: "videocam-outline",
+      onPress: put("video")
+    }, {
+      key: "audio",
+      label: "Audio",
+      icon: "musical-notes-outline",
+      onPress: put("audio")
+    }, {
+      key: "file",
+      label: "File",
+      icon: "document-attach-outline",
+      onPress: put("file")
+    }, {
+      key: "bookmark",
+      label: "Bookmark",
+      icon: "bookmark-outline",
+      onPress: put("bookmark")
+    }, {
+      key: "embed",
+      label: "Embed",
+      icon: "globe-outline",
+      onPress: put("embed", {
+        embedType: "url"
+      })
+    }], [{
+      key: "table",
+      label: "Table",
+      icon: "grid-outline",
+      onPress: put("table", {
+        rows: [["", ""], ["", ""]],
+        hasHeaderRow: false
+      })
+    }, {
+      key: "col2",
+      label: "2 columns",
+      icon: "pause-outline",
+      onPress: columns(2)
+    }, {
+      key: "col3",
+      label: "3 columns",
+      icon: "reorder-three-outline",
+      onPress: columns(3)
+    }, {
+      key: "equation",
+      label: "Block equation",
+      icon: "calculator-outline",
+      onPress: put("equation", {
+        expression: ""
+      })
+    }, {
+      key: "toc",
+      label: "Table of contents",
+      icon: "list-outline",
+      onPress: put("table_of_contents")
+    }, {
+      key: "divider",
+      label: "Divider",
+      icon: "remove-outline",
+      onPress: put("divider")
+    }, {
+      key: "page",
+      label: "Sub-page",
+      icon: "document-text-outline",
+      onPress: put("page")
+    }, {
+      key: "database",
+      label: "Database",
+      icon: "server-outline",
+      onPress: put("database", NEW_DATABASE_PROPERTIES)
+    }], [{
+      key: "todo",
+      label: "To-do list",
+      icon: "checkbox-outline",
+      onPress: put("todo")
+    }, {
+      key: "toggle",
+      label: "Toggle list",
+      icon: "caret-forward-outline",
+      onPress: put("toggle")
+    }, {
+      key: "callout",
+      label: "Callout",
+      icon: "bulb-outline",
+      onPress: put("callout", {
+        icon: {
+          emoji: "\u{1F4A1}"
+        }
+      })
+    }, {
+      key: "quote",
+      label: "Quote",
+      icon: "chatbox-ellipses-outline",
+      onPress: put("quote")
+    }, {
+      key: "code",
+      label: "Code",
+      icon: "code-slash-outline",
+      onPress: put("code")
+    }]];
+  };
+  const insertMention = (run) => {
+    var _a2;
+    const target = mentionFor;
+    const block = target ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[target.id] : null;
+    if (!target || !block) return;
+    const runs = replaceRange(block.runs, target.at, target.at + 1, [run, {
+      content: " "
     }]);
+    commitRuns(target.id, block.runs, runs);
+    setPendingFocus(target.id);
   };
-  const onChangeText = (id, text) => {
+  const mentionedPeople = () => {
+    var _a2, _b2;
+    const out = /* @__PURE__ */ new Set();
+    Object.values((_b2 = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks) != null ? _b2 : {}).forEach((b) => b.runs.forEach((r) => {
+      var _a3;
+      if (((_a3 = r.mention) == null ? void 0 : _a3.type) === "user" && r.mention.name) out.add(r.mention.name);
+    }));
+    return [...out];
+  };
+  const rangeOf = (id, block) => {
+    const sel = selections.current.get(id);
+    const ranged = !!sel && sel.end > sel.start;
+    return ranged ? {
+      start: sel.start,
+      end: sel.end,
+      ranged
+    } : {
+      start: 0,
+      end: block.text.length,
+      ranged
+    };
+  };
+  const toggleMark = (key) => {
+    var _a2;
+    const id = focusedId;
+    const block = id ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id] : null;
+    if (!id || !block || !block.text) return;
+    const r = rangeOf(id, block);
+    const on = !rangeHasFormat(block.runs, r.start, r.end, key);
+    const runs = r.ranged ? applyFormatRange(block.runs, r.start, r.end, {
+      [key]: on
+    }) : applyFormatToAll(block.runs, {
+      [key]: on
+    });
+    commitRuns(id, block.runs, runs);
+  };
+  const pickColor = (choice) => {
+    var _a2;
+    const target = colorFor;
+    const block = target ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[target.id] : null;
+    if (!target || !block) return;
+    if (target.mode === "inline") {
+      const r = rangeOf(target.id, block);
+      const update = choice.kind === "text" ? {
+        color: choice.value
+      } : {
+        highlight: choice.value
+      };
+      const runs = r.ranged ? applyFormatRange(block.runs, r.start, r.end, update) : applyFormatToAll(block.runs, update);
+      commitRuns(target.id, block.runs, runs);
+      return;
+    }
+    const value = choice.value ? choice.kind === "background" ? `${choice.value}_background` : choice.value : null;
+    setBlockProps(target.id, {
+      color: value
+    });
+  };
+  const setBlockProps = (id, patch, opts = {}) => {
+    var _a2;
+    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+    if (!block) return;
+    const beforeProps = {};
+    Object.keys(patch).forEach((k) => {
+      var _a3;
+      beforeProps[k] = (_a3 = block.properties[k]) != null ? _a3 : null;
+    });
     setModel((m) => m ? patchBlock(m, id, {
-      text
+      properties: __spreadValues(__spreadValues({}, block.properties), patch)
     }) : m);
-    scheduleTitle(id, text);
+    updateProps(id, patch);
+    if (opts.record !== false) {
+      record({
+        undo: () => setBlockProps(id, beforeProps, {
+          record: false
+        }),
+        redo: () => setBlockProps(id, patch, {
+          record: false
+        })
+      });
+    }
+  };
+  const openLink = () => {
+    var _a2, _b2;
+    const id = focusedId;
+    const block = id ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id] : null;
+    if (!id || !block || !block.text) return;
+    const r = rangeOf(id, block);
+    setLinkFor({
+      id,
+      start: r.start,
+      end: r.end,
+      current: (_b2 = linkAt(block.runs, r.start, r.end)) != null ? _b2 : ""
+    });
+  };
+  const applyLink = (url) => {
+    var _a2;
+    const target = linkFor;
+    const block = target ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[target.id] : null;
+    if (!target || !block) return;
+    const href = url.trim() ? /^[a-z]+:/i.test(url.trim()) ? url.trim() : `https://${url.trim()}` : null;
+    const runs = target.end > target.start ? applyFormatRange(block.runs, target.start, target.end, {
+      href
+    }) : applyFormatToAll(block.runs, {
+      href
+    });
+    commitRuns(target.id, block.runs, runs);
+  };
+  const duplicateLine = (id) => {
+    var _a2;
+    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+    if (!block) return;
+    enqueue(id, async () => {
+      var _a3;
+      const res = await write({
+        mutation: NATIVE_NOTION_DUPLICATE_BLOCK,
+        variables: {
+          blockId: id,
+          includeChildren: true
+        }
+      });
+      const copy = (_a3 = res.data) == null ? void 0 : _a3.duplicateBlock;
+      if (!(copy == null ? void 0 : copy.id)) return;
+      setModel((m) => m ? insertAfter(m, toEditorBlock(copy, block.parentId), id) : m);
+      savedTitles.current.set(copy.id, blockTitle(copy));
+      let snap = null;
+      record({
+        undo: () => {
+          snap = removeLocal(copy.id);
+        },
+        redo: () => bringBack(snap)
+      });
+    });
+  };
+  const moveLine = (id, direction, opts = {}) => {
+    const m = modelRef.current;
+    if (!m) return;
+    const moved = moveAmongSiblings(m, id, direction);
+    if (!moved) return;
+    setModel(moved.model);
+    enqueue(moved.parentId, () => write({
+      mutation: NATIVE_NOTION_REORDER_CHILDREN,
+      variables: {
+        blockId: moved.parentId,
+        childIds: moved.order
+      }
+    }));
+    if (opts.record !== false) {
+      record({
+        undo: () => moveLine(id, direction === 1 ? -1 : 1, {
+          record: false
+        }),
+        redo: () => moveLine(id, direction, {
+          record: false
+        })
+      });
+    }
+  };
+  const blockMenuGroups = (id) => {
+    var _a2;
+    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+    if (!block) return [];
+    const colorable = isTextType(block.type) && block.type !== "code";
+    return [[...colorable ? [{
+      key: "color",
+      label: "Color\u2026",
+      icon: "color-palette-outline",
+      onPress: () => setColorFor({
+        mode: "block",
+        id
+      })
+    }] : [], ...block.type === "code" ? [{
+      key: "language",
+      label: "Language\u2026",
+      icon: "code-slash-outline",
+      detail: languageLabel(block.properties.language),
+      onPress: () => setLanguageFor(id)
+    }] : [], {
+      key: "comment",
+      label: "Comment",
+      icon: "chatbubble-outline",
+      onPress: () => setCommentsFor({
+        blockId: id
+      })
+    }, {
+      key: "duplicate",
+      label: "Duplicate",
+      icon: "copy-outline",
+      onPress: () => duplicateLine(id)
+    }, {
+      key: "up",
+      label: "Move up",
+      icon: "arrow-up",
+      onPress: () => moveLine(id, -1)
+    }, {
+      key: "down",
+      label: "Move down",
+      icon: "arrow-down",
+      onPress: () => moveLine(id, 1)
+    }, {
+      key: "link",
+      label: "Copy link to block",
+      icon: "link-outline",
+      onPress: () => {
+        if (!blockId) return;
+        Clipboard.setString(`${pageLinkUrl(webOrigin(), blockId)}?block=${encodeURIComponent(id)}`);
+        pageActions.showToast({
+          message: "Link copied"
+        });
+      }
+    }], [{
+      key: "delete",
+      label: "Delete",
+      icon: "trash-outline",
+      destructive: true,
+      onPress: () => deleteLine(id)
+    }]];
   };
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const toggleCollapsed = (id) => setCollapsed((cur) => {
+    const next = new Set(cur);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
   const onSubmit = (line) => {
+    var _a2;
     const {
       block
     } = line;
+    const m = modelRef.current;
+    if (block.type === "toggle" && m && !collapsed.has(block.id) && !((_a2 = m.children[block.id]) != null ? _a2 : []).length && block.text) {
+      addBlock(block.id, null, "paragraph");
+      return;
+    }
     if (!block.text && block.type !== "paragraph" && nextTypeAfter(block.type) === block.type) {
       turnInto(block.id, "paragraph");
       return;
@@ -363,17 +1076,9 @@ function NotionPageView({
     if (block.type !== "paragraph" && block.type !== "text") turnInto(block.id, "paragraph");
     else deleteLine(block.id);
   };
-  const toggleTodo = (block) => {
-    const checked = block.properties.checked !== true;
-    setModel((m) => m ? patchBlock(m, block.id, {
-      properties: __spreadProps(__spreadValues({}, block.properties), {
-        checked
-      })
-    }) : m);
-    updateProps(block.id, {
-      checked
-    });
-  };
+  const toggleTodo = (block) => setBlockProps(block.id, {
+    checked: block.properties.checked !== true
+  });
   const addSubPage = () => {
     var _a2, _b2, _c2;
     const m = modelRef.current;
@@ -392,8 +1097,13 @@ function NotionPageView({
     if (last && isTextType(last.type) && !last.text) setPendingFocus(last.id);
     else addBlock(m.rootId, null, "paragraph");
   };
-  const lines = useMemo(() => model ? flattenModel(model) : [], [model]);
-  const focused = focusedId && model ? (_d = model.blocks[focusedId]) != null ? _d : null : null;
+  const lines = useMemo(() => model ? flattenModel(model, collapsed) : [], [model, collapsed]);
+  const headings = useMemo(() => lines.filter((l) => l.block.type.startsWith("heading_") && l.block.text.trim()).map((l) => ({
+    id: l.block.id,
+    text: l.block.text.trim(),
+    level: Number(l.block.type.slice(-1))
+  })), [lines]);
+  const focused = focusedId && model ? (_f = model.blocks[focusedId]) != null ? _f : null : null;
   if (!model || !tree || !page) {
     return /* @__PURE__ */ jsx(View, { style: [styles.center, {
       backgroundColor: palette.card
@@ -428,7 +1138,7 @@ function NotionPageView({
       }
     } }), children: [
       /* @__PURE__ */ jsxs(View, { style: styles.pageActions, children: [
-        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: icon ? "Change icon" : "Add icon", onPress: () => setIconPicker((v) => !v), style: ({
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: icon ? "Change icon" : "Add icon", onPress: () => !settings.locked && setIconPicker((v) => !v), style: ({
           pressed
         }) => [styles.pageAction, pressed && {
           backgroundColor: palette.pressed
@@ -439,12 +1149,55 @@ function NotionPageView({
           }], children: "Add icon" })
         ] }) }),
         /* @__PURE__ */ jsx(View, { style: styles.flex }),
-        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Move page to Trash", onPress: trashPage, hitSlop: 8, style: ({
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Share", onPress: () => {
+          Keyboard.dismiss();
+          setShareOpen(true);
+        }, hitSlop: 8, style: ({
+          pressed
+        }) => [styles.pageAction, pressed && {
+          backgroundColor: palette.pressed
+        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.shareLabel, {
+          color: palette.text
+        }], children: "Share" }) }),
+        /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: openComments ? `Comments, ${openComments} open` : "Comments", onPress: () => {
+          Keyboard.dismiss();
+          setCommentsFor({
+            blockId: null
+          });
+        }, hitSlop: 8, style: ({
+          pressed
+        }) => [styles.pageAction, pressed && {
+          backgroundColor: palette.pressed
+        }], children: [
+          /* @__PURE__ */ jsx(Ionicons, { name: "chatbubble-outline", size: 18, color: palette.textMuted }),
+          openComments ? /* @__PURE__ */ jsx(Text, { style: [styles.commentCount, {
+            color: palette.textMuted
+          }], children: openComments }) : null
+        ] }),
+        blockId ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: notion.favoriteIds.includes(blockId) ? "Remove from Favorites" : "Add to Favorites", onPress: () => notion.toggleFavoritePage(blockId).catch(() => pageActions.showToast({
+          message: "Couldn't update Favorites"
+        })), hitSlop: 8, style: ({
+          pressed
+        }) => [styles.pageAction, pressed && {
+          backgroundColor: palette.pressed
+        }], children: /* @__PURE__ */ jsx(Ionicons, { name: notion.favoriteIds.includes(blockId) ? "star" : "star-outline", size: 19, color: notion.favoriteIds.includes(blockId) ? "#eab308" : palette.textMuted }) }) : null,
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Page actions", onPress: openPageMenu, hitSlop: 8, style: ({
           pressed
         }) => [styles.pageAction, pressed && {
           backgroundColor: palette.pressed
-        }], children: /* @__PURE__ */ jsx(Ionicons, { name: "trash-outline", size: 18, color: palette.textMuted }) })
+        }], children: /* @__PURE__ */ jsx(Ionicons, { name: "ellipsis-horizontal", size: 20, color: palette.textMuted }) })
       ] }),
+      settings.locked ? /* @__PURE__ */ jsxs(View, { style: [styles.lockBanner, {
+        backgroundColor: palette.fill
+      }], children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: "lock-closed", size: 15, color: palette.textMuted }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.lockText, {
+          color: palette.textMuted
+        }], children: "This page is locked" }),
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => patchPage(pageSettingsPatch(pageProps, "locked", false)), hitSlop: 8, children: /* @__PURE__ */ jsx(Text, { style: [styles.lockUnlock, {
+          color: palette.primary
+        }], children: "Unlock" }) })
+      ] }) : null,
       iconPicker ? /* @__PURE__ */ jsxs(View, { style: [styles.emojiGrid, {
         backgroundColor: palette.fill
       }], children: [
@@ -458,37 +1211,178 @@ function NotionPageView({
         const first = lines.find((l) => isTextType(l.block.type));
         if (first) setPendingFocus(first.block.id);
         else addBlock(model.rootId, null, "paragraph");
-      }, onFocus: () => setFocusedId(null), style: [styles.title, {
-        color: palette.text
+      }, onFocus: () => setFocusedId(null), editable: !settings.locked, style: [scaled(styles.title, look.small), {
+        color: palette.text,
+        fontFamily: look.fontFamily
       }] }),
       /* @__PURE__ */ jsx(Text, { style: [styles.meta, {
         color: save === "error" ? palette.danger : palette.textMuted
-      }], children: saveLabelOf(save, page.lastEditedTime) }),
-      /* @__PURE__ */ jsx(View, { style: styles.body, children: lines.map((line) => /* @__PURE__ */ jsx(BlockLine, { line, palette, focused: line.block.id === focusedId, registerInput: (input) => inputs.current.set(line.block.id, input), onFocus: () => setFocusedId(line.block.id), onChangeText: (t) => onChangeText(line.block.id, t), onSubmit: () => onSubmit(line), onBackspace: () => onBackspace(line), onToggleTodo: () => toggleTodo(line.block), onOpenPage: openPage, onDelete: () => deleteLine(line.block.id) }, line.block.id)) }),
-      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Add a block", onPress: appendAtEnd, style: styles.appendArea, children: lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.startHint, {
+      }], children: save === "error" && saveError ? `Not saved \u2014 ${saveError}` : saveLabelOf(save, page.lastEditedTime) }),
+      save === "error" ? /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", onPress: retryFailed, hitSlop: 8, style: styles.retryRow, children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: "refresh", size: 14, color: palette.primary }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.retryLabel, {
+          color: palette.primary
+        }], children: "Retry" })
+      ] }) : null,
+      page.type === "database_row" && ((_g = page.parent) == null ? void 0 : _g.type) === "database" && page.parent.id ? /* @__PURE__ */ jsx(RowPropertiesPanel, { rowId: page.id, databaseId: page.parent.id, properties: pageProps, meta: {
+        createdTime: page.createdTime,
+        lastEditedTime: page.lastEditedTime
+      }, isDark, palette, onError: (message) => pageActions.showToast({
+        message: `Couldn't save. ${message}`
+      }) }) : null,
+      backlinks.length ? /* @__PURE__ */ jsxs(View, { style: styles.backlinks, children: [
+        /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityState: {
+          expanded: showBacklinks
+        }, onPress: () => setShowBacklinks((v) => !v), hitSlop: 6, style: styles.backlinksToggle, children: [
+          /* @__PURE__ */ jsx(Ionicons, { name: "link-outline", size: 14, color: palette.textMuted }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.backlinksLabel, {
+            color: palette.textMuted
+          }], children: `${backlinks.length} ${backlinks.length === 1 ? "backlink" : "backlinks"}` }),
+          /* @__PURE__ */ jsx(Ionicons, { name: showBacklinks ? "chevron-up" : "chevron-down", size: 13, color: palette.textMuted })
+        ] }),
+        showBacklinks ? backlinks.map((b) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", onPress: () => openPage(b.rootPageId || b.id), style: styles.backlinkRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.inlineEmoji, children: (_a2 = blockIcon(b)) != null ? _a2 : "\u{1F4C4}" }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.text, styles.link, {
+              color: palette.text,
+              borderBottomColor: palette.hairline
+            }], children: pageTitle(b) })
+          ] }, b.id);
+        }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(View, { style: styles.body, children: lines.map((line) => {
+        var _a2;
+        return /* @__PURE__ */ jsx(BlockLine, { line, palette, focused: line.block.id === focusedId, registerInput: (input) => inputs.current.set(line.block.id, input), onFocus: () => setFocusedId(line.block.id), onChangeText: (t) => onChangeText(line.block.id, t), onSubmit: () => onSubmit(line), onBackspace: () => onBackspace(line), onToggleTodo: () => toggleTodo(line.block), onOpenPage: openPage, onDelete: () => deleteLine(line.block.id), onSelection: (sel) => selections.current.set(line.block.id, sel), onMenu: () => {
+          Keyboard.dismiss();
+          setBlockMenuFor(line.block.id);
+        }, collapsed: collapsed.has(line.block.id), onToggleCollapsed: () => toggleCollapsed(line.block.id), onLanguage: () => setLanguageFor(line.block.id), onPatch: (patch) => setBlockProps(line.block.id, patch), onCaption: () => setCaptionFor(line.block.id), headings, onJump: (id) => setPendingFocus(id), commentCount: (_a2 = comments.openCounts.get(line.block.id)) != null ? _a2 : 0, onComments: () => setCommentsFor({
+          blockId: line.block.id
+        }), isDark, look }, line.block.id);
+      }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Add a block", onPress: settings.locked ? void 0 : appendAtEnd, disabled: settings.locked, style: styles.appendArea, children: lines.length === 0 && !settings.locked ? /* @__PURE__ */ jsx(Text, { style: [styles.startHint, {
         color: palette.textFaint
       }], children: "Tap here to start writing\u2026" }) : null })
     ] }),
-    focused ? /* @__PURE__ */ jsx(EditorToolbar, { palette, block: focused, onTurnInto: (type) => turnInto(focused.id, type), onDivider: () => {
+    focused && !settings.locked ? /* @__PURE__ */ jsx(EditorToolbar, { palette, bottomInset: keyboardShown ? 0 : insets.bottom, block: focused, onTurnInto: (type) => turnInto(focused.id, type), onDivider: () => {
       addBlock(focused.parentId, focused.id, "divider");
-    }, onSubPage: addSubPage, onDelete: () => deleteLine(focused.id), onDone: () => {
+    }, onSubPage: addSubPage, onDelete: () => deleteLine(focused.id), onMark: toggleMark, onColor: () => setColorFor({
+      mode: "inline",
+      id: focused.id
+    }), onLink: openLink, onMenu: () => setBlockMenuFor(focused.id), onInsert: () => {
+      Keyboard.dismiss();
+      setInsertFor({
+        mode: "after",
+        id: focused.id
+      });
+    }, canUndo: undoStack.current.length > 0, canRedo: redoStack.current.length > 0, onUndo: undo, onRedo: redo, onDone: () => {
       Keyboard.dismiss();
       setFocusedId(null);
-    } }) : null
+    } }) : null,
+    pageActions.element,
+    /* @__PURE__ */ jsx(PageActionsSheet, { visible: Boolean(blockMenuFor), palette, title: blockMenuFor ? blockMenuTitle(model.blocks[blockMenuFor]) : "", groups: blockMenuFor ? blockMenuGroups(blockMenuFor) : [], onClose: () => setBlockMenuFor(null) }),
+    blockId ? /* @__PURE__ */ jsx(HistorySheet, { visible: historyOpen, palette, pageId: blockId, createdTime: page.createdTime, locked: settings.locked, onRestored: async () => {
+      var _a2, _b2;
+      const [res, pageRes] = await Promise.all([refetch(), pageQuery.refetch()]);
+      const next = (_a2 = res.data) == null ? void 0 : _a2.getBlockTree;
+      const nextPage = (_b2 = pageRes.data) == null ? void 0 : _b2.getBlock;
+      if (next && nextPage && !pending.current.size && !inFlight.current) applyTree(next, nextPage);
+    }, onClose: () => setHistoryOpen(false) }) : null,
+    blockId ? /* @__PURE__ */ jsx(ShareSheet, { visible: shareOpen, palette, pageId: blockId, pageTitle: title.trim() || "Untitled", onClose: () => setShareOpen(false) }) : null,
+    blockId ? /* @__PURE__ */ jsx(CommentsSheet, { visible: Boolean(commentsFor), palette, pageId: blockId, blockId: (_h = commentsFor == null ? void 0 : commentsFor.blockId) != null ? _h : null, blockLabel: (commentsFor == null ? void 0 : commentsFor.blockId) ? (_i = model.blocks[commentsFor.blockId]) == null ? void 0 : _i.text.slice(0, 120) : void 0, onClose: () => {
+      setCommentsFor(null);
+      comments.refetch().catch(() => void 0);
+    } }) : null,
+    /* @__PURE__ */ jsx(PageActionsSheet, { visible: Boolean(insertFor), palette, title: "Insert", subtitle: "Text styles are on the toolbar's second row", groups: insertFor ? insertGroups(insertFor) : [], onClose: () => setInsertFor(null) }),
+    /* @__PURE__ */ jsx(MentionSheet, { visible: Boolean(mentionFor), palette, pages: notion.pages, workspaceId: (_k = (_j = notion.workspace) == null ? void 0 : _j.id) != null ? _k : null, people: mentionFor ? mentionedPeople() : [], onPick: insertMention, onClose: () => setMentionFor(null) }),
+    /* @__PURE__ */ jsx(TextPromptDialog, { visible: Boolean(captionFor), palette, title: "Caption", initial: captionFor ? (_m = (_l = model.blocks[captionFor]) == null ? void 0 : _l.text) != null ? _m : "" : "", placeholder: "Write a caption", confirmLabel: "Save", allowEmpty: true, onClose: () => setCaptionFor(null), onConfirm: (caption) => {
+      var _a2;
+      const block = captionFor ? (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[captionFor] : null;
+      if (block) commitRuns(block.id, block.runs, caption.trim() ? [{
+        content: caption.trim()
+      }] : []);
+    } }),
+    /* @__PURE__ */ jsx(ColorSheet, { visible: Boolean(colorFor), palette, isDark, title: (colorFor == null ? void 0 : colorFor.mode) === "inline" ? "Text color" : "Block color", currentText: colorCurrent(colorFor, model).text, currentBackground: colorCurrent(colorFor, model).background, onPick: pickColor, onClose: () => setColorFor(null) }),
+    /* @__PURE__ */ jsx(LanguageSheet, { visible: Boolean(languageFor), palette, current: languageFor ? (_n = model.blocks[languageFor]) == null ? void 0 : _n.properties.language : void 0, onPick: (language) => languageFor && setBlockProps(languageFor, {
+      language
+    }), onClose: () => setLanguageFor(null) }),
+    /* @__PURE__ */ jsx(TextPromptDialog, { visible: Boolean(linkFor), palette, title: (linkFor == null ? void 0 : linkFor.current) ? "Edit link" : "Add link", message: (linkFor == null ? void 0 : linkFor.current) ? "Leave empty to remove the link." : void 0, initial: (_o = linkFor == null ? void 0 : linkFor.current) != null ? _o : "", placeholder: "https://", confirmLabel: "Save", allowEmpty: true, onClose: () => setLinkFor(null), onConfirm: applyLink }),
+    /* @__PURE__ */ jsx(TextPromptDialog, { visible: importOpen, palette, title: "Import Markdown", message: "Paste Markdown. Headings, lists, to-dos, quotes and code become blocks at the end of this page.", placeholder: "# Heading\n- item\n- [ ] to-do", confirmLabel: "Import", multiline: true, onClose: () => setImportOpen(false), onConfirm: importMarkdown })
   ] });
 }
+function lastTopId(model) {
+  var _a;
+  const top = (_a = model.children[model.rootId]) != null ? _a : [];
+  return top.length ? top[top.length - 1] : null;
+}
+function blockMenuTitle(block) {
+  var _a, _b;
+  if (!block) return "";
+  const label = (_b = (_a = TURN_INTO.find((t) => t.type === block.type)) == null ? void 0 : _a.label) != null ? _b : block.type.replace(/_/g, " ");
+  return block.text.trim() ? `${label} \xB7 ${block.text.trim().slice(0, 40)}` : label;
+}
+function colorCurrent(target, model) {
+  var _a, _b;
+  const block = target ? model.blocks[target.id] : null;
+  if (!target || !block) return {};
+  if (target.mode === "block") return blockColorParts(block.properties.color);
+  const first = (_b = (_a = block.runs[0]) == null ? void 0 : _a.annotations) != null ? _b : {};
+  return {
+    text: first.color || "",
+    background: first.highlight || ""
+  };
+}
+function runStyle(run, palette, isDark, mono) {
+  var _a;
+  const a = (_a = run.annotations) != null ? _a : {};
+  const lines = [a.underline || run.href ? "underline" : "", a.strikethrough ? "line-through" : ""].filter(Boolean).join(" ");
+  return __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, a.bold ? {
+    fontWeight: "700"
+  } : {}), a.italic ? {
+    fontStyle: "italic"
+  } : {}), lines ? {
+    textDecorationLine: lines
+  } : {}), a.code ? {
+    fontFamily: mono,
+    backgroundColor: palette.fill,
+    color: palette.danger
+  } : {}), textColorOf(a.color, isDark) ? {
+    color: textColorOf(a.color, isDark)
+  } : {}), washColorOf(a.highlight, isDark) ? {
+    backgroundColor: washColorOf(a.highlight, isDark)
+  } : {}), run.href ? {
+    color: palette.primary
+  } : {}), run.mention ? {
+    color: palette.primary,
+    fontWeight: "600"
+  } : {});
+}
+const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
 function BlockLine({
   line,
   palette,
+  isDark,
   focused,
+  collapsed,
   registerInput,
   onFocus,
   onChangeText,
   onSubmit,
   onBackspace,
   onToggleTodo,
+  onToggleCollapsed,
   onOpenPage,
-  onDelete
+  onDelete,
+  onSelection,
+  onMenu,
+  onLanguage,
+  onPatch,
+  onCaption,
+  headings,
+  onJump,
+  commentCount,
+  onComments,
+  look
 }) {
   var _a, _b, _c;
   const {
@@ -499,17 +1393,10 @@ function BlockLine({
   const indent = {
     marginLeft: depth * 22
   };
-  const confirmDelete = () => Alert.alert("Delete block?", void 0, [{
-    text: "Cancel",
-    style: "cancel"
-  }, {
-    text: "Delete",
-    style: "destructive",
-    onPress: onDelete
-  }]);
+  const menu = look.locked ? void 0 : onMenu;
   if (isPageBlock(block)) {
     const emoji = blockIcon(block);
-    return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", onPress: () => onOpenPage(block.id), onLongPress: confirmDelete, style: ({
+    return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", onPress: () => onOpenPage(block.id), onLongPress: menu, style: ({
       pressed
     }) => [styles.row, styles.linkRow, indent, pressed && {
       backgroundColor: palette.pressed
@@ -524,13 +1411,26 @@ function BlockLine({
     ] });
   }
   if (block.type === "divider") {
-    return /* @__PURE__ */ jsx(Pressable, { onLongPress: confirmDelete, style: [styles.dividerHit, indent], children: /* @__PURE__ */ jsx(View, { style: [styles.divider, {
+    return /* @__PURE__ */ jsx(Pressable, { onLongPress: menu, style: [styles.dividerHit, indent], children: /* @__PURE__ */ jsx(View, { style: [styles.divider, {
       backgroundColor: palette.hairline
     }] }) });
   }
+  if (MEDIA_TYPES.includes(block.type)) {
+    return /* @__PURE__ */ jsx(View, { style: [indent, styles.mediaRow], children: /* @__PURE__ */ jsx(MediaBlock, { block, palette, locked: look.locked, onPatch, onCaption, onMenu: menu }) });
+  }
+  if (block.type === "table_of_contents") {
+    return /* @__PURE__ */ jsx(Pressable, { onLongPress: menu, style: [indent, styles.toc, {
+      borderLeftColor: palette.hairline
+    }], children: headings.length ? headings.map((h) => /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "link", onPress: () => onJump(h.id), hitSlop: 4, children: /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.tocItem, {
+      color: palette.textMuted,
+      marginLeft: (h.level - 1) * 14
+    }], children: h.text }) }, h.id)) : /* @__PURE__ */ jsx(Text, { style: [styles.tocItem, {
+      color: palette.textFaint
+    }], children: "Add headings to build a table of contents" }) });
+  }
   if (!isTextType(block.type)) {
     const caption = block.text || richTextToPlain(block.properties.caption) || block.type.replace(/_/g, " ");
-    return /* @__PURE__ */ jsxs(Pressable, { onLongPress: confirmDelete, style: [styles.row, styles.unsupported, {
+    return /* @__PURE__ */ jsxs(Pressable, { onLongPress: menu != null ? menu : look.locked ? void 0 : onDelete, style: [styles.row, styles.unsupported, {
       borderColor: palette.hairline
     }, indent], children: [
       /* @__PURE__ */ jsx(Ionicons, { name: "cube-outline", size: 16, color: palette.textMuted }),
@@ -543,6 +1443,9 @@ function BlockLine({
     ] });
   }
   const checked = block.properties.checked === true;
+  const colors = blockColorParts(block.properties.color);
+  const blockText = textColorOf(colors.text, isDark);
+  const blockWash = washColorOf(colors.background, isDark);
   let gutter = null;
   if (block.type === "bulleted_list") {
     gutter = /* @__PURE__ */ jsx(Text, { style: [styles.text, styles.marker, {
@@ -555,66 +1458,150 @@ function BlockLine({
   } else if (block.type === "todo") {
     gutter = /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: {
       checked
-    }, onPress: onToggleTodo, hitSlop: 8, style: styles.check, children: /* @__PURE__ */ jsx(Ionicons, { name: checked ? "checkbox" : "square-outline", size: 21, color: checked ? palette.primary : palette.textMuted }) });
+    }, onPress: look.locked ? void 0 : onToggleTodo, hitSlop: 8, style: styles.check, children: /* @__PURE__ */ jsx(Ionicons, { name: checked ? "checkbox" : "square-outline", size: 21, color: checked ? palette.primary : palette.textMuted }) });
   } else if (block.type === "toggle") {
-    gutter = /* @__PURE__ */ jsx(Ionicons, { name: "caret-down", size: 14, color: palette.textMuted, style: styles.caret });
+    gutter = /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: collapsed ? "Expand toggle" : "Collapse toggle", accessibilityState: {
+      expanded: !collapsed
+    }, onPress: onToggleCollapsed, hitSlop: 10, style: styles.caretHit, children: /* @__PURE__ */ jsx(Ionicons, { name: collapsed ? "caret-forward" : "caret-down", size: 14, color: palette.textMuted }) });
   } else if (block.type === "callout") {
     gutter = /* @__PURE__ */ jsx(Text, { style: styles.inlineEmoji, children: (_a = blockIcon({
       properties: block.properties
     })) != null ? _a : "\u{1F4A1}" });
   }
-  return /* @__PURE__ */ jsxs(View, { style: [styles.row, indent, block.type === "quote" && [styles.quote, {
+  const baseText = [styles.input, scaled((_b = TEXT_STYLE[block.type]) != null ? _b : styles.text, look.small), {
+    color: blockText != null ? blockText : palette.text,
+    fontFamily: look.fontFamily
+  }, block.type === "todo" && checked && styles.done, block.type === "todo" && checked && {
+    color: palette.textMuted
+  }, block.type === "code" && styles.codeText];
+  return /* @__PURE__ */ jsxs(Pressable, { onLongPress: menu, delayLongPress: 350, style: [styles.row, indent, block.type === "quote" && [styles.quote, {
     borderLeftColor: palette.text
   }], block.type === "callout" && [styles.callout, {
-    backgroundColor: palette.fill
+    backgroundColor: blockWash != null ? blockWash : palette.fill
   }], block.type === "code" && [styles.code, {
     backgroundColor: palette.fill
-  }], block.type.startsWith("heading") && styles.headingRow], children: [
+  }], block.type.startsWith("heading") && styles.headingRow, blockWash && block.type !== "callout" ? [styles.wash, {
+    backgroundColor: blockWash
+  }] : null], children: [
     gutter,
-    /* @__PURE__ */ jsx(TextInput, { ref: registerInput, value: block.text, onChangeText, onFocus, multiline: true, scrollEnabled: false, submitBehavior: block.type === "code" ? "newline" : "submit", onSubmitEditing: block.type === "code" ? void 0 : onSubmit, onKeyPress: (e) => {
-      if (e.nativeEvent.key === "Backspace") onBackspace();
-    }, autoCorrect: block.type !== "code", autoCapitalize: block.type === "code" ? "none" : "sentences", placeholder: focused ? (_b = PLACEHOLDER[block.type]) != null ? _b : "Type something\u2026" : PLACEHOLDER[block.type], placeholderTextColor: palette.textFaint, style: [styles.input, (_c = TEXT_STYLE[block.type]) != null ? _c : styles.text, {
-      color: palette.text
-    }, block.type === "todo" && checked && styles.done, block.type === "todo" && checked && {
-      color: palette.textMuted
-    }, block.type === "code" && styles.codeText], textAlignVertical: "top" })
+    /* @__PURE__ */ jsxs(View, { style: styles.flex, children: [
+      block.type === "code" ? /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: "Code language", onPress: look.locked ? void 0 : onLanguage, hitSlop: 6, style: [styles.langPill, {
+        backgroundColor: palette.card
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.langPillText, {
+          color: palette.textMuted
+        }], children: languageLabel(block.properties.language) }),
+        !look.locked ? /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 11, color: palette.textMuted }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(TextInput, { ref: registerInput, onChangeText, onFocus, onSelectionChange: (e) => onSelection(e.nativeEvent.selection), editable: !look.locked, multiline: true, scrollEnabled: false, submitBehavior: block.type === "code" ? "newline" : "submit", onSubmitEditing: block.type === "code" ? void 0 : onSubmit, onKeyPress: (e) => {
+        if (e.nativeEvent.key === "Backspace") onBackspace();
+      }, autoCorrect: block.type !== "code", autoCapitalize: block.type === "code" ? "none" : "sentences", placeholder: focused ? (_c = PLACEHOLDER[block.type]) != null ? _c : "Type something\u2026" : PLACEHOLDER[block.type], placeholderTextColor: palette.textFaint, style: baseText, textAlignVertical: "top", children: block.runs.map((run, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsx(Text, { style: runStyle(run, palette, isDark, MONO), children: run.content }, i)
+      )) })
+    ] }),
+    commentCount ? /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: `${commentCount} comments`, onPress: onComments, hitSlop: 8, style: [styles.commentBubble, {
+      backgroundColor: palette.fill
+    }], children: [
+      /* @__PURE__ */ jsx(Ionicons, { name: "chatbubble", size: 11, color: palette.textMuted }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.commentBubbleText, {
+        color: palette.textMuted
+      }], children: commentCount })
+    ] }) : null
   ] });
 }
 function EditorToolbar({
+  bottomInset,
   palette,
   block,
   onTurnInto,
   onDivider,
   onSubPage,
   onDelete,
-  onDone
+  onDone,
+  onMark,
+  onColor,
+  onLink,
+  onMenu,
+  onInsert,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo
 }) {
+  const marks = [{
+    key: "bold",
+    label: "B",
+    style: {
+      fontWeight: "800"
+    }
+  }, {
+    key: "italic",
+    label: "I",
+    style: {
+      fontStyle: "italic",
+      fontWeight: "600"
+    }
+  }, {
+    key: "underline",
+    label: "U",
+    style: {
+      textDecorationLine: "underline",
+      fontWeight: "600"
+    }
+  }, {
+    key: "strikethrough",
+    label: "S",
+    style: {
+      textDecorationLine: "line-through",
+      fontWeight: "600"
+    }
+  }, {
+    key: "code",
+    label: "</>",
+    style: {
+      fontFamily: MONO,
+      fontSize: 13
+    }
+  }];
+  const formattable = block.type !== "code";
+  const tool = (key, label, onPress, child, disabled) => /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress, disabled, style: [styles.tool, {
+    backgroundColor: palette.fill
+  }, disabled && styles.toolDisabled], children: child }, key);
   return /* @__PURE__ */ jsxs(View, { style: [styles.toolbar, {
     backgroundColor: palette.card,
-    borderTopColor: palette.hairline
+    borderTopColor: palette.hairline,
+    paddingBottom: 6 + bottomInset
   }], children: [
-    /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "always", contentContainerStyle: styles.toolbarContent, children: [
-      TURN_INTO.map((t) => {
-        const active = t.type === block.type || t.type === "paragraph" && block.type === "text";
-        return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Turn into ${t.label}`, accessibilityState: {
-          selected: active
-        }, onPress: () => onTurnInto(t.type), style: [styles.tool, {
-          backgroundColor: active ? palette.primarySoft : palette.fill
-        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.toolLabel, {
-          color: active ? palette.primary : palette.text
-        }], children: t.short }) }, t.type);
-      }),
-      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Insert divider", onPress: onDivider, style: [styles.tool, {
-        backgroundColor: palette.fill
-      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "remove-outline", size: 18, color: palette.text }) }),
-      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Insert sub-page", onPress: onSubPage, style: [styles.tool, {
-        backgroundColor: palette.fill
-      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "document-text-outline", size: 17, color: palette.text }) }),
-      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Delete block", onPress: onDelete, style: [styles.tool, {
-        backgroundColor: palette.fill
-      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "trash-outline", size: 17, color: palette.danger }) })
-    ] }),
-    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Done editing", onPress: onDone, style: styles.toolDone, hitSlop: 6, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 22, color: palette.text }) })
+    /* @__PURE__ */ jsx(View, { style: styles.toolbarRow, children: /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "always", contentContainerStyle: styles.toolbarContent, children: [
+      tool("insert", "Insert block", onInsert, /* @__PURE__ */ jsx(Ionicons, { name: "add", size: 20, color: palette.primary })),
+      tool("undo", "Undo", onUndo, /* @__PURE__ */ jsx(Ionicons, { name: "arrow-undo", size: 17, color: palette.text }), !canUndo),
+      tool("redo", "Redo", onRedo, /* @__PURE__ */ jsx(Ionicons, { name: "arrow-redo", size: 17, color: palette.text }), !canRedo),
+      formattable ? marks.map((m) => tool(m.key, m.key, () => onMark(m.key), /* @__PURE__ */ jsx(Text, { style: [styles.toolLabel, {
+        color: palette.text
+      }, m.style], children: m.label }))) : null,
+      formattable ? tool("color", "Text color", onColor, /* @__PURE__ */ jsx(Ionicons, { name: "color-palette-outline", size: 17, color: palette.text })) : null,
+      formattable ? tool("link", "Link", onLink, /* @__PURE__ */ jsx(Ionicons, { name: "link", size: 17, color: palette.text })) : null,
+      tool("menu", "Block actions", onMenu, /* @__PURE__ */ jsx(Ionicons, { name: "ellipsis-horizontal", size: 17, color: palette.text }))
+    ] }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.toolbarRow, children: [
+      /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "always", contentContainerStyle: styles.toolbarContent, children: [
+        TURN_INTO.map((t) => {
+          const active = t.type === block.type || t.type === "paragraph" && block.type === "text";
+          return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Turn into ${t.label}`, accessibilityState: {
+            selected: active
+          }, onPress: () => onTurnInto(t.type), style: [styles.tool, {
+            backgroundColor: active ? palette.primarySoft : palette.fill
+          }], children: /* @__PURE__ */ jsx(Text, { style: [styles.toolLabel, {
+            color: active ? palette.primary : palette.text
+          }], children: t.short }) }, t.type);
+        }),
+        tool("divider", "Insert divider", onDivider, /* @__PURE__ */ jsx(Ionicons, { name: "remove-outline", size: 18, color: palette.text })),
+        tool("subpage", "Insert sub-page", onSubPage, /* @__PURE__ */ jsx(Ionicons, { name: "document-text-outline", size: 17, color: palette.text })),
+        tool("delete", "Delete block", onDelete, /* @__PURE__ */ jsx(Ionicons, { name: "trash-outline", size: 17, color: palette.danger }))
+      ] }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Done editing", onPress: onDone, style: styles.toolDone, hitSlop: 6, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 22, color: palette.text }) })
+    ] })
   ] });
 }
 const styles = StyleSheet.create({
@@ -781,6 +1768,56 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600"
   },
+  retryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    alignSelf: "flex-start",
+    marginTop: 4
+  },
+  retryLabel: {
+    fontSize: 13,
+    fontWeight: "700"
+  },
+  lockBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 12,
+    marginBottom: 10
+  },
+  lockText: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  lockUnlock: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  backlinks: {
+    marginTop: 8
+  },
+  backlinksToggle: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    alignSelf: "flex-start",
+    paddingVertical: 4
+  },
+  backlinksLabel: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  backlinkRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 4,
+    paddingLeft: 4
+  },
   appendArea: {
     minHeight: 160,
     paddingTop: 8
@@ -788,6 +1825,70 @@ const styles = StyleSheet.create({
   startHint: {
     fontSize: 16
   },
+  commentCount: {
+    fontSize: 13,
+    fontWeight: "600"
+  },
+  shareLabel: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  commentBubble: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 999,
+    marginTop: 4
+  },
+  commentBubbleText: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  mediaRow: {
+    marginVertical: 4
+  },
+  toc: {
+    borderLeftWidth: 2,
+    paddingLeft: 12,
+    paddingVertical: 4,
+    gap: 6
+  },
+  tocItem: {
+    fontSize: 14,
+    textDecorationLine: "underline"
+  },
+  toolbarRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  toolDisabled: {
+    opacity: 0.35
+  },
+  caretHit: {
+    paddingTop: 8,
+    width: 18,
+    alignItems: "center"
+  },
+  wash: {
+    paddingHorizontal: 6,
+    borderRadius: 6
+  },
+  langPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 3,
+    alignSelf: "flex-end",
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 999,
+    marginBottom: 6
+  },
+  langPillText: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
   toolbar: {
     flexDirection: "row",
     alignItems: "center",