@ai-ecoverse/slicc-spectrum 1.65.1 → 1.65.2

package/dist/slicc-terminal.js

@@ -1,7 +1,7 @@
 import {
   SliccTerminal,
   define
-} from "./chunk-XI74SELH.js";
+} from "./chunk-ZGJM5WUN.js";
 import {
   kernelBackend
 } from "./chunk-XYPGNJAO.js";

package/dist/slicc-ui.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-EN3XGF2M.js";
 import {
   define
-} from "./chunk-XI74SELH.js";
+} from "./chunk-ZGJM5WUN.js";
 import {
   isVaultFailure,
   nameProblem,
@@ -13843,13 +13843,13 @@ function resolve(panels, raw2, reachable2, cone) {
   return found?.id ?? null;
 }
 function state(info) {
-  const shown3 = info.active ? "active" : info.visible ? "shown" : info.open ? "open" : "closed";
-  return info.busy ? `${shown3} \xB7 busy: ${info.busy}` : shown3;
+  const shown4 = info.active ? "active" : info.visible ? "shown" : info.open ? "open" : "closed";
+  return info.busy ? `${shown4} \xB7 busy: ${info.busy}` : shown4;
 }
 function table(rows) {
   const lines = [["ID", "TITLE", "STATE"], ...rows.map((row) => [row.id, row.title, state(row)])];
   const widths = [0, 1].map((column) => Math.max(...lines.map((line) => line[column].length)));
-  return lines.map(([id, title, shown3]) => `${id.padEnd(widths[0])}  ${title.padEnd(widths[1])}  ${shown3}`).join("\n");
+  return lines.map(([id, title, shown4]) => `${id.padEnd(widths[0])}  ${title.padEnd(widths[1])}  ${shown4}`).join("\n");
 }
 var done = (result, note = "") => result.code === 0 ? { stdout: `${result.message}${note}
 `, stderr: "", code: 0 } : { stdout: "", stderr: `panel: ${result.message}
@@ -14105,6 +14105,17 @@ function settled(element2) {
     requestAnimationFrame(frame);
   });
 }
+function shown2() {
+  if (!document.hidden) return Promise.resolve();
+  return new Promise((resolve2) => {
+    const seen = () => {
+      if (document.hidden) return;
+      document.removeEventListener("visibilitychange", seen);
+      resolve2();
+    };
+    document.addEventListener("visibilitychange", seen);
+  });
+}
 var ended = { write() {
 }, resize() {
 }, close() {
@@ -14132,6 +14143,9 @@ var KeptSession = class {
     }) : this.#start(size4);
     return session.then((live) => this.#handle(live, sink));
   }
+  replay(write) {
+    for (const chunk of this.#log) write(chunk);
+  }
   dispose() {
     this.#sink = null;
     this.#log = [];
@@ -14310,9 +14324,12 @@ var SliccTerminalPanel = class extends ThemedElement {
     const backend = keep(model.terminals, info.id);
     terminal.backend = {
       open: async (sink) => {
-        await this.#placed(info.id, terminal);
+        const hidden = await this.#placed(info.id, terminal);
         terminal.fit();
-        return backend.open(sink, { cols: terminal.cols, rows: terminal.rows });
+        const cols = terminal.cols;
+        const session = await backend.open(sink, { cols, rows: terminal.rows });
+        if (hidden) void this.#relayout(terminal, backend, cols);
+        return session;
       }
     };
     terminal.addEventListener("exit", () => model.terminals.close(info.id));
@@ -14333,7 +14350,25 @@ var SliccTerminalPanel = class extends ThemedElement {
   #placed(id, screen) {
     const host4 = this.getRootNode().host;
     const panel = host4?.localName === "slicc-dock" ? host4.api.getPanel(terminalPanel(id)) : void 0;
-    if (!panel) return Promise.resolve();
+    if (!panel) return Promise.resolve(false);
+    if (!document.hidden) return this.#seen(panel, screen).then(() => false);
+    if (laid(screen.getBoundingClientRect())) return Promise.resolve(true);
+    return new Promise((resolve2) => {
+      const done2 = (hidden) => {
+        watch.dispose();
+        document.removeEventListener("visibilitychange", visible2);
+        resolve2(hidden);
+      };
+      const watch = panel.api.onDidDimensionsChange((size4) => {
+        if (laid(size4)) done2(true);
+      });
+      const visible2 = () => {
+        if (!document.hidden) done2(false);
+      };
+      document.addEventListener("visibilitychange", visible2);
+    }).then((hidden) => hidden || this.#seen(panel, screen).then(() => false));
+  }
+  #seen(panel, screen) {
     const sized = laid(panel.api) ? Promise.resolve() : new Promise((resolve2) => {
       const watch = panel.api.onDidDimensionsChange((size4) => {
         if (!laid(size4)) return;
@@ -14343,6 +14378,14 @@ var SliccTerminalPanel = class extends ThemedElement {
     });
     return sized.then(() => settled(screen));
   }
+  async #relayout(screen, backend, cols) {
+    await shown2();
+    await settled(screen);
+    screen.fit();
+    if (screen.cols === cols) return;
+    screen.redraw("\x1Bc");
+    backend.replay((data) => screen.redraw(data));
+  }
   #request() {
     this.dispatchEvent(new CustomEvent("new-terminal", { bubbles: true, composed: true }));
   }
@@ -22010,8 +22053,8 @@ var SliccUpdates = class extends ModelElement {
   #checked(at) {
     if (at === null) return b`<span>Not checked yet</span>`;
     const date = new Date(at);
-    const shown3 = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
-    return b`<span>Checked <time datetime=${date.toISOString()}>${shown3}</time></span>`;
+    const shown4 = date.toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short" });
+    return b`<span>Checked <time datetime=${date.toISOString()}>${shown4}</time></span>`;
   }
   #item(item2) {
     const [variant, state3] = states[item2.state];
@@ -22076,14 +22119,14 @@ var SliccUpdates = class extends ModelElement {
   #package(item2, all2, act2) {
     const light = packageLight(item2);
     const busy = this.busy.get(item2.id);
-    const shown3 = busy ? [busy] : act2 ? item2.actions : [];
+    const shown4 = busy ? [busy] : act2 ? item2.actions : [];
     const error = this.problems.get(item2.id) ?? item2.error;
     return b`<li data-id=${item2.id} data-state=${item2.state}>
       <div class="name">
         <h3 title=${item2.package}>${item2.label}</h3>
         ${light ? b`<swc-status-light size="s" variant=${light[0]}>${light[1]}</swc-status-light>` : A}
       </div>
-      <div class="buttons">${shown3.map(
+      <div class="buttons">${shown4.map(
       (action) => b`<swc-button
             size="s"
             variant="secondary"
@@ -22839,11 +22882,11 @@ var SliccApp = class extends ThemedElement {
   #rail(items, side) {
     const primary = side === "bottom" ? items.filter((item2) => phoneRail.includes(item2.id)) : items;
     const fit = primary.length < items.length ? Math.min(primary.length, railCapacity(this.#width, Infinity)) : railCapacity(this.#width, items.length);
-    const shown3 = side === "bottom" ? primary.slice(0, fit) : items;
-    const grouped = new Set(shown3.map((item2) => item2.cone).filter(Boolean)).size > 1;
-    return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown3.map(
-      (item2, index) => b`${grouped && index && shown3[index - 1].cone !== item2.cone ? b`<span class="cones" aria-hidden="true"></span>` : A}${this.#railButton(item2, side)}`
-    )}${this.#more(items.filter((item2) => !shown3.includes(item2)))}</nav>`;
+    const shown4 = side === "bottom" ? primary.slice(0, fit) : items;
+    const grouped = new Set(shown4.map((item2) => item2.cone).filter(Boolean)).size > 1;
+    return b`<nav class=${`rail ${side}`} aria-label=${`Panels, ${side}`} @dragover=${this.#railOver} @dragleave=${this.#railLeave} @drop=${this.#railDrop}>${shown4.map(
+      (item2, index) => b`${grouped && index && shown4[index - 1].cone !== item2.cone ? b`<span class="cones" aria-hidden="true"></span>` : A}${this.#railButton(item2, side)}`
+    )}${this.#more(items.filter((item2) => !shown4.includes(item2)))}</nav>`;
   }
   #rails() {
     const dock = this.renderRoot.querySelector("slicc-dock");
@@ -26688,7 +26731,7 @@ var fieldStyles = i`
     outline-offset: var(--swc-focus-ring-gap);
   }
 `;
-function shown2(element2, style = getComputedStyle(element2)) {
+function shown3(element2, style = getComputedStyle(element2)) {
   return !element2.hidden && !element2.inert && style.display !== "none";
 }
 function disabled(element2) {
@@ -26718,10 +26761,10 @@ function tabbables(root2, stop, out = []) {
       continue;
     }
     const style = getComputedStyle(child);
-    if (!shown2(child, style)) continue;
+    if (!shown3(child, style)) continue;
     if (child.localName === "details" && !child.open) {
       const summary = child.querySelector(":scope > summary");
-      if (summary && shown2(summary) && getComputedStyle(summary).visibility !== "hidden" && !(summary.hasAttribute("tabindex") && summary.tabIndex < 0))
+      if (summary && shown3(summary) && getComputedStyle(summary).visibility !== "hidden" && !(summary.hasAttribute("tabindex") && summary.tabIndex < 0))
         out.push(summary);
       continue;
     }
@@ -28106,8 +28149,8 @@ var SliccMemory = class extends ModelElement {
     const scopes = this.#scopes;
     const scope = this.scope;
     const option2 = (item2) => b`<sp-menu-item value=${item2.id}>${item2.label}</sp-menu-item>`;
-    const shown3 = visible(all2, scope, this.tag, this.query);
-    return b`<div class="bar"><span>${shown3.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
+    const shown4 = visible(all2, scope, this.tag, this.query);
+    return b`<div class="bar"><span>${shown4.length} of ${all2.filter((memory) => memory.scope === scope).length} memories</span><span class="spacer"></span>
         <swc-action-button size="s" quiet @click=${() => this.editing = "new"}><swc-icon-add slot="icon"></swc-icon-add>Remember</swc-action-button>
       </div>
       <div class="tools">
@@ -28129,7 +28172,7 @@ var SliccMemory = class extends ModelElement {
       </div>
       <div class="list">
         ${this.editing === "new" ? b`<div class="row">${this.#form({ scope })}</div>` : A}
-        ${shown3.length ? sections(shown3).map(
+        ${shown4.length ? sections(shown4).map(
       ([section, items]) => b`<h3>${section}</h3>${items.map((memory) => this.#row(memory))}`
     ) : b`<div class="note">${all2.length ? "No memories match." : "No memories yet."}</div>`}
       </div>`;
@@ -29474,8 +29517,8 @@ var SliccSecrets = class extends ThemedElement {
       const before = entries[entries.length - 1]?.seq;
       const page = await vault.audit(before);
       if (this.model?.vault !== vault || !this.isConnected) return;
-      const shown3 = merged(vault.list()?.audit ?? [], this.older);
-      if (shown3[shown3.length - 1]?.seq !== before) return;
+      const shown4 = merged(vault.list()?.audit ?? [], this.older);
+      if (shown4[shown4.length - 1]?.seq !== before) return;
       this.older = merged(this.older, page.audit);
       this.more = page.more;
     } catch (error) {
@@ -29657,7 +29700,7 @@ var SliccSecrets = class extends ThemedElement {
     </li>`;
   }
   #audit(vault, list5, entries, devices) {
-    const shown3 = this.reveals ? entries.filter((entry) => entry.type === "materialize") : entries;
+    const shown4 = this.reveals ? entries.filter((entry) => entry.type === "materialize") : entries;
     const more = this.more ?? list5.auditMore;
     return b`<div class="audit-head">
         <h3 id="secrets-audit">Activity</h3>
@@ -29665,7 +29708,7 @@ var SliccSecrets = class extends ThemedElement {
       this.reveals = event2.target.checked;
     }}>Only reveals to programs</sp-switch>
       </div>
-      ${shown3.length ? b`<ol class="audit" aria-labelledby="secrets-audit">${shown3.map((entry) => this.#entry(entry, devices))}</ol>` : b`<p class="muted" data-audit-empty>${this.reveals ? more ? "No reveals in the activity loaded so far." : "No program has been given a secret." : "Nothing has used a secret yet."}</p>`}
+      ${shown4.length ? b`<ol class="audit" aria-labelledby="secrets-audit">${shown4.map((entry) => this.#entry(entry, devices))}</ol>` : b`<p class="muted" data-audit-empty>${this.reveals ? more ? "No reveals in the activity loaded so far." : "No program has been given a secret." : "Nothing has used a secret yet."}</p>`}
       ${more ? b`<div class="row"><swc-button size="s" variant="secondary" fill-style="outline" data-action="older" ?pending=${this.loading} @click=${() => this.showOlder(vault, entries)}>Show older</swc-button></div>` : A}`;
   }
   #feedback() {
@@ -30843,10 +30886,10 @@ var SliccValueRequest = class extends ThemedElement {
     if (!vault || !request2) return A;
     const locked = !!vault.status()?.locked;
     const rest = queue.length - 1;
-    const shown3 = this.problem?.id === request2.id ? this.problem : null;
-    const problem = shown3?.text ?? "";
-    const name = this.#aria("name", shown3);
-    const field = this.#aria("value", shown3);
+    const shown4 = this.problem?.id === request2.id ? this.problem : null;
+    const problem = shown4?.text ?? "";
+    const name = this.#aria("name", shown4);
+    const field = this.#aria("value", shown4);
     return i17(
       request2.id,
       b`<dialog role="alertdialog" aria-labelledby="title" aria-describedby="asked" data-request=${request2.id} @cancel=${(event2) => {