improve scratchpad editing

script.js

@@ -288,6 +288,23 @@
     var pads = document.querySelectorAll('div.luxtools-scratchpad[data-luxtools-scratchpad="1"]');
     if (!pads || !pads.length) return;
 
+    function setEditMode(root, isEditing) {
+      if (!root || !root.classList) return;
+
+      var view = root.querySelector('.luxtools-scratchpad-view');
+      var editor = root.querySelector('.luxtools-scratchpad-editor');
+
+      if (isEditing) {
+        root.classList.add('is-editing');
+        if (view) view.hidden = true;
+        if (editor) editor.hidden = false;
+      } else {
+        root.classList.remove('is-editing');
+        if (view) view.hidden = false;
+        if (editor) editor.hidden = true;
+      }
+    }
+
     function setStatus(root, msg) {
       var el = root.querySelector('.luxtools-scratchpad-status');
       if (!el) return;
@@ -372,7 +389,7 @@
       var textarea = root.querySelector('textarea.luxtools-scratchpad-text');
       if (!editor || !textarea) return;
 
-      editor.hidden = false;
+      setEditMode(root, true);
       setStatus(root, 'Loading…');
       textarea.disabled = true;
 
@@ -390,7 +407,8 @@
     function closeEditor(root) {
       var editor = root.querySelector('.luxtools-scratchpad-editor');
       if (!editor) return;
-      editor.hidden = true;
+
+      setEditMode(root, false);
       setStatus(root, '');
     }
 

style.css

@@ -101,22 +101,55 @@ div.luxtools-scratchpad {
     position: relative;
 }
 
+/* Template hook: stable wrapper around scratchpad content + controls. */
+div.luxtools-scratchpad .luxtools-scratchpad-frame {
+    position: relative;
+}
+
 div.luxtools-scratchpad .luxtools-scratchpad-bar {
     display: flex;
-    justify-content: flex-end;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.4em;
     margin-bottom: 0.2em;
 }
 
+div.luxtools-scratchpad .luxtools-scratchpad-name {
+    flex: 0 1 auto;
+    min-width: 0;
+    opacity: 0.65;
+    font-size: 90%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 div.luxtools-scratchpad a.luxtools-scratchpad-edit {
     text-decoration: none;
-    opacity: 0.7;
-    padding: 0 0.2em;
+    opacity: 0.75;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2em;
+    min-height: 2em;
+    line-height: 1;
+    font-style: italic;
+    color: inherit;
 }
 div.luxtools-scratchpad a.luxtools-scratchpad-edit:hover,
 div.luxtools-scratchpad a.luxtools-scratchpad-edit:focus {
     opacity: 1;
 }
 
+/* Edit mode: replace rendered view with editor. */
+div.luxtools-scratchpad.is-editing .luxtools-scratchpad-view {
+    display: none;
+}
+
+div.luxtools-scratchpad.is-editing .luxtools-scratchpad-bar {
+    display: none;
+}
+
 div.luxtools-scratchpad .luxtools-scratchpad-editor {
     margin-top: 0.4em;
 }

syntax/scratchpad.php

@@ -133,11 +133,22 @@ class syntax_plugin_luxtools_scratchpad extends SyntaxPlugin
             . ' data-sectok="' . hsc($sectok) . '"'
             . '>';
 
+        // Stable, template-friendly container around the scratchpad.
+        $renderer->doc .= '<div class="luxtools-scratchpad-frame">';
+
+        // Invisible container around the rendered scratchpad (templates can decorate).
+        $renderer->doc .= '<div class="luxtools-scratchpad-rendered">';
+
+        // Well-defined place for the edit button (templates can reposition/style).
         $renderer->doc .= '<div class="luxtools-scratchpad-bar">';
+
+        // Always show the scratchpad name (alias) for context.
+        $renderer->doc .= '<span class="luxtools-scratchpad-name">' . hsc($rawPad) . '</span>';
+
         if ($canEdit) {
             $label = (string)$this->getLang('scratchpad_edit');
             if ($label === '') $label = 'Edit';
-            $renderer->doc .= '<a href="#" class="luxtools-scratchpad-edit" title="' . hsc($label) . '" aria-label="' . hsc($label) . '">✎</a>';
+            $renderer->doc .= '<a href="#" class="luxtools-scratchpad-edit" title="' . hsc($label) . '" aria-label="' . hsc($label) . '">✎ edit</a>';
         }
         $renderer->doc .= '</div>';
 
@@ -156,6 +167,9 @@ class syntax_plugin_luxtools_scratchpad extends SyntaxPlugin
             $renderer->doc .= '</div>';
         }
 
+        $renderer->doc .= '</div>'; // .luxtools-scratchpad-rendered
+        $renderer->doc .= '</div>'; // .luxtools-scratchpad-frame
+
         $renderer->doc .= '</div>';
         return true;
     }