npm - @symbo.ls/connect - Versions diffs - 3.2.7 - Mend

@symbo.ls/connect 3.2.7

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 (77) hide show

package/build.js +205 -0
package/dist/assets/1024x1024.png +0 -0
package/dist/assets/128x128.png +0 -0
package/dist/assets/144x144.png +0 -0
package/dist/assets/192x192.png +0 -0
package/dist/assets/48x48.png +0 -0
package/dist/assets/512x512.png +0 -0
package/dist/assets/72x72.png +0 -0
package/dist/assets/96x96.png +0 -0
package/dist/assets/active_cursor.png +0 -0
package/dist/assets/favicon.svg +6 -0
package/dist/assets/old/144x144.png +0 -0
package/dist/assets/old/192x192.png +0 -0
package/dist/assets/old/48x48.png +0 -0
package/dist/assets/old/48x48_faint.png +0 -0
package/dist/assets/old/512x512.png +0 -0
package/dist/assets/old/72x72.png +0 -0
package/dist/assets/old/96x96.png +0 -0
package/dist/auth.js +373 -0
package/dist/content.css +46 -0
package/dist/content.js +1171 -0
package/dist/content.js.map +7 -0
package/dist/devtools.html +7 -0
package/dist/devtools.js +5 -0
package/dist/manifest.json +87 -0
package/dist/page-agent.js +727 -0
package/dist/panel.css +2239 -0
package/dist/panel.html +235 -0
package/dist/panel.js +4973 -0
package/dist/picker.html +111 -0
package/dist/picker.js +300 -0
package/dist/service_worker.js +219 -0
package/dist/service_worker.js.map +7 -0
package/dist/settings.css +128 -0
package/dist/settings.html +26 -0
package/dist/settings_ui.js +57 -0
package/dist/settings_ui.js.map +7 -0
package/package.json +20 -0
package/src/content.js +104 -0
package/src/grabber/clean.js +605 -0
package/src/grabber/computed.js +78 -0
package/src/grabber/parse.js +268 -0
package/src/grabber/stylesheets.js +117 -0
package/src/grabber/utils.js +238 -0
package/src/service_worker.js +246 -0
package/src/settings/settings_ui.js +52 -0
package/src/settings/settings_utils.js +70 -0
package/static/assets/1024x1024.png +0 -0
package/static/assets/128x128.png +0 -0
package/static/assets/144x144.png +0 -0
package/static/assets/192x192.png +0 -0
package/static/assets/48x48.png +0 -0
package/static/assets/512x512.png +0 -0
package/static/assets/72x72.png +0 -0
package/static/assets/96x96.png +0 -0
package/static/assets/active_cursor.png +0 -0
package/static/assets/favicon.svg +6 -0
package/static/assets/old/144x144.png +0 -0
package/static/assets/old/192x192.png +0 -0
package/static/assets/old/48x48.png +0 -0
package/static/assets/old/48x48_faint.png +0 -0
package/static/assets/old/512x512.png +0 -0
package/static/assets/old/72x72.png +0 -0
package/static/assets/old/96x96.png +0 -0
package/static/auth.js +373 -0
package/static/content.css +46 -0
package/static/devtools.html +7 -0
package/static/devtools.js +5 -0
package/static/manifest.json +56 -0
package/static/page-agent.js +727 -0
package/static/panel.css +2239 -0
package/static/panel.html +235 -0
package/static/panel.js +4973 -0
package/static/picker.html +111 -0
package/static/picker.js +300 -0
package/static/settings.css +128 -0
package/static/settings.html +26 -0

