@ai-ecoverse/slicc-spectrum 1.57.0 → 1.58.1

package/dist/slicc-ui.js

@@ -9668,6 +9668,7 @@ var SliccFiles = class extends ModelElement {
     ...ModelElement.properties,
     count: { state: true },
     mounted: { state: true },
+    sources: { state: true },
     mounting: { state: true },
     ejecting: { state: true },
     waiting: { state: true },
@@ -9681,6 +9682,7 @@ var SliccFiles = class extends ModelElement {
     super();
     this.count = 0;
     this.mounted = [];
+    this.sources = /* @__PURE__ */ new Map();
     this.mounting = false;
     this.ejecting = /* @__PURE__ */ new Set();
     this.waiting = [];
@@ -9733,6 +9735,38 @@ var SliccFiles = class extends ModelElement {
         gap: var(--swc-spacing-100);
         min-height: var(--swc-component-height-75);
       }
+      .mounts .source {
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .mounts .path[data-source] {
+        --sep: 2ch;
+        display: flex;
+        flex-wrap: wrap;
+        margin-left: calc(-1 * var(--sep));
+        clip-path: inset(0 0 0 var(--sep));
+      }
+      .mounts .path[data-source] > span {
+        display: flex;
+        min-width: 0;
+        max-width: calc(100% - var(--sep));
+        margin-left: var(--sep);
+      }
+      .mounts .target,
+      .mounts .source .name {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: pre;
+      }
+      .mounts .source {
+        position: relative;
+      }
+      .mounts .source .sep {
+        position: absolute;
+        right: 100%;
+        width: var(--sep);
+        text-align: center;
+      }
       .mounts .path {
         flex: 1;
         min-width: 0;
@@ -9780,7 +9814,11 @@ var SliccFiles = class extends ModelElement {
     void this.updateComplete.then(() => this.#sync());
   }
   #mounts(files) {
-    this.mounted = files.mounts?.() ?? [];
+    const info = files.mountInfo?.();
+    this.mounted = info ? info.map((item2) => item2.target) : files.mounts?.() ?? [];
+    this.sources = new Map(
+      (info ?? []).flatMap((item2) => item2.source ? [[item2.target, item2.source]] : [])
+    );
     this.waiting = files.needsFolder?.() ?? [];
   }
   #sync() {
@@ -9887,6 +9925,11 @@ var SliccFiles = class extends ModelElement {
       </ul>
     </section>`;
   }
+  #mounted(path) {
+    const source = this.sources.get(path);
+    if (!source) return b`<span class="path" title=${path}>${path}</span>`;
+    return b`<span class="path" title=${`${path} \xB7 ${source}`} data-source=${source}><span class="target">${path}</span><span class="source"><span class="sep">·</span><span class="name">${source}</span></span></span>`;
+  }
   #strip(files) {
     if (this.mounted.length === 0) return A;
     const eject = files?.eject?.bind(files);
@@ -9895,7 +9938,7 @@ var SliccFiles = class extends ModelElement {
       <ul aria-labelledby="mounted">
         ${this.mounted.map(
       (path) => b`<li>
-            <span class="path" title=${path}>${path}</span>
+            ${this.#mounted(path)}
             ${eject ? b`<swc-action-button
                     size="s"
                     quiet
@@ -12080,7 +12123,7 @@ var automation = {
   extension: "Browser automation: through the SLICC extension.",
   proxy: "Browser automation: through slicc-node.",
   link: "Browser automation: through a linked device.",
-  none: "Browser automation: not available. Install the extension or run slicc-node."
+  none: "Browser automation: not available. Install the extension, or run slicc-node or npx sliccy@next."
 };
 function automationOf(browser) {
   return browser.via ?? "none";
@@ -12523,7 +12566,43 @@ var SliccNetwork = class extends ModelElement {
         color: var(--swc-neutral-subdued-content-color-default);
         overflow-wrap: anywhere;
       }
+      .folders ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--swc-spacing-75);
+        margin: var(--swc-spacing-75) 0 0;
+        padding: 0;
+        list-style: none;
+      }
+      .folders li {
+        display: flex;
+        align-items: center;
+        gap: var(--swc-spacing-100);
+        min-width: 0;
+      }
+      .folders swc-icon-folder {
+        flex: none;
+        color: var(--swc-neutral-subdued-content-color-default);
+      }
+      .folder {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--swc-spacing-50) var(--swc-spacing-100);
+        min-width: 0;
+        overflow-wrap: anywhere;
+      }
+      .folder > code {
+        flex: none;
+        max-width: 100%;
+      }
+      .folder .muted {
+        flex-basis: 100%;
+        font-size: var(--swc-font-size-75);
+      }
       .where code,
+      .folder code,
       [data-browsers] code {
         font-family: var(--swc-code-font-family-stack);
       }
@@ -12908,10 +12987,35 @@ var SliccNetwork = class extends ModelElement {
       <span class="where">${device.host ? b`<code>${device.host}</code>` : A}<span>${device.address ? b`<code>${device.address}</code> · ` : A}${device.mode === "local" ? "This computer" : "Remote"}${device.kind === "seven" ? " \xB7 Follower" : ""}</span></span>
       ${device.policy ? b`<span class="muted" data-policy>Reaches ${device.policy}.</span>` : A}
       ${device.browsers?.length ? b`<span class="muted" data-browsers>${device.browsers.length === 1 ? "Browser" : "Browsers"}: ${device.browsers.map((item2, index) => b`${index ? ", " : ""}${item2.name} (<code>${item2.runtime}</code>)`)}</span>` : A}
+      ${device.folders?.length ? this.#folders(port, device, device.folders) : A}
       ${device.asking ? this.#ask(port, device) : this.#access(port, device)}
       ${device.offers.includes("ssh") ? b`<div class="command" data-copy="ssh"><code>ssh ${device.host}</code>${this.#copyButton(`ssh:${device.id}`, "ssh", "ssh command", `ssh ${device.host}`, "linksError")}</div>` : A}
     </li>`;
   }
+  #folders(port, device, folders) {
+    const heading = `folders-${device.id}`;
+    return b`<div class="folders" data-folders>
+      <span class="muted" id=${heading}>Folders</span>
+      <ul aria-labelledby=${heading}>${folders.map((folder2) => this.#folder(port, device, folder2))}</ul>
+    </div>`;
+  }
+  #folder(port, device, folder2) {
+    const action = `folder:${folder2.source}`;
+    const busy = this.busy === action;
+    const button = folder2.mounted ? port.ejectFolder ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="eject-folder" data-id=${folder2.source} accessible-label=${`Eject ${folder2.mounted}`} ?pending=${busy} ?disabled=${this.#waiting(action)} @click=${() => this.#act(action, () => port.ejectFolder?.(folder2.source), "linksError")}>Eject</swc-button>` : A : port.mountFolder ? b`<swc-button size="s" variant="secondary" fill-style="outline" data-action="mount-folder" data-id=${folder2.source} accessible-label=${`Mount ${folder2.source}`} ?pending=${busy} ?disabled=${this.#waiting(action) || device.state !== "connected"} @click=${() => this.#act(action, () => this.#mountFolder(port, folder2.source), "linksError")}>Mount</swc-button>` : A;
+    return b`<li data-folder=${folder2.source} data-mounted=${folder2.mounted ? "yes" : "no"}>
+      <swc-icon-folder size="s" aria-hidden="true"></swc-icon-folder>
+      <span class="folder">
+        <code title=${folder2.source}>${folder2.name}</code>
+        ${folder2.readonly ? b`<swc-badge size="s" variant="neutral" subtle data-readonly>Read-only</swc-badge>` : A}
+        ${folder2.mounted ? b`<span class="muted" data-mounted-at>Mounted at <code>${folder2.mounted}</code></span>` : A}
+      </span>
+      ${button}
+    </li>`;
+  }
+  async #mountFolder(port, source) {
+    await port.mountFolder?.(source);
+  }
   #join(port, links) {
     const ready = links.joinCommand || links.joinUrl;
     const follow = links.followUrl;