npm - pm-canvas-viewer - Versions diffs - 0.1.0 - Mend

pm-canvas-viewer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LICENSE +21 -0
package/README.md +112 -0
package/bin/cli.js +198 -0
package/dist/frontend/assets/index-CDTMa6Xk.js +287 -0
package/dist/frontend/assets/index-idGrS1dS.css +1 -0
package/dist/frontend/assets/main-DeCTtllz.js +293 -0
package/dist/frontend/index.html +13 -0
package/lib/history.js +63 -0
package/lib/port.js +106 -0
package/lib/prompts.js +183 -0
package/lib/scanner.js +72 -0
package/package.json +68 -0
package/server/api/anchors.js +44 -0
package/server/api/files.js +93 -0
package/server/index.js +32 -0

package/dist/frontend/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>pm-canvas viewer</title>
+  <script type="module" crossorigin src="/assets/index-CDTMa6Xk.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-idGrS1dS.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/lib/history.js ADDED Viewed

@@ -0,0 +1,63 @@
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { homedir } from 'os';
+const HISTORY_DIR = join(homedir(), '.pm-canvas');
+const HISTORY_FILE = join(HISTORY_DIR, 'history.json');
+export async function loadHistory() {
+  try {
+    const raw = await readFile(HISTORY_FILE, 'utf-8');
+    return JSON.parse(raw);
+  } catch {
+    return [];
+  }
+}
+export async function saveHistory(entries) {
+  await mkdir(HISTORY_DIR, { recursive: true });
+  await writeFile(HISTORY_FILE, JSON.stringify(entries, null, 2));
+}
+export async function recordOpen(canvasPath, title) {
+  const entries = await loadHistory();
+  const existing = entries.find(e => e.path === canvasPath);
+  const now = Date.now();
+  if (existing) {
+    existing.count += 1;
+    existing.lastOpened = now;
+    if (title) existing.title = title;
+  } else {
+    entries.push({ path: canvasPath, title: title || null, count: 1, lastOpened: now });
+  }
+  await saveHistory(entries);
+}
+export async function getRecentCanvases() {
+  const entries = await loadHistory();
+  return entries
+    .map(e => ({ ...e, score: frecency(e) }))
+    .sort((a, b) => b.score - a.score);
+}
+export async function fuzzyMatch(keyword) {
+  const entries = await getRecentCanvases();
+  const kw = keyword.toLowerCase();
+  return entries.filter(e => {
+    const pathMatch = e.path.toLowerCase().includes(kw);
+    const titleMatch = e.title && e.title.toLowerCase().includes(kw);
+    return pathMatch || titleMatch;
+  });
+}
+function frecency(entry) {
+  const hoursAgo = (Date.now() - entry.lastOpened) / (1000 * 60 * 60);
+  let recency;
+  if (hoursAgo < 1) recency = 8;
+  else if (hoursAgo < 24) recency = 4;
+  else if (hoursAgo < 72) recency = 2;
+  else recency = 1;
+  return Math.log2(entry.count + 1) * recency;
+}

package/lib/port.js ADDED Viewed

