@jxsuite/studio 6.1.0 → 6.1.1

package/src/canvas/iframe-protocol.ts

@@ -563,6 +563,9 @@ export type IframeToParent =
   // Inline editing started in the iframe (the parent shows the format toolbar from here). `prop`
   // Names the component-instance prop when the session edits prop-bound text (plain sessions).
   | { kind: "editStart"; path: (string | number)[]; prop?: string }
+  // The first keystroke of a typing burst, ahead of the idle tick's commit: the parent marks the tab
+  // Dirty now, so Save is enabled the instant there is text a save would keep.
+  | { kind: "editInput" }
   // Committed inline-edit content (rich `children` else `textContent`) for the parent to persist.
   | {
       kind: "editCommit";

package/src/canvas/iframe-render.ts

@@ -1018,8 +1018,11 @@ export async function renderResolvedDocument(opts: {
   // Sections feeding back into an ever-growing height. Set every render (the iframe always wants it).
   setCanvasViewportTranspose(true);
   // De-link `<a href>` in design/edit so clicks select the anchor instead of navigating the iframe;
-  // Preview keeps real links live (mirrors the server-function gate above).
-  setCanvasDelinkAnchors(opts.mode !== "preview");
+  // Preview keeps real links live (mirrors the server-function gate above). So does Project Styles:
+  // An `<a>` without `href` is not a link, so `:link`, `:any-link` and the UA's link colour could
+  // Never match its specimen, and a project could not see the link styles it was setting there.
+  // Its clicks are refused in the frame instead (`iframe-interaction.ts`).
+  setCanvasDelinkAnchors(opts.mode !== "preview" && opts.mode !== "stylebook");
   /* De-popover in the same modes and for the same reason: an OPEN popover is in the top layer,
      whose containing block is the viewport — a fiction here, since the frame is sized to its own
      content — and which contributes to no ancestor's scrollable overflow, so the artboard could

package/src/commands/defaults.ts

@@ -236,7 +236,10 @@ export function defaultCommands(deps: CommandDeps): AnyCommand[] {
       group: "1_file",
       undo: "none",
       when: documentOpen,
-      requires: "an open document",
+      // Nothing to save is a disabled button, not a no-op one. A disabled chord is still claimed,
+      // So ⌘S on a clean document never falls through to the browser's own Save Page.
+      enablement: (ctx) => ctx.document.dirty,
+      requires: "unsaved changes",
       run: () => deps.saveDocument(),
     },
     {

package/src/commands/live-context.ts

@@ -32,6 +32,7 @@ import { shell } from "../shell";
 import { activeTab, workspace } from "../workspace/workspace";
 import { primarySelection } from "../tabs/selection";
 import { canRedo, canUndo } from "../tabs/transact";
+import { hasTyping } from "../tabs/typing";
 import { collabState } from "../collab/collab-state";
 
 import { canvasViewForMode, editorKindForMode, emptyContext } from "./context";
@@ -133,7 +134,8 @@ export function createLiveContext(sources: LiveContextSources): () => CommandCon
     ctx.git.dirtyCount = shell.git.status?.files.length ?? 0;
 
     ctx.document.open = tab !== null;
-    ctx.document.dirty = tab?.doc.dirty === true;
+    // Typing still in a source buffer is unsaved work too, though the document has not seen it.
+    ctx.document.dirty = tab ? tab.doc.dirty === true || hasTyping(tab.id) : false;
     ctx.document.mode = tab?.doc.mode ?? "";
     ctx.document.canUndo = tab ? canUndo(tab) : false;
     ctx.document.canRedo = tab ? canRedo(tab) : false;

package/src/editor/shortcuts.ts

@@ -51,16 +51,16 @@ import {
 } from "../tabs/transact";
 import {
   applyEditZoom,
-  markExplicitZoom,
   requestEditZoom,
   setEditZoom,
+  setUserZoom,
+  stageZoom,
 } from "../canvas/canvas-utils";
 import { openQuickSearch } from "../panels/quick-search";
 import { inspectorTab } from "../panels/right-panel";
 import { requestClose } from "../panels/tab-strip";
 import { layerHost } from "../ui/layers";
 import { openDialogSurface } from "../surfaces/dialog";
-import { rectOf } from "../utils/geometry";
 import {
   DOCK_IDS,
   requireNavigatorPanelId,
@@ -78,6 +78,8 @@ import { hasElementSelection, hasSelection, inCanvas, keyScopeStack } from "../c
 import { defaultCommands } from "../commands/defaults";
 import { setActiveRegistry } from "../commands/active-registry";
 import { runReported } from "../commands/run-reported";
+import { pointerAnchor } from "../canvas/iframe-host";
+import type { PointerAnchor } from "../canvas/iframe-host";
 import type { CommandContext } from "../commands/context";
 import type { DockId as CommandDockId } from "../commands/defaults";
 import type { AnyCommand, CommandRegistry } from "../commands/registry";
@@ -314,11 +316,15 @@ function redoDocument(): void {
 
 // ─── Canvas zoom ──────────────────────────────────────────────────────────────
 
-/** Design-mode zoom bounds. Edit mode clamps inside `canvas-utils`. */
-const ZOOM_MIN = 0.05;
-const ZOOM_MAX = 5;
+/** One chord step. Both zooms clamp inside `canvas-utils`. */
 const ZOOM_STEP = 1.2;
 
+/** How long after an Edit zoom step its anchor is measured again: the zoom's frame, then a reflow. */
+const EDIT_ZOOM_SETTLE_MS = 34;
+
+/** How long an Edit zoom burst must be idle before its anchor is let go. */
+const EDIT_ZOOM_RELEASE_MS = 300;
+
 /** Whether the zoom verbs address the reflowing content zoom rather than the artboard transform. */
 function isContentZoom(ctx: CommandContext): boolean {
   return ctx.canvas.view === "edit";
@@ -346,8 +352,8 @@ function zoomBy(ctx: CommandContext, factor: number, redraw: () => void): void {
     setEditZoom((tab.session.ui.editZoom ?? 1) * factor);
     return;
   }
-  const next = (tab.session.ui.zoom ?? 1) * factor;
-  tab.session.ui.zoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, next));
+  // Around the stage's middle, like the zoom pod's buttons.
+  setUserZoom(stageZoom() * factor);
   redraw();
 }
 
@@ -1074,6 +1080,26 @@ let _stageContext: StageContext | null = null;
  */
 export function installStageGestures(surface: CanvasSurface): () => void {
   const canvasWrap = surface.wrap;
+  /* An Edit zoom burst's anchor: the element under the cursor when the burst began. The frame
+     reflows at every step, so after each one the element is measured again and the scroller takes
+     back whatever it moved; the anchor is let go once the burst has been idle a while. */
+  let zoomAnchor: PointerAnchor | null = null;
+  let zoomRelease: ReturnType<typeof setTimeout> | undefined;
+  let zoomCorrecting = false;
+  const correctEditZoom = () => {
+    const anchor = zoomAnchor;
+    if (!anchor || zoomCorrecting) {
+      return;
+    }
+    zoomCorrecting = true;
+    void anchor.settle().then((top) => {
+      zoomCorrecting = false;
+      const sc = canvasWrap.querySelector<HTMLElement>('[part="edit-canvas"]');
+      if (top !== null && sc) {
+        sc.scrollTop += top - anchor.top;
+      }
+    });
+  };
   const getContext = () => _stageContext?.(surface) ?? stageless();
   const controller = new AbortController();
   const { signal } = controller;
@@ -1093,7 +1119,16 @@ export function installStageGestures(surface: CanvasSurface): () => void {
         if (e.ctrlKey || e.metaKey) {
           e.preventDefault();
           const editZoom = paneTab?.session.ui.editZoom ?? 1;
-          requestEditZoom(editZoom * (1 + -e.deltaY * 0.005), surface);
+          const canvasEl = surface.panels[0]?.canvas;
+          zoomAnchor ??= canvasEl ? pointerAnchor(canvasEl) : null;
+          requestEditZoom(editZoom * (1 + -e.deltaY * 0.005), surface, e.clientY);
+          // Measured after the zoom's own frame has applied, and the frame has had one to reflow.
+          setTimeout(correctEditZoom, EDIT_ZOOM_SETTLE_MS);
+          clearTimeout(zoomRelease);
+          zoomRelease = setTimeout(() => {
+            correctEditZoom();
+            zoomAnchor = null;
+          }, EDIT_ZOOM_RELEASE_MS);
           return;
         }
         /* The stage's own scroller, by the `part` the stage document draws it with — the same
@@ -1125,24 +1160,14 @@ export function installStageGestures(surface: CanvasSurface): () => void {
       }
       e.preventDefault();
       if (e.ctrlKey || e.metaKey) {
-        // Zoom towards cursor
-        const rect = rectOf(canvasWrap);
-        const cursorX = e.clientX - rect.left;
-        const cursorY = e.clientY - rect.top;
-        /* THIS pane's tab, not the focused pane's. Both reads were `activeTab`, so a wheel over
-           the unfocused stage magnified a document on the other side of the splitter. */
-        const oldZoom = paneTab?.session.ui.zoom ?? 1;
-        const delta = -e.deltaY * 0.005;
-        const newZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, oldZoom * (1 + delta)));
-        const ratio = newZoom / oldZoom;
-        // Adjust pan so the point under cursor stays stationary
-        setPan(cursorX - (cursorX - panX) * ratio, cursorY - (cursorY - panY) * ratio);
-        if (paneTab) {
-          paneTab.session.ui.zoom = newZoom;
-        }
-        // The author chose this zoom, so re-entering Design keeps it instead of auto-fitting.
-        // On THIS stage: the declared fit is a fact about the document under the cursor.
-        markExplicitZoom(surface);
+        /* Zoom toward the cursor, on THIS stage (a lens pane carries its own scale). The author
+           chose this zoom, so it is declared as the document's fit and re-entering Design keeps
+           it instead of auto-fitting. */
+        setUserZoom(stageZoom(surface) * (1 + -e.deltaY * 0.005), surface, {
+          clientX: e.clientX,
+          clientY: e.clientY,
+        });
+        return;
       } else if (e.shiftKey) {
         // Shift+scroll = horizontal pan
         setPan(panX - e.deltaY, panY);
@@ -1206,7 +1231,10 @@ export function installStageGestures(surface: CanvasSurface): () => void {
     { signal },
   );
 
-  return () => controller.abort();
+  return () => {
+    clearTimeout(zoomRelease);
+    controller.abort();
+  };
 }
 
 /** The context a stage answers with before the bootstrap has published a reader. */

