@ai-ecoverse/slicc-spectrum 2.0.2 → 2.0.3

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]"))
@@ -49879,8 +49888,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 +49901,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 +49914,6 @@ var SliccApprovals = class extends ModelElement {
   }
   static styles = [
     dialogStyles,
-    clampCss,
     i`
       :host {
         display: contents;
@@ -49955,9 +49960,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 +49992,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 +50048,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 +50073,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 +50094,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 +50108,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 +50144,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 +50194,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 +50221,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 +50259,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 +50291,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 +50299,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 +52038,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 +70241,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 +70318,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 +70339,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 +70372,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 +70403,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 +70430,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 +70499,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 +84650,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
    *)