package/static/picker.html ADDED Viewed

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Symbols Connect — Select Folder</title>
+  <link rel="icon" href="assets/favicon.svg" />
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg: #141416;
+      --bg-alt: #242428;
+      --bg-hover: #34343a;
+      --border: #34343a;
+      --text: #bcbcc2;
+      --text-dim: #65656f;
+      --text-bright: #e0e0e2;
+      --accent: #0085FF;
+    }
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+    .picker-inner {
+      text-align: center;
+      max-width: 400px;
+      padding: 40px;
+    }
+    .picker-logo {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .picker-logo svg { width: 48px; height: 48px; fill: var(--accent); }
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-bright);
+      margin-bottom: 8px;
+    }
+    p {
+      font-size: 13px;
+      color: var(--text-dim);
+      margin-bottom: 24px;
+      line-height: 1.4;
+    }
+    button {
+      background: var(--accent);
+      color: #fff;
+      border: none;
+      padding: 12px 32px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    button:hover { opacity: 0.9; }
+    .picker-btn-secondary {
+      background: transparent;
+      color: var(--text-dim);
+      border: 1px solid var(--border);
+      padding: 10px 24px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    .picker-btn-secondary:hover {
+      color: var(--text-bright);
+      border-color: var(--accent);
+    }
+    .picker-success-icon {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto 16px;
+      background: #59AC56;
+      color: #fff;
+      font-size: 36px;
+      line-height: 64px;
+      text-align: center;
+      border-radius: 50%;
+    }
+    .status {
+      margin-top: 16px;
+      font-size: 12px;
+      color: var(--text-dim);
+    }
+    .status.error { color: #EB6650; }
+    .status.success { color: #59AC56; }
+  </style>
+</head>
+<body>
+  <div class="picker-inner">
+    <div class="picker-logo">
+      <svg viewBox="0 0 24 24"><path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/></svg>
+    </div>
+    <h1>Select Project Folder</h1>
+    <p>Choose a local folder to connect. The extension will be able to read and write files in the selected directory.</p>
+    <button id="btn-pick">Choose Folder</button>
+    <div id="status" class="status"></div>
+  </div>
+  <script src="picker.js"></script>
+</body>
+</html>

package/static/picker.js ADDED Viewed

@@ -0,0 +1,300 @@
+const DB_NAME = 'symbols-connect'
+const DB_STORE = 'handles'
+const FILES_STORE = 'files'
+function openDB () {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 3)
+    req.onupgradeneeded = (e) => {
+      const db = e.target.result
+      if (!db.objectStoreNames.contains(DB_STORE)) db.createObjectStore(DB_STORE)
+      if (!db.objectStoreNames.contains(FILES_STORE)) db.createObjectStore(FILES_STORE)
+      if (!db.objectStoreNames.contains('threads')) {
+        const store = db.createObjectStore('threads', { keyPath: 'id' })
+        store.createIndex('project', 'project', { unique: false })
+      }
+    }
+    req.onsuccess = () => resolve(req.result)
+    req.onerror = () => reject(req.error)
+  })
+}
+async function saveHandle (name, handle) {
+  const db = await openDB()
+  const tx = db.transaction(DB_STORE, 'readwrite')
+  tx.objectStore(DB_STORE).put({ handle, name, time: Date.now() }, name)
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = resolve
+    tx.onerror = () => reject(tx.error)
+  })
+}
+async function saveFileCache (projectName, cache) {
+  const db = await openDB()
+  const tx = db.transaction(FILES_STORE, 'readwrite')
+  tx.objectStore(FILES_STORE).put(cache, projectName)
+  return new Promise((resolve, reject) => {
+    tx.oncomplete = resolve
+    tx.onerror = () => reject(tx.error)
+  })
+}
+// Scan a directory and read all file contents
+async function scanAndCache (dirHandle, basePath, depth) {
+  if (depth > 6) return { tree: [], files: {} }
+  const tree = []
+  const files = {}
+  for await (const entry of dirHandle.values()) {
+    const entryPath = basePath ? basePath + '/' + entry.name : entry.name
+    if (entry.name.startsWith('.') || entry.name === 'node_modules' || entry.name === 'dist') continue
+    if (entry.kind === 'directory') {
+      const sub = await scanAndCache(entry, entryPath, depth + 1)
+      tree.push({ name: entry.name, path: entryPath, kind: 'dir', children: sub.tree })
+      Object.assign(files, sub.files)
+    } else {
+      if (/\.(js|jsx|ts|tsx|json|css|html)$/i.test(entry.name)) {
+        tree.push({ name: entry.name, path: entryPath, kind: 'file' })
+        try {
+          const file = await entry.getFile()
+          files[entryPath] = await file.text()
+        } catch (e) {
+          files[entryPath] = null
+        }
+      }
+    }
+  }
+  tree.sort((a, b) => {
+    if (a.kind !== b.kind) return a.kind === 'dir' ? -1 : 1
+    return a.name.localeCompare(b.name)
+  })
+  return { tree, files }
+}
+const statusEl = document.getElementById('status')
+const innerEl = document.querySelector('.picker-inner')
+function showSuccess (name) {
+  innerEl.innerHTML = ''
+  const checkmark = document.createElement('div')
+  checkmark.className = 'picker-success-icon'
+  checkmark.textContent = '\u2713'
+  const title = document.createElement('h1')
+  title.textContent = 'Connected'
+  title.style.marginBottom = '8px'
+  const nameEl = document.createElement('p')
+  nameEl.style.cssText = 'color:#59AC56;font-size:16px;font-weight:500;margin-bottom:8px'
+  nameEl.textContent = name
+  const hint = document.createElement('p')
+  hint.textContent = 'You can close this tab and return to DevTools.'
+  hint.style.marginBottom = '24px'
+  const anotherBtn = document.createElement('button')
+  anotherBtn.textContent = 'Choose Another Folder'
+  anotherBtn.className = 'picker-btn-secondary'
+  anotherBtn.addEventListener('click', () => location.reload())
+  innerEl.appendChild(checkmark)
+  innerEl.appendChild(title)
+  innerEl.appendChild(nameEl)
+  innerEl.appendChild(hint)
+  innerEl.appendChild(anotherBtn)
+}
+async function pickFolder () {
+  try {
+    const handle = await window.showDirectoryPicker({ mode: 'readwrite' })
+    // Validate symbols.json
+    let configHandle
+    try {
+      configHandle = await handle.getFileHandle('symbols.json')
+    } catch (e) {
+      statusEl.textContent = 'No symbols.json found. Please select a Symbols project folder.'
+      statusEl.className = 'status error'
+      return
+    }
+    statusEl.textContent = 'Reading symbols.json...'
+    statusEl.className = 'status'
+    const configFile = await configHandle.getFile()
+    const configText = await configFile.text()
+    let config
+    try {
+      config = JSON.parse(configText)
+    } catch (e) {
+      statusEl.textContent = 'Invalid symbols.json: ' + e.message
+      statusEl.className = 'status error'
+      return
+    }
+    // Resolve symbols directory
+    let symbolsDir = (config.dir || './symbols').replace(/^\.\//, '')
+    let symbolsDirHandle
+    try {
+      symbolsDirHandle = await handle.getDirectoryHandle(symbolsDir)
+    } catch (e) {
+      statusEl.textContent = 'Symbols directory "' + symbolsDir + '" not found.'
+      statusEl.className = 'status error'
+      return
+    }
+    statusEl.textContent = 'Scanning symbols folder...'
+    // Scan and cache all file contents
+    const { tree, files } = await scanAndCache(symbolsDirHandle, '', 0)
+    statusEl.textContent = 'Saving...'
+    // Save handle and file cache
+    await saveHandle(handle.name, handle)
+    await saveFileCache(handle.name, {
+      config,
+      symbolsDir,
+      tree,
+      files,
+      time: Date.now()
+    })
+    showSuccess(handle.name)
+    // Notify the devtools panel
+    chrome.runtime.sendMessage({
+      type: 'folder-picked',
+      name: handle.name
+    })
+  } catch (e) {
+    if (e.name !== 'AbortError') {
+      statusEl.textContent = 'Error: ' + e.message
+      statusEl.className = 'status error'
+    }
+  }
+}
+// Listen for file operation requests from the panel
+chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+  if (msg.type === 'read-file') {
+    (async () => {
+      try {
+        const db = await openDB()
+        const tx = db.transaction(FILES_STORE, 'readonly')
+        const req = tx.objectStore(FILES_STORE).get(msg.project)
+        req.onsuccess = () => {
+          const cache = req.result
+          if (cache && cache.files && msg.path in cache.files) {
+            sendResponse({ content: cache.files[msg.path] })
+          } else {
+            sendResponse({ error: 'File not in cache' })
+          }
+        }
+        req.onerror = () => sendResponse({ error: 'DB error' })
+      } catch (e) {
+        sendResponse({ error: e.message })
+      }
+    })()
+    return true
+  }
+  if (msg.type === 'write-file') {
+    (async () => {
+      try {
+        const db = await openDB()
+        const tx = db.transaction(DB_STORE, 'readonly')
+        const req = tx.objectStore(DB_STORE).get(msg.project)
+        req.onsuccess = async () => {
+          try {
+            const item = req.result
+            if (!item || !item.handle) {
+              sendResponse({ error: 'Project handle not found' })
+              return
+            }
+            let symbolsDir = msg.symbolsDir || 'symbols'
+            let dirHandle = await item.handle.getDirectoryHandle(symbolsDir)
+            // Navigate to file
+            const parts = msg.path.split('/')
+            for (let i = 0; i < parts.length - 1; i++) {
+              dirHandle = await dirHandle.getDirectoryHandle(parts[i])
+            }
+            const fileHandle = await dirHandle.getFileHandle(parts[parts.length - 1])
+            const writable = await fileHandle.createWritable()
+            await writable.write(msg.content)
+            await writable.close()
+            // Update cache
+            const db2 = await openDB()
+            const tx2 = db2.transaction(FILES_STORE, 'readwrite')
+            const req2 = tx2.objectStore(FILES_STORE).get(msg.project)
+            req2.onsuccess = () => {
+              const cache = req2.result
+              if (cache) {
+                cache.files[msg.path] = msg.content
+                tx2.objectStore(FILES_STORE).put(cache, msg.project)
+              }
+            }
+            sendResponse({ success: true })
+          } catch (e) {
+            sendResponse({ error: e.message })
+          }
+        }
+        req.onerror = () => sendResponse({ error: 'DB error' })
+      } catch (e) {
+        sendResponse({ error: e.message })
+      }
+    })()
+    return true
+  }
+  if (msg.type === 'rescan-project') {
+    (async () => {
+      try {
+        const db = await openDB()
+        const tx = db.transaction(DB_STORE, 'readonly')
+        const req = tx.objectStore(DB_STORE).get(msg.project)
+        req.onsuccess = async () => {
+          try {
+            const item = req.result
+            if (!item || !item.handle) {
+              sendResponse({ error: 'No handle' })
+              return
+            }
+            const perm = await item.handle.queryPermission({ mode: 'readwrite' })
+            if (perm !== 'granted') {
+              sendResponse({ error: 'Permission denied. Re-open folder.' })
+              return
+            }
+            let configHandle = await item.handle.getFileHandle('symbols.json')
+            const configFile = await configHandle.getFile()
+            const config = JSON.parse(await configFile.text())
+            let symbolsDir = (config.dir || './symbols').replace(/^\.\//, '')
+            let symbolsDirHandle = await item.handle.getDirectoryHandle(symbolsDir)
+            const { tree, files } = await scanAndCache(symbolsDirHandle, '', 0)
+            await saveFileCache(msg.project, { config, symbolsDir, tree, files, time: Date.now() })
+            sendResponse({ success: true, config, symbolsDir, tree })
+          } catch (e) {
+            sendResponse({ error: e.message })
+          }
+        }
+      } catch (e) {
+        sendResponse({ error: e.message })
+      }
+    })()
+    return true
+  }
+})
+document.getElementById('btn-pick').addEventListener('click', pickFolder)

