pindeck 0.0.0-stage → 2.8.0

package/public/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <!-- The PinDeck pin, as .brand-pin in editor.css: a square with three round corners, turned so the
+       sharp one points down; orange rim, white centre -->
+  <g transform="translate(16 13.9) rotate(-45)">
+    <path d="M-10 10V0A10 10 0 0 1 0-10A10 10 0 0 1 10 0A10 10 0 0 1 0 10Z" fill="#ED8C01"/>
+    <path d="M-4.3 4.3V0A4.3 4.3 0 0 1 0-4.3A4.3 4.3 0 0 1 4.3 0A4.3 4.3 0 0 1 0 4.3Z" fill="#fff"/>
+  </g>
+</svg>

package/public/index.html

@@ -0,0 +1,165 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="editor-token" content="%%TOKEN%%">
+  <title>PinDeck</title>
+  <link rel="icon" href="/editor/favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="/editor/favicon.png" type="image/png" sizes="64x64">
+  <link rel="apple-touch-icon" href="/editor/apple-touch-icon.png">
+  <link rel="stylesheet" href="/editor/editor.css">
+</head>
+<body>
+<div class="app">
+
+  <!-- Left: slides -->
+  <nav class="slides-pane" aria-label="Slides">
+    <div class="pane-head"><span class="brand"><span class="brand-pin" aria-hidden="true"></span>PinDeck</span></div>
+    <div class="slides-actions menu-wrap">
+      <button id="add-slide-btn" class="add-slide" aria-haspopup="menu" aria-expanded="false" title="Add a slide after the current one">＋ New slide</button>
+      <div id="add-slide-menu" class="menu left" role="menu" hidden>
+        <button role="menuitem" data-slide="content"><strong>Content slide</strong><span>Title and bullets, in the style of this deck</span></button>
+        <button role="menuitem" data-slide="section"><strong>Section divider</strong><span>Opens a new part of the talk</span></button>
+        <button role="menuitem" data-slide="duplicate"><strong>Duplicate this slide</strong><span>A copy to start from</span></button>
+        <button role="menuitem" data-slide="import"><strong>Import from PowerPoint…</strong><span>Slides from a .pptx file, in the style of this deck</span></button>
+      </div>
+      <input type="file" id="import-file" accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation" hidden>
+    </div>
+    <ol id="slide-list" class="slide-list"></ol>
+  </nav>
+
+  <!-- Middle: canvas -->
+  <main class="canvas-pane">
+    <div class="toolbar">
+      <div class="group">
+        <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>
+      </div>
+      <div class="group">
+        <button id="undo" class="icon" aria-label="Undo" title="Undo (⌘Z)" disabled>↶</button>
+        <button id="redo" class="icon" aria-label="Redo" title="Redo (⇧⌘Z)" disabled>↷</button>
+        <span class="seg" role="group" aria-label="Mode">
+          <button id="select-toggle" class="toggle" aria-pressed="true"
+            title="Select (V): click to select, drag to move, handles to resize, arrows to nudge (Shift: 10 px), Alt: no snapping. Double-click or Enter to edit text.">
+            <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 2l9 5-4 1.2L6.3 13z"/></svg> Select <kbd>V</kbd></button>
+          <button id="pin-toggle" class="toggle" title="Pin (P): click elements to pin them for Claude, Esc to stop" aria-pressed="false">
+            <span class="dot">1</span> Pin <kbd>P</kbd></button>
+        </span>
+        <span class="menu-wrap">
+          <button id="export-btn" aria-haspopup="menu" aria-expanded="false" title="Export the deck as a PDF">Export ▾</button>
+          <div id="export-menu" class="menu" role="menu" hidden>
+            <button role="menuitem" data-export="handout"><strong>Handout PDF</strong>
+              <span>One page per slide</span></button>
+            <button role="menuitem" data-export="presentation"><strong>Presentation PDF</strong>
+              <span>One page per click</span></button>
+            <label class="menu-check"><input type="checkbox" id="export-hidden"> Include hidden slides</label>
+          </div>
+        </span>
+        <button id="present" title="Open the deck in a new tab to present">Present ↗</button>
+      </div>
+    </div>
+    <div id="pin-hint" class="pin-hint" hidden>Pin mode: click elements on the slide. Click a marker to remove it. <kbd>Esc</kbd> to stop.</div>
+    <div id="stage" class="stage"><div id="toast" class="toast" role="status" hidden></div></div>
+    <section id="notes-panel" class="notes-panel" aria-label="Speaker notes">
+      <div id="notes-split" class="notes-split" role="separator" aria-orientation="horizontal" aria-controls="notes" tabindex="0"
+        title="Drag to resize the notes (double-click: default size)" aria-label="Resize the speaker notes"></div>
+      <button id="notes-toggle" class="notes-head" aria-expanded="true" aria-controls="notes" title="Show or hide the speaker notes">
+        <span class="caret" aria-hidden="true">▾</span> Notes <span id="notes-status" class="notes-status"></span></button>
+      <textarea id="notes" spellcheck="true" aria-label="Speaker notes of this slide"
+        placeholder="Speaker notes for this slide, shown in the speaker view (S) when presenting. Saved when you click elsewhere or press ⌘Enter; Esc undoes your typing."></textarea>
+    </section>
+  </main>
+
+  <!-- Right: chat with Claude -->
+  <aside class="chat-pane" aria-label="Claude">
+    <div class="pane-head chat-head">
+      <span class="menu-wrap">
+        <button id="model-btn" class="model-btn" aria-haspopup="menu" aria-expanded="false"
+          title="Model and effort for Claude">Claude <span id="model" class="muted"></span> ▾</button>
+        <div id="model-menu" class="menu left model-menu" role="menu" hidden></div>
+      </span>
+      <span class="head-actions">
+        <span id="conn" class="conn" title="Claude Code session"></span>
+        <button id="new-chat" class="small" title="Start a new conversation">New chat</button>
+      </span>
+    </div>
+    <div id="chat" class="chat" aria-live="polite">
+      <div class="empty" id="chat-empty">
+        <p><strong>Pin, then ask.</strong></p>
+        <p>Press <kbd>P</kbd> and click elements on the slide. Each click gets a number. Then write what to change, e.g.
+          <em>“1: align with 2, make 3 smaller”</em>.</p>
+        <p>Or edit yourself: click to select, drag to move, pull a handle to resize, arrow keys to nudge,
+          double-click to change the text. A selected element is what Claude 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; Claude can put it on a slide
+          or, for a paper or report, take the details from it.</p>
+        <p>Claude edits <code>index.html</code> and <code>theme.css</code>, checks the layout, and the slide updates here.
+          <code>brand.css</code> is locked.</p>
+      </div>
+    </div>
+    <div id="drop-hint" class="drop-hint" hidden><div>Drop figures, audio or PDFs to attach them</div></div>
+    <div id="working" class="working" hidden><span class="spinner"></span> <span id="working-text">Claude is working…</span></div>
+    <div class="composer">
+      <div id="pin-tray" class="pin-tray"></div>
+      <div id="attach-tray" class="attach-tray"></div>
+      <textarea id="input" rows="3" placeholder="Ask Claude… refer to pins by number (1, 2, …)"></textarea>
+      <div class="composer-row">
+        <span class="menu-wrap">
+          <button id="add-btn" class="add-round" aria-haspopup="menu" aria-expanded="false" aria-label="Add to the message"
+            title="Add a file or a screenshot to the message">+</button>
+          <div id="add-menu" class="menu up" role="menu" hidden>
+            <button role="menuitem" data-add="file"><strong>File…</strong><span>A figure, audio file or PDF (a figure, table, paper or report) for Claude to use (or drop or paste it)</span></button>
+            <button role="menuitem" data-add="shot" id="add-shot"><strong>Screenshot</strong><span>This slide with its pins, for questions about how it looks</span></button>
+          </div>
+        </span>
+        <input type="file" id="file-input" multiple accept="image/*,audio/*,.svg,.pdf,application/pdf" hidden>
+        <span class="spacer"></span>
+        <button id="clear-pins" class="small" hidden>Clear pins</button>
+        <button id="send" class="primary">Send</button>
+        <button id="stop" class="danger" hidden>Stop</button>
+      </div>
+    </div>
+  </aside>
+</div>
+
+<dialog id="delete-dialog" class="delete-dialog">
+  <form method="dialog">
+    <h3 id="delete-title">Delete this element?</h3>
+    <p id="delete-what" class="muted"></p>
+    <div id="delete-files"></div>
+    <p class="muted small-note">You can undo this with ⌘Z.</p>
+    <div class="dialog-buttons">
+      <button value="cancel" autofocus>Cancel</button>
+      <button value="delete" class="danger" id="delete-confirm">Delete</button>
+    </div>
+  </form>
+</dialog>
+
+<dialog id="import-dialog" class="import-dialog">
+  <form method="dialog">
+    <div class="dialog-head"><span id="import-title">Import from PowerPoint</span>
+      <button type="button" class="small" id="import-all">Select none</button></div>
+    <p id="import-status" class="import-status muted"></p>
+    <ol id="import-list" class="import-list"></ol>
+    <div class="dialog-buttons">
+      <span class="import-notes">
+        <label class="check" id="import-refine-wrap" hidden><input type="checkbox" id="import-refine" checked>
+          <span id="import-refine-label">Then ask Claude to improve the complex slides</span></label>
+        <span class="muted small-note">Added after the current slide. You can undo this with ⌘Z.</span>
+      </span>
+      <button value="cancel">Cancel</button>
+      <button value="import" class="primary" id="import-go">Import</button>
+    </div>
+  </form>
+</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>
+</dialog>
+
+<script type="module" src="/editor/editor.js"></script>
+</body>
+</html>