@ai-ecoverse/slicc-spectrum 2.0.2 → 2.1.0

package/dist/slicc-ui.js

@@ -10587,12 +10587,17 @@ var Cuts = class {
 };
 var Ends = class {
   #seen = /* @__PURE__ */ new Set();
+  #looked = /* @__PURE__ */ new Set();
   #root;
   #changed;
   #observer = new IntersectionObserver((entries) => {
     let changed2 = false;
     for (const entry of entries) {
       const id = entry.target.dataset.end;
+      if (!this.#looked.has(id)) {
+        this.#looked.add(id);
+        changed2 = true;
+      }
       if (!entry.isIntersecting || this.#seen.has(id)) continue;
       this.#seen.add(id);
       changed2 = true;
@@ -10606,8 +10611,12 @@ var Ends = class {
   has(id) {
     return this.#seen.has(id);
   }
+  hidden(id) {
+    return this.#looked.has(id) && !this.#seen.has(id);
+  }
   clear() {
     this.#seen.clear();
+    this.#looked.clear();
   }
   observe() {
     for (const end of this.#root().querySelectorAll("[data-end]"))
@@ -37442,6 +37451,16 @@ var SliccChat = class _SliccChat extends ThemedElement {
         background: var(--swc-background-elevated-color);
         box-shadow: var(--swc-drop-shadow-elevated);
       }
+      .older {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--swc-spacing-100);
+        min-block-size: var(--swc-component-height-100);
+        margin-block-end: var(--swc-spacing-200);
+        font-size: var(--swc-font-size-100);
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
       .empty {
         color: var(--swc-neutral-subdued-content-color-default);
         text-align: center;
@@ -37547,7 +37566,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
   #tick;
   #tail = "";
   #held = "";
-  #mark = 0;
+  #mark = "";
   #all = false;
   #seen = "";
   #focused = (event2) => {
@@ -37596,7 +37615,75 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const log = this.#log();
     if (!this.#stuck && log.scrollHeight <= log.clientHeight) this.#follow();
     else this.#pin(false);
+    this.#check();
   });
+  #paging = /* @__PURE__ */ new Set();
+  #stopped = /* @__PURE__ */ new Map();
+  #shown = { agent: "", head: "" };
+  #anchor = null;
+  #first(id) {
+    return id && this.model?.agent.messages(id)[0]?.id || "";
+  }
+  #check() {
+    const log = this.#log();
+    if (log.scrollTop < log.clientHeight) void this.#earlier();
+  }
+  async #earlier() {
+    const agent = this.model?.agent;
+    const id = this.#id();
+    const head = this.#first(id);
+    if (!agent?.hasOlder?.(id) || this.#paging.has(id) || this.#stopped.get(id)?.head === head)
+      return;
+    this.#paging.add(id);
+    this.requestUpdate();
+    try {
+      const found = await agent.older(id, head);
+      const now = this.#first(id);
+      if (!found.length || now === head) this.#stopped.set(id, { head: now, failed: false });
+    } catch {
+      this.#stopped.set(id, { head, failed: true });
+    }
+    this.#paging.delete(id);
+    this.requestUpdate();
+    await this.updateComplete;
+    if (this.#id() === id) this.#check();
+  }
+  #retry(id) {
+    this.#log().focus({ preventScroll: true });
+    this.#stopped.delete(id);
+    void this.#earlier();
+  }
+  #keep(agent) {
+    const log = this.#log();
+    const top = log.getBoundingClientRect().top;
+    const card2 = [...log.querySelector("swc-conversation-thread")?.children ?? []].find(
+      (child) => !child.matches(".day") && child.getBoundingClientRect().bottom > top
+    );
+    return {
+      agent,
+      card: card2,
+      offset: card2 ? card2.getBoundingClientRect().top - top : 0,
+      top: log.scrollTop,
+      height: log.scrollHeight
+    };
+  }
+  #restore() {
+    const { agent, card: card2, offset: offset3, top, height } = this.#anchor;
+    this.#anchor = null;
+    if (agent !== this.#id()) return;
+    const log = this.#log();
+    log.scrollTop = card2?.isConnected ? log.scrollTop + card2.getBoundingClientRect().top - log.getBoundingClientRect().top - offset3 : top + log.scrollHeight - height;
+    this.#last = log.scrollTop;
+    this.#height = log.scrollHeight;
+  }
+  #olderRow(id, head) {
+    const stop = this.#stopped.get(id);
+    if (stop?.failed && stop.head === head)
+      return b`<div class="older" role="alert" data-older="failed"><span>Couldn’t load earlier messages.</span><swc-action-button size="s" quiet data-action="retry-older" @click=${() => this.#retry(id)}>Retry</swc-action-button></div>`;
+    const paging = this.#paging.has(id);
+    if (!paging && (!this.model?.agent.hasOlder?.(id) || stop?.head === head)) return A;
+    return b`<div class="older" role="status" data-older="loading" aria-busy=${paging ? "true" : "false"}>Loading earlier messages…</div>`;
+  }
   #fitted;
   #fit = new ResizeObserver(([entry]) => {
     this.style.setProperty("--composer-height", `${entry.target.offsetHeight}px`);
@@ -37654,6 +37741,7 @@ var SliccChat = class _SliccChat extends ThemedElement {
       this.#stuck = false;
     this.#last = log.scrollTop;
     this.#height = log.scrollHeight;
+    this.#check();
   };
   #intent = {
     passive: true,
@@ -37716,6 +37804,17 @@ var SliccChat = class _SliccChat extends ThemedElement {
     clearInterval(this.#tick);
     this.#tick = void 0;
   }
+  willUpdate(changed2) {
+    super.willUpdate(changed2);
+    const id = this.#id();
+    const head = this.#first(id);
+    const shown5 = this.#shown;
+    if (this.hasUpdated && !this.#anchor && id === shown5.agent && shown5.head && head !== shown5.head) {
+      this.#anchor = this.#keep(id);
+      requestAnimationFrame(() => this.#restore());
+    }
+    this.#shown = { agent: id, head };
+  }
   updated() {
     this.#attach();
     const timed = this.isConnected && this.#timed();
@@ -38008,12 +38107,25 @@ var SliccChat = class _SliccChat extends ThemedElement {
     this.#seen = id;
     this.#all = false;
     this.#details.clear();
+    this.#stopped.delete(id);
   }
   #probe() {
     if (this.#handlers.surface || this.#probed === this.color) return;
     this.#probed = this.color;
     this.#handlers.surface = readSurface(this.renderRoot);
   }
+  #thread(items, older, blank2) {
+    if (items.length)
+      return b`<swc-conversation-thread>${c(
+        items,
+        ([key]) => key,
+        ([, item2]) => item2
+      )}</swc-conversation-thread>`;
+    if (this.model?.tabs?.state().role === "connecting")
+      return b`<div class="empty" data-connecting>${connecting}</div>`;
+    if (this.model?.agent.starting?.() || older) return A;
+    return b`<div class="empty" data-empty>${blank2}</div>`;
+  }
   render() {
     this.#handlers.color = this.color;
     this.#handlers.model = this.model ?? null;
@@ -38028,8 +38140,10 @@ var SliccChat = class _SliccChat extends ThemedElement {
     const messages = agent ? this.model?.agent.messages(agent.id) ?? [] : [];
     this.#tail = messages.at(-1)?.id ?? "";
     const { items, asks } = dock(agent ? this.#items(messages, agent) : [], messages, seat);
-    const count2 = items.filter(([key]) => !key.startsWith("day:")).length;
-    if (!this.behind) this.#mark = count2;
+    const keys = items.flatMap(([key]) => key.startsWith("day:") ? [] : [key]);
+    if (!this.behind) this.#mark = keys.at(-1) ?? "";
+    const seen = keys.lastIndexOf(this.#mark);
+    const older = agent ? this.#olderRow(agent.id, messages[0]?.id ?? "") : A;
     return b`
       <header ?data-compact=${this.compact}>
         ${agent ? this.#meta(agent, !messages.length) : this.#agentless()}
@@ -38051,14 +38165,11 @@ var SliccChat = class _SliccChat extends ThemedElement {
           @pointerdown=${this.#hold}
         >
           <div class="column" @keydown=${this.#keys}>
-            ${items.length ? b`<swc-conversation-thread>${c(
-      items,
-      ([key]) => key,
-      ([, item2]) => item2
-    )}</swc-conversation-thread>` : this.model?.tabs?.state().role === "connecting" ? b`<div class="empty" data-connecting>${connecting}</div>` : this.model?.agent.starting?.() ? A : b`<div class="empty" data-empty>${empty3(watch2, seat, agent?.name ?? "the agent")}</div>`}
+            ${older}
+            ${this.#thread(items, older !== A, empty3(watch2, seat, agent?.name ?? "the agent"))}
           </div>
         </div>
-        ${this.behind ? this.#latest(count2 - this.#mark) : A}
+        ${this.behind ? this.#latest(seen < 0 ? 0 : keys.length - 1 - seen) : A}
       </div>
       ${this.dropping ? b`<swc-dropzone dragged size="l" aria-label="Attach files" dragged-message="" data-surface="drop">
               <swc-illustrated-message>
@@ -49879,8 +49990,10 @@ var SliccApprovals = class extends ModelElement {
     gone: { state: true }
   };
   arming = 500;
-  #armed = false;
-  #arming;
+  #changed = 0;
+  #pressed = 0;
+  #layout = "";
+  #moves = new ResizeObserver(() => this.#settle());
   #showing = null;
   #pending = /* @__PURE__ */ new Set();
   #done = /* @__PURE__ */ new Set();
@@ -49890,11 +50003,6 @@ var SliccApprovals = class extends ModelElement {
   #timer = null;
   #shown = "";
   #trigger = null;
-  #full = /* @__PURE__ */ new Set();
-  #cuts = new Cuts(
-    () => this.renderRoot,
-    () => this.requestUpdate()
-  );
   #ends = new Ends(
     () => this.renderRoot,
     () => this.requestUpdate()
@@ -49908,7 +50016,6 @@ var SliccApprovals = class extends ModelElement {
   }
   static styles = [
     dialogStyles,
-    clampCss,
     i`
       :host {
         display: contents;
@@ -49955,9 +50062,6 @@ var SliccApprovals = class extends ModelElement {
         inline-size: 0;
         block-size: 0;
       }
-      .full-command {
-        margin-block-start: var(--swc-spacing-100);
-      }
       .guest {
         margin-block-start: var(--swc-spacing-200);
         padding: var(--swc-spacing-200) var(--swc-spacing-300);
@@ -49990,16 +50094,39 @@ var SliccApprovals = class extends ModelElement {
         margin-block-start: var(--swc-spacing-300);
         font-variant-numeric: tabular-nums;
       }
+      .more {
+        min-block-size: 1lh;
+      }
+      .notes {
+        display: flex;
+        flex-direction: column;
+        gap: var(--swc-spacing-100);
+        box-sizing: border-box;
+        block-size: min(9lh, 30dvh);
+        margin-block-start: var(--swc-spacing-200);
+        font-size: var(--swc-font-size-75);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+      }
+      .notes .hint,
+      .notes .verdict {
+        margin: 0;
+      }
+      .judge {
+        display: flex;
+        flex: 1 0 auto;
+        flex-direction: column;
+        gap: var(--swc-spacing-100);
+      }
       .judged {
         display: flex;
+        flex: 1 0 auto;
         align-items: flex-start;
         gap: var(--swc-spacing-100);
-        margin-block-start: var(--swc-spacing-200);
         padding: var(--swc-spacing-200) var(--swc-spacing-300);
         border-radius: var(--swc-corner-radius-medium-default);
         background: var(--swc-neutral-subtle-background-color-default);
         color: var(--swc-neutral-content-color-default);
-        font-size: var(--swc-font-size-75);
         overflow-wrap: anywhere;
       }
       .judged[data-verdict='checking'],
@@ -50023,6 +50150,9 @@ var SliccApprovals = class extends ModelElement {
       .judged p {
         margin: 0;
       }
+      [slot='button'][data-action='deny'] {
+        margin-inline-end: auto;
+      }
       .problem {
         display: flex;
         align-items: flex-start;
@@ -50045,7 +50175,6 @@ var SliccApprovals = class extends ModelElement {
       this.#done.clear();
       this.#closed.clear();
       this.#ended.clear();
-      this.#full.clear();
       this.#ends.clear();
     }
     if (!port) return [];
@@ -50067,9 +50196,9 @@ var SliccApprovals = class extends ModelElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#tick(false);
-    clearTimeout(this.#arming);
     this.#showing = null;
-    this.#cuts.disconnect();
+    this.#layout = "";
+    this.#moves.disconnect();
     this.#ends.disconnect();
   }
   #tick(on2) {
@@ -50081,7 +50210,7 @@ var SliccApprovals = class extends ModelElement {
   }
   async decide(approval, decision2) {
     const port = this.model?.approvals;
-    if (!port?.decide || this.busy || decision2 !== "deny" && (!this.#armed || !this.#whole(approval)))
+    if (!port?.decide || this.busy || decision2 !== "deny" && (!this.#settled(performance.now()) || !this.#whole(approval)))
       return;
     const live = port.list().find(({ id }) => id === approval.id);
     if (decision2 === "always" && !(live && offersAlways(live))) return;
@@ -50117,17 +50246,46 @@ var SliccApprovals = class extends ModelElement {
     const next = list6[0] ?? null;
     if (next?.id === showing?.id) return;
     this.#showing = next;
-    clearTimeout(this.#arming);
-    this.#armed = false;
-    this.#arming = setTimeout(() => this.#armed = true, this.arming);
+    this.#changed = performance.now();
+  }
+  #settled(at) {
+    return at - this.#changed >= this.arming;
+  }
+  #settle() {
+    const dialog = this.renderRoot.querySelector("dialog");
+    const buttons = [...this.renderRoot.querySelectorAll("[slot=button]")];
+    const layout = JSON.stringify([
+      dialog?.dataset.approval,
+      dialog?.dataset.gone,
+      buttons.map((button) => {
+        const { left, top, width, height } = button.getBoundingClientRect();
+        return [
+          button.dataset.action,
+          button.textContent,
+          button.hasAttribute("disabled"),
+          button.hasAttribute("pending"),
+          ...[left, top, width, height].map(Math.round)
+        ];
+      })
+    ]);
+    if (layout === this.#layout) return;
+    this.#layout = layout;
+    this.#changed = performance.now();
+  }
+  #click(event2, approval, decision2) {
+    if (!this.#settled(event2.detail ? this.#pressed : performance.now())) return;
+    void this.decide(approval, decision2);
   }
   updated(changed2) {
     super.updated(changed2);
     const all2 = this.model?.approvals?.list() ?? [];
     this.#tick(this.isConnected && all2.length > 0);
-    this.#cuts.measure();
     this.#ends.observe();
     const dialog = this.renderRoot.querySelector("dialog");
+    if (dialog)
+      for (const box of dialog.querySelectorAll("sp-alert-dialog, [slot=button]"))
+        this.#moves.observe(box);
+    this.#settle();
     const key = dialog ? `${dialog.dataset.approval}:${dialog.dataset.gone ?? ""}:${dialog.hasAttribute("data-rejected")}` : "";
     if (key === this.#shown) return;
     if (dialog && !this.#shown) this.#trigger = origin();
@@ -50138,8 +50296,8 @@ var SliccApprovals = class extends ModelElement {
       return;
     }
     if (!dialog.open) dialog.showModal();
-    this.#cuts.measure();
     this.#ends.observe();
+    this.#settle();
     const first2 = dialog.querySelector("[data-action=deny], [data-action=close]");
     void first2.updateComplete.then(() => first2.focus());
   }
@@ -50165,38 +50323,30 @@ var SliccApprovals = class extends ModelElement {
       fill-style=${variant === "accent" ? A : "outline"}
       data-action=${decision2}
       ?pending=${this.busy === decision2}
-      ?disabled=${!!this.busy && this.busy !== decision2}
-      @click=${() => this.decide(approval, decision2)}
+      ?disabled=${!!this.busy && this.busy !== decision2 || decision2 !== "deny" && !this.#whole(approval)}
+      @click=${(event2) => this.#click(event2, approval, decision2)}
       >${label}</swc-button
     >`;
   }
   #dialog(approval, key, content3) {
     return i23(
       key,
-      b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asking" data-approval=${approval.id} data-kind=${approval.kind} data-requester=${approval.requester.kind} data-gone=${this.gone?.reason ?? A} data-rejected=${!this.gone && this.failure?.id === approval.id ? "" : A} @cancel=${(event2) => this.#cancel(event2, approval)}>${content3}</dialog>`
+      b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asking" data-approval=${approval.id} data-kind=${approval.kind} data-requester=${approval.requester.kind} data-gone=${this.gone?.reason ?? A} data-rejected=${!this.gone && this.failure?.id === approval.id ? "" : A} @pointerdown=${() => this.#pressed = performance.now()} @cancel=${(event2) => this.#cancel(event2, approval)}>${content3}</dialog>`
     );
   }
   #whole(approval) {
-    const { id } = approval;
     if (truncated(approval)) return false;
-    return !approved(approval) || this.#cuts.get(id) === false || this.#full.has(id) && this.#ends.has(id);
+    return !approved(approval) || this.#ends.has(approval.id);
   }
   #gate(approval) {
     if (truncated(approval)) return tooLong;
-    if (this.#whole(approval)) return "";
-    return this.#full.has(approval.id) ? toScroll : toShow;
-  }
-  #expand(id) {
-    if (!this.#full.delete(id)) this.#full.add(id);
-    this.requestUpdate();
+    return this.#ends.hidden(approval.id) ? toScroll : "";
   }
   #command(approval, pending) {
     const { id } = approval;
     const text4 = approved(approval);
     if (!text4) return b`<p class="hint" data-id="no-details">This request has no details.</p>`;
-    const full = !pending || this.#full.has(id);
-    const toggle = pending && (full || this.#cuts.get(id)) ? fullCommand(full, () => this.#expand(id)) : A;
-    return b`<pre class="command" data-command=${approval.kind === "sudo" ? "" : A} data-summary=${approval.kind === "sudo" ? A : ""}><span class="lines" data-clamp=${full ? A : id}>${approval.kind === "sudo" ? commandText(text4) : text4}${pending ? b`<span class="end" data-end=${id}></span>` : A}</span></pre>${toggle}`;
+    return b`<pre class="command" data-command=${approval.kind === "sudo" ? "" : A} data-summary=${approval.kind === "sudo" ? A : ""}><span class="lines">${approval.kind === "sudo" ? commandText(text4) : text4}${pending ? b`<span class="end" data-end=${id}></span>` : A}</span></pre>`;
   }
   #request(approval, pending = false) {
     if (approval.kind === "tray") return b`<p id="asking">${trayAsking(approval)}</p>`;
@@ -50211,18 +50361,17 @@ var SliccApprovals = class extends ModelElement {
       <div class="guest" data-guest-text>${approval.text}</div>
       ${files.length ? b`<ul class="files" data-attachments>${files.map((file) => b`<li>${file.name} · ${file.mimeType} · ${size3(file.size)}</li>`)}</ul>` : A}`;
   }
-  #verdict(approval) {
+  #notes(approval, gate, always) {
     if (approval.kind === "tray") return A;
     const note = verdictNote(approval);
-    return b`<div class="judge" aria-live="polite">${judged(approval)}${note ? b`<p class="hint" data-verdict-note>${note}</p>` : A}</div>`;
+    return b`<div class="notes" data-notes><div class="judge" aria-live="polite">${judged(approval)}${note ? b`<p class="hint" data-verdict-note>${note}</p>` : A}</div>${gate ? b`<p class="hint" data-allow-hint>${gate}</p>` : A}${always ? b`<p class="hint" data-always-hint>${hintOf(approval)}</p>` : A}</div>`;
   }
   #actions(approval, rejected, always) {
     if (rejected)
       return b`<swc-button slot="button" variant="secondary" fill-style="outline" data-action="close" @click=${() => this.#dismiss(approval)}>Close</swc-button>`;
-    const whole = this.#whole(approval);
     return b`${this.#button(approval, "deny", "Deny", "secondary")}
-      ${whole && always ? this.#button(approval, "always", inCwd(approval) ? "Always allow in this directory" : "Always allow", "secondary") : A}
-      ${whole ? this.#button(approval, "once", "Allow once", "accent") : A}`;
+      ${always ? this.#button(approval, "always", inCwd(approval) ? "Always allow in this directory" : "Always allow", "secondary") : A}
+      ${this.#button(approval, "once", "Allow once", "accent")}`;
   }
   render() {
     if (this.gone) {
@@ -50244,8 +50393,7 @@ var SliccApprovals = class extends ModelElement {
     if (!approval) return A;
     const failure3 = this.failure?.id === approval.id ? this.failure.message : "";
     const always = offersAlways(approval);
-    const gate = this.#gate(approval);
-    const hint2 = always && this.#whole(approval) ? hintOf(approval) : "";
+    const gate = failure3 ? "" : this.#gate(approval);
     return this.#dialog(
       approval,
       approval.id,
@@ -50253,11 +50401,9 @@ var SliccApprovals = class extends ModelElement {
           <h2 id="title" slot="heading">${title(approval)}</h2>
           ${this.#request(approval, true)}
           ${approval.kind === "sudo" && approval.cwd ? b`<p class="cwd">In ${commandText(approval.cwd, false)}</p>` : A}
-          ${this.#verdict(approval)}
-          ${hint2 ? b`<p class="hint">${hint2}</p>` : A}
-          ${!failure3 && gate ? b`<p class="hint" data-allow-hint>${gate}</p>` : A}
+          ${this.#notes(approval, gate, always)}
           ${failure3 ? b`<p class="problem" role="alert" data-error><swc-icon-alert-triangle size="s" aria-hidden="true"></swc-icon-alert-triangle><span>${failure3}</span></p>` : b`<p class="timer" data-timer>Denied automatically in ${countdown(approval.expiresAt - this.now)}.</p>`}
-          ${rest.length ? b`<p class="more" data-more>${rest.length === 1 ? "1 more request is waiting." : `${rest.length} more requests are waiting.`}</p>` : A}
+          <p class="more" data-more=${rest.length ? "" : A}>${rest.length === 1 ? "1 more request is waiting." : rest.length ? `${rest.length} more requests are waiting.` : ""}</p>
           ${this.#actions(approval, !!failure3, always)}
         </sp-alert-dialog>`
     );
@@ -51994,7 +52140,7 @@ var SliccDiffPanel = class extends ThemedElement {
 // src/app/lucide.ts
 var library = null;
 function load2() {
-  library ??= import("./chunk-EFJJ7K57.js");
+  library ??= import("./chunk-NMHCUT6N.js");
   return library;
 }
 function pascal(name) {
@@ -70197,6 +70343,10 @@ var PositionCache = class {
   }
 };
 var SCHEDULED = -1;
+function isInCollapsedEdgeGroup(panel) {
+  const api = panel.group.api;
+  return api.location.type === "edge" && api.isCollapsed();
+}
 function createFocusableElement() {
   const element2 = document.createElement("div");
   element2.tabIndex = -1;
@@ -70270,6 +70420,7 @@ var OverlayRenderContainer = class extends CompositeDisposable {
     return false;
   }
   attach(options2) {
+    var _panel$group$api$onDi, _panel$group$api$onDi2, _panel$group$api;
     const { panel, referenceContainer } = options2;
     if (!this.map[panel.api.id]) {
       const element2 = createFocusableElement();
@@ -70290,7 +70441,12 @@ var OverlayRenderContainer = class extends CompositeDisposable {
       mapEntry.generation = ++this._generation;
       this.cancelPendingUpdate(mapEntry);
       mapEntry.referenceContainer = referenceContainer;
-      mapEntry.retainPreviousGeometry = mapEntry.positioned;
+      const collapsedEdge = isInCollapsedEdgeGroup(panel);
+      mapEntry.retainPreviousGeometry = mapEntry.positioned && !collapsedEdge;
+      if (collapsedEdge && !mapEntry.forceVisible) {
+        mapEntry.element.style.visibility = "hidden";
+        mapEntry.element.style.pointerEvents = "none";
+      }
     }
     const generation = mapEntry.generation;
     const focusContainer = mapEntry.element;
@@ -70318,18 +70474,30 @@ var OverlayRenderContainer = class extends CompositeDisposable {
         if (this.isDisposed || (entry === null || entry === void 0 ? void 0 : entry.generation) !== generation) return;
         const forceVisible = (_entry$forceVisible = entry.forceVisible) !== null && _entry$forceVisible !== void 0 ? _entry$forceVisible : false;
         const clip = entry.clip;
+        const collapsedEdge = isInCollapsedEdgeGroup(panel);
+        const hidden = !forceVisible && (!panel.api.isVisible || collapsedEdge);
         const box = this.positionCache.getPosition(referenceContainer.element);
         const box2 = this.positionCache.getPosition(this.element);
         const left = box.left - box2.left;
         const top = box.top - box2.top;
         const width = box.width;
         const height = box.height;
-        if (entry.retainPreviousGeometry && (width === 0 || height === 0)) {
-          if (!panel.api.isVisible && !forceVisible) {
+        if (width === 0 || height === 0) {
+          if (collapsedEdge && !forceVisible) {
+            entry.retainPreviousGeometry = false;
             focusContainer.style.visibility = "hidden";
             focusContainer.style.pointerEvents = "none";
+            focusContainer.style.clipPath = "";
+            focusContainer.style.zIndex = "";
+            return;
+          }
+          if (entry.retainPreviousGeometry) {
+            if (hidden) {
+              focusContainer.style.visibility = "hidden";
+              focusContainer.style.pointerEvents = "none";
+            }
+            return;
           }
-          return;
         }
         entry.retainPreviousGeometry = false;
         entry.positioned = true;
@@ -70337,7 +70505,7 @@ var OverlayRenderContainer = class extends CompositeDisposable {
         setPixels(focusContainer.style, "top", top);
         setPixels(focusContainer.style, "width", width);
         setPixels(focusContainer.style, "height", height);
-        if (panel.api.isVisible || forceVisible) {
+        if (!hidden) {
           focusContainer.style.visibility = "";
           focusContainer.style.pointerEvents = "";
         } else {
@@ -70364,11 +70532,13 @@ var OverlayRenderContainer = class extends CompositeDisposable {
       if (scheduling.pendingUpdate === SCHEDULED) scheduling.pendingUpdate = handle;
     };
     const visibilityChanged = () => {
-      if (panel.api.isVisible) {
-        var _this$map$panel$api$i;
+      var _this$map$panel$api$i;
+      const collapsedEdge = !((_this$map$panel$api$i = this.map[panel.api.id]) === null || _this$map$panel$api$i === void 0 ? void 0 : _this$map$panel$api$i.forceVisible) && isInCollapsedEdgeGroup(panel);
+      if (panel.api.isVisible && !collapsedEdge) {
+        var _this$map$panel$api$i2;
         this.positionCache.invalidate();
         resize();
-        if ((_this$map$panel$api$i = this.map[panel.api.id]) === null || _this$map$panel$api$i === void 0 ? void 0 : _this$map$panel$api$i.retainPreviousGeometry) focusContainer.style.visibility = "";
+        if ((_this$map$panel$api$i2 = this.map[panel.api.id]) === null || _this$map$panel$api$i2 === void 0 ? void 0 : _this$map$panel$api$i2.retainPreviousGeometry) focusContainer.style.visibility = "";
         focusContainer.style.pointerEvents = "";
       } else {
         focusContainer.style.visibility = "hidden";
@@ -70431,6 +70601,10 @@ var OverlayRenderContainer = class extends CompositeDisposable {
         if (!panel.api.isVisible) return;
         resize();
       }),
+      (_panel$group$api$onDi = (_panel$group$api$onDi2 = (_panel$group$api = panel.group.api).onDidCollapsedChange) === null || _panel$group$api$onDi2 === void 0 ? void 0 : _panel$group$api$onDi2.call(_panel$group$api, () => {
+        this.positionCache.invalidate();
+        resize();
+      })) !== null && _panel$group$api$onDi !== void 0 ? _panel$group$api$onDi : Disposable.NONE,
       referenceContainer.onDidDimensionsChange((size4) => {
         applySize(size4);
       }),
@@ -84578,7 +84752,7 @@ lit-html/static.js:
 dockview-core/dist/package/main.esm.mjs:
   (**
    * dockview-core
-   * @version 8.8.1
+   * @version 8.8.2
    * @link https://github.com/dockview/dockview
    * @license MIT
    *)