pinokiod 7.0.10 → 7.0.11

package/package.json

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

package/server/index.js

@@ -3815,14 +3815,10 @@ class Server {
             }
           }
         }
-        if (config.menu[i].popout) {
-          config.menu[i].target = "_blank"
-        } else {
-          const targetBase = config.menu[i].id || config.menu[i].src || config.menu[i].href
-          config.menu[i].target = targetBase ? "@" + targetBase : undefined
-          if (config.menu[i].href) {
-            config.menu[i].target_full = config.menu[i].href
-          }
+        const targetBase = config.menu[i].id || config.menu[i].src || config.menu[i].href
+        config.menu[i].target = targetBase ? "@" + targetBase : undefined
+        if (config.menu[i].href) {
+          config.menu[i].target_full = config.menu[i].href
         }
 
         //if (config.menu[i].href && config.menu[i].href.startsWith("http")) {

package/server/public/browser-popout-surface.css

@@ -0,0 +1,60 @@
+.browserview-external-surface {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 40px 32px;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+.browserview-external-surface:hover,
+.browserview-external-surface:focus-visible {
+  background: rgba(15, 23, 42, 0.03);
+}
+.browserview-external-panel {
+  width: min(420px, 100%);
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  text-align: center;
+}
+.browserview-external-icon {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  color: #1f2937;
+  font-size: 16px;
+}
+.browserview-external-title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #111827;
+}
+.browserview-external-url {
+  max-width: 100%;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #6b7280;
+  word-break: break-word;
+}
+body.dark .browserview-external-surface:hover,
+body.dark .browserview-external-surface:focus-visible {
+  background: rgba(148, 163, 184, 0.06);
+}
+body.dark .browserview-external-icon {
+  border-color: rgba(148, 163, 184, 0.24);
+  color: #e5e7eb;
+}
+body.dark .browserview-external-title {
+  color: #f3f4f6;
+}
+body.dark .browserview-external-url {
+  color: #94a3b8;
+}

package/server/public/browser-popout-surface.js

@@ -0,0 +1,92 @@
+(function() {
+  const DEFAULT_TITLE = "Click to open in browser"
+  const normalizeHref = (value) => {
+    if (typeof value !== "string") {
+      return ""
+    }
+    const trimmed = value.trim()
+    if (
+      trimmed.length >= 2 &&
+      ((trimmed.startsWith('"') && trimmed.endsWith('"')) || (trimmed.startsWith("'") && trimmed.endsWith("'")))
+    ) {
+      return trimmed.slice(1, -1)
+    }
+    return trimmed
+  }
+
+  const resolveHref = (target) => {
+    if (!target) {
+      return ""
+    }
+    return normalizeHref(target.getAttribute("data-target-full") || target.href || target.getAttribute("href") || "")
+  }
+
+  const openBrowserPopoutUrl = (href) => {
+    if (!href) {
+      return
+    }
+    const agent = document.body ? document.body.getAttribute("data-agent") : null
+    if (agent === "electron") {
+      window.open(href, "_blank", "browser")
+    } else {
+      window.open(href, "_blank", "noopener")
+    }
+  }
+
+  window.createBrowserPopoutSurface = function(options = {}) {
+    const surface = document.getElementById(options.id || "browserview-external-surface")
+    const title = surface ? surface.querySelector("[data-browserview-external-title]") : null
+    const url = surface ? surface.querySelector("[data-browserview-external-url]") : null
+    const titleText = options.title || DEFAULT_TITLE
+    const onShow = typeof options.onShow === "function" ? options.onShow : null
+
+    const hide = () => {
+      if (!surface) {
+        return
+      }
+      surface.classList.add("hidden")
+      surface.setAttribute("hidden", "")
+      delete surface.dataset.href
+    }
+
+    const show = (target) => {
+      if (!surface || !target) {
+        return
+      }
+      const href = resolveHref(target)
+      surface.dataset.href = href
+      surface.classList.remove("hidden")
+      surface.removeAttribute("hidden")
+      if (title) {
+        title.textContent = titleText
+      }
+      if (url) {
+        url.textContent = href
+      }
+      if (onShow) {
+        onShow({ target, href })
+      }
+    }
+
+    if (surface && !surface.dataset.browserPopoutBound) {
+      surface.dataset.browserPopoutBound = "true"
+      surface.addEventListener("click", () => {
+        openBrowserPopoutUrl(surface.dataset.href || "")
+      })
+      surface.addEventListener("keydown", (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault()
+          openBrowserPopoutUrl(surface.dataset.href || "")
+        }
+      })
+    }
+
+    return {
+      hide,
+      isPopoutTab: (node) => Boolean(node && node.getAttribute("data-popout-browser") === "true"),
+      open: openBrowserPopoutUrl,
+      show,
+      surface,
+    }
+  }
+})()

