pinokiod 3.92.0 → 3.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "3.92.0",
+  "version": "3.94.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/common.js

@@ -105,6 +105,11 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
     this.overlayHidden = false;
     this.floatingControls = null;
     this.floatingStatus = null;
+    this.floatingDrag = null;
+    this.onFloatingPointerDown = this.startFloatingDrag.bind(this);
+    this.onFloatingPointerMove = this.handleFloatingPointerMove.bind(this);
+    this.onFloatingPointerUp = (event) => this.stopFloatingDrag(event);
+    this.onFloatingWindowResize = this.handleFloatingResize.bind(this);
     this.resolveFn = null;
     this.rejectFn = null;
     this.colorDefault = '#ddd';
@@ -991,7 +996,7 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
       color:#fff; padding:10px 14px; border-radius:12px;
       box-shadow:0 8px 24px rgba(0,0,0,0.35);
       font-size:14px; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
-      pointer-events:auto;
+      pointer-events:auto; cursor:grab; touch-action:none;
     `;
 
     const status = document.createElement('div');
@@ -1012,11 +1017,25 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
 
     controls.append(status, stopBtn);
     document.body.appendChild(controls);
+    const rect = controls.getBoundingClientRect();
+    const initial = this.clampFloatingPosition(rect);
+    controls.style.left = `${initial.left}px`;
+    controls.style.top = `${initial.top}px`;
+    controls.style.right = 'auto';
+    controls.style.bottom = 'auto';
     this.floatingControls = controls;
     this.floatingStatus = status;
+
+    controls.addEventListener('pointerdown', this.onFloatingPointerDown);
+    window.addEventListener('resize', this.onFloatingWindowResize, { passive: true });
   }
 
   removeFloatingControls() {
+    this.stopFloatingDrag();
+    if (this.floatingControls) {
+      this.floatingControls.removeEventListener('pointerdown', this.onFloatingPointerDown);
+    }
+    window.removeEventListener('resize', this.onFloatingWindowResize);
     if (this.floatingControls && this.floatingControls.parentNode) {
       this.floatingControls.parentNode.removeChild(this.floatingControls);
     }
@@ -1024,6 +1043,90 @@ body.dark .capture-modal-button.secondary{background:rgba(148,163,184,0.2);color
     this.floatingStatus = null;
   }
 
+  clampFloatingPosition(rect) {
+    const margin = 8;
+    const maxLeft = Math.max(margin, window.innerWidth - rect.width - margin);
+    const maxTop = Math.max(margin, window.innerHeight - rect.height - margin);
+    const left = Math.min(Math.max(rect.left, margin), maxLeft);
+    const top = Math.min(Math.max(rect.top, margin), maxTop);
+    return { left, top };
+  }
+
+  startFloatingDrag(event) {
+    if (!this.floatingControls || event.button !== 0) return;
+    if (event.target && event.target.closest('button')) return;
+    const rect = this.floatingControls.getBoundingClientRect();
+    const { left, top } = this.clampFloatingPosition(rect);
+    this.floatingControls.style.left = `${left}px`;
+    this.floatingControls.style.top = `${top}px`;
+    this.floatingControls.style.right = 'auto';
+    this.floatingControls.style.bottom = 'auto';
+
+    this.floatingDrag = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      baseLeft: left,
+      baseTop: top
+    };
+
+    if (this.floatingControls.setPointerCapture) {
+      try {
+        this.floatingControls.setPointerCapture(event.pointerId);
+      } catch (_) {
+        // Ignore inability to capture pointer (e.g., already captured).
+      }
+    }
+    this.floatingControls.style.cursor = 'grabbing';
+    window.addEventListener('pointermove', this.onFloatingPointerMove);
+    window.addEventListener('pointerup', this.onFloatingPointerUp);
+    window.addEventListener('pointercancel', this.onFloatingPointerUp);
+  }
+
+  handleFloatingPointerMove(event) {
+    if (!this.floatingDrag || event.pointerId !== this.floatingDrag.pointerId || !this.floatingControls) return;
+    const dx = event.clientX - this.floatingDrag.startX;
+    const dy = event.clientY - this.floatingDrag.startY;
+    const proposed = {
+      left: this.floatingDrag.baseLeft + dx,
+      top: this.floatingDrag.baseTop + dy,
+      width: this.floatingControls.offsetWidth,
+      height: this.floatingControls.offsetHeight
+    };
+    const clamped = this.clampFloatingPosition(proposed);
+    this.floatingControls.style.left = `${clamped.left}px`;
+    this.floatingControls.style.top = `${clamped.top}px`;
+  }
+
+  stopFloatingDrag(event) {
+    if (!this.floatingDrag) return;
+    if (event && this.floatingDrag.pointerId !== event.pointerId) return;
+    window.removeEventListener('pointermove', this.onFloatingPointerMove);
+    window.removeEventListener('pointerup', this.onFloatingPointerUp);
+    window.removeEventListener('pointercancel', this.onFloatingPointerUp);
+    if (this.floatingControls && this.floatingControls.releasePointerCapture && this.floatingDrag.pointerId != null) {
+      try {
+        this.floatingControls.releasePointerCapture(this.floatingDrag.pointerId);
+      } catch (_) {
+        // Ignore release errors (e.g., pointer already released).
+      }
+    }
+    if (this.floatingControls) {
+      this.floatingControls.style.cursor = 'grab';
+    }
+    this.floatingDrag = null;
+  }
+
+  handleFloatingResize() {
+    if (!this.floatingControls) return;
+    const rect = this.floatingControls.getBoundingClientRect();
+    const clamped = this.clampFloatingPosition(rect);
+    this.floatingControls.style.left = `${clamped.left}px`;
+    this.floatingControls.style.top = `${clamped.top}px`;
+    this.floatingControls.style.right = 'auto';
+    this.floatingControls.style.bottom = 'auto';
+  }
+
   formatDuration(ms) {
     const totalSeconds = Math.floor(ms / 1000);
     const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');

package/server/views/app.ejs

@@ -2397,7 +2397,7 @@ body.dark {
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/">
+<a class='home' href="/home">
   <img class='icon' src="/pinokio-black.png">
 </a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>

package/server/views/connect/x.ejs

@@ -193,7 +193,7 @@ pre {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/connect.ejs

@@ -812,7 +812,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/container.ejs

@@ -326,7 +326,7 @@ iframe {
   -->
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/download.ejs

@@ -121,7 +121,7 @@ body.frozen {
 <% } %>
 <header class='grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/explore.ejs

@@ -122,7 +122,7 @@ body main iframe {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/general_editor.ejs

@@ -188,7 +188,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 <body class='columns <%=theme%>' data-agent="<%=agent%>">
   <header class='navheader grabbable'>
   <h1>
-    <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+    <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
     <%=filepath%>
   </h1>
   <div class='runner'>

package/server/views/github.ejs

@@ -234,7 +234,7 @@ ol {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/help.ejs

@@ -255,7 +255,7 @@ body.dark .item .tile .badge {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/index.ejs

@@ -417,7 +417,7 @@ body.dark aside .current.selected {
 <header class='navheader grabbable'>
 <h1>
 <% if (ishome) { %>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/index2.ejs

@@ -242,7 +242,7 @@ body.dark .open-menu, body.dark .browse {
 <header class='navheader grabbable'>
 <h1>
 <% if (ishome) { %>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/init/index.ejs

@@ -1520,7 +1520,7 @@ body.dark .ace-editor {
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/mini.ejs

@@ -755,7 +755,7 @@ body.dark .appcanvas {
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/net.ejs

@@ -535,7 +535,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <% } %>
 <header class='navheader grabbable'>
   <h1>
-    <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+    <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
     <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
     <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
     <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/network.ejs

@@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function() {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/network2.ejs

@@ -418,7 +418,7 @@ table h3 {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/old_network.ejs

@@ -401,7 +401,7 @@ input:checked + .slider:before {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/pro.ejs

@@ -184,7 +184,7 @@ body.dark #status-window b {
   <% } %>
     <h1>
       <% if (target === "_top") { %>
-      <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+      <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
       <% } %>
       <div class='hidden btn run play-btn'>
         <span class='play'><i class="fa-solid fa-play"></i> Start</span>

package/server/views/prototype/index.ejs

@@ -1002,7 +1002,7 @@ body.dark .appcanvas {
 <body class='<%=theme%>' data-platform="<%=platform%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/review.ejs

@@ -935,7 +935,7 @@ body.dark .top-menu .btn2.selected {
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/">
+<a class='home' href="/home">
   <img class='icon' src="/pinokio-black.png">
 </a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>

package/server/views/screenshots.ejs

@@ -708,7 +708,7 @@ document.addEventListener('DOMContentLoaded', function() {
   -->
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/settings.ejs

@@ -373,7 +373,7 @@ document.addEventListener('DOMContentLoaded', function() {
   -->
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>

package/server/views/setup.ejs

@@ -135,7 +135,7 @@ body {
 <body class='<%=theme%>' data-agent="<%=agent%>">
 <header class='grabbable'>
 <h1>
-<a class='home' href="/"><%-logo%></a>
+<a class='home' href="/home"><%-logo%></a>
 <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
 <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">

package/server/views/shell.ejs

@@ -1116,7 +1116,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   <% } %>
     <div class='runner'>
       <% if (target === "_top") { %>
-      <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+      <a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
       <% } %>
       <div class='hidden btn run play-btn'>
         <span class='play'><i class="fa-solid fa-play"></i> Start</span>

package/server/views/sidebar.ejs

@@ -35,7 +35,7 @@ html, body {
 </style>
 </head>
 <body class='<%=theme%>' data-agent="<%=agent%>">
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <a class='header-item' href="<%=home%>">
   <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
   <div><%=config.title%></div>

package/server/views/tools.ejs

@@ -1098,7 +1098,7 @@ document.addEventListener('DOMContentLoaded', function() {
   -->
 <header class='navheader grabbable'>
 <h1>
-<a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
+<a class='home' href="/home"><img class='icon' src="/pinokio-black.png"></a>
 <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
 <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
 <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>