feat: add a New button that clears the editor for pasting LLM output

The core playground loop is copy LLM prompt, ask an AI for a movement,
paste the result. Until now pasting meant hand-selecting and
overwriting a preset. A topbar New button clears the editor into a
proper paste target: the movement label switches to "New movement",
CodeMirror shows a paste-here placeholder while the doc is empty, and
the status row shows a hint instead of parse errors. On phones it also
switches to the editor pane and focuses it.

Author: a-baran-orhan

playground/play.html

@@ -55,6 +55,14 @@
           <span class="lib-caret" aria-hidden="true"></span>
         </button>
         <span class="tb-divider" aria-hidden="true"></span>
+        <button
+          id="new-doc"
+          class="btn ghost"
+          aria-label="New movement"
+          title="Clear the editor so you can paste a movement from your AI chat"
+        >
+          <span class="ico-plus" aria-hidden="true"></span><span class="lbl">New</span>
+        </button>
         <button id="how-to" class="btn ghost" aria-label="How to use">
           <span class="ico-help" aria-hidden="true"></span><span class="lbl">How to use</span>
         </button>

playground/src/editor.ts

@@ -14,6 +14,7 @@ import {
   highlightActiveLineGutter,
   drawSelection,
   hoverTooltip,
+  placeholder,
   Decoration,
   type DecorationSet,
 } from "@codemirror/view";
@@ -334,6 +335,10 @@ export function createPosecodeEditor(
         lintGutter(),
         posecodeHoverTip,
         posecodeTheme,
+        // Shown only while the document is empty: guides the paste-from-LLM flow.
+        placeholder(
+          'Paste a movement from your AI chat here, or start typing:\nposecode exercise "My movement"',
+        ),
         EditorView.lineWrapping,
         keymap.of([
           ...closeBracketsKeymap,

playground/src/main.ts

@@ -148,7 +148,17 @@ function scheduleRecompile(): void {
 
 function recompile(): void {
   window.clearTimeout(debounce); // cancel any pending run; we're compiling now
-  const { ir, errors, warnings: warns } = parse(editorApi.getValue());
+  const source = editorApi.getValue();
+  if (!source.trim()) {
+    // A deliberately blank editor (the "New" flow): a paste target, not an
+    // error state. Show a hint instead of parse errors and stop the playback.
+    warnings.innerHTML =
+      '<div class="row hint">Blank editor. Paste a movement from your AI chat, or pick one from the library.</div>';
+    viewer.pause();
+    setPlaying(false);
+    return;
+  }
+  const { ir, errors, warnings: warns } = parse(source);
   renderWarnings(warnings, errors, warns);
   if (ir) {
     viewer.load(ir);
@@ -318,6 +328,19 @@ libSearch.addEventListener("input", () => {
 renderLibraryFilters();
 renderLibraryList();
 
+// --- New movement: clear the editor into a paste target for LLM output ---
+// The core loop is "Copy LLM prompt → ask an AI for a movement → paste it
+// back"; without this, pasting meant overwriting a preset by hand-selecting
+// its text first.
+$<HTMLButtonElement>("new-doc").addEventListener("click", () => {
+  currentPresetId = null;
+  libCurrent.textContent = "New movement";
+  editorApi.setValue("");
+  recompile(); // swaps the status row to the blank-editor hint immediately
+  setMobileView("editor"); // the paste target, front and center on phones
+  editorApi.focus();
+});
+
 // --- Mobile Editor/Viewer toggle (no-op visually on desktop, where both show) ---
 function setMobileView(view: "editor" | "viewer"): void {
   document.body.dataset.mview = view;

playground/src/style.css

@@ -154,7 +154,8 @@ body {
 }
 
 .btn .ico-link,
-.btn .ico-help {
+.btn .ico-help,
+.btn .ico-plus {
   width: 14px;
   height: 14px;
   background: currentColor;
@@ -163,9 +164,13 @@ body {
   mask: center / contain no-repeat var(--btn-icon);
 }
 .btn:hover .ico-link,
-.btn:hover .ico-help {
+.btn:hover .ico-help,
+.btn:hover .ico-plus {
   opacity: 1;
 }
+.btn .ico-plus {
+  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
+}
 .btn .ico-link {
   --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5'/%3E%3C/svg%3E");
 }
@@ -529,6 +534,9 @@ select:hover {
 .warnings .warn {
   color: var(--warn);
 }
+.warnings .hint {
+  color: var(--muted);
+}
 
 /* --- Viewer pane ---------------------------------------------------------- */
 .viewer-pane {