pi-studio 0.5.50 → 0.5.52

package/client/studio.css

@@ -227,13 +227,15 @@
 
     #scratchpadBtn.has-content,
     #reviewNotesBtn.has-content,
-    #reviewNotesBtn.is-active {
+    #reviewNotesBtn.is-active,
+    #outlineBtn.is-active {
       border-color: var(--accent);
       color: var(--accent);
       font-weight: 600;
     }
 
-    #reviewNotesBtn.is-active {
+    #reviewNotesBtn.is-active,
+    #outlineBtn.is-active {
       background: var(--accent-soft);
     }
 
@@ -336,7 +338,8 @@
       gap: 8px;
     }
 
-    .review-notes-dock-wrap {
+    .review-notes-dock-wrap,
+    .outline-dock-wrap {
       flex: 0 0 clamp(300px, 34%, 420px);
       min-width: 280px;
       min-height: 0;
@@ -348,11 +351,13 @@
       overflow: hidden;
     }
 
-    .review-notes-dock-wrap[hidden] {
+    .review-notes-dock-wrap[hidden],
+    .outline-dock-wrap[hidden] {
       display: none !important;
     }
 
-    .review-notes-dock {
+    .review-notes-dock,
+    .outline-dock {
       width: 100%;
       min-height: 0;
       display: flex;
@@ -661,11 +666,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 +688,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,15 +936,16 @@
       overflow-wrap: inherit;
     }
 
-    .preview-comment-controls {
-      position: absolute;
-      top: 0;
-      right: 0;
+    .preview-selection-actions {
+      position: sticky;
+      top: 12px;
       z-index: 6;
-      display: inline-flex;
-      align-items: center;
+      height: 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
       gap: 8px;
-      transform: translateY(-0.46rem);
+      pointer-events: none;
     }
 
     .preview-comment-summary {
@@ -941,21 +962,11 @@
       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,
-    .preview-comment-block.has-selection .preview-comment-jump {
-      opacity: 1;
       pointer-events: auto;
-      transform: translateY(0);
     }
 
     .preview-comment-add:hover,
@@ -1818,15 +1829,18 @@
       filter: brightness(0.95);
     }
 
-    .review-notes-dock .scratchpad-header {
+    .review-notes-dock .scratchpad-header,
+    .outline-dock .scratchpad-header {
       padding: 12px 14px 10px;
     }
 
-    .review-notes-dock .scratchpad-header h2 {
+    .review-notes-dock .scratchpad-header h2,
+    .outline-dock .scratchpad-header h2 {
       font-size: 15px;
     }
 
-    .review-notes-dock .scratchpad-description {
+    .review-notes-dock .scratchpad-description,
+    .outline-dock .scratchpad-description {
       font-size: 11px;
       line-height: 1.4;
       word-break: normal;
@@ -1889,6 +1903,60 @@
       justify-content: space-between;
     }
 
+    .outline-list {
+      display: flex;
+      flex: 1 1 auto;
+      min-height: 0;
+      flex-direction: column;
+      gap: 6px;
+      padding: 14px;
+      overflow: auto;
+      background: var(--panel);
+    }
+
+    .outline-entry {
+      width: 100%;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: baseline;
+      gap: 8px;
+      text-align: left;
+      border-radius: 10px;
+      padding: 8px 10px;
+      background: var(--panel-2);
+      border: 1px solid var(--border-muted);
+    }
+
+    .outline-entry:hover,
+    .outline-entry:focus-visible {
+      border-color: var(--accent);
+      background: var(--accent-soft);
+    }
+
+    .outline-entry-kind {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      color: var(--accent);
+      white-space: nowrap;
+    }
+
+    .outline-entry-title {
+      min-width: 0;
+      font-size: 13px;
+      line-height: 1.35;
+      color: var(--text);
+      overflow-wrap: anywhere;
+    }
+
+    .outline-entry-meta {
+      font-size: 11px;
+      color: var(--muted);
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
     .review-note-card {
       border: 1px solid var(--border-muted);
       border-radius: 12px;
@@ -1996,7 +2064,8 @@
         flex-direction: column;
       }
 
-      .review-notes-dock-wrap {
+      .review-notes-dock-wrap,
+      .outline-dock-wrap {
         flex: 0 0 auto;
         min-width: 0;
         max-height: min(42vh, 420px);

package/index.ts

@@ -6010,6 +6010,7 @@ ${cssVarsBlock}
         <div class="section-header-actions">
           <button id="leftFocusBtn" class="pane-focus-btn" type="button" title="Show only the editor pane. Shortcut: F10 or Cmd/Ctrl+Esc.">Focus pane</button>
           <button id="reviewNotesBtn" type="button" title="Toggle local comments beside the current editor document or draft. Comments stay outside the document text and can later be converted into [an: ...] annotations.">Comments</button>
+          <button id="outlineBtn" type="button" title="Toggle document outline for the current editor text. Outline entries can jump between raw editor and preview.">Outline</button>
           <button id="scratchpadBtn" type="button" title="Open a local persistent scratchpad for the current editor document or draft. Scratchpad text is never run, critiqued, or exported unless you explicitly insert it into the editor.">Scratchpad</button>
         </div>
       </div>
@@ -6095,10 +6096,34 @@ ${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>
+          <aside id="outlineOverlay" class="outline-dock-wrap" hidden>
+            <div id="outlineDialog" class="outline-dock" role="complementary" aria-labelledby="outlineTitle">
+              <div class="scratchpad-header">
+                <div>
+                  <h2 id="outlineTitle">Outline</h2>
+                  <p class="scratchpad-description">Document structure for the current editor text. Click an entry to jump in the raw editor and, when available, reveal the matching preview location.</p>
+                </div>
+                <button id="outlineCloseBtn" type="button" class="scratchpad-close-btn" aria-label="Hide outline" title="Hide outline">✕</button>
+              </div>
+              <div class="review-notes-toolbar">
+                <span id="outlineMeta" class="scratchpad-meta">No outline entries</span>
+              </div>
+              <div id="outlineEmptyState" class="review-notes-empty">No outline available yet for this document or syntax mode.</div>
+              <div id="outlineList" class="outline-list" aria-live="polite"></div>
+              <div class="review-notes-dock-footer">
+                <div class="scratchpad-actions">
+                  <button id="outlineDoneBtn" type="button" title="Hide the outline rail.">Hide</button>
+                </div>
+              </div>
+            </div>
+          </aside>
           <aside id="reviewNotesOverlay" class="review-notes-dock-wrap" hidden>
             <div id="reviewNotesDialog" class="review-notes-dock" role="complementary" aria-labelledby="reviewNotesTitle">
               <div class="scratchpad-header">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.50",
+  "version": "0.5.52",
   "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",