@@ -0,0 +1,106 @@
+import { createServer } from 'net';
+import { execSync } from 'child_process';
+import { readdir, readFile, writeFile, unlink, mkdir } from 'fs/promises';
+import { unlinkSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+const DEFAULT_PORT = 4800;
+const MAX_RETRIES = 10;
+const INSTANCES_DIR = join(homedir(), '.pm-canvas', 'instances');
+export async function findAvailablePort(startPort = DEFAULT_PORT) {
+  for (let port = startPort; port < startPort + MAX_RETRIES; port++) {
+    if (await isPortFree(port)) return port;
+  }
+  throw new Error(`No available port found in range ${startPort}-${startPort + MAX_RETRIES - 1}`);
+}
+export function isPortFree(port) {
+  return new Promise(resolve => {
+    const srv = createServer();
+    srv.once('error', () => resolve(false));
+    srv.listen(port, () => {
+      srv.close(() => resolve(true));
+    });
+  });
+}
+export function getPortOccupant(port) {
+  try {
+    const out = execSync(`lsof -i :${port} -t 2>/dev/null`, { encoding: 'utf-8' }).trim();
+    if (!out) return null;
+    const pid = out.split('\n')[0];
+    const cmdline = execSync(`ps -p ${pid} -o command= 2>/dev/null`, { encoding: 'utf-8' }).trim();
+    const isPmCanvas = cmdline.includes('cli.js') && cmdline.includes('open');
+    return { pid: parseInt(pid), command: cmdline, isPmCanvas };
+  } catch {
+    return null;
+  }
+}
+export function killPort(port) {
+  try {
+    const out = execSync(`lsof -i :${port} -t 2>/dev/null`, { encoding: 'utf-8' }).trim();
+    if (out) {
+      for (const pid of out.split('\n')) {
+        process.kill(parseInt(pid), 'SIGTERM');
+      }
+    }
+  } catch {}
+  unregisterInstance(port).catch(() => {});
+}
+export async function registerInstance(port, canvasDir, title) {
+  await mkdir(INSTANCES_DIR, { recursive: true });
+  const data = { pid: process.pid, port, canvasDir, title, startedAt: Date.now() };
+  await writeFile(join(INSTANCES_DIR, `${port}.json`), JSON.stringify(data, null, 2));
+  const cleanup = () => {
+    unregisterInstance(port).catch(() => {});
+    process.exit();
+  };
+  process.on('SIGTERM', cleanup);
+  process.on('SIGINT', cleanup);
+  process.on('exit', () => {
+    try {
+      unlinkSync(join(INSTANCES_DIR, `${port}.json`));
+    } catch {}
+  });
+}
+async function unregisterInstance(port) {
+  try {
+    await unlink(join(INSTANCES_DIR, `${port}.json`));
+  } catch {}
+}
+export async function listRunningInstances() {
+  try {
+    await mkdir(INSTANCES_DIR, { recursive: true });
+    const files = await readdir(INSTANCES_DIR);
+    const instances = [];
+    for (const file of files) {
+      if (!file.endsWith('.json')) continue;
+      try {
+        const raw = await readFile(join(INSTANCES_DIR, file), 'utf-8');
+        const data = JSON.parse(raw);
+        // Verify process is still alive
+        try {
+          process.kill(data.pid, 0);
+          instances.push(data);
+        } catch {
+          await unlink(join(INSTANCES_DIR, file)).catch(() => {});
+        }
+      } catch {}
+    }
+    return instances;
+  } catch {
+    return [];
+  }
+}

package/lib/prompts.js ADDED Viewed

@@ -0,0 +1,183 @@
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+const { erase } = require('sisteransi');
+const strip = require('prompts/lib/util/strip');
+function isCombiningCodePoint(codePoint) {
+  return (
+    (codePoint >= 0x0300 && codePoint <= 0x036f) ||
+    (codePoint >= 0x1ab0 && codePoint <= 0x1aff) ||
+    (codePoint >= 0x1dc0 && codePoint <= 0x1dff) ||
+    (codePoint >= 0x20d0 && codePoint <= 0x20ff) ||
+    (codePoint >= 0xfe20 && codePoint <= 0xfe2f)
+  );
+}
+function isFullWidthCodePoint(codePoint) {
+  return codePoint >= 0x1100 && (
+    codePoint <= 0x115f ||
+    codePoint === 0x2329 ||
+    codePoint === 0x232a ||
+    (codePoint >= 0x2e80 && codePoint <= 0xa4cf && codePoint !== 0x303f) ||
+    (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+    (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+    (codePoint >= 0xfe10 && codePoint <= 0xfe19) ||
+    (codePoint >= 0xfe30 && codePoint <= 0xfe6f) ||
+    (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+    (codePoint >= 0xffe0 && codePoint <= 0xffe6) ||
+    (codePoint >= 0x20000 && codePoint <= 0x3fffd)
+  );
+}
+function charWidth(char) {
+  const codePoint = char.codePointAt(0);
+  if (
+    codePoint <= 0x1f ||
+    (codePoint >= 0x7f && codePoint <= 0x9f) ||
+    codePoint === 0x200b ||
+    codePoint === 0x200c ||
+    codePoint === 0x200d ||
+    (codePoint >= 0xfe00 && codePoint <= 0xfe0f) ||
+    isCombiningCodePoint(codePoint)
+  ) {
+    return 0;
+  }
+  return isFullWidthCodePoint(codePoint) ? 2 : 1;
+}
+function terminalWidth(text) {
+  return [...strip(text)].reduce((width, char) => width + charWidth(char), 0);
+}
+function terminalColumns(perLine) {
+  const columns = Number(perLine || process.stdout.columns || 80);
+  return Number.isFinite(columns) && columns > 0 ? columns : 80;
+}
+function clearWrappedOutput(prompt, perLine) {
+  const columns = terminalColumns(perLine);
+  const rows = String(prompt || '').split(/\r?\n/).reduce((count, line) => {
+    return count + 1 + Math.floor(Math.max(terminalWidth(line) - 1, 0) / columns);
+  }, 0);
+  return erase.lines(rows);
+}
+const clearPath = require.resolve('prompts/lib/util/clear');
+require(clearPath);
+// Patch before loading prompts so autocomplete's render loop clears wrapped rows correctly.
+require.cache[clearPath].exports = clearWrappedOutput;
+const prompts = require('prompts');
+const AutocompletePrompt = require('prompts/lib/elements/autocomplete');
+// Patch ESC to abort instead of submit
+AutocompletePrompt.prototype.exit = function () {
+  this.abort();
+};
+const onCancel = () => process.exit(0);
+function truncTitle(text) {
+  const cols = process.stdout.columns || 80;
+  const max = cols - 6;
+  if (text.length <= max) return text;
+  return text.substring(0, max - 1) + '…';
+}
+export async function fuzzySelectCanvas(canvases, historyEntries) {
+  if (canvases.length === 0) {
+    console.log('  No canvases found in current directory.');
+    return null;
+  }
+  const choices = canvases.map(c => {
+    const histEntry = historyEntries.find(h => h.path === c.path);
+    const lastOpened = histEntry ? formatTimeAgo(histEntry.lastOpened) : 'never opened';
+    const title = c.title || c.path.split('/').pop();
+    const shortPath = c.path.replace(process.env.HOME, '~');
+    return {
+      title: truncTitle(`${title}  —  ${c.rowCount} rows · ${lastOpened} - ${shortPath}`),
+      value: c,
+    };
+  });
+  const { selected } = await prompts({
+    type: 'autocomplete',
+    name: 'selected',
+    message: 'Select a canvas (type to filter)',
+    choices,
+    suggest: fuzzyFilter,
+  }, { onCancel });
+  return selected || null;
+}
+export async function fuzzySelectFromHistory(entries) {
+  if (entries.length === 0) {
+    console.log('  No history yet. Use `canvas open` to scan current directory.');
+    return null;
+  }
+  const choices = entries.map(e => {
+    const shortPath = e.path.replace(process.env.HOME, '~');
+    return {
+      title: truncTitle(`${e.title || e.path.split('/').pop()}  —  ${e.count}x · ${formatTimeAgo(e.lastOpened)} - ${shortPath}`),
+      value: e,
+    };
+  });
+  const { selected } = await prompts({
+    type: 'autocomplete',
+    name: 'selected',
+    message: 'Select a canvas (type to filter)',
+    choices,
+    suggest: fuzzyFilter,
+  }, { onCancel });
+  return selected || null;
+}
+async function fuzzyFilter(input, choices) {
+  if (!input) return choices;
+  const terms = input.toLowerCase().split(/\s+/);
+  return choices.filter(c => {
+    const text = c.title.toLowerCase();
+    return terms.every(t => text.includes(t));
+  });
+}
+export async function handlePortConflict(port, occupant) {
+  const choices = [
+    { title: 'Open in browser (reuse existing)', value: 'reuse' },
+    { title: 'Kill and restart', value: 'kill' },
+    { title: 'Use next available port', value: 'next' },
+  ];
+  console.log(`\n  Port ${port} is in use by canvas (PID ${occupant.pid})`);
+  const { action } = await prompts({
+    type: 'select',
+    name: 'action',
+    message: 'What would you like to do?',
+    choices,
+  }, { onCancel });
+  return action || null;
+}
+function formatTimeAgo(timestamp) {
+  const diff = Date.now() - timestamp;
+  const minutes = Math.floor(diff / 60000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return `${Math.floor(days / 30)}mo ago`;
+}

package/lib/scanner.js ADDED Viewed

@@ -0,0 +1,72 @@
+import { readdir, readFile, stat } from 'fs/promises';
+import { join, resolve } from 'path';
+export async function scanForCanvases(baseDir, maxDepth = 4) {
+  const results = [];
+  await walk(resolve(baseDir), 0, maxDepth, results);
+  return results;
+}
+async function walk(dir, depth, maxDepth, results) {
+  if (depth > maxDepth) return;
+  const meta = await tryReadCanvasMeta(dir);
+  if (meta) {
+    results.push(meta);
+    return;
+  }
+  if (depth === maxDepth) return;
+  let entries;
+  try {
+    entries = await readdir(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  const subdirs = entries
+    .filter(e => e.isDirectory() && !e.name.startsWith('.') && e.name !== 'node_modules')
+    .map(e => join(dir, e.name));
+  await Promise.all(subdirs.map(d => walk(d, depth + 1, maxDepth, results)));
+}
+export async function tryReadCanvasMeta(dir) {
+  const canvasJsonPath = join(dir, 'canvas.json');
+  try {
+    const raw = await readFile(canvasJsonPath, 'utf-8');
+    const json = JSON.parse(raw);
+    if (!Array.isArray(json.rows)) return null;
+    const rowsDir = join(dir, 'rows');
+    let rowFileCount = 0;
+    try {
+      const rowFiles = await readdir(rowsDir);
+      rowFileCount = rowFiles.filter(f => f.endsWith('.html')).length;
+    } catch {}
+    const hasIndex = await fileExists(join(dir, 'index.html'));
+    const dirStat = await stat(canvasJsonPath);
+    return {
+      path: dir,
+      title: json.title || null,
+      rowCount: json.rows.length,
+      rowFileCount,
+      hasIndex,
+      mtime: dirStat.mtimeMs,
+    };
+  } catch {
+    return null;
+  }
+}
+async function fileExists(p) {
+  try {
+    await stat(p);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,68 @@
+{
+  "name": "pm-canvas-viewer",
+  "version": "0.1.0",
+  "description": "Local canvas viewer + MD/Excalidraw editor for pm-canvas",
+  "type": "module",
+  "license": "MIT",
+  "author": "path",
+  "keywords": [
+    "pm-canvas",
+    "canvas",
+    "viewer",
+    "product-management",
+    "prototype",
+    "mockup",
+    "markdown",
+    "tiptap",
+    "excalidraw",
+    "design-spec"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "bin": {
+    "canvas": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "server",
+    "lib",
+    "dist",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:frontend\"",
+    "dev:server": "node --watch server/index.js",
+    "dev:frontend": "vite frontend",
+    "build": "vite build frontend --outDir ../dist/frontend",
+    "start": "node bin/cli.js open",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^12.0.0",
+    "express": "^4.18.0",
+    "open": "^10.0.0",
+    "prompts": "^2.4.2",
+    "sisteransi": "^1.0.5"
+  },
+  "devDependencies": {
+    "@excalidraw/excalidraw": "^0.17.0",
+    "@heroicons/react": "^2.2.0",
+    "@tiptap/extension-table": "^3.23.6",
+    "@tiptap/extension-table-cell": "^3.23.6",
+    "@tiptap/extension-table-header": "^3.23.6",
+    "@tiptap/extension-table-row": "^3.23.6",
+    "@tiptap/markdown": "^3.23.6",
+    "@tiptap/pm": "^3.23.6",
+    "@tiptap/react": "^3.23.6",
+    "@tiptap/starter-kit": "^3.23.6",
+    "@vitejs/plugin-react": "^4.2.0",
+    "concurrently": "^8.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^5.4.0"
+  }
+}

package/server/api/anchors.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { Router } from 'express';
+import { readFile, writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+import { existsSync } from 'fs';
+export function anchorsRouter(canvasDir) {
+  const router = Router();
+  const docsDir = join(canvasDir, 'docs');
+  const anchorsFile = join(docsDir, 'anchors.json');
+  const emptyData = { version: 1, anchors: [] };
+  router.get('/', async (req, res) => {
+    try {
+      if (!existsSync(anchorsFile)) {
+        return res.json(emptyData);
+      }
+      const raw = await readFile(anchorsFile, 'utf-8');
+      const data = JSON.parse(raw);
+      res.json(data);
+    } catch (err) {
+      if (err.code === 'ENOENT') return res.json(emptyData);
+      res.status(500).json({ error: err.message });
+    }
+  });
+  router.put('/', async (req, res) => {
+    try {
+      if (!existsSync(docsDir)) {
+        await mkdir(docsDir, { recursive: true });
+      }
+      const data = req.body;
+      if (!data || typeof data.version !== 'number' || !Array.isArray(data.anchors)) {
+        return res.status(400).json({ error: 'Invalid schema: requires { version, anchors[] }' });
+      }
+      await writeFile(anchorsFile, JSON.stringify(data, null, 2), 'utf-8');
+      res.json({ ok: true });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+  return router;
+}

package/server/api/files.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { Router } from 'express';
+import { readdir, readFile, writeFile, mkdir, unlink } from 'fs/promises';
+import { resolve, join, relative, extname } from 'path';
+import { existsSync } from 'fs';
+export function filesRouter(canvasDir) {
+  const router = Router();
+  const docsDir = join(canvasDir, 'docs');
+  // Ensure docs/ directory exists
+  if (!existsSync(docsDir)) {
+    mkdir(docsDir, { recursive: true });
+  }
+  // List all docs
+  router.get('/', async (req, res) => {
+    try {
+      if (!existsSync(docsDir)) {
+        return res.json({ files: [] });
+      }
+      const entries = await readdir(docsDir, { withFileTypes: true });
+      const files = entries
+        .filter(e => e.isFile())
+        .filter(e => ['.md', '.excalidraw', '.drawio'].includes(extname(e.name)))
+        .map(e => {
+          const ext = extname(e.name);
+          const type = ext === '.md' ? 'markdown' : ext === '.drawio' ? 'drawio' : 'excalidraw';
+          return { name: e.name, type, path: e.name };
+        });
+      res.json({ files });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+  // Read a file
+  router.get('/:filename', async (req, res) => {
+    try {
+      const filePath = safePath(docsDir, req.params.filename);
+      if (!filePath) return res.status(403).json({ error: 'Access denied' });
+      const content = await readFile(filePath, 'utf-8');
+      res.json({ content, name: req.params.filename });
+    } catch (err) {
+      if (err.code === 'ENOENT') return res.status(404).json({ error: 'File not found' });
+      res.status(500).json({ error: err.message });
+    }
+  });
+  // Write a file
+  router.put('/:filename', async (req, res) => {
+    try {
+      const filePath = safePath(docsDir, req.params.filename);
+      if (!filePath) return res.status(403).json({ error: 'Access denied' });
+      const ext = extname(req.params.filename);
+      if (!['.md', '.excalidraw', '.drawio'].includes(ext)) {
+        return res.status(400).json({ error: 'Only .md, .excalidraw and .drawio files allowed' });
+      }
+      await writeFile(filePath, req.body.content, 'utf-8');
+      res.json({ ok: true });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+  // Delete a file
+  router.delete('/:filename', async (req, res) => {
+    try {
+      const filePath = safePath(docsDir, req.params.filename);
+      if (!filePath) return res.status(403).json({ error: 'Access denied' });
+      await unlink(filePath);
+      res.json({ ok: true });
+    } catch (err) {
+      if (err.code === 'ENOENT') return res.status(404).json({ error: 'File not found' });
+      res.status(500).json({ error: err.message });
+    }
+  });
+  return router;
+}
+function safePath(baseDir, filename) {
+  if (!filename || filename.includes('\0')) return null;
+  const resolved = resolve(baseDir, filename);
+  const base = resolve(baseDir) + '/';
+  if (!resolved.startsWith(base)) return null;
+  const rel = relative(baseDir, resolved);
+  if (rel.startsWith('..') || rel.includes('/')) return null;
+  return resolved;
+}

package/server/index.js ADDED Viewed

@@ -0,0 +1,32 @@
+import express from 'express';
+import { resolve, join } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import { filesRouter } from './api/files.js';
+import { anchorsRouter } from './api/anchors.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export function createServer(canvasDir) {
+  const app = express();
+  app.use(express.json({ limit: '10mb' }));
+  // API: file operations scoped to canvas directory
+  app.use('/api/files', filesRouter(canvasDir));
+  app.use('/api/anchors', anchorsRouter(canvasDir));
+  // Serve canvas files (the actual canvas HTML/rows)
+  app.use('/canvas', express.static(canvasDir));
+  // Serve viewer frontend (pre-built)
+  const frontendDir = resolve(__dirname, '../dist/frontend');
+  app.use(express.static(frontendDir));
+  // SPA fallback
+  app.get('*', (req, res) => {
+    res.sendFile(join(frontendDir, 'index.html'));
+  });
+  return app;
+}