package/server/public/opener.js

@@ -108,7 +108,11 @@ document.addEventListener("click", async (e) => {
     if (href) {
       let agent = document.body.getAttribute("data-agent")
       if (agent === "electron") {
-        window.open(href, "_blank", "pinokio")
+        if (features && features.includes("browser")) {
+          window.open(href, "_blank", "browser")
+        } else {
+          window.open(href, "_blank", "pinokio")
+        }
       } else {
         window.open(href, "_blank", features)
       }
@@ -144,13 +148,17 @@ document.addEventListener("click", async (e) => {
     if (el) {
       e.preventDefault()
       e.stopPropagation()
+      let features = el.getAttribute("features")
+      let href = el.href || el.getAttribute("data-href")
       let agent = document.body.getAttribute("data-agent")
-      if (agent === "electron") {
-        window.open(href, "_blank", "pinokio")
-      } else {
-//        window.open(href, "_blank", features)
-        let features = el.getAttribute("features")
-        window.open(el.href, "_blank", features)
+      if (agent === "electron" && href) {
+        if (features && features.includes("browser")) {
+          window.open(href, "_blank", "browser")
+        } else {
+          window.open(href, "_blank", "pinokio")
+        }
+      } else if (href) {
+        window.open(href, "_blank", features)
       }
     }
   }

package/server/public/style.css

@@ -1376,6 +1376,15 @@ header .runner.terminal-runner-minimal .btn span {
 .terminal-config .btn {
   margin-right: 0;
 }
+@media (max-width: 640px) {
+  .navheader2 .runner,
+  .navheader2 .runner .terminal-runner-utilities {
+    gap: 5px;
+  }
+  .navheader2 .runner .btn {
+    padding: 5px 5px;
+  }
+}
 .terminal-config-menu {
   position: absolute;
   top: calc(100% + 8px);

package/server/views/app.ejs

@@ -4737,6 +4737,7 @@ header.navheader .mode-selector .community-mode-toggle {
 }
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<link href="/browser-popout-surface.css" rel="stylesheet"/>
 <link href="/tab-link-popover.css" rel="stylesheet"/>
 <script src="/window_storage.js"></script>
 <script src="/timeago.min.js"></script>
@@ -4762,6 +4763,7 @@ header.navheader .mode-selector .community-mode-toggle {
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 <script src="/tab-link-popover.js"></script>
+<script src="/browser-popout-surface.js"></script>
 <script>
 (function() {
   try {
@@ -5064,6 +5066,7 @@ header.navheader .mode-selector .community-mode-toggle {
         <% if (type === 'files') { %>
           <iframe class='selected' src="<%=editor_tab%>" allow="fullscreen *;" allowfullscreen></iframe>
         <% } %>
+        <%- include('./partials/browser_popout_surface') %>
       </main>
       <% if (type === 'run') { %>
       <div class='ask-ai-resizer' id='ask-ai-resizer' role="separator" aria-orientation="vertical" aria-valuemin="240" aria-valuemax="9999" aria-valuenow="560" tabindex="0" aria-label="Resize panel"></div>
@@ -5281,6 +5284,11 @@ header.navheader .mode-selector .community-mode-toggle {
   })()
   let ignorePersistedSelection = pluginLaunchActive
   let lastForegroundSignature = null
+  const browserPopoutSurface = window.createBrowserPopoutSurface({
+    onShow: () => {
+      lastForegroundSignature = null
+    },
+  })
   const iframe_onerror = (iframe) => {
     if (iframe && iframe.dataset && iframe.dataset.forceVisible === 'true') {
       return
@@ -6334,7 +6342,10 @@ const rerenderMenuSection = (container, html) => {
     target.classList.add("cursor")
   }
   const nav = (type) => {
-    let targetFrame = document.querySelector("iframe:not(.hidden)")
+    let targetFrame = document.querySelector("main.browserview iframe:not(.hidden)")
+    if (!targetFrame || !targetFrame.contentWindow) {
+      return
+    }
     if (type === "back") {
   //    targetFrame.contentWindow.history.back()
       targetFrame.contentWindow.postMessage({
@@ -6520,6 +6531,7 @@ const rerenderMenuSection = (container, html) => {
     }
 
     if (!target) {
+      browserPopoutSurface.hide()
       document.querySelector(".container").classList.remove("active")
       document.querySelector("aside").classList.add("active")
       return
@@ -6570,7 +6582,8 @@ const rerenderMenuSection = (container, html) => {
       let _url = new URL(target.href)
       const urlKey = selectionUrlStorageKey()
       if (urlKey) {
-        windowStorage.setItem(urlKey, _url.pathname + _url.search + _url.hash)
+        const selectionValue = browserPopoutSurface.isPopoutTab(target) ? target.href : (_url.pathname + _url.search + _url.hash)
+        windowStorage.setItem(urlKey, selectionValue)
       }
     <% } %>
 
@@ -6578,6 +6591,15 @@ const rerenderMenuSection = (container, html) => {
     document.querySelectorAll("main.browserview iframe").forEach((el) => {
       el.classList.add("hidden")
     })
+    browserPopoutSurface.hide()
+    if (browserPopoutSurface.isPopoutTab(target)) {
+      if (eventParam) {
+        eventParam.preventDefault()
+        eventParam.stopPropagation()
+      }
+      browserPopoutSurface.show(target)
+      return
+    }
 
 
 

package/server/views/mini.ejs

@@ -730,6 +730,7 @@ body.dark .appcanvas {
 }
 </style>
 <link href="/app.css" rel="stylesheet"/>
+<link href="/browser-popout-surface.css" rel="stylesheet"/>
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
@@ -751,6 +752,7 @@ body.dark .appcanvas {
 <script src="/filepond-plugin-image-transform.min.js"></script>
 <script src="/filepond.min.js"></script>
 <script src="/fseditor.js"></script>
+<script src="/browser-popout-surface.js"></script>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>" data-agent="<%=agent%>">
 <header class='navheader grabbable'>
@@ -791,6 +793,7 @@ body.dark .appcanvas {
 </aside>
 <div class='container'>
   <main class='browserview'>
+    <%- include('./partials/browser_popout_surface') %>
   </main>
 </div>
 </div>
@@ -803,6 +806,7 @@ body.dark .appcanvas {
     interacted = true
   })
   const n = new N()
+  const browserPopoutSurface = window.createBrowserPopoutSurface()
   const getTarget = (href) => {
     let u
     if (href.startsWith("http")) {
@@ -851,6 +855,9 @@ body.dark .appcanvas {
   }
   const nav = (type) => {
     let targetFrame = document.querySelector("iframe:not(.hidden)")
+    if (!targetFrame || !targetFrame.contentWindow) {
+      return
+    }
     if (type === "back") {
   //    targetFrame.contentWindow.history.back()
       targetFrame.contentWindow.postMessage({
@@ -948,6 +955,7 @@ body.dark .appcanvas {
         document.querySelector(".container").classList.add("active")
         document.querySelector("aside").classList.remove("active")
       } else {
+        browserPopoutSurface.hide()
         document.querySelector(".container").classList.remove("active")
         document.querySelector("aside").classList.add("active")
       }
@@ -986,6 +994,15 @@ body.dark .appcanvas {
         document.querySelectorAll("iframe").forEach((el) => {
           el.classList.add("hidden")
         })
+        browserPopoutSurface.hide()
+        if (browserPopoutSurface.isPopoutTab(target)) {
+          if (e) {
+            e.preventDefault()
+            e.stopPropagation()
+          }
+          browserPopoutSurface.show(target)
+          return
+        }
 
 
 

package/server/views/partials/browser_popout_surface.ejs

@@ -0,0 +1,7 @@
+<div class='browserview-external-surface hidden' id='browserview-external-surface' hidden role='button' tabindex='0' aria-label='Open selected page in browser'>
+  <div class='browserview-external-panel'>
+    <div class='browserview-external-icon'><i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i></div>
+    <div class='browserview-external-title' data-browserview-external-title>Click to open in browser</div>
+    <div class='browserview-external-url' data-browserview-external-url></div>
+  </div>
+</div>

package/server/views/partials/dynamic.ejs

@@ -27,15 +27,17 @@
         <div data-filepath="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'>
           <div class='tab'><%-item.btn%></div>
         </div>
-      <% } else if (item.target === "_blank") { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%= item.target_full ? ` data-target-full="${item.target_full}"` : '' %><%= item.project_slug ? ` data-project-slug="${item.project_slug}"` : '' %>>
+      <% } else if (item.target === "_blank" || item.popout) { %>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<% if (item.popout) { %> data-popout-browser="true"<% } %><%- item.target_full ? ` data-target-full=${JSON.stringify(item.target_full)}` : '' %><%- item.project_slug ? ` data-project-slug=${JSON.stringify(item.project_slug)}` : '' %>>
           <div class='tab'><%-item.btn%></div>
-          <div class='loader'>
-            <i class="fa-solid fa-up-right-from-square"></i>
-          </div>
+          <% if (!item.popout) { %>
+            <div class='loader'>
+              <i class="fa-solid fa-up-right-from-square"></i>
+            </div>
+          <% } %>
         </a>
       <% } else { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%= item.target_full ? ` data-target-full="${item.target_full}"` : '' %> <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%><%= item.project_slug ? ` data-project-slug="${item.project_slug}"` : '' %>>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index+4%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%- item.target_full ? ` data-target-full=${JSON.stringify(item.target_full)}` : '' %> <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%><%- item.project_slug ? ` data-project-slug=${JSON.stringify(item.project_slug)}` : '' %>>
           <% if (item.running) { %>
             <i class="fa-solid fa-circle"></i>
           <% } %>

package/server/views/partials/menu.ejs

@@ -39,18 +39,20 @@
             <i class="fa-solid fa-angle-right"></i>
           <% } %>
         </div>
-      <% } else if (item.target === "_blank") { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%= item.target_full ? ` data-target-full="${item.target_full}"` : '' %><%= item.project_slug ? ` data-project-slug="${item.project_slug}"` : '' %><%- item.inject ? ` data-pinokio-inject="${encodeURIComponent(JSON.stringify(item.inject))}"` : '' %>>
+      <% } else if (item.target === "_blank" || item.popout) { %>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<% if (item.popout) { %> data-popout-browser="true"<% } %><%- item.target_full ? ` data-target-full=${JSON.stringify(item.target_full)}` : '' %><%- item.project_slug ? ` data-project-slug=${JSON.stringify(item.project_slug)}` : '' %><%- item.inject ? ` data-pinokio-inject="${encodeURIComponent(JSON.stringify(item.inject))}"` : '' %>>
           <div class='tab'><%-item.btn%></div>
           <% if (item.arrow) { %>
             <i class="fa-solid fa-angle-right"></i>
           <% } %>
-          <div class='loader'>
-            <i class="fa-solid fa-up-right-from-square"></i>
-          </div>
+          <% if (!item.popout) { %>
+            <div class='loader'>
+              <i class="fa-solid fa-up-right-from-square"></i>
+            </div>
+          <% } %>
         </a>
       <% } else { %>
-        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%= item.target_full ? ` data-target-full="${item.target_full}"` : '' %> <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%><%= item.project_slug ? ` data-project-slug="${item.project_slug}"` : '' %><%- item.inject ? ` data-pinokio-inject="${encodeURIComponent(JSON.stringify(item.inject))}"` : '' %>>
+        <a <%=item.default ? 'data-default' : ''%> data-confirm="<%=item.confirm%>" data-index="<%=index%>" target="<%=item.target%>" data-mode="<%=item.mode%>" href="<%=item.href%>" class='btn header-item frame-link <%=item.display || ""%>'<%- item.target_full ? ` data-target-full=${JSON.stringify(item.target_full)}` : '' %> <%=item.shell_id ? `data-shell=${item.shell_id}` : ""%> <%=item.script_id ? `data-script=${item.script_id}` : ''%><%- item.project_slug ? ` data-project-slug=${JSON.stringify(item.project_slug)}` : '' %><%- item.inject ? ` data-pinokio-inject="${encodeURIComponent(JSON.stringify(item.inject))}"` : '' %>>
           <% if (item.running) { %>
             <i class="fa-solid fa-circle"></i>
           <% } %>