package/src/files/media-paths.ts

@@ -134,5 +134,7 @@ export function previewFileSrc(path: string): string {
   if (space === "repo") {
     return withVersion(`${fileBaseUrl}${encodeProjectPath(normalized)}`, versionOf(normalized));
   }
-  return loopbackAssetSrc(mediaSiteUrl(normalized));
+  /* Encoded per segment for the `src` only. `mediaSiteUrl` is also what an author's document is
+     given, and stays as typed; a `#` or `?` in a filename would cut this URL short. */
+  return loopbackAssetSrc(`/${encodeProjectPath(mediaSiteUrl(normalized).slice(1))}`);
 }

package/src/panels/editors.ts

@@ -52,6 +52,7 @@ import { globalEntries, namedFormulaEntries } from "../ui/formula-catalog";
 import { notify } from "../services/notify";
 
 import type { BufferWrites } from "../services/monaco-buffer";
+import { noteTyping } from "../tabs/typing";
 import type { OxLintDiagnostic } from "../services/code-services";
 import type { JxPrototypeDef } from "@jxsuite/schema/types";
 import type { JxPath } from "../state";
@@ -500,8 +501,9 @@ async function mountFunctionEditor(
     // Stated as a fact rather than left to be read off the timer, because the timer is only ONE of
     // The ways a buffer gets ahead and the other one is invisible to it. `markTyped` rather than
     // `markAhead`: this text is the AUTHOR'S, so it is also the text a close would destroy, and
-    // Format-on-open's (below) is not.
+    // Format-on-open's (below) is not. Noted for Save too, so it is enabled ahead of the commit.
     writes.markTyped();
+    noteTyping(tab.id);
 
     writes.arm(BUFFER_COMMIT, 500, () => {
       editor._commitBody?.(editor.getValue());

package/src/panels/style-panel.ts

@@ -1471,13 +1471,32 @@ function buildEditor(
      match, and a menu that offers unmatchable states is a menu people stop reading. What the
      element already DECLARES and the active selector are unioned in after, so nothing an author has
      written can drop out of it. */
-  const selectorOptions = [
-    ...new Set([
-      ...selectorsForNode(node),
-      ...declaredSelectors,
-      ...(activeSelector ? [activeSelector] : []),
-    ]),
-  ];
+  /* In Project Styles the coordinate is a TAG PATH (`a`, `table th`) and its states nest under it
+     (`a :hover`). The menu offered the ROOT's states instead, and picking one replaced the tag, so
+     `:hover` styled the document element and a project had no way to write `a:hover` at all. Here
+     the states are the tag's own, spelled as the path they write. */
+  const stylebookPath =
+    stylebookSelector && isTagPath(stylebookSelector) ? stylebookSelector : null;
+  const stylebookLeaf = stylebookPath?.split(" ").at(-1) ?? null;
+  const stylebookDeclared = stylebookPath
+    ? Object.keys(resolveNestedTagStyle(style, stylebookPath)).filter((k) => isNestedSelector(k))
+    : [];
+  const selectorOptions = stylebookPath
+    ? [
+        ...new Set([
+          ...[...selectorsForNode({ tagName: stylebookLeaf ?? "div" }), ...stylebookDeclared].map(
+            (state) => `${stylebookPath} ${state}`,
+          ),
+          ...(activeSelector && activeSelector !== stylebookPath ? [activeSelector] : []),
+        ]),
+      ]
+    : [
+        ...new Set([
+          ...selectorsForNode(node),
+          ...declaredSelectors,
+          ...(activeSelector ? [activeSelector] : []),
+        ]),
+      ];
 
   // ── The Target Line (§6.2) ─────────────────────────────────────────────────
   const stylebookTag = stylebookTagOf(stylebookSelector);
@@ -1486,15 +1505,19 @@ function buildEditor(
   setTargetLine({
     segments: targetSegments(elementLabel, mediaTab, mediaNames.length > 0, schemeLayer),
     selector: {
-      value: activeSelector,
+      // The bare tag path IS the base rule in Project Styles, so it reads as the base entry.
+      value: stylebookPath && activeSelector === stylebookPath ? null : activeSelector,
       options: selectorOptions,
-      declared: declaredSelectors,
+      declared: stylebookPath
+        ? new Set(stylebookDeclared.map((state) => `${stylebookPath} ${state}`))
+        : declaredSelectors,
       onSelect: (value) => {
         const current = activeTab.value;
         if (!current) {
           return;
         }
-        current.session.ui.activeSelector = value;
+        // Clearing the state in Project Styles returns to the tag, never to the document root.
+        current.session.ui.activeSelector = value ?? stylebookPath;
         /* §6.2's own rule: a control that selects a rendering context has to change the rendering,
            or it is a control over a label. `:hover` gets away with not doing this because you can
            hover the element; `:popover-open` cannot, because a closed popover is not on the screen
@@ -1523,7 +1546,9 @@ function buildEditor(
             isNestedSelector(v.trim()) ? "" : 'A selector must start with ":", ".", "&" or "[".',
         }).then((value) => {
           if (value && activeTab.value) {
-            activeTab.value.session.ui.activeSelector = value.trim();
+            activeTab.value.session.ui.activeSelector = stylebookPath
+              ? `${stylebookPath} ${value.trim()}`
+              : value.trim();
           }
         });
       },

package/src/platforms/devserver.ts

@@ -98,6 +98,50 @@ export function createDevServerPlatform() {
    */
   let _collabConnection: Promise<WsCollabConnection> | null = null;
 
+  /**
+   * Bind the server to `root` — the binding its rootless routes and its static fallback (every
+   * media thumbnail, every canvas image) resolve against.
+   *
+   * **The binding is one per SERVER, not per tab.** So an empty root posts nothing: a Studio tab
+   * opened with no project used to post `{ root: "" }` at boot, which unbound the server for every
+   * other tab and turned their images into 404s. And a tab re-claims it (see
+   * {@link reclaimBinding}) whenever it could have been taken.
+   */
+  async function postActivate(root: string): Promise<void> {
+    if (!root) {
+      return;
+    }
+    const res = await fetch("/__studio/activate", {
+      body: JSON.stringify({ root }),
+      headers: { "Content-Type": "application/json" },
+      method: "POST",
+    });
+    if (!res.ok) {
+      const body = (await readJson<ErrorBody>(res).catch(() => ({}))) as ErrorBody;
+      throw new Error(
+        `Could not open ${root}: ${problemDetail(body) ?? `activation failed (${res.status})`}`,
+      );
+    }
+  }
+
+  /**
+   * Re-bind the server to this tab's project. Two events can take the binding away without this tab
+   * hearing of it: another Studio tab activating ITS project, and a restarted `bun run dev`, which
+   * comes back bound to nothing. So a tab re-claims it when the author comes back to it (focus) and
+   * when the reload stream reconnects (a restart). Only a tab with a project claims anything.
+   */
+  function reclaimBinding(): void {
+    if (!_projectRoot) {
+      return;
+    }
+    _activation = postActivate(_projectRoot).catch((error: unknown) => {
+      console.error("Project re-activation failed:", error);
+    });
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("focus", reclaimBinding);
+  }
+
   /**
    * Prefix a project-relative path with the active project root for server API calls.
    *
@@ -162,18 +206,7 @@ export function createDevServerPlatform() {
      * @param {string} [root]
      */
     async activate(root?: string) {
-      const r = root ?? _projectRoot;
-      const res = await fetch("/__studio/activate", {
-        body: JSON.stringify({ root: r }),
-        headers: { "Content-Type": "application/json" },
-        method: "POST",
-      });
-      if (!res.ok) {
-        const body = (await readJson<ErrorBody>(res).catch(() => ({}))) as ErrorBody;
-        throw new Error(
-          `Could not open ${r}: ${problemDetail(body) ?? `activation failed (${res.status})`}`,
-        );
-      }
+      await postActivate(root ?? _projectRoot);
     },
 
     // ─── Project opening ──────────────────────────────────────────────────
@@ -514,6 +547,8 @@ export function createDevServerPlatform() {
       es.addEventListener("open", () => {
         opens += 1;
         if (opens > 1) {
+          // A reconnect is usually a restarted server, which comes back bound to no project.
+          reclaimBinding();
           options?.onResync?.("reconnect");
         }
       });

package/src/studio.ts

@@ -200,7 +200,8 @@ import * as chatPanelMod from "./panels/chat-panel";
 import { setProjectAdopter } from "./services/project-adoption";
 import { setImportHandoff } from "./services/import-seed";
 import { watchConnection } from "./services/connection";
-import { tabBufferUnsaved } from "./services/monaco-buffer";
+import { commitTabBuffers, tabBufferUnsaved } from "./services/monaco-buffer";
+import { clearTyping } from "./tabs/typing";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
 import * as paneContext from "./panels/pane-context";
@@ -1492,7 +1493,18 @@ registerStudioCommands(
     // Whether the bytes landed, and a hook that neither supplies one nor reads the answer must not
     // Silently forward its own first argument as the tab to save.
     saveDocument: async () => {
-      await saveFile();
+      const tab = activeTab.value;
+      if (!tab) {
+        return;
+      }
+      // What a source buffer holds goes into the document first, or ⌘S inside the commit's
+      // Debounce would save the text from before the last keystrokes.
+      await commitTabBuffers(tab);
+      await saveFile(tab);
+      // Text that would not parse is still only in the buffer, so it is still unsaved.
+      if (!tabBufferUnsaved(tab)) {
+        clearTyping(tab.id);
+      }
     },
   },
   stageContext,

package/src/surfaces/library-pane.ts

@@ -30,6 +30,7 @@
 
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
+import { placeholderBrokenImages } from "../utils/edit-display";
 import libraryDoc from "./library-pane.json";
 import type { JxDocument, JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
@@ -267,6 +268,10 @@ export function mountLibrarySurface(
   actions: LibraryActions,
 ): LibrarySurfaceHandle {
   host.replaceChildren();
+  // A file that will not load, or a preview image with nothing to bind, draws a placeholder rather
+  // Than the browser's broken-image glyph.
+  const listening = new AbortController();
+  placeholderBrokenImages(host, listening.signal);
   const scope = reactive<LibraryScope>({
     bannerState: "hidden",
     bannerText: "",
@@ -355,6 +360,7 @@ export function mountLibrarySurface(
     },
     dispose() {
       disposed = true;
+      listening.abort();
       mounted?.dispose();
       mounted = null;
     },