pindeck 3.0.0-beta.3 → 3.2.0-beta.1

package/public/events-worker.js

@@ -0,0 +1,47 @@
+/* One event stream for all of this browser's PinDeck tabs on one port, behind the front.
+
+   Browsers open at most 6 connections to one host and port, and each editor tab held one open for its deck's
+   events, so a sixth tab never loaded and the others stalled. The tabs now share this worker's stream: each
+   tab (a port here) names its deck, and the front (front.mjs, /events) passes that deck's events on, marked
+   with the tab. Each tab still gets its deck's events as if it had its own stream, starting with "hello". */
+
+const tabs = new Map();   // tab id -> { port, deck }
+const stream = crypto.randomUUID?.() || String(Math.random()).slice(2) + String(Date.now());
+let source = null, seq = 0;
+
+const tell = (body) => fetch("/events/subscribe", { method: "POST", headers: { "content-type": "application/json" },
+  body: JSON.stringify({ stream, ...body }) }).catch(() => {});
+
+function open() {
+  source = new EventSource(`/events?stream=${encodeURIComponent(stream)}`);
+  // "ready" comes first on every (re)connect: the front has a new stream, with no decks yet
+  source.addEventListener("ready", () => { for (const [tab, t] of tabs) tell({ tab, deck: t.deck, on: true }); });
+  source.addEventListener("deck", (ev) => {
+    const m = JSON.parse(ev.data);
+    tabs.get(m.tab)?.port.postMessage({ type: m.type, data: m.data });
+  });
+  source.onerror = () => { for (const t of tabs.values()) t.port.postMessage({ type: "error" }); };
+}
+
+onconnect = (e) => {
+  const port = e.ports[0];
+  let tab = null;
+  const leave = () => {
+    if (!tab) return;
+    tabs.delete(tab);
+    tell({ tab, on: false });
+    tab = null;
+    if (!tabs.size) { source?.close(); source = null; }
+  };
+  port.onmessage = ({ data }) => {
+    if (data?.subscribe) {
+      leave();
+      tab = String(++seq);
+      tabs.set(tab, { port, deck: String(data.subscribe) });
+      if (!source) open();
+      else if (source.readyState === EventSource.OPEN) tell({ tab, deck: String(data.subscribe), on: true });
+    }
+    if (data?.close) leave();
+  };
+  port.start();
+};

package/public/front.css

@@ -0,0 +1,14 @@
+/* The front's own pages: the list of decks (a folder without index.html) and why a deck cannot be opened */
+body { margin: 0; background: #f6f6f4; color: #1d1f22; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
+.front { max-width: 44em; margin: 3em auto; padding: 0 16px; }
+.front h1 { font-size: 22px; margin: 0 0 .8em; }
+.front h2 { font-size: 12px; font-weight: 600; color: #6b6f76; margin: 1.6em 0 .4em; overflow-wrap: anywhere; }
+.front ul { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e3df; border-radius: 10px; background: #fff; }
+.front li { padding: 9px 14px; border-top: 1px solid #ececea; }
+.front li:first-child { border-top: 0; }
+.front li a { color: #1d1f22; font-weight: 500; text-decoration: none; }
+.front li a:hover { color: #e8710a; }
+.front li small { color: #6b6f76; margin-left: 6px; }
+.front li.off { color: #8a8e94; }
+.front li.off small { display: block; margin: 2px 0 0; font-size: 12px; }
+.front pre { white-space: pre-wrap; background: #fff; border: 1px solid #e3e3df; border-radius: 8px; padding: 10px 12px; font-size: 13px; }

package/public/index.html

@@ -35,7 +35,10 @@
         <button id="prev" class="icon" title="Previous slide (←)" aria-label="Previous slide">‹</button>
         <span id="slide-pos" class="pos">– / –</span>
         <button id="next" class="icon" title="Next slide (→)" aria-label="Next slide">›</button>
-        <span id="deck-name" class="deck-name"></span>
+        <span class="menu-wrap deck-wrap">
+          <button id="deck-btn" class="deck-btn" aria-haspopup="menu" aria-expanded="false" disabled><span id="deck-name"></span><span class="caret" hidden>▾</span></button>
+          <div id="deck-menu" class="menu left deck-menu" role="menu" hidden></div>
+        </span>
         <span id="server-note" class="server-note" hidden></span>
       </div>
       <div class="group">
@@ -99,7 +102,7 @@
           double-click to change the text. A selected element is what the assistant takes “this” to mean.</p>
         <p>Add figures, audio, a PDF or a screenshot with <strong>+</strong>, or drag and drop or paste a file; the assistant can put it on a slide
           or, for a paper or report, take the details from it.</p>
-        <p>The assistant edits <code id="deck-file">index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
+        <p>The assistant edits <code id="deck-file">index.html</code>, <code>theme.css</code> and the deck's other files, checks the layout, and the slide updates here.
           <code>brand.css</code> is locked.</p>
       </div>
     </div>
@@ -172,6 +175,11 @@
   </form>
 </dialog>
 
+<dialog id="shot-dialog" class="diff-dialog shot-dialog">
+  <div class="dialog-head"><span id="shot-title">Screenshot</span><button class="small" id="shot-close">Close</button></div>
+  <img id="shot-img" alt="Screenshot">
+</dialog>
+
 <dialog id="diff-dialog" class="diff-dialog">
   <div class="dialog-head"><span id="diff-title">Changes</span><button class="small" id="diff-close">Close</button></div>
   <pre id="diff-body" class="diff"></pre>