@ai-ecoverse/slicc-spectrum 1.86.5 → 1.86.7

package/dist/slicc-ui.js

@@ -10134,6 +10134,103 @@ var ViewSet = class extends ViewState {
     return (event2) => this.toggle(id, event2.currentTarget.open);
   }
 };
+function keyOf(row) {
+  return row.getAttribute("data-id") ?? row.getAttribute("data-path");
+}
+function within(row, box) {
+  const rect = row.getBoundingClientRect();
+  return rect.height > 0 && rect.top >= box.top && rect.bottom <= box.bottom;
+}
+var ViewScroll = class {
+  #state;
+  #options;
+  #el = null;
+  #pending = false;
+  #set = -1;
+  #holder = null;
+  #resize = new ResizeObserver(() => {
+    this.#pending = true;
+    this.#restore();
+  });
+  #scrolled = () => this.#save();
+  constructor(host4, key2, options) {
+    this.#state = new ViewState(host4, key2, () => ({ spot: null }));
+    this.#options = options;
+    host4.addController(this);
+  }
+  #rows(el) {
+    const rows2 = this.#options.rows;
+    const found = rows2 ? [...(el.shadowRoot ?? el).querySelectorAll(rows2)] : [];
+    return found.filter((row) => keyOf(row) !== null);
+  }
+  #bind(el) {
+    if (el === this.#el) return;
+    this.#el?.removeEventListener("scroll", this.#scrolled);
+    this.#resize.disconnect();
+    this.#el = el;
+    this.#pending = true;
+    this.#set = -1;
+    if (!el) return;
+    el.style.overflowAnchor = "none";
+    el.addEventListener("scroll", this.#scrolled, { passive: true });
+    this.#resize.observe(el);
+  }
+  #save() {
+    const el = this.#el;
+    if (!el?.clientHeight || Math.abs(el.scrollTop - this.#set) < 1) return;
+    this.#set = -1;
+    this.#pending = false;
+    const box = el.getBoundingClientRect();
+    const current = this.#options.current;
+    const chosen = current ? (el.shadowRoot ?? el).querySelector(current)?.closest("[data-id], [data-path]") ?? null : null;
+    const rows2 = this.#rows(el);
+    const row = (chosen && within(chosen, box) ? chosen : null) ?? rows2.find((item2) => within(item2, box)) ?? rows2.find((item2) => item2.getBoundingClientRect().bottom > box.top);
+    this.#state.value.spot = {
+      top: el.scrollTop,
+      key: row ? keyOf(row) : null,
+      offset: row ? row.getBoundingClientRect().top - box.top : 0,
+      end: el.scrollTop > 0 && el.scrollTop >= el.scrollHeight - el.clientHeight - 1
+    };
+  }
+  #restore() {
+    const el = this.#el;
+    if (!el?.clientHeight || !this.#pending) return;
+    const spot = this.#state.value.spot;
+    if (!spot) {
+      this.#pending = false;
+      return;
+    }
+    const max2 = el.scrollHeight - el.clientHeight;
+    const rows2 = this.#rows(el);
+    const row = spot.key ? rows2.find((item2) => keyOf(item2) === spot.key) : void 0;
+    let target2 = spot.end ? max2 : spot.top;
+    if (row && !spot.end) {
+      const rect = row.getBoundingClientRect();
+      const offset3 = Math.min(spot.offset, Math.max(0, el.clientHeight - rect.height));
+      target2 = el.scrollTop + rect.top - el.getBoundingClientRect().top - offset3;
+    }
+    el.scrollTop = Math.min(target2, max2);
+    this.#set = el.scrollTop;
+    const gone3 = !spot.end && !!spot.key && !row;
+    if (gone3 ? rows2.length > 0 : target2 <= max2 + 1) this.#pending = false;
+  }
+  hostUpdated() {
+    const el = this.#options.scroller();
+    this.#bind(el);
+    if (!el) return;
+    const holder = this.#state.value;
+    if (holder !== this.#holder) {
+      if (this.#holder && !holder.spot) el.scrollTop = 0;
+      this.#holder = holder;
+      this.#pending = true;
+    }
+    for (const child of (el.shadowRoot ?? el).children) this.#resize.observe(child);
+    this.#restore();
+  }
+  hostDisconnected() {
+    this.#bind(null);
+  }
+};
 
 // src/app/files.ts
 function relative(path) {
@@ -10269,6 +10366,7 @@ var errorCss = i`
     color: var(--swc-negative-content-color-default);
   }
 `;
+var blank = { scroll: 0, selected: [], focused: null, shown: false, end: false };
 var SliccFiles = class extends ModelElement {
   static properties = {
     ...ModelElement.properties,
@@ -10288,6 +10386,8 @@ var SliccFiles = class extends ModelElement {
   #reveal = null;
   #folders = new ViewState(this, "files", () => null);
   #applied = null;
+  #view = new ViewState(this, "files:view", () => ({ tree: null }));
+  #holder = null;
   constructor() {
     super();
     this.count = 0;
@@ -10411,6 +10511,7 @@ var SliccFiles = class extends ModelElement {
     `
   ];
   subscribe(model) {
+    if (this.#holder && this.#view.value !== this.#holder) this.#entries = [];
     void model.files.list().then((entries) => this.#load(entries));
     this.#mounts(model.files);
     return [
@@ -10443,14 +10544,20 @@ var SliccFiles = class extends ModelElement {
     const tree = this.#tree();
     const changes2 = this.model ? changesOf(this.model).changes() : [];
     if (!tree) return;
-    if (tree.paths.length === 0)
+    const holder = this.#view.value;
+    const moved2 = !!this.#holder && holder !== this.#holder;
+    if (tree.paths.length === 0 || moved2) {
       tree.expanded = this.#folders.value ?? ancestors(changes2.map((change) => change.path));
+      const view = holder.tree ?? (moved2 ? blank : null);
+      if (view) tree.view = view;
+      this.#holder = holder;
+    }
     tree.paths = treePaths(this.#entries);
     tree.gitStatus = treeStatus(changes2);
     this.#show();
     if (this.#pending) {
       this.#pending = false;
-      requestAnimationFrame(() => tree.focus());
+      requestAnimationFrame(() => this.focusOn("slicc-file-tree"));
     }
   }
   #show() {
@@ -10615,8 +10722,14 @@ var SliccFiles = class extends ModelElement {
         @tree-matches=${this.#matches}
         @tree-search-close=${this.#closed}
         @tree-expand=${this.#expand}
+        @tree-view=${this.#viewed}
       ></slicc-file-tree>`;
   }
+  #viewed(event2) {
+    event2.stopPropagation();
+    const holder = this.#view.value;
+    if (holder === this.#holder) holder.tree = event2.detail;
+  }
   #expand(event2) {
     this.#applied = event2.detail.expanded;
     this.#folders.value = event2.detail.expanded;
@@ -10838,6 +10951,10 @@ function freezerOrder(rows2) {
   return [...rows2].sort((a23, b13) => Number(!!b13.live) - Number(!!a23.live) || b13.frozenAt - a23.frozenAt);
 }
 var SliccFreezer = class extends ModelElement {
+  #scroll = new ViewScroll(this, "freezer:scroll", {
+    scroller: () => this.renderRoot.querySelector(".list"),
+    rows: ".card[data-id]"
+  });
   static styles = [
     shared,
     panelCss,
@@ -10871,6 +10988,7 @@ var SliccFreezer = class extends ModelElement {
         -webkit-box-orient: vertical;
         -webkit-line-clamp: 2;
         overflow: hidden;
+        text-overflow: ellipsis;
         overflow-wrap: anywhere;
         line-height: var(--swc-line-height-100);
       }
@@ -11096,6 +11214,10 @@ var SliccMonitor = class extends ModelElement {
     copied: { state: true }
   };
   #sections = new ViewState(this, "monitor", () => ({}));
+  #scroll = new ViewScroll(this, "monitor:scroll", {
+    scroller: () => this.renderRoot.querySelector(".body"),
+    rows: ".section[data-id], .row[data-id]"
+  });
   constructor() {
     super();
     this.copied = null;
@@ -11565,6 +11687,11 @@ var SliccAgents = class extends ModelElement {
   static properties = { ...ModelElement.properties, errors: { state: true } };
   #expanded = new ViewSet(this, "agents");
   #revealed = new ViewState(this, "agents:revealed", () => "");
+  #scroll = new ViewScroll(this, "agents:scroll", {
+    scroller: () => this.renderRoot.querySelector(".list"),
+    rows: "li[data-id]",
+    current: "li[aria-selected='true']"
+  });
   #pointer = false;
   #modality = (event2) => {
     this.#pointer = event2.type === "pointerdown";
@@ -22431,10 +22558,10 @@ function getBuiltInFileIconName(token2) {
 function isColoredBuiltInIconSet(set) {
   return set !== "none" && COLORED_SETS.has(set);
 }
-function resolveBuiltInFileIconToken(set, fileName, extensionCandidates) {
+function resolveBuiltInFileIconToken(set, fileName2, extensionCandidates) {
   if (set === "minimal" || set === "none") return;
   const isComplete = set === "complete";
-  const fileNameToken = BUILT_IN_FILE_NAME_TOKENS[fileName.toLowerCase()];
+  const fileNameToken = BUILT_IN_FILE_NAME_TOKENS[fileName2.toLowerCase()];
   if (fileNameToken != null) {
     if (isComplete || STANDARD_TIER_TOKENS.has(fileNameToken)) return fileNameToken;
   }
@@ -22487,8 +22614,8 @@ var normalizeIconRuleKey = (value) => value.trim().toLowerCase();
 var getBaseFileName = (path) => {
   return path.split("/").at(-1) ?? path;
 };
-var getExtensionCandidates = (fileName) => {
-  const segments = fileName.toLowerCase().split(".");
+var getExtensionCandidates = (fileName2) => {
+  const segments = fileName2.toLowerCase().split(".");
   const candidates2 = [];
   for (let index = 1; index < segments.length; index += 1) candidates2.push(segments.slice(index).join("."));
   return candidates2;
@@ -22507,23 +22634,23 @@ function createFileTreeIconResolver(icons3) {
   const normalizedIcons = normalizeFileTreeIcons(icons3);
   const iconRemap = normalizedIcons.remap;
   const iconByFileName = /* @__PURE__ */ new Map();
-  for (const [fileName, icon] of Object.entries(normalizedIcons.byFileName ?? {})) iconByFileName.set(fileName.toLowerCase(), icon);
+  for (const [fileName2, icon] of Object.entries(normalizedIcons.byFileName ?? {})) iconByFileName.set(fileName2.toLowerCase(), icon);
   const iconByFileExtension = /* @__PURE__ */ new Map();
   for (const [extension, icon] of Object.entries(normalizedIcons.byFileExtension ?? {})) iconByFileExtension.set(normalizeIconRuleKey(extension), icon);
   const iconByFileNameContains = Object.entries(normalizedIcons.byFileNameContains ?? {}).map(([needle, icon]) => [needle.toLowerCase(), icon]);
   const resolveIcon = (name, filePath) => {
     if (name === "file-tree-icon-file" && filePath != null) {
-      const fileName = getBaseFileName(filePath);
-      const lowerFileName = fileName.toLowerCase();
+      const fileName2 = getBaseFileName(filePath);
+      const lowerFileName = fileName2.toLowerCase();
       const fileNameEntry = iconByFileName.get(lowerFileName);
       if (fileNameEntry != null) return remapEntryToIcon(fileNameEntry, name);
       for (const [needle, matchEntry] of iconByFileNameContains) if (lowerFileName.includes(needle)) return remapEntryToIcon(matchEntry, name);
-      const extensionCandidates = getExtensionCandidates(fileName);
+      const extensionCandidates = getExtensionCandidates(fileName2);
       for (const extension of extensionCandidates) {
         const extensionEntry = iconByFileExtension.get(extension);
         if (extensionEntry != null) return remapEntryToIcon(extensionEntry, name);
       }
-      const builtInToken = resolveBuiltInFileIconToken(normalizedIcons.set, fileName, extensionCandidates);
+      const builtInToken = resolveBuiltInFileIconToken(normalizedIcons.set, fileName2, extensionCandidates);
       if (builtInToken != null && normalizedIcons.set !== "none") {
         if (builtInToken === "default") {
           const remappedEntry2 = iconRemap?.[name];
@@ -35402,6 +35529,11 @@ var SliccBrowser = class extends ModelElement {
   #expanded = new ViewSet(this, "browser");
   #recent = new ViewState(this, "browser:recent", () => false);
   #chosen = new ViewState(this, "browser:tab", () => void 0);
+  #scroll = new ViewScroll(this, "browser:scroll", {
+    scroller: () => this.renderRoot.querySelector(".cards")?.parentElement ?? null,
+    rows: ".cards > li[data-id]",
+    current: ".cards .window[aria-current='true']"
+  });
   constructor() {
     super();
     this.address = "";
@@ -36456,6 +36588,10 @@ var SliccChanges = class extends ModelElement {
     copied: { state: true },
     uncopied: { state: true }
   };
+  #scroll = new ViewScroll(this, "changes:scroll", {
+    scroller: () => this.renderRoot.querySelector(".bar ~ ul"),
+    rows: "li[data-path]"
+  });
   constructor() {
     super();
     this.error = "";
@@ -40198,6 +40334,11 @@ var SliccMemory = class extends ModelElement {
     editing: { state: true }
   };
   #open = new ViewState(this, "memory", () => null);
+  #scroll = new ViewScroll(this, "memory:scroll", {
+    scroller: () => this.renderRoot.querySelector(".list"),
+    rows: ".row[data-id]",
+    current: ".row[data-open]"
+  });
   constructor() {
     super();
     this.query = "";
@@ -41844,6 +41985,7 @@ var SliccSettings = class extends ThemedElement {
     problem: { state: true },
     blocked: { state: true }
   };
+  #scroll = new ViewScroll(this, "settings:scroll", { scroller: () => this, rows: "[data-id]" });
   constructor() {
     super();
     this.pending = /* @__PURE__ */ new Set();
@@ -58827,21 +58969,21 @@ var EXTENSION_TO_FILE_FORMAT = {
   zsh: "zsh",
   sty: "tex"
 };
-function getFiletypeFromFileName(fileName) {
-  const format = matchFiletypeFromName(fileName);
+function getFiletypeFromFileName(fileName2) {
+  const format = matchFiletypeFromName(fileName2);
   if (format != null) return format;
-  const baseName = fileName.split(/[/\\]/).pop() ?? fileName;
-  return baseName === fileName ? "text" : matchFiletypeFromName(baseName) ?? "text";
+  const baseName = fileName2.split(/[/\\]/).pop() ?? fileName2;
+  return baseName === fileName2 ? "text" : matchFiletypeFromName(baseName) ?? "text";
 }
-function matchFiletypeFromName(fileName) {
-  if (CUSTOM_EXTENSION_TO_FILE_FORMAT.has(fileName)) return CUSTOM_EXTENSION_TO_FILE_FORMAT.get(fileName) ?? "text";
-  if (Object.hasOwn(EXTENSION_TO_FILE_FORMAT, fileName)) return EXTENSION_TO_FILE_FORMAT[fileName] ?? null;
-  const compoundMatch = fileName.match(/\.([^/\\]+\.[^/\\]+)$/);
+function matchFiletypeFromName(fileName2) {
+  if (CUSTOM_EXTENSION_TO_FILE_FORMAT.has(fileName2)) return CUSTOM_EXTENSION_TO_FILE_FORMAT.get(fileName2) ?? "text";
+  if (Object.hasOwn(EXTENSION_TO_FILE_FORMAT, fileName2)) return EXTENSION_TO_FILE_FORMAT[fileName2] ?? null;
+  const compoundMatch = fileName2.match(/\.([^/\\]+\.[^/\\]+)$/);
   if (compoundMatch != null) {
     if (CUSTOM_EXTENSION_TO_FILE_FORMAT.has(compoundMatch[1])) return CUSTOM_EXTENSION_TO_FILE_FORMAT.get(compoundMatch[1]) ?? "text";
     if (Object.hasOwn(EXTENSION_TO_FILE_FORMAT, compoundMatch[1])) return EXTENSION_TO_FILE_FORMAT[compoundMatch[1]] ?? "text";
   }
-  const simpleMatch = fileName.match(/\.([^.]+)$/)?.[1] ?? "";
+  const simpleMatch = fileName2.match(/\.([^.]+)$/)?.[1] ?? "";
   if (CUSTOM_EXTENSION_TO_FILE_FORMAT.has(simpleMatch)) return CUSTOM_EXTENSION_TO_FILE_FORMAT.get(simpleMatch) ?? "text";
   return Object.hasOwn(EXTENSION_TO_FILE_FORMAT, simpleMatch) ? EXTENSION_TO_FILE_FORMAT[simpleMatch] ?? "text" : null;
 }
@@ -61797,22 +61939,22 @@ var NAMED_ESCAPES = {
 };
 function parseQuotedDiffFileName(input) {
   if (input[0] !== '"') return;
-  let fileName = "";
+  let fileName2 = "";
   let index = 1;
   while (index < input.length) {
     const char = input[index];
     if (char === '"') return {
-      fileName,
+      fileName: fileName2,
       rawLength: index + 1
     };
     if (char !== "\\") {
-      fileName += char;
+      fileName2 += char;
       index++;
       continue;
     }
     const escaped = NAMED_ESCAPES[input[index + 1]];
     if (escaped != null) {
-      fileName += escaped;
+      fileName2 += escaped;
       index += 2;
       continue;
     }
@@ -61823,7 +61965,7 @@ function parseQuotedDiffFileName(input) {
       bytes.push(byte);
       index += 4;
     } while (input[index] === "\\" && input[index + 1] >= "0" && input[index + 1] <= "7");
-    fileName += filenameDecoder.decode(new Uint8Array(bytes));
+    fileName2 += filenameDecoder.decode(new Uint8Array(bytes));
   }
 }
 function readOctalByte(input, index) {
@@ -62017,12 +62159,12 @@ function _processFile(fileDiffString, { cacheKey, isGitDiff = GIT_DIFF_FILE_BREA
         const filenameMatch = line.startsWith("---") || line.startsWith("+++") ? line.match(FILENAME_HEADER_REGEX) : null;
         if (filenameMatch != null) {
           const [, type, rawFileName] = filenameMatch;
-          const fileName = decodeDiffFileName(rawFileName, isGitDiff);
-          if (type === "---" && fileName !== "/dev/null") {
-            const detachedFileName = detachString(fileName);
+          const fileName2 = decodeDiffFileName(rawFileName, isGitDiff);
+          if (type === "---" && fileName2 !== "/dev/null") {
+            const detachedFileName = detachString(fileName2);
             currentFile.prevName = detachedFileName;
             currentFile.name = detachedFileName;
-          } else if (type === "+++" && fileName !== "/dev/null") currentFile.name = detachString(fileName);
+          } else if (type === "+++" && fileName2 !== "/dev/null") currentFile.name = detachString(fileName2);
         } else if (isGitDiff) {
           if (line.startsWith("new mode ")) currentFile.mode = detachString(line.slice(8).trim());
           if (line.startsWith("old mode ")) currentFile.prevMode = detachString(line.slice(8).trim());
@@ -85474,8 +85616,19 @@ file-tree-container {
   color-scheme: inherit;
 }
 `;
+var gestures = ["wheel", "touchmove", "pointerdown", "keydown"];
 var folderName = "[data-item-type='folder'] > [data-item-section='content']";
+var fileName = "[data-item-type='file'] > [data-item-section='content']";
 var rows = `
+[data-type='item'][data-item-focused='true']:focus:not(:focus-visible)::before {
+  display: none;
+}
+@media (forced-colors: active) {
+  [data-type='item'][data-item-selected='true'] {
+    outline: var(--swc-border-width-100) solid Highlight;
+    outline-offset: calc(-1 * var(--swc-border-width-100));
+  }
+}
 ${folderName} {
   display: block;
   white-space: nowrap;
@@ -85492,6 +85645,20 @@ ${folderName} [data-truncate-content='visible'] {
   display: inline;
   direction: inherit;
 }
+${fileName} [data-truncate-container] {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+${fileName} :is([data-truncate-grid], [data-truncate-grid] > div:not([data-truncate-marker-cell], [data-truncate-fill])) {
+  display: contents;
+}
+${fileName} :is([data-truncate-content='overflow'], [data-truncate-marker-cell], [data-truncate-fill]) {
+  display: none;
+}
+${fileName} [data-truncate-content='visible'] {
+  display: inline;
+  direction: inherit;
+}
 `;
 function titled(root2) {
   for (const row of root2.querySelectorAll("[data-type='item'][aria-label]")) {
@@ -85512,6 +85679,26 @@ var SliccFileTree = class extends HTMLElement {
   #query = "";
   #chosen = [];
   #applying = false;
+  #want = null;
+  #back = null;
+  #hold = null;
+  #quiet = false;
+  #told = "";
+  #scroller = null;
+  #top = 0;
+  #height = 0;
+  #set = -1;
+  #user = false;
+  #fought = -1;
+  #gesture = () => {
+    this.#user = true;
+  };
+  #resize = new ResizeObserver(() => {
+    this.#fought = -1;
+    this.#measure();
+    this.#scrollBack();
+  });
+  #scrolled = () => this.#onScroll();
   #titles = null;
   get paths() {
     return this.#paths;
@@ -85522,6 +85709,7 @@ var SliccFileTree = class extends HTMLElement {
     this.#tree?.resetPaths(value, { initialExpandedPaths: expanded });
     this.#research();
     this.#matched();
+    this.#restore();
   }
   #research() {
     const query = this.#query;
@@ -85604,7 +85792,95 @@ var SliccFileTree = class extends HTMLElement {
     this.#applying = false;
     this.#chosen = this.#expandedNow();
   }
+  get view() {
+    const tree = this.#tree;
+    const back = this.#back;
+    const index = tree?.getFocusedIndex() ?? -1;
+    const height = tree?.getItemHeight() ?? 0;
+    const top = this.#top;
+    const bottom = top + this.#height;
+    const rows2 = (tree?.getVisibleCount() ?? 0) * height;
+    return {
+      scroll: back ? back.scroll : top,
+      selected: tree?.getSelectedPaths() ?? [],
+      focused: tree?.getFocusedPath() ?? null,
+      shown: back ? back.shown : index >= 0 && index * height >= top && (index + 1) * height <= bottom,
+      end: back ? back.end : top > 0 && bottom >= rows2 - 1
+    };
+  }
+  set view(value) {
+    this.#want = value;
+    this.#back = value;
+    this.#restore();
+  }
+  #restore() {
+    const tree = this.#tree;
+    const want = this.#want;
+    if (want && tree && this.#paths.length > 0) {
+      this.#want = null;
+      this.#quiet = true;
+      for (const path of tree.getSelectedPaths())
+        if (!want.selected.includes(path)) tree.getItem(path)?.deselect();
+      for (const path of want.selected) tree.getItem(path)?.select();
+      if (want.focused) tree.focusPath(want.focused);
+      this.#quiet = false;
+    }
+    this.#scrollBack();
+  }
+  #scrollBack() {
+    const back = this.#back ?? this.#hold;
+    const el = this.#scroller;
+    const tree = this.#tree;
+    if (!back || !el || !tree || this.#want || !el.clientHeight) return;
+    if (el.scrollHeight + 1 < tree.getVisibleCount() * tree.getItemHeight()) return;
+    this.#back = null;
+    this.#hold = back;
+    const index = tree.getFocusedIndex();
+    const height = tree.getItemHeight();
+    const max2 = el.scrollHeight - el.clientHeight;
+    let top = back.end ? max2 : Math.min(back.scroll, max2);
+    if (back.shown && index >= 0)
+      top = Math.min(Math.max(top, (index + 1) * height - el.clientHeight), index * height);
+    el.scrollTop = top;
+    this.#set = el.scrollTop;
+    this.#user = false;
+    this.#measure();
+  }
+  #measure() {
+    const el = this.#scroller;
+    if (!el?.clientHeight) return;
+    this.#top = el.scrollTop;
+    this.#height = el.clientHeight;
+  }
+  #onScroll() {
+    this.#measure();
+    const el = this.#scroller;
+    if (!el?.clientHeight || this.#want || Math.abs(el.scrollTop - this.#set) < 1) return;
+    if ((this.#back || this.#hold) && !this.#user) {
+      if (!this.#hold || el.scrollTop === this.#fought) return;
+      this.#fought = el.scrollTop;
+      this.#scrollBack();
+      return;
+    }
+    this.#set = -1;
+    this.#back = null;
+    this.#hold = null;
+    this.#tell(true);
+  }
+  #tell(always = false) {
+    if (this.#want || this.#quiet || this.#paths.length === 0 || !this.isConnected) return;
+    const view = this.view;
+    const told = `${view.selected.join("\n")}
+
+${view.focused}`;
+    if (!always && told === this.#told) return;
+    this.#told = told;
+    this.dispatchEvent(
+      new CustomEvent("tree-view", { detail: view, bubbles: true, composed: true })
+    );
+  }
   #changed() {
+    this.#tell();
     if (this.#applying || !this.#tree || this.#query) return;
     const expanded = this.#expandedNow();
     if (expanded.join("\n") === this.#chosen.join("\n")) return;
@@ -85642,9 +85918,34 @@ var SliccFileTree = class extends HTMLElement {
     this.#title();
     this.#chosen = this.#query ? this.#expanded : this.#expandedNow();
     this.#tree.subscribe(() => this.#changed());
+    this.#watch();
     this.#matched();
+    this.#restore();
+  }
+  #watch() {
+    const root2 = this.#tree?.getFileTreeContainer()?.shadowRoot;
+    const el = root2?.querySelector("[data-file-tree-virtualized-scroll]") ?? null;
+    this.#scroller = el;
+    if (!el) return;
+    el.addEventListener("scroll", this.#scrolled, { passive: true });
+    for (const type of gestures) el.addEventListener(type, this.#gesture, { passive: true });
+    this.#set = -1;
+    this.#user = false;
+    this.#resize.observe(el);
+    const list5 = el.querySelector("[data-file-tree-virtualized-list]");
+    if (list5) this.#resize.observe(list5);
   }
   disconnectedCallback() {
+    if (this.#paths.length > 0 && !this.#want) {
+      const view = this.view;
+      this.#want = view;
+      this.#back = view;
+    }
+    this.#scroller?.removeEventListener("scroll", this.#scrolled);
+    for (const type of gestures) this.#scroller?.removeEventListener(type, this.#gesture);
+    this.#scroller = null;
+    this.#hold = null;
+    this.#resize.disconnect();
     if (this.#paths.length > 0) this.#expanded = this.#held();
     this.#titles?.disconnect();
     this.#titles = null;
@@ -85672,7 +85973,7 @@ var SliccFileTree = class extends HTMLElement {
     );
   }
   #selected(paths) {
-    if (paths.length === 1) this.#open(paths[0]);
+    if (paths.length === 1 && !this.#quiet) this.#open(paths[0]);
   }
   #keydown(event2) {
     if (event2.defaultPrevented) return;
@@ -85690,21 +85991,22 @@ var SliccFileTree = class extends HTMLElement {
     if (event2.key !== "Enter") return;
     this.#open(this.#tree?.getFocusedPath());
   }
-  focus() {
+  focus(options) {
     const tree = this.#tree;
     const path = tree?.getFocusedPath() ?? tree?.getVisibleRows(0, 1)[0]?.path;
-    if (path) this.reveal(path);
+    if (path) this.reveal(path, true, options);
   }
   #row(path) {
     const container = this.#tree?.getFileTreeContainer();
     return container?.shadowRoot?.querySelector(`[data-item-path="${CSS.escape(path)}"]`) ?? null;
   }
-  reveal(path, focus = true) {
+  reveal(path, focus = true, options) {
+    this.#hold = null;
     this.#tree?.scrollToPath(path, { focus });
     if (!focus) return;
     const row = this.#row(path);
-    if (row) row.focus();
-    else requestAnimationFrame(() => this.#row(path)?.focus());
+    if (row) row.focus(options);
+    else requestAnimationFrame(() => this.#row(path)?.focus(options));
   }
 };
 function defineFileTree() {