@ai-ecoverse/slicc-spectrum 1.12.0 → 1.14.0

package/dist/slicc-ui.js

@@ -6597,6 +6597,14 @@ var surfaces = [
     icon: "sp-icon-settings",
     side: "center",
     open: []
+  },
+  {
+    id: "updates",
+    title: "Install / Update",
+    tag: "slicc-updates",
+    icon: "sp-icon-refresh",
+    side: "center",
+    open: []
   }
 ];
 var documents = {
@@ -6757,6 +6765,248 @@ function openSprinkle(dock, sprinkle, screen, place = null) {
   return id;
 }
 
+// src/app/updates.ts
+var states = {
+  current: ["neutral", "Up to date"],
+  checking: ["informative", "Checking"],
+  downloading: ["informative", "Downloading"],
+  linking: ["informative", "Linking"],
+  installed: ["positive", "Installed"],
+  available: ["notice", "Update available"],
+  ready: ["notice", "Ready to apply"],
+  failed: ["negative", "Failed"]
+};
+var actions = {
+  "restart-agent": "Restart agent",
+  reload: "Reload",
+  "update-now": "Update now",
+  retry: "Retry"
+};
+function updatesStatus(items) {
+  const failed = items.filter((item2) => item2.state === "failed").length;
+  if (failed) return `${failed} failed`;
+  const running = items.filter(
+    (item2) => ["checking", "downloading", "linking"].includes(item2.state)
+  ).length;
+  if (running) return `updating ${running}`;
+  if (items.some((item2) => item2.state === "ready" || item2.state === "available")) {
+    return "update ready";
+  }
+  return null;
+}
+var UpdateVisibility = class {
+  #boot;
+  #initial = true;
+  #failed = /* @__PURE__ */ new Set();
+  constructor(ready) {
+    this.#boot = !ready;
+  }
+  change(port, layout = false) {
+    const failed = new Set(
+      port.list().filter((item2) => item2.state === "failed").map((item2) => item2.id)
+    );
+    const open = (this.#initial || layout) && this.#boot || [...failed].some((id) => !this.#failed.has(id));
+    this.#initial = false;
+    this.#failed = failed;
+    if (this.#boot && port.ready() && failed.size === 0) {
+      this.#boot = false;
+      return "close";
+    }
+    return open ? "open" : null;
+  }
+};
+var SliccUpdates = class extends ModelElement {
+  static properties = {
+    ...ModelElement.properties,
+    pending: { state: true },
+    failures: { state: true }
+  };
+  constructor() {
+    super();
+    this.pending = /* @__PURE__ */ new Set();
+    this.failures = /* @__PURE__ */ new Map();
+  }
+  static styles = [
+    shared,
+    i`
+      :host {
+        display: block;
+        height: 100%;
+        overflow: auto;
+        container-type: inline-size;
+        background: var(--spectrum-background-layer-2-color);
+        color: var(--spectrum-neutral-content-color-default);
+        font-size: var(--spectrum-font-size-100);
+      }
+      .page {
+        max-width: 800px;
+        padding: 24px;
+        margin: 0 auto;
+      }
+      h1 {
+        font-size: var(--spectrum-font-size-400);
+        margin: 0 0 8px;
+      }
+      .hint, .meta, summary {
+        color: var(--spectrum-neutral-subdued-content-color-default);
+        font-size: var(--spectrum-font-size-75);
+      }
+      .hint {
+        margin: 0 0 24px;
+        line-height: 1.5;
+      }
+      article {
+        padding: 16px 0;
+        border-top: 1px solid var(--spectrum-gray-200);
+      }
+      .head, .meta, .actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px 12px;
+      }
+      .head {
+        justify-content: space-between;
+        margin-bottom: 8px;
+      }
+      .meta {
+        justify-content: space-between;
+        line-height: 1.5;
+      }
+      .version {
+        font-family: var(--spectrum-code-font-family);
+      }
+      progress {
+        display: block;
+        width: 100%;
+        height: 4px;
+        margin: 12px 0;
+        accent-color: var(--spectrum-accent-visual-color);
+      }
+      .actions {
+        margin-top: 12px;
+      }
+      .error {
+        margin: 12px 0 0;
+        padding: 12px;
+        border-left: 3px solid var(--spectrum-negative-visual-color);
+        background: var(--spectrum-background-layer-1-color);
+        color: var(--spectrum-negative-content-color-default);
+        overflow-wrap: anywhere;
+        line-height: 1.5;
+      }
+      details {
+        margin-top: 12px;
+      }
+      summary {
+        cursor: pointer;
+        width: fit-content;
+      }
+      summary:focus-visible {
+        outline: 2px solid var(--spectrum-focus-indicator-color);
+        outline-offset: 3px;
+      }
+      pre {
+        padding: 12px;
+        max-height: 180px;
+        overflow: auto;
+        background: var(--spectrum-background-layer-1-color);
+        border: 1px solid var(--spectrum-gray-200);
+        border-radius: 4px;
+        font-family: var(--spectrum-code-font-family);
+        font-size: var(--spectrum-font-size-75);
+        line-height: 1.5;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+      }
+      @container (max-width: 480px) {
+        .page {
+          padding: 16px;
+        }
+        .head, .meta {
+          align-items: flex-start;
+          flex-direction: column;
+        }
+      }
+    `
+  ];
+  subscribe(model) {
+    this.pending = /* @__PURE__ */ new Set();
+    this.failures = /* @__PURE__ */ new Map();
+    const port = model.updates;
+    if (!port) return [];
+    let previous = new Map(port.list().map(({ id, state, error }) => [id, { state, error }]));
+    return [
+      port.on("items", (items) => {
+        const next = new Map(items.map(({ id, state, error }) => [id, { state, error }]));
+        this.failures = new Map(
+          [...this.failures].filter(([id]) => {
+            const before = previous.get(id);
+            const after = next.get(id);
+            return before && after && before.state === after.state && before.error === after.error;
+          })
+        );
+        previous = next;
+        this.requestUpdate();
+      })
+    ];
+  }
+  focus() {
+    this.focusOn("sp-button, summary");
+  }
+  async act(id, action) {
+    const port = this.model?.updates;
+    if (!port || this.pending.has(id)) return;
+    this.pending = /* @__PURE__ */ new Set([...this.pending, id]);
+    this.failures = new Map([...this.failures].filter(([key2]) => key2 !== id));
+    try {
+      await port.act(id, action);
+    } catch (error) {
+      if (this.model?.updates === port) {
+        this.failures = new Map([
+          ...this.failures,
+          [id, error instanceof Error ? error.message : String(error)]
+        ]);
+      }
+    } finally {
+      if (this.model?.updates === port) {
+        this.pending = new Set([...this.pending].filter((key2) => key2 !== id));
+      }
+    }
+  }
+  #item(item2) {
+    const [variant, label] = states[item2.state];
+    const progress = item2.progress;
+    const error = this.failures.get(item2.id) ?? item2.error;
+    return b`<article data-id=${item2.id} data-state=${item2.state} aria-label=${item2.label}>
+      <div class="head">
+        <strong>${item2.label}</strong>
+        <sp-badge size="s" variant=${variant}>${label}${progress ? ` ${progress.done}/${progress.total}` : ""}</sp-badge>
+      </div>
+      <div class="meta">
+        <span class="version">${item2.from ?? "Not installed"}${item2.to && item2.to !== item2.from ? b` → ${item2.to}` : A}</span>
+        ${item2.checkedAt === null ? b`<span>Not checked yet</span>` : b`<span>Checked <time datetime=${new Date(item2.checkedAt).toISOString()}>${new Date(item2.checkedAt).toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" })}</time></span>`}
+      </div>
+      ${progress ? b`<progress aria-label=${`${item2.label}: ${progress.phase === "download" ? "downloading" : "linking"}`} value=${progress.done} max=${progress.total}></progress>` : A}
+      ${error ? b`<div class="error" role="alert">${error}</div>` : A}
+      ${item2.actions.length ? b`<div class="actions">${item2.actions.map((action) => b`<sp-button size="s" variant="secondary" treatment="outline" ?disabled=${this.pending.has(item2.id)} ?pending=${this.pending.has(item2.id)} data-action=${action} @click=${() => void this.act(item2.id, action)}>${actions[action]}</sp-button>`)}</div>` : A}
+      ${item2.log ? b`<details><summary>Install log</summary><pre>${item2.log}</pre></details>` : A}
+    </article>`;
+  }
+  render() {
+    const port = this.model?.updates;
+    return b`<div class="page">
+      <h1>Install / Update</h1>
+      <p class="hint">${!port ? "Update information is not connected." : port.ready() ? "Your agent is ready. Background updates appear here; apply them when it suits you." : "Preparing your agent. You can keep working; this panel closes when the agent is ready."}</p>
+      ${c(
+      port?.list() ?? [],
+      (item2) => item2.id,
+      (item2) => this.#item(item2)
+    )}
+    </div>`;
+  }
+};
+
 // src/app/app.ts
 function railIcon(icon) {
   if (icon.startsWith("sp-icon-")) {
@@ -6777,6 +7027,8 @@ var SliccApp = class extends ThemedElement {
   #resize = null;
   #started = null;
   #saving = false;
+  #updatesPort;
+  #updatesVisibility = null;
   constructor() {
     super();
     this.screen = screenClass(globalThis.innerWidth ?? 1280);
@@ -6797,6 +7049,7 @@ var SliccApp = class extends ThemedElement {
     }
     .shell {
       display: grid;
+      grid-template-columns: minmax(0, 1fr);
       grid-template-rows: 40px minmax(0, 1fr) auto 24px;
       height: 100%;
     }
@@ -6834,11 +7087,12 @@ var SliccApp = class extends ThemedElement {
     }
     .rail.bottom {
       flex-direction: row;
-      justify-content: center;
+      justify-content: safe center;
       width: auto;
       height: 44px;
       padding: 0 8px;
       border-top: 1px solid var(--spectrum-gray-200);
+      overflow-x: auto;
     }
     .rail:empty {
       display: none;
@@ -6846,6 +7100,14 @@ var SliccApp = class extends ThemedElement {
     :host([screen='phone']) footer .hints {
       display: none;
     }
+    :host([screen='phone']) header sp-picker {
+      min-width: 0;
+      width: 0;
+      flex: 1;
+    }
+    :host([screen='phone']) header .spacer {
+      display: none;
+    }
     header {
       display: flex;
       align-items: center;
@@ -6941,7 +7203,8 @@ var SliccApp = class extends ThemedElement {
       }),
       model.files.on("changes", update),
       model.sprinkles.on("sprinkles", update),
-      this.dips.on("change", update)
+      this.dips.on("change", update),
+      ...model.updates ? [model.updates.on("items", update)] : []
     ];
   }
   connectedCallback() {
@@ -6978,8 +7241,28 @@ var SliccApp = class extends ThemedElement {
   }
   updated(changed) {
     if (!this.model) return;
-    if (this.#started !== this.screen) this.#start(this.model);
+    const layout = this.#started !== this.screen;
+    if (layout) this.#start(this.model);
     else if (changed.has("model")) this.#rebind(this.model);
+    this.#updates(layout);
+  }
+  #updates(layout) {
+    const port = this.model?.updates;
+    if (port !== this.#updatesPort) {
+      this.#updatesPort = port;
+      this.#updatesVisibility = port ? new UpdateVisibility(port.ready()) : null;
+    }
+    if (!port || !this.#offers("updates")) return;
+    const change = this.#updatesVisibility?.change(port, layout);
+    if (change === "open") {
+      if (this.dock.has("updates")) this.dock.reveal("updates");
+      else {
+        this.show("updates");
+        if (!port.ready()) this.dock.api.getPanel("updates")?.api.updateParameters({ boot: true });
+      }
+    } else if (this.dock.api.getPanel("updates")?.params?.boot && port.ready() && !port.list().some((item2) => item2.state === "failed")) {
+      this.dock.close("updates");
+    }
   }
   #factories(model) {
     return {
@@ -7072,6 +7355,7 @@ var SliccApp = class extends ThemedElement {
     const item2 = surface(id, this.surfaces);
     if (!item2) return;
     openSurface(this.dock, item2, this.screen);
+    if (id === "updates") this.dock.api.getPanel(id)?.api.updateParameters({ boot: false });
     this.dock.focusPanel(id);
   }
   #sprinkle(id) {
@@ -7150,7 +7434,7 @@ var SliccApp = class extends ThemedElement {
   }
   #menuItem(surface2, index) {
     return b`<sp-menu-item value=${surface2.id}>
-      ${surface2.title}<kbd slot="value">Alt+${index + 1}</kbd>
+      ${surface2.title}${index < 9 ? b`<kbd slot="value">Alt+${index + 1}</kbd>` : A}
     </sp-menu-item>`;
   }
   #offers(id) {
@@ -7174,7 +7458,9 @@ var SliccApp = class extends ThemedElement {
     return b`<button class="link" @click=${() => this.show("changes")}>${changes} ${changes === 1 ? "change" : "changes"}</button>`;
   }
   #status() {
+    const updates = this.#offers("updates") ? updatesStatus(this.model?.updates?.list() ?? []) : null;
     return b`<footer role="status" aria-label="Status">
+      ${updates ? b`<button class="link" aria-label=${`Install / Update: ${updates}`} data-updates @click=${() => this.show("updates")}>${updates}</button>` : A}
       ${this.#agentStatus()}
       ${this.#changes()}
       <slot name="status"></slot>
@@ -7196,7 +7482,7 @@ var SliccApp = class extends ThemedElement {
     )}
           </sp-picker>` : A}
           <span class="spacer"></span>
-          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model}></slicc-tray>` : A}
+          ${this.#offers("chat") ? b`<slicc-tray .model=${this.model} ?compact=${this.screen === "phone"}></slicc-tray>` : A}
           <sp-action-menu size="s" quiet label="View" @change=${this.#view}>
             <sp-icon-view-grid slot="icon"></sp-icon-view-grid>
             <span slot="label">View</span>
@@ -7781,10 +8067,10 @@ function render(entry) {
       return entry.ordered ? b`<ol>${items}</ol>` : b`<ul>${items}</ul>`;
     }
     case "table": {
-      const [head2, ...body3] = entry.rows;
+      const [head2, ...body4] = entry.rows;
       return b`<div class="table"><table>
         <thead><tr>${head2.map((cell) => b`<th>${inline(cell)}</th>`)}</tr></thead>
-        <tbody>${body3.map((row) => b`<tr>${row.map((cell) => b`<td>${inline(cell)}</td>`)}</tr>`)}</tbody>
+        <tbody>${body4.map((row) => b`<tr>${row.map((cell) => b`<td>${inline(cell)}</td>`)}</tr>`)}</tbody>
       </table></div>`;
     }
     case "quote":
@@ -7843,21 +8129,28 @@ function size(bytes) {
   if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
-function tool(call) {
+function body(call, color) {
+  if (call.diff) {
+    return b`<slicc-diff-view class="input" path=${call.paths[0] ?? call.title} color=${color} .oldText=${call.diff.before} .newText=${call.diff.after}></slicc-diff-view>`;
+  }
+  return b`<pre class="input">${call.name === "bash" ? `$ ${call.input}` : call.input}</pre>`;
+}
+function tool(call, color = "light") {
   const state = call.status === "running" ? b`<sp-progress-circle size="s" indeterminate label="Running"></sp-progress-circle>` : b`<span class="state">${toolStates[call.status]}</span>`;
   return b`<details class="tool" data-status=${call.status} data-tool=${call.name}>
     <summary>
       <span class="chevron" aria-hidden="true">▸</span>
       <span class="name">${call.name}</span>
       <span class="title">${call.title}</span>
+      ${call.meta ? b`<span class="tool-meta">${call.meta}</span>` : A}
       ${state}
     </summary>
-    <pre class="input">${call.name === "bash" ? `$ ${call.input}` : call.input}</pre>
+    ${body(call, color)}
     ${call.output ? b`<pre class="output">${call.output}</pre>` : A}
     ${call.image ? b`<img class="shot" src=${call.image} alt=${call.title} />` : A}
   </details>`;
 }
-function cluster(calls, open) {
+function cluster(calls, open, color) {
   const failed = calls.filter((call) => call.status === "error").length;
   const running = calls.some((call) => call.status === "running");
   return b`<details class="cluster" ?open=${open || running}>
@@ -7867,7 +8160,7 @@ function cluster(calls, open) {
       <span class="names">${[...new Set(calls.map((call) => call.name))].join(" \xB7 ")}</span>
       ${failed ? b`<span class="state failed">${failed} failed</span>` : A}
     </summary>
-    ${calls.map(tool)}
+    ${calls.map((call) => tool(call, color))}
   </details>`;
 }
 function media(items) {
@@ -7907,14 +8200,14 @@ function check(items) {
 }
 function question(item2, handlers) {
   const answer = (value) => handlers.answer(item2.id, value);
-  let body3;
+  let body4;
   if (item2.state === "answered") {
-    body3 = b`<div class="answer">✓ ${item2.answer}</div>`;
+    body4 = b`<div class="answer">✓ ${item2.answer}</div>`;
   } else if (item2.state === "inert") {
-    body3 = b`<div class="hint">Only the latest question can be answered here.</div>`;
+    body4 = b`<div class="hint">Only the latest question can be answered here.</div>`;
   } else if (item2.kind === "yes-no" || item2.kind === "choice") {
     const options = item2.kind === "yes-no" ? ["Yes", "No"] : item2.options;
-    body3 = b`<div class="options">${options.map(
+    body4 = b`<div class="options">${options.map(
       (option2) => b`<sp-button size="s" variant="secondary" treatment="outline" @click=${() => answer(option2)}>${option2}</sp-button>`
     )}</div>`;
   } else {
@@ -7923,14 +8216,14 @@ function question(item2, handlers) {
       const field = event.currentTarget.querySelector("input");
       if (field.value.trim()) answer(field.value.trim());
     };
-    body3 = b`<form class="options" @submit=${submit}>
+    body4 = b`<form class="options" @submit=${submit}>
       <input class="input" type=${item2.kind === "email" ? "email" : item2.kind === "number" ? "number" : item2.kind === "date" ? "date" : "text"} aria-label=${item2.question} />
       <sp-button size="s" variant="accent" @click=${(event) => event.currentTarget.closest("form")?.requestSubmit()}>Answer</sp-button>
     </form>`;
   }
   return b`<div class="question" data-state=${item2.state} data-kind=${item2.kind}>
     <div class="q">${item2.question}</div>
-    ${body3}
+    ${body4}
   </div>`;
 }
 var delegationVerbs = {
@@ -7946,7 +8239,7 @@ function part(entry, handlers, showThinking) {
     case "thinking":
       return showThinking ? b`<div class="thinking">${entry.text}</div>` : A;
     case "tool":
-      return tool(entry.tool);
+      return tool(entry.tool, handlers.color);
     case "media":
       return media(entry.items);
     case "card":
@@ -7985,7 +8278,7 @@ function parts(entries, handlers, showThinking, streaming) {
     while (end < entries.length && entries[end].type === "tool") end++;
     if (end - i10 >= 3) {
       const calls = entries.slice(i10, end).map((entry) => entry.tool);
-      out.push(cluster(calls, streaming && end === entries.length));
+      out.push(cluster(calls, streaming && end === entries.length, handlers.color));
       i10 = end;
     } else {
       out.push(part(entries[i10], handlers, showThinking));
@@ -8036,10 +8329,10 @@ function assistant(message, name, model, handlers, showThinking) {
     ${message.status === "streaming" ? b`<span class="caret" aria-hidden="true"></span>` : A}
   </article>`;
 }
-function toolMessage(message) {
+function toolMessage(message, color = "light") {
   return b`<article class="message tool-message" data-id=${message.id}>
     <div class="meta"><span class="who">Tool</span><span>${time(message.createdAt)}</span></div>
-    ${tool(message.tool)}
+    ${tool(message.tool, color)}
   </article>`;
 }
 function system(message, handlers) {
@@ -8068,18 +8361,18 @@ function lick(message, handlers) {
     ${message.count && message.count > 1 ? b`<span class="times" title="Coalesced events">×${message.count}</span>` : A}
     ${outcome ? b`<span class="tag">${outcome}</span>` : A}
     <span class="when">${time(message.createdAt)}</span>`;
-  const actions = decide ? b`<div class="decide">
+  const actions2 = decide ? b`<div class="decide">
         <sp-button size="s" variant="accent" @click=${() => handlers.resolve(message.id, "confirmed")}>Allow</sp-button>
         <sp-button size="s" variant="secondary" treatment="outline" @click=${() => handlers.resolve(message.id, "dismissed")}>Deny</sp-button>
       </div>` : A;
   if (!message.body) {
-    return b`<div class="lick" data-id=${message.id} data-channel=${message.channel}><div class="lick-head">${head2}</div>${actions}</div>`;
+    return b`<div class="lick" data-id=${message.id} data-channel=${message.channel}><div class="lick-head">${head2}</div>${actions2}</div>`;
   }
   const details = b`<details class="lick" data-id=${message.id} data-channel=${message.channel}>
     <summary class="lick-head"><span class="chevron" aria-hidden="true">▸</span>${head2}</summary>
     <pre class="output">${message.body}</pre>
   </details>`;
-  return decide ? b`<div class="pending">${details}${actions}</div>` : details;
+  return decide ? b`<div class="pending">${details}${actions2}</div>` : details;
 }
 var messageCss = i`
   .message {
@@ -8332,6 +8625,17 @@ var messageCss = i`
   .state.failed {
     color: var(--spectrum-negative-visual-color);
   }
+  .tool-meta {
+    flex: none;
+    color: var(--spectrum-neutral-subdued-content-color-default);
+    font-size: var(--spectrum-font-size-50);
+  }
+  .tool > slicc-diff-view {
+    display: block;
+    margin: 0 8px 8px;
+    max-height: 240px;
+    overflow: auto;
+  }
   .tool pre,
   .lick pre {
     margin: 0 8px 8px;
@@ -8793,7 +9097,7 @@ var SliccChat = class extends ThemedElement {
       case "user":
         return user(message);
       case "tool":
-        return toolMessage(message);
+        return toolMessage(message, this.#handlers.color);
       case "system":
         return system(message, this.#handlers);
       default:
@@ -10871,6 +11175,9 @@ var SliccTray = class extends ModelElement {
       .chip:hover {
         background: var(--spectrum-gray-100);
       }
+      :host([compact]) .chip > span:not(.dot) {
+        display: none;
+      }
       .chip:focus-visible {
         outline: 2px solid var(--spectrum-focus-indicator-color);
       }
@@ -19048,7 +19355,7 @@ function omission(handlers) {
 
 // node_modules/hast-util-to-html/lib/omission/closing.js
 var closing = omission({
-  body,
+  body: body2,
   caption: headOrColgroupOrCaption,
   colgroup: headOrColgroupOrCaption,
   dd,
@@ -19076,7 +19383,7 @@ function html3(_6, index, parent) {
   const next = siblingAfter(parent, index);
   return !next || next.type !== "comment";
 }
-function body(_6, index, parent) {
+function body2(_6, index, parent) {
   const next = siblingAfter(parent, index);
   return !next || next.type !== "comment";
 }
@@ -19135,7 +19442,7 @@ function cells2(_6, index, parent) {
 
 // node_modules/hast-util-to-html/lib/omission/opening.js
 var opening = omission({
-  body: body2,
+  body: body3,
   colgroup,
   head,
   html: html4,
@@ -19156,7 +19463,7 @@ function head(node) {
   const child = node.children[0];
   return !child || child.type === "element";
 }
-function body2(node) {
+function body3(node) {
   const head2 = siblingAfter(node, -1, true);
   return !head2 || head2.type !== "comment" && !(head2.type === "text" && whitespace(head2.value.charAt(0))) && !(head2.type === "element" && (head2.tagName === "meta" || head2.tagName === "link" || head2.tagName === "script" || head2.tagName === "style" || head2.tagName === "template"));
 }
@@ -22244,12 +22551,12 @@ function transform(ast, options) {
 }
 var FirstPassVisitor = {
   AbsenceFunction({ node, parent, replaceWith }) {
-    const { body: body3, kind } = node;
+    const { body: body4, kind } = node;
     if (kind === "repeater") {
       const innerGroup = A4();
       innerGroup.body[0].body.push(
         // Insert own alts as `body`
-        K2({ negate: true, body: body3 }),
+        K2({ negate: true, body: body4 }),
         Q2("Any")
       );
       const outerGroup = A4();
@@ -22834,8 +23141,8 @@ function getKids(node) {
   if (!node) {
     throw new Error("Node expected");
   }
-  const { body: body3 } = node;
-  return Array.isArray(body3) ? body3 : body3 ? [body3] : null;
+  const { body: body4 } = node;
+  return Array.isArray(body4) ? body4 : body4 ? [body4] : null;
 }
 function getLeadingG(els) {
   const firstToConsider = els.find((el) => el.kind === "search_start" || isLoneGLookaround(el, { negate: false }) || !isAlwaysZeroLength(el));
@@ -23044,8 +23351,8 @@ var generator = {
   /**
   @param {AlternativeNode} node
   */
-  Alternative({ body: body3 }, _6, gen) {
-    return body3.map(gen).join("");
+  Alternative({ body: body4 }, _6, gen) {
+    return body4.map(gen).join("");
   },
   /**
   @param {AssertionNode} node
@@ -23078,7 +23385,7 @@ var generator = {
   @param {CapturingGroupNode} node
   */
   CapturingGroup(node, state, gen) {
-    const { body: body3, name, number: number2 } = node;
+    const { body: body4, name, number: number2 } = node;
     const data = { ignoreCase: state.currentFlags.ignoreCase };
     const origin = state.originMap.get(node);
     if (origin) {
@@ -23088,7 +23395,7 @@ var generator = {
       }
     }
     state.captureMap.set(number2, data);
-    return `(${name ? `?<${name}>` : ""}${body3.map(gen).join("|")})`;
+    return `(${name ? `?<${name}>` : ""}${body4.map(gen).join("|")})`;
   },
   /**
   @param {CharacterNode} node
@@ -23114,20 +23421,20 @@ var generator = {
   */
   CharacterClass(node, state, gen) {
     const { kind, negate, parent } = node;
-    let { body: body3 } = node;
+    let { body: body4 } = node;
     if (kind === "intersection" && !state.useFlagV) {
       throw new Error("Use of character class intersection requires min target ES2024");
     }
-    if (envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV && body3.some(isLiteralHyphen)) {
-      body3 = [m4(45), ...body3.filter((kid) => !isLiteralHyphen(kid))];
+    if (envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV && body4.some(isLiteralHyphen)) {
+      body4 = [m4(45), ...body4.filter((kid) => !isLiteralHyphen(kid))];
     }
-    const genClass = () => `[${negate ? "^" : ""}${body3.map(gen).join(kind === "intersection" ? "&&" : "")}]`;
+    const genClass = () => `[${negate ? "^" : ""}${body4.map(gen).join(kind === "intersection" ? "&&" : "")}]`;
     if (!state.inCharClass) {
       if (
         // Already established `kind !== 'intersection'` if `!state.useFlagV`; don't check again
         (!state.useFlagV || envFlags.bugNestedClassIgnoresNegation) && !negate
       ) {
-        const negatedChildClasses = body3.filter(
+        const negatedChildClasses = body4.filter(
           (kid) => kid.type === "CharacterClass" && kid.kind === "union" && kid.negate
         );
         if (negatedChildClasses.length) {
@@ -23135,9 +23442,9 @@ var generator = {
           const groupFirstAlt = group.body[0];
           group.parent = parent;
           groupFirstAlt.parent = group;
-          body3 = body3.filter((kid) => !negatedChildClasses.includes(kid));
-          node.body = body3;
-          if (body3.length) {
+          body4 = body4.filter((kid) => !negatedChildClasses.includes(kid));
+          node.body = body4;
+          if (body4.length) {
             node.parent = groupFirstAlt;
             groupFirstAlt.body.push(node);
           } else {
@@ -23157,14 +23464,14 @@ var generator = {
       state.inCharClass = false;
       return result;
     }
-    const firstEl = body3[0];
+    const firstEl = body4[0];
     if (
       // Already established that the parent is a char class via `inCharClass`; don't check again
       kind === "union" && !negate && firstEl && // Allows many nested classes to work with `target` ES2018 which doesn't support nesting
       ((!state.useFlagV || !state.verbose) && parent.kind === "union" && !(envFlags.bugFlagVLiteralHyphenIsRange && state.useFlagV) || !state.verbose && parent.kind === "intersection" && // JS doesn't allow intersection with union or ranges
-      body3.length === 1 && firstEl.type !== "CharacterClassRange")
+      body4.length === 1 && firstEl.type !== "CharacterClassRange")
     ) {
-      return body3.map(gen).join("");
+      return body4.map(gen).join("");
     }
     if (!state.useFlagV && parent.type === "CharacterClass") {
       throw new Error("Uses nested character class in a way that requires min target ES2024");
@@ -23236,13 +23543,13 @@ var generator = {
   /**
   @param {GroupNode} node
   */
-  Group({ atomic: atomic2, body: body3, flags, parent }, state, gen) {
+  Group({ atomic: atomic2, body: body4, flags, parent }, state, gen) {
     const currentFlags = state.currentFlags;
     if (flags) {
       state.currentFlags = getNewCurrentFlags(currentFlags, flags);
     }
-    const contents = body3.map(gen).join("|");
-    const result = !state.verbose && body3.length === 1 && // Single alt
+    const contents = body4.map(gen).join("|");
+    const result = !state.verbose && body4.length === 1 && // Single alt
     parent.type !== "Quantifier" && !atomic2 && (!state.useFlagMods || !flags) ? contents : `(?${getGroupPrefix(atomic2, flags, state.useFlagMods)}${contents})`;
     state.currentFlags = currentFlags;
     return result;
@@ -23250,9 +23557,9 @@ var generator = {
   /**
   @param {LookaroundAssertionNode} node
   */
-  LookaroundAssertion({ body: body3, kind, negate }, _6, gen) {
+  LookaroundAssertion({ body: body4, kind, negate }, _6, gen) {
     const prefix = `${kind === "lookahead" ? "" : "<"}${negate ? "!" : "="}`;
-    return `(?${prefix}${body3.map(gen).join("|")})`;
+    return `(?${prefix}${body4.map(gen).join("|")})`;
   },
   /**
   @param {QuantifierNode} node
@@ -44910,8 +45217,8 @@ var TabsContainer = class extends CompositeDisposable {
           }
         };
       },
-      open: (body3) => {
-        popup().openPopover(body3, anchor);
+      open: (body4) => {
+        popup().openPopover(body4, anchor);
       },
       close: () => popup().close(),
       focusTrigger: () => {
@@ -62230,6 +62537,7 @@ var elements = {
   "slicc-sprinkle": SliccSprinkle,
   "slicc-lucide": SliccLucide,
   "slicc-tray": SliccTray,
+  "slicc-updates": SliccUpdates,
   "slicc-app": SliccApp
 };
 function define2() {
@@ -62257,6 +62565,7 @@ export {
   SliccFileTree,
   SliccFileView,
   SliccFiles,
+  SliccUpdates,
   define2 as define,
   grammarBase,
   resolveColor,