Add PyPI package installer, file-tree context menu, and demos UI

Expose micropip installs from the menu, right-click actions on the file
tree, local folder/file open shortcuts, and browse demos/ alongside code/.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-06-14 22:34:55 +12:00
parent 8c45097ec5
commit 551c3d1efc
5 changed files with 1616 additions and 108 deletions

View File

@@ -6,7 +6,7 @@
<meta name="theme-color" content="#2d3748">
<title>LED Editor</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="/static/styles.css?v=36">
<link rel="stylesheet" href="/static/styles.css?v=41">
</head>
<body>
<div class="container">
@@ -26,6 +26,8 @@
</div>
</div>
<div id="file-tree-context-menu" class="file-tree-context-menu" role="menu" hidden aria-hidden="true"></div>
<div class="main-content">
<div class="editor-header">
<button id="sidebar-toggle" class="sidebar-toggle" type="button" aria-label="Toggle file tree" aria-controls="sidebar" aria-expanded="true" title="Toggle file browser"><span class="sidebar-toggle-icon" aria-hidden="true"></span></button>
@@ -48,6 +50,9 @@
<input type="checkbox" id="panel-16x16-checkbox" />
16×16 panel
</label>
<button type="button" class="menu-item menu-button" id="packages-menu-btn" role="menuitem">📦 Python packages…</button>
<button type="button" class="menu-item menu-button" id="menu-open-local-folder-btn" role="menuitem">📂 Open local folder…</button>
<button type="button" class="menu-item menu-button" id="menu-open-local-file-btn" role="menuitem">📄 Open local file…</button>
<div class="menu-separator" role="separator"></div>
<div class="menu-section-label" id="workspace-menu-label">Workspace</div>
<div id="workspace-menu-actions" role="group"></div>
@@ -121,6 +126,27 @@
</div>
</div>
<script type="module" src="/static/script.js?v=59"></script>
<div id="packages-modal" class="modal">
<div class="modal-content packages-modal-content">
<h3>Python packages (Pyodide)</h3>
<p class="packages-modal-hint">Install from PyPI using micropip inside the browser. Pure-Python wheels (or packages built for WebAssembly) usually work; manylinux-only C extensions often do not.</p>
<label class="packages-field-label" for="packages-install-input">Package names or PEP 508 specs</label>
<input type="text" id="packages-install-input" placeholder="e.g. httpx, phonenumbers" autocomplete="off" />
<div id="packages-pypi-info" class="packages-pypi-info" aria-live="polite"></div>
<div class="packages-modal-actions-row">
<button type="button" id="packages-lookup-btn" class="packages-secondary-btn">Look up on PyPI</button>
</div>
<div id="packages-modal-status" class="packages-modal-status" aria-live="polite"></div>
<pre id="packages-install-log" class="packages-install-log hidden" aria-label="Micropip installer output"></pre>
<p class="packages-saved-label">Saved in this browser (restored when the editor loads Pyodide):</p>
<ul id="packages-saved-list" class="packages-saved-list"></ul>
<div class="modal-actions">
<button type="button" id="packages-install-btn">Install</button>
<button type="button" id="packages-close-btn">Close</button>
</div>
</div>
</div>
<script type="module" src="/static/script.js?v=83"></script>
</body>
</html>