@zkov/pi-md-viewer 0.1.1 → 0.1.3

package/dist/src-ts/cli.js

@@ -9,7 +9,7 @@ import { discover, portRangeFromEnv, sendFiles, shutdownInstance } from "./disco
 import { FileRegistry } from "./registry.js";
 import { MarkdownRenderer } from "./renderer.js";
 import { ViewerServer } from "./server.js";
-import { launchViewer } from "./viewer-launcher.js";
+import { launchViewer, runPlaywrightViewerHost } from "./viewer-launcher.js";
 const STARTUP_TIMEOUT_MS = 5000;
 function operationResult(payload) {
     return { url: null, added: [], rejected: [], viewerClients: 0, ...payload };
@@ -50,11 +50,20 @@ function parseArgs(argv, cwd) {
             parsed.viewer = requireValue(argv, ++index, arg);
         else if (arg === "--viewer-command")
             parsed.viewerCommand = requireValue(argv, ++index, arg);
+        else if (arg === "--playwright-viewer")
+            parsed.playwrightViewer = requireValue(argv, ++index, arg);
+        else if (arg === "--browser")
+            parsed.browser = parseBrowser(requireValue(argv, ++index, arg));
         else
             parsed.paths.push(arg);
     }
     return parsed;
 }
+function parseBrowser(value) {
+    if (value === "chromium" || value === "firefox" || value === "webkit")
+        return value;
+    throw new Error("--browser must be chromium, firefox, or webkit");
+}
 function requireValue(argv, index, flag) {
     const value = argv[index];
     if (value === undefined)
@@ -78,6 +87,10 @@ export async function main(argv, io = {}) {
     let args;
     try {
         args = parseArgs(argv, process.cwd());
+        if (args.playwrightViewer) {
+            await runPlaywrightViewerHost({ url: args.playwrightViewer, browserName: args.browser ?? "chromium", env });
+            return 0;
+        }
         if (args.serve)
             return await serve(args.port, args.paths);
         const result = await operate(args, env);

package/dist/src-ts/server.js

@@ -124,7 +124,7 @@ export class ViewerServer {
             const template = readFileSync(path.join(legacyAssetRoot, "templates", "viewer.html"), "utf8");
             this.sendBytes(response, 200, Buffer.from(template.replace("{{CSRF_TOKEN}}", this.csrfToken)), "text/html; charset=utf-8");
         }
-        else if (["/static/viewer.css", "/static/viewer.js", "/static/viewer-actions.js"].includes(parsed.pathname)) {
+        else if (["/static/viewer.css", "/static/viewer.js", "/static/viewer-actions.js", "/static/side-aura.svg"].includes(parsed.pathname)) {
             await this.serveAsset(parsed.pathname.replace("/static/", ""), response);
         }
         else if (parsed.pathname === "/api/v1/status") {
@@ -281,7 +281,11 @@ export class ViewerServer {
         const file = path.join(legacyAssetRoot, "static", name);
         try {
             const stat = statSync(file);
-            const type = name.endsWith(".css") ? "text/css; charset=utf-8" : "application/javascript; charset=utf-8";
+            const type = name.endsWith(".css")
+                ? "text/css; charset=utf-8"
+                : name.endsWith(".svg")
+                    ? "image/svg+xml; charset=utf-8"
+                    : "application/javascript; charset=utf-8";
             response.writeHead(200, { "Content-Type": type, "Content-Length": stat.size });
             createReadStream(file).pipe(response);
         }

package/dist/src-ts/viewer-launcher.js

@@ -1,4 +1,7 @@
 import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { headedPlaywrightUnavailableReason, systemOpenCommand } from "./platform.js";
 import { expandViewerCommand, parseViewerCommand } from "./viewer-command.js";
 async function defaultSpawnDetached(command, args) {
@@ -51,37 +54,129 @@ function playwrightLaunchOptions(browserName, platform, env) {
     return options;
 }
 async function launchPlaywright(request) {
-    const reason = headedPlaywrightUnavailableReason(request.platform, request.env);
+    const browserName = request.selection.config.playwright.browser;
+    if (!request.importPlaywright) {
+        await launchDetachedPlaywrightHost(request.url, browserName, request.spawnPlaywrightHost ?? defaultSpawnPlaywrightHost);
+        return;
+    }
+    await openPlaywrightPage({
+        url: request.url,
+        browserName,
+        platform: request.platform,
+        env: request.env,
+        importPlaywright: request.importPlaywright,
+    });
+}
+async function openPlaywrightPage(options) {
+    const reason = headedPlaywrightUnavailableReason(options.platform, options.env);
     if (reason === "unsupported-platform")
         throw new Error('Viewer "playwright" is not available on this platform');
     if (reason)
         throw new Error(`Viewer "playwright" is not available: ${reason}`);
-    const browserName = request.selection.config.playwright.browser;
     let imported;
     try {
-        imported = request.importPlaywright ? await request.importPlaywright() : await import("playwright");
+        imported = options.importPlaywright ? await options.importPlaywright() : await import("playwright");
     }
     catch (error) {
         if (isMissingPlaywrightPackage(error))
-            throw new Error(playwrightInstallHint(browserName));
+            throw new Error(playwrightInstallHint(options.browserName));
         throw error;
     }
     const api = imported;
-    const browserType = api[browserName];
+    const browserType = api[options.browserName];
     if (!browserType)
-        throw new Error(`Playwright browser "${browserName}" is unavailable`);
+        throw new Error(`Playwright browser "${options.browserName}" is unavailable`);
     let browser;
     try {
-        browser = await browserType.launch(playwrightLaunchOptions(browserName, request.platform, request.env));
+        browser = await browserType.launch(playwrightLaunchOptions(options.browserName, options.platform, options.env));
     }
     catch (error) {
         if (isMissingPlaywrightBrowser(error))
-            throw new Error(playwrightBrowserInstallHint(browserName));
+            throw new Error(playwrightBrowserInstallHint(options.browserName));
         throw error;
     }
     const context = await browser.newContext({ viewport: null });
     const page = await context.newPage();
-    await page.goto(request.url);
+    await page.goto(options.url);
+    return browser;
+}
+async function launchDetachedPlaywrightHost(url, browserName, spawnPlaywrightHost) {
+    const result = await spawnPlaywrightHost(["--playwright-viewer", url, "--browser", browserName]);
+    if (!result.ok)
+        throw new Error(result.message);
+}
+function defaultSpawnPlaywrightHost(args) {
+    return new Promise((resolve, reject) => {
+        const child = spawn(process.execPath, [entrypointPath(), ...args], {
+            detached: true,
+            stdio: ["ignore", "pipe", "pipe", "ignore"],
+            windowsHide: true,
+            env: { ...process.env, NODE_NO_WARNINGS: "1" },
+        });
+        let stdout = "";
+        let stderr = "";
+        let settled = false;
+        const timeout = setTimeout(() => finish({ ok: false, message: "Timed out waiting for Playwright viewer to open" }), 10_000);
+        function finish(result) {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timeout);
+            child.stdout?.destroy();
+            child.stderr?.destroy();
+            if (result.ok)
+                child.unref();
+            resolve(result);
+        }
+        child.once("error", reject);
+        child.once("exit", (code) => {
+            if (!settled)
+                finish({ ok: false, message: stderr.trim() || `Playwright viewer exited with status ${code ?? "unknown"}` });
+        });
+        child.stdout?.setEncoding("utf8");
+        child.stdout?.on("data", (chunk) => {
+            stdout += chunk;
+            const newline = stdout.indexOf("\n");
+            if (newline === -1)
+                return;
+            const line = stdout.slice(0, newline).trim();
+            try {
+                const payload = JSON.parse(line);
+                finish(payload.ok === true ? { ok: true } : { ok: false, message: typeof payload.message === "string" ? payload.message : "Playwright viewer failed to open" });
+            }
+            catch (error) {
+                finish({ ok: false, message: `Invalid Playwright viewer response: ${error instanceof Error ? error.message : String(error)}` });
+            }
+        });
+        child.stderr?.setEncoding("utf8");
+        child.stderr?.on("data", (chunk) => { stderr += chunk; });
+    });
+}
+function entrypointPath() {
+    const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+    const dist = path.join(root, "dist", "src-ts", "main.js");
+    if (existsSync(dist))
+        return dist;
+    return fileURLToPath(import.meta.url).replace(/viewer-launcher\.(ts|js)$/, "main.js");
+}
+export async function runPlaywrightViewerHost(options) {
+    const output = options.stdout ?? console.log;
+    try {
+        const browser = await openPlaywrightPage({
+            url: options.url,
+            browserName: options.browserName,
+            platform: options.platform ?? process.platform,
+            env: options.env ?? process.env,
+            importPlaywright: options.importPlaywright,
+        });
+        output(JSON.stringify({ ok: true }));
+        await new Promise((resolve) => {
+            browser.on?.("disconnected", resolve);
+        });
+    }
+    catch (error) {
+        output(JSON.stringify({ ok: false, message: error instanceof Error ? error.message : String(error) }));
+    }
 }
 export async function launchViewer(request) {
     const spawnDetached = request.spawnDetached ?? defaultSpawnDetached;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zkov/pi-md-viewer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Local loopback Markdown viewer tool for pi with configurable browser launchers",
   "author": "Zkov <zkov@yandex.ru>",
   "license": "MIT",

package/src/pi_md_viewer/static/side-aura.svg

@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id="left-main" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#152138" />
+      <stop offset=".38" stop-color="#1b2945" />
+      <stop offset=".68" stop-color="#181f3c" />
+      <stop offset="1" stop-color="#152138" />
+    </linearGradient>
+    <linearGradient id="left-accent" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#295b7e" />
+      <stop offset=".44" stop-color="#4c4482" />
+      <stop offset="1" stop-color="#295b7e" />
+    </linearGradient>
+    <linearGradient id="right-main" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#152138" />
+      <stop offset=".32" stop-color="#181f3c" />
+      <stop offset=".72" stop-color="#1b2945" />
+      <stop offset="1" stop-color="#152138" />
+    </linearGradient>
+    <linearGradient id="right-accent" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4c4482" />
+      <stop offset=".52" stop-color="#295b7e" />
+      <stop offset="1" stop-color="#473e7e" />
+    </linearGradient>
+    <linearGradient id="purple-wash" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#0a0d12" stop-opacity="0" />
+      <stop offset=".34" stop-color="#5b4c96" stop-opacity=".028" />
+      <stop offset=".66" stop-color="#0a0d12" stop-opacity="0" />
+      <stop offset="1" stop-color="#473e7e" stop-opacity=".022" />
+    </linearGradient>
+  </defs>
+
+  <rect width="100" height="100" fill="url(#purple-wash)" />
+
+  <g fill="none" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-main)" stroke-width="28" stroke-opacity=".20" />
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-main)" stroke-width="18" stroke-opacity=".34" />
+    <path d="M 4 -6 C 1 18 -1 42 1 64 C 3 80 0 93 1 106" stroke="url(#left-accent)" stroke-width="9" stroke-opacity=".13" />
+    <path d="M 2 -4 C 0 24 0 48 2 72 C 3 84 1 96 2 104" stroke="#152138" stroke-width="5" stroke-opacity=".22" />
+
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-main)" stroke-width="28" stroke-opacity=".20" />
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-main)" stroke-width="18" stroke-opacity=".34" />
+    <path d="M 96 -6 C 99 20 101 45 99 67 C 97 82 100 95 99 106" stroke="url(#right-accent)" stroke-width="9" stroke-opacity=".13" />
+    <path d="M 98 -4 C 100 23 100 50 98 74 C 97 86 99 97 98 104" stroke="#152138" stroke-width="5" stroke-opacity=".22" />
+  </g>
+</svg>

package/src/pi_md_viewer/static/viewer-actions.js

@@ -1,6 +1,11 @@
-export async function unloadAndMaybeClose({ remove, reload, close }) {
+export async function unloadAndReload({ remove, reload }) {
   await remove();
-  const remaining = await reload();
-  if (remaining === 0) await close();
-  return remaining;
+  return reload();
+}
+
+export function selectNextActiveFile(files, removedId, activeId) {
+  if (removedId !== activeId) return activeId;
+  const index = files.findIndex((file) => file.id === removedId);
+  if (index === -1) return activeId;
+  return files[index + 1]?.id ?? files[index - 1]?.id ?? null;
 }

package/src/pi_md_viewer/static/viewer.css

@@ -10,13 +10,26 @@
   --line: #263243;
   --code: #090c11;
   --danger: #ff8d9b;
+  --linear-side-aura-background:
+    linear-gradient(90deg, rgba(21, 33, 56, .82) -12%, rgba(21, 33, 56, .42) 2%, rgba(76, 68, 130, .08) 10%, transparent 16%),
+    linear-gradient(90deg, rgba(41, 91, 126, .26) -8%, rgba(41, 91, 126, .10) 6%, transparent 14%),
+    linear-gradient(90deg, transparent 0%, transparent 84%, rgba(76, 68, 130, .08) 90%, rgba(21, 33, 56, .42) 99%, rgba(21, 33, 56, .82) 112%),
+    linear-gradient(90deg, transparent 0%, transparent 86%, rgba(41, 91, 126, .10) 94%, rgba(41, 91, 126, .26) 108%),
+    var(--bg);
+  --svg-side-aura-background: url("/static/side-aura.svg"), var(--bg);
 }
 
 * { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
+html {
+  scroll-behavior: smooth;
+  background: var(--bg);
+}
 body {
+  min-height: 100vh;
   margin: 0;
-  background: radial-gradient(circle at 85% 0%, #152138 0, transparent 34rem), var(--bg);
+  background: var(--svg-side-aura-background);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   color: var(--text);
   font: 16px/1.72 system-ui, -apple-system, "Segoe UI", sans-serif;
 }
@@ -82,10 +95,22 @@ button:disabled { cursor: default; opacity: .45; }
 }
 .icon-button { padding: 2px 8px; font-size: 18px; }
 .danger { color: var(--danger); }
+.file-row {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  margin: 4px 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.file-row.active {
+  border-color: rgba(124, 196, 255, .3);
+  background: rgba(124, 196, 255, .09);
+}
 .file-button {
   display: block;
-  width: 100%;
-  margin: 4px 0;
+  min-width: 0;
+  flex: 1;
   padding: 9px 10px;
   overflow: hidden;
   border-color: transparent;
@@ -95,10 +120,20 @@ button:disabled { cursor: default; opacity: .45; }
   white-space: nowrap;
 }
 .file-button small { display: block; color: var(--muted); }
-.file-button.active {
-  border-color: rgba(124, 196, 255, .3);
-  background: rgba(124, 196, 255, .09);
-  color: #fff;
+.file-row.active .file-button { color: #fff; }
+.file-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 4px;
+}
+.file-action {
+  min-width: 28px;
+  padding: 3px 6px;
+  border-color: transparent;
+  background: transparent;
+  font-size: 16px;
+  line-height: 1;
 }
 main { min-width: 0; padding-top: 4px; }
 .document-toolbar {
@@ -212,22 +247,26 @@ hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
 @media (max-width: 980px) {
   .mobile-bar {
     position: sticky;
-    z-index: 20;
+    z-index: 40;
     top: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    min-height: 49px;
     padding: 10px 16px;
     border-bottom: 1px solid var(--line);
     background: rgba(10, 13, 18, .94);
   }
-  .layout { display: block; padding: 20px 18px 80px; }
+  .layout { display: block; padding: 28px 18px 80px; }
   .files-panel {
     display: none;
-    position: relative;
-    top: auto;
-    max-height: 48vh;
-    margin: 0 auto 28px;
+    position: fixed;
+    z-index: 35;
+    top: 57px;
+    left: 18px;
+    right: 18px;
+    max-height: calc(100vh - 73px);
+    margin: 0 auto;
     max-width: 820px;
   }
   .files-panel.open { display: block; }

package/src/pi_md_viewer/static/viewer.js

@@ -1,4 +1,4 @@
-import { unloadAndMaybeClose } from "/static/viewer-actions.js";
+import { selectNextActiveFile, unloadAndReload } from "/static/viewer-actions.js";
 
 const csrf = document.querySelector('meta[name="csrf-token"]').content;
 const clientId = crypto.randomUUID();
@@ -16,9 +16,6 @@ const elements = {
   status: document.getElementById("connection-status"),
   sidebar: document.getElementById("sidebar"),
   toggle: document.getElementById("sidebar-toggle"),
-  refresh: document.getElementById("refresh-file"),
-  unload: document.getElementById("unload-file"),
-  close: document.getElementById("close-viewer"),
 };
 
 async function api(path, options = {}) {
@@ -53,9 +50,12 @@ function notify(message) {
 function renderFileList() {
   elements.fileList.replaceChildren();
   for (const file of state.files) {
+    const row = document.createElement("div");
+    row.className = `file-row${file.id === state.activeId ? " active" : ""}`;
+
     const button = document.createElement("button");
     button.type = "button";
-    button.className = `file-button${file.id === state.activeId ? " active" : ""}`;
+    button.className = "file-button";
     button.title = file.path;
     button.append(document.createTextNode(file.displayName));
     if (file.parentLabel) {
@@ -64,7 +64,35 @@ function renderFileList() {
       button.append(parent);
     }
     button.addEventListener("click", () => selectFile(file.id, true));
-    elements.fileList.append(button);
+
+    const actions = document.createElement("div");
+    actions.className = "file-actions";
+
+    const refresh = document.createElement("button");
+    refresh.type = "button";
+    refresh.className = "file-action";
+    refresh.title = "Обновить документ";
+    refresh.setAttribute("aria-label", `Обновить ${file.displayName}`);
+    refresh.textContent = "⟳";
+    refresh.addEventListener("click", (event) => {
+      event.stopPropagation();
+      selectFile(file.id, true).catch(showError);
+    });
+
+    const unload = document.createElement("button");
+    unload.type = "button";
+    unload.className = "file-action danger";
+    unload.title = "Выгрузить документ";
+    unload.setAttribute("aria-label", `Выгрузить ${file.displayName}`);
+    unload.textContent = "×";
+    unload.addEventListener("click", (event) => {
+      event.stopPropagation();
+      unloadFile(file.id).catch(showError);
+    });
+
+    actions.append(refresh, unload);
+    row.append(button, actions);
+    elements.fileList.append(row);
   }
 }
 
@@ -143,30 +171,31 @@ async function loadFiles({ announce = false } = {}) {
   }
   renderFileList();
   if (state.activeId) await selectFile(state.activeId, state.pinned);
+  else showEmptyState();
   if (announce && state.files.some((file) => !previous.has(file.id))) notify("Добавлены новые документы");
   return state.files.length;
 }
 
-async function unloadActive() {
-  if (!state.activeId) return;
-  const fileId = state.activeId;
-  await unloadAndMaybeClose({
+function showEmptyState() {
+  elements.title.textContent = "Markdown Viewer";
+  elements.source.textContent = "";
+  state.revision = null;
+  elements.document.innerHTML = '<p class="empty-state">Добавьте Markdown-файл командой <code>mdview файл.md</code>.</p>';
+  renderToc([]);
+}
+
+async function unloadFile(fileId) {
+  const nextActiveId = selectNextActiveFile(state.files, fileId, state.activeId);
+  await unloadAndReload({
     remove: () => api(`/api/v1/files/${encodeURIComponent(fileId)}`, { method: "DELETE" }),
     reload: async () => {
-      state.activeId = null;
+      state.activeId = nextActiveId;
       state.pinned = false;
       return loadFiles();
     },
-    close: closeViewer,
   });
 }
 
-async function closeViewer() {
-  await api("/api/v1/shutdown", { method: "POST", body: {} });
-  elements.status.textContent = "Viewer закрыт";
-  window.close();
-}
-
 function connectEvents() {
   const events = new EventSource(`/api/v1/events?clientId=${encodeURIComponent(clientId)}`);
   events.addEventListener("open", () => { elements.status.textContent = "Подключено"; });
@@ -175,7 +204,6 @@ function connectEvents() {
   events.addEventListener("server_closing", () => {
     elements.status.textContent = "Viewer закрывается";
     events.close();
-    window.close();
   });
   events.addEventListener("error", () => { elements.status.textContent = "Переподключение…"; });
 }
@@ -185,9 +213,6 @@ function updateProgress() {
   elements.progress.style.width = `${maximum > 0 ? (scrollY / maximum) * 100 : 0}%`;
 }
 
-elements.refresh.addEventListener("click", () => state.activeId && selectFile(state.activeId, state.pinned));
-elements.unload.addEventListener("click", () => unloadActive().catch(showError));
-elements.close.addEventListener("click", () => closeViewer().catch(showError));
 elements.toggle.addEventListener("click", () => {
   const open = elements.sidebar.classList.toggle("open");
   elements.toggle.setAttribute("aria-expanded", String(open));

package/src/pi_md_viewer/templates/viewer.html

@@ -18,7 +18,6 @@
       <div class="brand">pi · markdown viewer</div>
       <div class="panel-heading">
         <span>Файлы</span>
-        <button id="close-viewer" class="icon-button danger" type="button" title="Закрыть viewer">×</button>
       </div>
       <nav id="file-list" aria-label="Открытые Markdown-файлы"></nav>
     </aside>
@@ -28,10 +27,6 @@
           <h1 id="document-title">Markdown Viewer</h1>
           <div id="source-path" class="source-path"></div>
         </div>
-        <div class="toolbar-actions">
-          <button id="refresh-file" type="button">Обновить</button>
-          <button id="unload-file" type="button">Выгрузить</button>
-        </div>
       </div>
       <div id="notice" class="notice" role="status" hidden></div>
       <div id="error" class="error" role="alert" hidden></div>