pi-studio 0.5.49 → 0.5.51

package/client/studio.css

@@ -661,11 +661,17 @@
       -webkit-text-fill-color: transparent;
     }
 
-    .editor-selection-comment-btn {
+    .editor-selection-actions {
       position: absolute;
       top: 12px;
       right: 12px;
       z-index: 4;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .editor-selection-action-btn {
       min-height: 24px;
       border-radius: 999px;
       padding: 0 10px;
@@ -677,13 +683,22 @@
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
     }
 
-    .editor-selection-comment-btn:hover,
-    .editor-selection-comment-btn:focus-visible {
+    .editor-selection-action-btn:hover,
+    .editor-selection-action-btn:focus-visible {
       background: var(--accent-soft-strong);
       color: var(--accent);
       border-color: var(--accent);
     }
 
+    .editor-selection-actions[hidden],
+    .editor-selection-action-btn[hidden],
+    .preview-selection-actions[hidden],
+    .preview-comment-add[hidden],
+    .preview-comment-jump[hidden],
+    .preview-comment-summary[hidden] {
+      display: none !important;
+    }
+
     .hl-heading {
       color: var(--md-heading);
       font-weight: 700;
@@ -916,22 +931,24 @@
       overflow-wrap: inherit;
     }
 
-    .preview-comment-controls {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 4;
-      display: inline-flex;
-      align-items: center;
+    .preview-selection-actions {
+      position: sticky;
+      top: 12px;
+      z-index: 6;
+      height: 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
       gap: 8px;
-      transform: translateY(-0.38rem);
+      pointer-events: none;
     }
 
     .preview-comment-summary {
       display: none !important;
     }
 
-    .preview-comment-add {
+    .preview-comment-add,
+    .preview-comment-jump {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -940,24 +957,17 @@
       padding: 0 10px;
       font-size: 12px;
       line-height: 1;
-      opacity: 0;
-      pointer-events: none;
-      transform: translateY(-2px);
-      transition: opacity 120ms ease, transform 120ms ease, color 120ms ease, border-color 120ms ease, background-color 120ms ease;
       background: var(--accent-soft);
       border-color: var(--accent);
       color: var(--accent);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-    }
-
-    .preview-comment-block.has-selection .preview-comment-add {
-      opacity: 1;
       pointer-events: auto;
-      transform: translateY(0);
     }
 
     .preview-comment-add:hover,
-    .preview-comment-add:focus-visible {
+    .preview-comment-add:focus-visible,
+    .preview-comment-jump:hover,
+    .preview-comment-jump:focus-visible {
       background: var(--accent-soft-strong);
       color: var(--accent);
       border-color: var(--accent);

package/index.ts

@@ -6095,7 +6095,10 @@ ${cssVarsBlock}
               <div id="lineNumberMeasure" class="editor-line-number-measure" aria-hidden="true"></div>
               <pre id="sourceHighlight" class="editor-highlight" aria-hidden="true"></pre>
               <textarea id="sourceText" placeholder="Paste or edit text here.">${initialText}</textarea>
-              <button id="editorSelectionCommentBtn" type="button" class="editor-selection-comment-btn" hidden title="Create a new local comment from the current editor selection.">Comment</button>
+              <div id="editorSelectionActions" class="editor-selection-actions" hidden>
+                <button id="editorSelectionCommentBtn" type="button" class="editor-selection-action-btn" hidden title="Create a new local comment from the current editor selection.">Comment</button>
+                <button id="editorSelectionJumpBtn" type="button" class="editor-selection-action-btn" hidden title="Jump to the current editor selection in the preview.">Jump</button>
+              </div>
             </div>
             <div id="sourcePreview" class="panel-scroll rendered-markdown" hidden><pre class="plain-markdown"></pre></div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.49",
+  "version": "0.5.51",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",