@adminide-stack/yantra-mobile 12.0.140 → 12.0.141

package/lib/features/webbuilder/components/CodeView.js

@@ -1,9 +1,43 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useMemo,useState,useEffect}from'react';import {Platform,StyleSheet,View,ScrollView,Text}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {CenteredState}from'./ui.js';const MAX_CHARS = 6e4;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useCallback,useEffect,useMemo,useRef}from'react';import {Platform,StyleSheet,View,Text,TextInput,ActivityIndicator,ScrollView,FlatList,Alert}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {preferredFile,matchFileNames,sortTree,normalizeQuery}from'../codeFiles.js';import {CenteredState}from'./ui.js';import {highlightLines,codeLanguage,tokenColors}from'../codeHighlight.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __restKey = (key) => typeof key === "symbol" ? key : key + "";
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const MAX_HIGHLIGHT_CHARS = 2e5;
 const MONO = Platform.select({
   ios: "Menlo",
   android: "monospace",
   default: "monospace"
 });
+const LINE_HEIGHT = 18;
+const MAX_FALLBACK_CHARS = 6e4;
 function orderedFiles(files) {
   const rank = (path) => {
     if (/(^|\/)src\//.test(path) || /(^|\/)(app|pages|components)\//.test(path)) return 0;
@@ -12,7 +46,82 @@ function orderedFiles(files) {
   };
   return Object.keys(files).filter((path) => !/(^|\/)(package-lock\.json|yarn\.lock|pnpm-lock\.yaml)$/.test(path)).sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
 }
-function CodeView({
+function treeRows(files, collapsed) {
+  const rows = [];
+  const seenDirs = /* @__PURE__ */ new Set();
+  for (const path of sortTree(files)) {
+    const parts = path.split("/");
+    let hidden = false;
+    for (let i = 0; i < parts.length - 1 && !hidden; i += 1) {
+      const dir = parts.slice(0, i + 1).join("/");
+      if (!seenDirs.has(dir)) {
+        seenDirs.add(dir);
+        rows.push({
+          kind: "dir",
+          path: dir,
+          name: parts[i],
+          depth: i
+        });
+      }
+      if (collapsed.has(dir)) hidden = true;
+    }
+    if (!hidden) rows.push({
+      kind: "file",
+      path,
+      name: parts[parts.length - 1],
+      depth: parts.length - 1
+    });
+  }
+  return rows.filter((row) => !row.path.split("/").slice(0, -1).some((_, i, arr) => collapsed.has(arr.slice(0, i + 1).join("/"))));
+}
+function FileLines({
+  text,
+  path,
+  theme,
+  focusLine
+}) {
+  const lines = useMemo(() => text.split("\n"), [text]);
+  const tokens = useMemo(() => text.length <= MAX_HIGHLIGHT_CHARS ? highlightLines(lines, codeLanguage(path)) : null, [lines, path, text.length]);
+  const colors = useMemo(() => tokenColors(theme.isDark), [theme.isDark]);
+  const listRef = useRef(null);
+  const gutter = String(lines.length).length * 8 + 14;
+  useEffect(() => {
+    if (!focusLine || focusLine < 1) return;
+    const index = Math.min(focusLine - 1, lines.length - 1);
+    setTimeout(() => {
+      var _a;
+      return (_a = listRef.current) == null ? void 0 : _a.scrollToIndex({
+        index,
+        animated: false,
+        viewPosition: 0.3
+      });
+    }, 50);
+  }, [focusLine, lines.length]);
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, style: styles.fill, contentContainerStyle: styles.hScroll, children: /* @__PURE__ */ jsx(FlatList, { ref: listRef, data: lines, keyExtractor: (_, i) => String(i), getItemLayout: (_, index) => ({
+    length: LINE_HEIGHT,
+    offset: LINE_HEIGHT * index,
+    index
+  }), initialNumToRender: 60, windowSize: 11, renderItem: ({
+    item,
+    index
+  }) => {
+    var _a;
+    return /* @__PURE__ */ jsxs(View, { style: [styles.lineRow, index + 1 === focusLine && {
+      backgroundColor: theme.accentSoft
+    }], children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.lineNo, {
+        width: gutter,
+        color: theme.faint
+      }], children: index + 1 }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.lineText, {
+        color: theme.ink
+      }], children: tokens && ((_a = tokens[index]) == null ? void 0 : _a.length) ? tokens[index].map((tok, t) => /* @__PURE__ */ jsx(Text, { style: colors[tok.kind] ? {
+        color: colors[tok.kind]
+      } : null, children: tok.text }, t)) : item || " " })
+    ] });
+  } }) });
+}
+function PostedFiles({
   files,
   theme,
   onAsk
@@ -24,76 +133,597 @@ function CodeView({
     var _a2;
     if (!path || !paths.includes(path)) setPath((_a2 = paths[0]) != null ? _a2 : null);
   }, [paths, path]);
-  if (!files || paths.length === 0) {
-    return /* @__PURE__ */ jsx(CenteredState, { icon: "code-tags", title: "No code to show yet", body: "The source appears here once a build finishes.", theme, primary: {
+  if (!files || !paths.length) {
+    return /* @__PURE__ */ jsx(CenteredState, { icon: "code-tags", title: "No code yet", body: "The site's files show here once the agent has built it.", theme, primary: {
       label: "Ask the agent",
-      icon: "creation",
       onPress: onAsk
-    }, testID: "webbuilder-code-empty" });
+    } });
   }
-  const source = path ? (_a = files[path]) != null ? _a : "" : "";
-  const shown = source.length > MAX_CHARS ? `${source.slice(0, MAX_CHARS)}
-
-\u2026 (cut for the phone)` : source;
-  return /* @__PURE__ */ jsxs(View, { style: styles.fill, testID: "webbuilder-code", children: [
-    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: [styles.tabs, {
-      borderBottomColor: theme.border,
+  const text = path ? (_a = files[path]) != null ? _a : "" : "";
+  return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.tabs, children: paths.map((p) => /* @__PURE__ */ jsx(Tap, { onPress: () => setPath(p), style: [styles.tab, {
+      borderColor: theme.border,
+      backgroundColor: p === path ? theme.chip : "transparent"
+    }], pressedStyle: DIM, children: /* @__PURE__ */ jsx(Text, { style: [styles.tabText, {
+      color: theme.ink
+    }], numberOfLines: 1, children: p.split("/").pop() }) }, p)) }),
+    /* @__PURE__ */ jsx(FileLines, { text: text.length > MAX_FALLBACK_CHARS ? text.slice(0, MAX_FALLBACK_CHARS) : text, path: path != null ? path : "", theme })
+  ] });
+}
+function CodeView({
+  files,
+  build = null,
+  code,
+  busy = false,
+  onWake,
+  theme,
+  onAsk
+}) {
+  var _a, _b;
+  const [tab, setTab] = useState("files");
+  const [tree, setTree] = useState(null);
+  const [treeError, setTreeError] = useState(null);
+  const [asleep, setAsleep] = useState(false);
+  const [waking, setWaking] = useState(false);
+  const [loadingTree, setLoadingTree] = useState(false);
+  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const [open, setOpen] = useState(null);
+  const [opening, setOpening] = useState(false);
+  const [focusLine, setFocusLine] = useState(null);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [drafts, setDrafts] = useState({});
+  const [notice, setNotice] = useState(null);
+  const buildKey = (_a = build == null ? void 0 : build.key) != null ? _a : null;
+  const loadTree = useCallback(() => {
+    if (!code || !build) return;
+    setLoadingTree(true);
+    setTreeError(null);
+    setAsleep(false);
+    code.listFiles(build).then((r) => {
+      if (r.ok && r.files) setTree({
+        files: r.files,
+        partial: Boolean(r.partial),
+        saved: Boolean(r.saved)
+      });
+      else {
+        setAsleep(Boolean(r.asleep));
+        setTreeError(r.error || "Could not list the project files.");
+      }
+    }).catch(() => setTreeError("Could not list the project files.")).finally(() => setLoadingTree(false));
+  }, [code, build]);
+  useEffect(() => {
+    setTree(null);
+    setOpen(null);
+    setEditing(false);
+    setDrafts({});
+    loadTree();
+  }, [buildKey, build == null ? void 0 : build.updatedAt, Boolean(code)]);
+  const openFile = useCallback((path, line) => {
+    if (!code || !build) return;
+    setOpening(true);
+    setEditing(false);
+    setFocusLine(line != null ? line : null);
+    code.readFile(build, path, Boolean(tree == null ? void 0 : tree.saved)).then((r) => {
+      var _a2, _b2;
+      if (!r.ok) {
+        setNotice(r.error || "Could not read the file.");
+        return;
+      }
+      setOpen({
+        path,
+        base: (_a2 = r.content) != null ? _a2 : "",
+        mode: (_b2 = r.mode) != null ? _b2 : {
+          kind: "error",
+          message: "The file came back empty."
+        },
+        saved: Boolean(r.saved)
+      });
+      setNotice(null);
+    }).catch(() => setNotice("Could not read the file.")).finally(() => setOpening(false));
+  }, [code, build, tree == null ? void 0 : tree.saved]);
+  useEffect(() => {
+    if (tree && !open && tree.files.length) {
+      const first = preferredFile(tree.files);
+      if (first) openFile(first);
+    }
+  }, [tree]);
+  const draft = open ? (_b = drafts[open.path]) != null ? _b : open.base : "";
+  const dirty = Boolean(open && drafts[open.path] !== void 0 && drafts[open.path] !== open.base);
+  const readOnlyReason = (() => {
+    if (!open) return null;
+    if ((tree == null ? void 0 : tree.saved) || open.saved) return "Viewing saved code. Wake the site to edit.";
+    if (busy) return "Read-only while the agent works on the site.";
+    if (open.mode.kind === "readonly") return "This file is over 1 MB, so it opens read-only.";
+    return null;
+  })();
+  const save = (force = false) => {
+    if (!code || !build || !open) return;
+    setSaving(true);
+    code.saveFile(build, open.path, open.base, draft, force).then((r) => {
+      var _a2;
+      if (r.conflict) {
+        const disk = (_a2 = r.disk) != null ? _a2 : "";
+        Alert.alert("This file changed", "It changed on the site since you opened it (the agent, or someone else). Keep your version or load theirs?", [{
+          text: "Load theirs",
+          onPress: () => {
+            setOpen(__spreadProps(__spreadValues({}, open), {
+              base: disk
+            }));
+            setDrafts((prev) => {
+              var _a3;
+              const _b2 = prev, {
+                [_a3 = open.path]: _drop
+              } = _b2, rest = __objRest(_b2, [
+                __restKey(_a3)
+              ]);
+              return rest;
+            });
+            setEditing(false);
+          }
+        }, {
+          text: "Overwrite",
+          style: "destructive",
+          onPress: () => save(true)
+        }, {
+          text: "Cancel",
+          style: "cancel"
+        }]);
+        return;
+      }
+      if (!r.ok) {
+        setNotice(r.error || "Could not save the file.");
+        return;
+      }
+      setOpen(__spreadProps(__spreadValues({}, open), {
+        base: draft
+      }));
+      setDrafts((prev) => {
+        var _a3;
+        const _b2 = prev, {
+          [_a3 = open.path]: _drop
+        } = _b2, rest = __objRest(_b2, [
+          __restKey(_a3)
+        ]);
+        return rest;
+      });
+      setEditing(false);
+      setNotice(r.unchanged ? "No changes to save." : "Saved. The agent will keep this change.");
+    }).catch(() => setNotice("Could not save the file.")).finally(() => setSaving(false));
+  };
+  const [query, setQuery] = useState("");
+  const [searching, setSearching] = useState(false);
+  const [results, setResults] = useState(null);
+  const nameMatches = useMemo(() => tree ? matchFileNames(tree.files, query) : [], [tree, query]);
+  const runSearch = () => {
+    if (!code || !build || !normalizeQuery(query)) return;
+    setSearching(true);
+    const openDocs = __spreadValues(__spreadValues({}, open ? {
+      [open.path]: open.base
+    } : {}), drafts);
+    code.search(build, query, !(tree == null ? void 0 : tree.saved), openDocs).then(setResults).catch(() => setResults(null)).finally(() => setSearching(false));
+  };
+  if (!code || !build) return /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk });
+  const rows = tree ? treeRows(tree.files, collapsed) : [];
+  const header = /* @__PURE__ */ jsx(View, { style: [styles.segment, {
+    backgroundColor: theme.chip
+  }], children: ["files", "search"].map((value) => /* @__PURE__ */ jsxs(Tap, { onPress: () => setTab(value), accessibilityRole: "button", accessibilityState: {
+    selected: tab === value
+  }, style: [styles.segmentItem, tab === value && {
+    backgroundColor: theme.card
+  }], pressedStyle: DIM, children: [
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: value === "files" ? "file-tree-outline" : "magnify", size: 16, color: tab === value ? theme.ink : theme.muted }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.segmentText, {
+      color: tab === value ? theme.ink : theme.muted
+    }], children: value === "files" ? "Files" : "Search" })
+  ] }, value)) });
+  const noticeBar = notice ? /* @__PURE__ */ jsx(Tap, { onPress: () => setNotice(null), style: [styles.notice, {
+    backgroundColor: theme.chip
+  }], pressedStyle: DIM, children: /* @__PURE__ */ jsx(Text, { style: [styles.noticeText, {
+    color: theme.ink
+  }], children: notice }) }) : null;
+  if (tab === "files" && open) {
+    let body;
+    if (open.mode.kind === "binary") {
+      body = /* @__PURE__ */ jsx(CenteredState, { icon: "file-image-outline", title: "Can't show this file", body: "Images, fonts and other binary files aren't shown here.", theme });
+    } else if (open.mode.kind === "error") {
+      body = /* @__PURE__ */ jsx(CenteredState, { icon: "alert-circle-outline", title: "Couldn't open this file", body: open.mode.message, theme });
+    } else if (editing) {
+      body = /* @__PURE__ */ jsx(TextInput, { value: draft, onChangeText: (text) => setDrafts((prev) => __spreadProps(__spreadValues({}, prev), {
+        [open.path]: text
+      })), multiline: true, autoCapitalize: "none", autoCorrect: false, spellCheck: false, textAlignVertical: "top", style: [styles.editor, {
+        color: theme.ink,
+        backgroundColor: theme.card
+      }], accessibilityLabel: `Edit ${open.path}`, testID: "webbuilder-code-editor" });
+    } else {
+      body = /* @__PURE__ */ jsx(FileLines, { text: draft, path: open.path, theme, focusLine });
+    }
+    const canEdit = !readOnlyReason && open.mode.kind === "edit";
+    return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles.fileBar, {
+        borderBottomColor: theme.border
+      }], children: [
+        /* @__PURE__ */ jsx(Tap, { onPress: () => {
+          setOpen(null);
+          setEditing(false);
+        }, accessibilityRole: "button", accessibilityLabel: "All files", hitSlop: 8, pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 24, color: theme.ink }) }),
+        /* @__PURE__ */ jsxs(Text, { style: [styles.filePath, {
+          color: theme.ink
+        }], numberOfLines: 1, children: [
+          open.path,
+          dirty ? " \u2022" : ""
+        ] }),
+        editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Tap, { onPress: () => setEditing(false), style: styles.barAction, pressedStyle: DIM, accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.barActionText, {
+            color: theme.muted
+          }], children: "Done" }) }),
+          /* @__PURE__ */ jsx(Tap, { onPress: () => save(), disabled: saving || !dirty, style: [styles.saveButton, {
+            backgroundColor: theme.accent
+          }, (!dirty || saving) && styles.disabled], pressedStyle: DIM, accessibilityRole: "button", testID: "webbuilder-code-save", children: saving ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accentInk }) : /* @__PURE__ */ jsx(Text, { style: [styles.saveText, {
+            color: theme.accentInk
+          }], children: "Save" }) })
+        ] }) : /* @__PURE__ */ jsxs(Tap, { onPress: () => setEditing(true), disabled: !canEdit, style: [styles.barAction, !canEdit && styles.disabled], pressedStyle: DIM, accessibilityRole: "button", testID: "webbuilder-code-edit", children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "pencil-outline", size: 18, color: theme.ink }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.barActionText, {
+            color: theme.ink
+          }], children: "Edit" })
+        ] })
+      ] }),
+      readOnlyReason ? /* @__PURE__ */ jsxs(View, { style: [styles.banner, {
+        backgroundColor: theme.chip
+      }], children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "lock-outline", size: 14, color: theme.muted }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.bannerText, {
+          color: theme.muted
+        }], children: readOnlyReason })
+      ] }) : null,
+      noticeBar,
+      body
+    ] });
+  }
+  if (tab === "search") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+      header,
+      /* @__PURE__ */ jsxs(View, { style: [styles.searchBox, {
+        borderColor: theme.border,
+        backgroundColor: theme.card
+      }], children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "magnify", size: 18, color: theme.muted }),
+        /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, onSubmitEditing: runSearch, returnKeyType: "search", placeholder: "Search the code", placeholderTextColor: theme.faint, autoCapitalize: "none", autoCorrect: false, style: [styles.searchInput, {
+          color: theme.ink
+        }], testID: "webbuilder-code-search" }),
+        searching ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(ScrollView, { style: styles.fill, keyboardShouldPersistTaps: "handled", children: [
+        nameMatches.length ? /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: theme.muted
+        }], children: "Files" }) : null,
+        nameMatches.map((path) => /* @__PURE__ */ jsxs(Tap, { onPress: () => {
+          setTab("files");
+          openFile(path);
+        }, style: styles.resultRow, pressedStyle: DIM, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "file-document-outline", size: 16, color: theme.muted }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.resultPath, {
+            color: theme.ink
+          }], numberOfLines: 1, children: path })
+        ] }, `name-${path}`)),
+        results ? /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: theme.muted
+        }], children: results.result.total ? `${results.result.total}${results.result.truncated ? "+" : ""} matches${results.source === "open-files" ? " in the open files" : ""}` : "No matches" }) : null,
+        results == null ? void 0 : results.result.files.map((file) => /* @__PURE__ */ jsxs(View, { style: styles.hitGroup, children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.resultPath, {
+            color: theme.ink
+          }], numberOfLines: 1, children: file.path }),
+          file.matches.map((m) => /* @__PURE__ */ jsxs(Tap, { onPress: () => {
+            setTab("files");
+            openFile(file.path, m.line);
+          }, style: styles.hitRow, pressedStyle: DIM, children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.hitLine, {
+              color: theme.faint
+            }], children: m.line }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.hitText, {
+              color: theme.ink
+            }], numberOfLines: 1, children: m.ranges.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              m.text.slice(0, m.ranges[0][0]),
+              /* @__PURE__ */ jsx(Text, { style: {
+                backgroundColor: theme.accentSoft,
+                color: theme.accent
+              }, children: m.text.slice(m.ranges[0][0], m.ranges[0][1]) }),
+              m.text.slice(m.ranges[0][1])
+            ] }) : m.text })
+          ] }, `${file.path}:${m.line}`))
+        ] }, `hit-${file.path}`)),
+        !results && !nameMatches.length ? /* @__PURE__ */ jsx(Text, { style: [styles.searchHint, {
+          color: theme.muted
+        }], children: "Find text across the site's files: a name, a class, a word on the page." }) : null
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.fill, children: [
+    header,
+    (tree == null ? void 0 : tree.saved) ? /* @__PURE__ */ jsxs(View, { style: [styles.banner, {
+      backgroundColor: theme.chip
+    }], children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "archive-outline", size: 14, color: theme.muted }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.bannerText, {
+        color: theme.muted
+      }], children: "Viewing saved code. Wake the site to edit." })
+    ] }) : null,
+    noticeBar,
+    loadingTree && !tree ? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.accent }) }) : null,
+    treeError && !tree && !(asleep && files) ? /* @__PURE__ */ jsx(CenteredState, { icon: asleep ? "power-sleep" : "folder-alert-outline", title: asleep ? "The site is asleep" : "Couldn't load the files", body: treeError, theme, busy: waking, primary: asleep && onWake ? {
+      label: waking ? "Waking the site\u2026" : "Wake the site",
+      onPress: () => {
+        setWaking(true);
+        Promise.resolve(onWake()).catch(() => void 0).finally(() => {
+          setWaking(false);
+          loadTree();
+        });
+      }
+    } : {
+      label: "Try again",
+      onPress: loadTree
+    }, secondary: asleep && onWake ? {
+      label: "Try again",
+      onPress: loadTree
+    } : void 0 }) : null,
+    treeError && !tree && asleep && files ? /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk }) : null,
+    tree ? /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (row) => `${row.kind}:${row.path}`, refreshing: loadingTree, onRefresh: loadTree, ListFooterComponent: tree.partial ? /* @__PURE__ */ jsxs(Text, { style: [styles.searchHint, {
+      color: theme.muted
+    }], children: [
+      "Showing the first ",
+      tree.files.length,
+      " files."
+    ] }) : null, renderItem: ({
+      item
+    }) => {
+      const isDir = item.kind === "dir";
+      const isCollapsed = collapsed.has(item.path);
+      let treeIcon = "file-document-outline";
+      if (isDir) treeIcon = isCollapsed ? "folder-outline" : "folder-open-outline";
+      return /* @__PURE__ */ jsxs(Tap, { onPress: () => {
+        if (isDir) {
+          setCollapsed((prev) => {
+            const next = new Set(prev);
+            if (next.has(item.path)) next.delete(item.path);
+            else next.add(item.path);
+            return next;
+          });
+        } else {
+          openFile(item.path);
+        }
+      }, style: [styles.treeRow, {
+        paddingLeft: 16 + item.depth * 16
+      }], pressedStyle: DIM, accessibilityRole: "button", accessibilityLabel: isDir ? `Folder ${item.name}` : `Open ${item.path}`, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: treeIcon, size: 18, color: isDir ? theme.accent : theme.muted }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.treeName, {
+          color: theme.ink
+        }, isDir && styles.treeDir], numberOfLines: 1, children: item.name }),
+        !isDir && drafts[item.path] !== void 0 ? /* @__PURE__ */ jsx(View, { style: [styles.dirtyDot, {
+          backgroundColor: theme.accent
+        }] }) : null
+      ] });
+    } }) : null,
+    opening ? /* @__PURE__ */ jsx(View, { style: [styles.opening, {
       backgroundColor: theme.card
-    }], contentContainerStyle: styles.tabsContent, children: paths.map((p) => {
-      const active = p === path;
-      return /* @__PURE__ */ jsxs(Tap, { onPress: () => setPath(p), accessibilityRole: "tab", accessibilityState: {
-        selected: active
-      }, style: [styles.tab, {
-        borderColor: active ? theme.accent : theme.border
-      }, active && {
-        backgroundColor: theme.accentSoft
-      }], pressedStyle: DIM, children: [
-        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "file-code-outline", size: 14, color: active ? theme.accent : theme.muted }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.tabLabel, {
-          color: active ? theme.accent : theme.muted
-        }], numberOfLines: 1, children: p })
-      ] }, p);
-    }) }),
-    /* @__PURE__ */ jsx(ScrollView, { style: [styles.fill, {
-      backgroundColor: theme.code
-    }], children: /* @__PURE__ */ jsx(ScrollView, { horizontal: true, contentContainerStyle: styles.codePad, children: /* @__PURE__ */ jsx(Text, { selectable: true, style: [styles.code, {
-      color: theme.codeInk,
-      fontFamily: MONO
-    }], children: shown }) }) })
+    }], children: /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.accent }) }) : null
   ] });
 }
 const styles = StyleSheet.create({
   fill: {
     flex: 1
   },
+  center: {
+    padding: 32,
+    alignItems: "center"
+  },
+  hScroll: {
+    minWidth: "100%"
+  },
+  lineRow: {
+    flexDirection: "row",
+    height: LINE_HEIGHT,
+    alignItems: "center"
+  },
+  lineNo: {
+    fontFamily: MONO,
+    fontSize: 11,
+    textAlign: "right",
+    paddingRight: 10
+  },
+  lineText: {
+    fontFamily: MONO,
+    fontSize: 12.5,
+    paddingRight: 24
+  },
   tabs: {
     flexGrow: 0,
-    borderBottomWidth: StyleSheet.hairlineWidth
-  },
-  tabsContent: {
-    gap: 6,
-    paddingHorizontal: 10,
+    paddingHorizontal: 12,
     paddingVertical: 8
   },
   tab: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth,
+    marginRight: 8
+  },
+  tabText: {
+    fontSize: 13,
+    fontWeight: "500",
+    maxWidth: 180
+  },
+  segment: {
+    flexDirection: "row",
+    margin: 12,
+    borderRadius: 12,
+    padding: 3
+  },
+  segmentItem: {
+    flex: 1,
     flexDirection: "row",
     alignItems: "center",
-    gap: 5,
-    maxWidth: 220,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
-    borderWidth: StyleSheet.hairlineWidth
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 8,
+    borderRadius: 10
   },
-  tabLabel: {
-    fontSize: 12,
+  segmentText: {
+    fontSize: 14,
     fontWeight: "600"
   },
-  codePad: {
-    padding: 14
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginHorizontal: 12,
+    marginBottom: 8,
+    padding: 10,
+    borderRadius: 10
+  },
+  bannerText: {
+    fontSize: 13,
+    flex: 1
   },
-  code: {
+  notice: {
+    marginHorizontal: 12,
+    marginBottom: 8,
+    padding: 10,
+    borderRadius: 10
+  },
+  noticeText: {
+    fontSize: 13
+  },
+  treeRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingVertical: 10,
+    paddingRight: 16
+  },
+  treeName: {
+    fontSize: 14,
+    flex: 1
+  },
+  treeDir: {
+    fontWeight: "600"
+  },
+  dirtyDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  fileBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  filePath: {
+    flex: 1,
+    fontFamily: MONO,
+    fontSize: 13
+  },
+  barAction: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6
+  },
+  barActionText: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+    borderRadius: 10,
+    minWidth: 64,
+    alignItems: "center"
+  },
+  saveText: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  editor: {
+    flex: 1,
+    fontFamily: MONO,
+    fontSize: 13,
+    padding: 12,
+    lineHeight: LINE_HEIGHT
+  },
+  searchBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: 12,
+    marginBottom: 8,
+    paddingHorizontal: 12,
+    borderRadius: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    height: 44
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 15
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    textTransform: "uppercase",
+    marginHorizontal: 16,
+    marginTop: 12,
+    marginBottom: 4
+  },
+  resultRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10
+  },
+  resultPath: {
+    fontFamily: MONO,
+    fontSize: 13,
+    flexShrink: 1
+  },
+  hitGroup: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    gap: 2
+  },
+  hitRow: {
+    flexDirection: "row",
+    gap: 10,
+    paddingVertical: 6
+  },
+  hitLine: {
+    fontFamily: MONO,
     fontSize: 12,
-    lineHeight: 18
+    minWidth: 32,
+    textAlign: "right"
+  },
+  hitText: {
+    fontFamily: MONO,
+    fontSize: 12.5,
+    flex: 1
+  },
+  searchHint: {
+    fontSize: 13,
+    textAlign: "center",
+    padding: 24
+  },
+  opening: {
+    position: "absolute",
+    top: 70,
+    alignSelf: "center",
+    padding: 10,
+    borderRadius: 20
   }
-});export{CodeView,orderedFiles};//# sourceMappingURL=CodeView.js.map
+});export{CodeView,orderedFiles,treeRows};//# sourceMappingURL=CodeView.js.map