pi-studio 0.9.61 → 0.9.63

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.9.63] — 2026-10-08
+
+### Fixed
+- The cursor fix in 0.9.62 didn't reach Studio's own editor, so in Safari and other WebKit browsers such as Muxy and cmux the cursor could still drift away from the text after an edit let a word move back up a line. The re-layout now works in Studio's layout.
+- After a macOS autocorrect, that re-layout could switch itself off until you moved to another line. Typing, an ordinary edit or leaving the editor now turns it back on, and the editor also re-lays out once whenever you pause typing.
+
+## [0.9.62] — 2026-10-08
+
+### Fixed
+- With syntax highlighting on, the cursor could end up several characters away from the text being typed, mostly in Safari and other WebKit browsers such as Muxy and cmux. It happened when an edit let a word move back up a line. The editor now re-lays out its text after each edit, so the cursor and text stay together. A line that is exactly full can still show a brief mismatch, which corrects itself on the next key.
+
+### Added
+- `Ctrl+Shift+H` toggles syntax highlighting without leaving the editor.
+
 ## [0.9.61] — 2026-09-30
 
 ### Fixed

package/client/studio-client.js

@@ -2587,6 +2587,7 @@
       let pendingResponseScrollReset = false;
       let editorMetaUpdateRaf = null;
       let editorHighlightEnabled = false;
+      let editorWrapCompositionActive = false;
       let editorLanguage = "markdown";
       let responseHighlightEnabled = false;
       let completionSuggestionState = null;
@@ -17999,6 +18000,56 @@
         return EXT_TO_LANG[ext] || "";
       }
 
+      function repairEditorTextareaWrap(event) {
+        // A composition can start without a matching end (e.g. macOS autocorrect in WebKit);
+        // an ordinary input event proves it is over, so a stale flag cannot disable the repair.
+        if (event?.type === "input" && event.isComposing === false) editorWrapCompositionActive = false;
+        if (!editorHighlightEnabled || editorView !== "markdown" || editorWrapCompositionActive || event?.isComposing) return false;
+        // WebKit can keep the previous soft-wrap layout after a native edit,
+        // while the rebuilt overlay has already moved a word onto its prior line.
+        // Narrow the text by 1px for one forced layout, then restore it, without
+        // replacing text or touching native undo/IME. Nudge the padding, not the
+        // width: the editor is a flex item that grows back to full width, so a
+        // width nudge never reached its text layout (checked in WebKit, 8 Oct).
+        const style = sourceTextEl.style;
+        const padding = style.getPropertyValue("padding-right");
+        const priority = style.getPropertyPriority("padding-right");
+        const computed = window.getComputedStyle(sourceTextEl).paddingRight || "0px";
+        const top = sourceTextEl.scrollTop, left = sourceTextEl.scrollLeft;
+        try {
+          style.setProperty("padding-right", "calc(" + computed + " + 1px)", "important");
+          void sourceTextEl.offsetWidth;
+        } finally {
+          if (padding) style.setProperty("padding-right", padding, priority);
+          else style.removeProperty("padding-right");
+          void sourceTextEl.offsetWidth;
+          sourceTextEl.scrollTop = top; sourceTextEl.scrollLeft = left;
+        }
+        syncEditorHighlightScroll();
+        return true;
+      }
+
+      // Catch-all: lay the text out again once typing pauses, covering edits made
+      // outside the ordinary input path (autocorrect, dictation, text replacement).
+      let editorWrapPauseTimer = null;
+      function scheduleEditorWrapPauseRepair() {
+        if (editorWrapPauseTimer !== null) window.clearTimeout(editorWrapPauseTimer);
+        editorWrapPauseTimer = window.setTimeout(() => { editorWrapPauseTimer = null; repairEditorTextareaWrap(); }, 300);
+      }
+
+      function handleEditorHighlightShortcut(event) {
+        if (!event || event.defaultPrevented || event.isComposing || editorWrapCompositionActive || event.target !== sourceTextEl
+            || editorView !== "markdown" || sourceTextEl.disabled || sourceTextEl.readOnly || studioModalBlocksDraftAction()
+            || !event.ctrlKey || !event.shiftKey || event.metaKey || event.altKey
+            || !(event.code === "KeyH" || String(event.key || "").toLowerCase() === "h")) return false;
+        event.preventDefault(); event.stopPropagation();
+        if (!event.repeat) {
+          setEditorHighlightEnabled(!editorHighlightEnabled);
+          repairEditorTextareaWrap();
+        }
+        return true;
+      }
+
       function renderEditorHighlightNow() {
         if (!sourceHighlightEl) return;
         if (!editorHighlightEnabled || editorView !== "markdown") {
@@ -24943,9 +24994,18 @@
         requestLatestResponse();
       });
 
+      sourceTextEl.addEventListener("keydown", event => { if (!event.isComposing && event.keyCode !== 229) editorWrapCompositionActive = false; });
+      sourceTextEl.addEventListener("blur", () => { editorWrapCompositionActive = false; });
       sourceTextEl.addEventListener("keydown", handleSourceTextTabKey);
+      sourceTextEl.addEventListener("keydown", handleEditorHighlightShortcut);
+      sourceTextEl.addEventListener("compositionstart", () => { editorWrapCompositionActive = true; });
+      sourceTextEl.addEventListener("compositionend", () => {
+        editorWrapCompositionActive = false;
+        repairEditorTextareaWrap();
+      });
 
-      sourceTextEl.addEventListener("input", () => {
+      sourceTextEl.addEventListener("input", event => {
+        repairEditorTextareaWrap(event); scheduleEditorWrapPauseRepair();
         if (completionSuggestionState && sourceTextEl.value !== completionSuggestionState.baseText) {
           hideCompletionSuggestion();
         }

package/index.ts

@@ -12515,7 +12515,7 @@ ${cssVarsBlock}
               <button id="showMeResponseBtn" type="button" hidden title="Explain the response displayed in the right pane using the smallest useful visual or structural representation.">Explain displayed response</button>
               <button id="askAsideBtn" type="button" title="Open a separate side-question thread without adding it to the main Pi conversation.">Side question</button>
               <button id="quizBtn" type="button" title="Open an active quiz for the current editor selection or document.">Quiz me</button>
-              <select id="highlightSelect" class="studio-flat-select" aria-label="Editor syntax highlighting">
+              <select id="highlightSelect" class="studio-flat-select" aria-label="Editor syntax highlighting" aria-keyshortcuts="Control+Shift+H">
                 <option value="off">Syntax highlight: Off</option>
                 <option value="bash">Syntax highlight: Bash</option>
                 <option value="c">Syntax highlight: C</option>
@@ -12806,6 +12806,7 @@ ${cssVarsBlock}
             <div><dt>Tab</dt><dd>Insert a visible completion suggestion; otherwise indent selected editor text</dd></div>
             <div><dt>Esc</dt><dd>Dismiss a visible completion suggestion, close overlays, exit pane focus, or stop an active request</dd></div>
             <div><dt>Shift+Tab</dt><dd>Unindent selected editor text</dd></div>
+            <div><dt>Ctrl+Shift+H</dt><dd>Toggle editor syntax highlighting</dd></div>
           </dl>
         </section>
         <section class="shortcuts-group shortcuts-full-only">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.9.61",
+  "version": "0.9.63",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, active quiz, prompt/response history, live previews, and tmux-backed REPL/literate REPL workflows",
   "type": "module",
   "license": "MIT",