@ai-ecoverse/slicc-spectrum 1.86.5 → 1.86.6

package/README.md

@@ -228,6 +228,7 @@ The sans stack (`--swc-sans-font-family-stack`, also used by the 1.12 components
 The shell: header with the agent picker, status items, the update status, the network indicator, the tray, the View menu and the theme switch, rails, and a `<slicc-dock>`.
 Saves the dock layout per screen class to `storage` (default `localStorage`) under `layoutKey`.
 The dock builds new panel content whenever it lays panels out again (a switch between phone, tablet and desktop, or a layout reset), so what the user opens in a panel (sections, cones, rows, folders, disclosures) lives outside the element, per model and panel (`view-state.ts`, in memory only): a rebuilt panel shows it again, and a click on the outgoing panel while the new one mounts reaches the new one too.
+Files keeps its selected row, its keyboard focus target (without taking focus) and its scroll the same way, and Agents, Memory, Changes, Monitor, the Browser tab cards, Freezer and Settings keep their scroll; the chat log keeps its own. The scroll comes back once the list has laid out, anchored on the selected row when it was in view and otherwise on the first row in view, at the same distance from the top, so a narrower phone layout keeps those rows in view. A list scrolled to its end, Files included, comes back at its end. Files puts its scroll back even when the tree scrolls its focused row into view on its own. After that, a resize or new content keeps the anchored row where it was. These lists set `overflow-anchor: none` on their scroller, since they anchor it themselves. When the app switches models in place, each panel shows the state it keeps for the new model.
 While connected it sets `overscroll-behavior` to `none !important` on the page's `html` and `body`, so only scroll areas inside panels rubber-band.
 It sets the page's `color-scheme` to its resolved theme, and when the page has a `theme-color` meta per `prefers-color-scheme`, gives every one of them the content of the meta for that theme, so the page and the installed app's title bar follow the app's setting instead of the OS.
 When the last app on the page is removed, the page's own inline values and `theme-color` contents come back.

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,8 +10544,14 @@ 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();
@@ -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,
@@ -11096,6 +11213,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 +11686,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";
@@ -35402,6 +35528,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 +36587,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 +40333,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 +41984,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();
@@ -85474,6 +85615,7 @@ file-tree-container {
   color-scheme: inherit;
 }
 `;
+var gestures = ["wheel", "touchmove", "pointerdown", "keydown"];
 var folderName = "[data-item-type='folder'] > [data-item-section='content']";
 var rows = `
 ${folderName} {
@@ -85512,6 +85654,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 +85684,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 +85767,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 +85893,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 +85948,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;
@@ -85700,6 +85976,7 @@ var SliccFileTree = class extends HTMLElement {
     return container?.shadowRoot?.querySelector(`[data-item-path="${CSS.escape(path)}"]`) ?? null;
   }
   reveal(path, focus = true) {
+    this.#hold = null;
     this.#tree?.scrollToPath(path, { focus });
     if (!focus) return;
     const row = this.#row(path);