package/static/settings.css ADDED Viewed

@@ -0,0 +1,128 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root {
+  --bg: #141416;
+  --bg-alt: #242428;
+  --bg-hover: #34343a;
+  --border: #34343a;
+  --text: #bcbcc2;
+  --text-dim: #65656f;
+  --text-bright: #e0e0e2;
+  --accent: #0085FF;
+}
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.main-container {
+  margin: 0 auto;
+  max-width: 700px;
+  padding: 40px 24px;
+}
+header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.logo {
+  width: 32px;
+  height: 32px;
+  fill: var(--accent);
+  flex-shrink: 0;
+}
+h1 {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+}
+section p {
+  color: var(--text-dim);
+  font-size: 13px;
+  margin-bottom: 24px;
+}
+.separator {
+  margin: 0 0 24px;
+  width: 100%;
+  height: 1px;
+  background: var(--border);
+}
+#settings-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.setting {
+  position: relative;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  transition: border-color 0.15s;
+}
+.setting:hover {
+  border-color: var(--accent);
+}
+.setting label {
+  color: var(--text-bright);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 1;
+  padding: 16px 20px;
+  border-radius: 10px;
+}
+.setting input[type='checkbox'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 40px;
+  height: 22px;
+  background: var(--bg-hover);
+  border-radius: 11px;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin: 0;
+  transition: background 0.2s;
+}
+.setting input[type='checkbox']::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background: var(--text-dim);
+  border-radius: 50%;
+  transition: transform 0.2s, background 0.2s;
+}
+.setting input[type='checkbox']:checked {
+  background: var(--accent);
+}
+.setting input[type='checkbox']:checked::after {
+  transform: translateX(18px);
+  background: #fff;
+}

package/static/settings.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Symbols Connect — Settings</title>
+    <link rel="icon" href="assets/favicon.svg" />
+    <link rel="stylesheet" href="settings.css" />
+    <script type="module" src="settings_ui.js" defer></script>
+  </head>
+  <body>
+    <div class="main-container">
+      <header>
+        <svg class="logo" viewBox="0 0 24 24"><path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/></svg>
+        <h1>Symbols Connect — Settings</h1>
+      </header>
+      <main>
+        <section>
+          <p>Adjust preferences for the Symbols extension. Changes take effect immediately.</p>
+          <div class="separator"></div>
+          <div id="settings-container"></div>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>