@jxsuite/studio 0.28.5 → 0.30.1

package/src/studio.ts

@@ -29,11 +29,19 @@ import { effect } from "./reactivity";
 import { view } from "./view";
 
 import { isEditableBlock, isEditing } from "./editor/inline-edit";
-import { initComponentInlineEdit } from "./editor/component-inline-edit";
+import { enterComponentInlineEdit, initComponentInlineEdit } from "./editor/component-inline-edit";
 import { enterInlineEdit } from "./editor/content-inline-edit";
 import { applyTransform, initCanvasUtils, positionZoomIndicator } from "./canvas/canvas-utils";
 import { findCanvasElement, getActivePanel, initCanvasHelpers } from "./canvas/canvas-helpers";
-import { initCanvasRender, renderCanvas } from "./canvas/canvas-render";
+import {
+  applyCanvasMediaOverrides,
+  initCanvasRender,
+  renderCanvas,
+  renderOverlays,
+  scheduleCanvasRender,
+} from "./canvas/canvas-render";
+import { consumePatchedDocument, initCanvasPatcher } from "./canvas/canvas-patcher";
+import { registerSubtreeDnD } from "./panels/canvas-dnd";
 import { initCanvasLiveRender } from "./canvas/canvas-live-render";
 import {
   mountStatusbar,
@@ -51,8 +59,10 @@ import {
   openFileInTab,
   openHomePage,
   registerFileTreeDnD,
+  reloadCleanTab,
   setupTreeKeyboard,
 } from "./files/files";
+import { startFsSync } from "./files/fs-events";
 import { renderImportsTemplate } from "./panels/imports-panel";
 import { renderHeadTemplate } from "./panels/head-panel";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export";
@@ -84,6 +94,7 @@ import * as overlaysPanel from "./panels/overlays";
 import * as rightPanelMod from "./panels/right-panel";
 import * as leftPanelMod from "./panels/left-panel";
 import * as tabStrip from "./panels/tab-strip";
+import * as tabBar from "./panels/tab-bar";
 import { renderStylebookOverlays } from "./panels/stylebook-panel";
 import { registerLayersDnD, registerComponentsDnD, registerElementsDnD } from "./panels/dnd";
 import { defaultDef } from "./panels/shared";
@@ -98,7 +109,7 @@ import { initWelcome } from "./panels/welcome-screen";
 import { openNewProjectModal } from "./new-project/new-project-modal";
 import type { DocumentStackEntry, GitDiffState } from "./types";
 import type { JxPath } from "./state";
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { JxMutableNode, ProjectConfig } from "@jxsuite/schema/types";
 
 void _swc;
 
@@ -133,7 +144,7 @@ async function navigateToComponent(componentPath: string) {
     if (!content) {
       return;
     }
-    const parsed = JSON.parse(content);
+    const parsed = JSON.parse(content) as JxMutableNode;
     const tab = activeTab.value;
     if (!tab) {
       return;
@@ -289,7 +300,7 @@ requestIdleCallback(() => {
   const frag = document.createDocumentFragment();
   for (const [name] of webdata.cssProps) {
     const opt = document.createElement("option");
-    opt.value = name;
+    opt.value = name!;
     frag.append(opt);
   }
   dl.append(frag);
@@ -316,11 +327,8 @@ initShellRefs();
 toolbarPanel.mount(toolbarEl, {
   closeFunctionEditor: () => closeFunctionEditor(),
   getCanvasMode,
-  navigateBack: () => navigateBack(),
-  navigateToLevel: (i: number) => navigateToLevel(i),
   openProject: () => openProject(),
   openRecentProject: (root: string) => openRecentProject(root),
-  parseMediaEntries,
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel(),
   saveFile: () => saveFile(),
@@ -332,6 +340,15 @@ initQuickSearch();
 
 tabStrip.mount(document.querySelector("#tab-strip") as HTMLElement);
 
+tabBar.mount(document.querySelector("#tab-bar") as HTMLElement, {
+  closeFunctionEditor: () => closeFunctionEditor(),
+  exportFile,
+  getCanvasMode,
+  navigateBack: () => navigateBack(),
+  navigateToLevel: (i: number) => navigateToLevel(i),
+  parseMediaEntries,
+});
+
 overlaysPanel.mount({
   getCanvasMode,
   isEditing,
@@ -366,9 +383,16 @@ initPanelEvents({
 initCanvasLiveRender({
   getCanvasMode,
 });
+initCanvasPatcher({
+  applyCanvasMediaOverrides,
+  enterComponentInlineEdit,
+  getCanvasMode,
+  registerSubtreeDnD,
+  renderOverlays,
+  scheduleCanvasRender,
+  updateForcedPseudoPreview,
+});
 initCanvasRender({
-  closeFunctionEditor: () => closeFunctionEditor(),
-  exportFile,
   getCanvasMode,
   get gitDiffState() {
     return gitDiffState;
@@ -385,20 +409,32 @@ initWelcome({
   openNewProject: async () => {
     const result = await openNewProjectModal();
     if (result) {
-      openRecentProject(result.root);
+      void openRecentProject(result.root);
     }
   },
   openProject: () => openProject(),
   openRecentProject: (root: string) => openRecentProject(root),
 });
 
-// Effect-driven canvas rendering: auto-triggers renderCanvas when reactive deps change.
-// Uses double-RAF so the canvas render yields to higher-priority panel paints first.
-let _canvasRafId = 0;
+// Effect-driven canvas rendering, split into two triggers so document changes can be
+// Distinguished from mode/UI changes:
+// - doc-effect: tracks only the document root reference. Document mutations that were
+//   Consumed surgically by the canvas patcher skip the full render here.
+// - ui-effect: tracks canvas mode and UI flags; always schedules a full render.
+// Scheduling is deduped inside scheduleCanvasRender (double-RAF).
+effect(() => {
+  const tab = activeTab.value;
+  if (tab) {
+    const doc = tab.doc.document;
+    if (doc && consumePatchedDocument(doc)) {
+      return;
+    }
+  }
+  scheduleCanvasRender();
+});
 effect(() => {
   const tab = activeTab.value;
   if (tab) {
-    void tab.doc.document;
     void tab.doc.mode;
     void tab.session.ui.canvasMode;
     void tab.session.ui.editingFunction;
@@ -408,18 +444,7 @@ effect(() => {
     void tab.session.ui.stylebookFilter;
     void tab.session.ui.stylebookCustomizedOnly;
   }
-  if (!_canvasRafId) {
-    _canvasRafId = requestAnimationFrame(() => {
-      _canvasRafId = requestAnimationFrame(() => {
-        _canvasRafId = 0;
-        try {
-          renderCanvas();
-        } catch (error) {
-          console.error("renderCanvas error:", error);
-        }
-      });
-    });
-  }
+  scheduleCanvasRender();
 });
 
 rightPanelMod.mount({
@@ -483,6 +508,13 @@ function safeRenderRightPanel() {
 // Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
+let fsUnsub: (() => void) | null = null;
+/** (Re)subscribe the sidebar to backend filesystem events for the active project. */
+function ensureFsSync() {
+  fsUnsub?.();
+  fsUnsub = startFsSync({ onContentChange: reloadCleanTab, renderLeftPanel });
+}
+
 const _urlParams = new URLSearchParams(location.search);
 const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
@@ -499,7 +531,7 @@ if (_projectParam) {
     render();
     const platform = getPlatform();
     // oxlint-disable-next-line unicorn/prefer-top-level-await -- deliberate fire-and-forget: project probing must not block the initial render
-    (async () => {
+    void (async () => {
       try {
         const siteCtx = platform.resolveSiteContext
           ? await platform.resolveSiteContext(_projectParam)
@@ -592,14 +624,14 @@ if (_projectParam) {
             ({ frontmatter } = result);
             parsedMode = result.mode;
           } else {
-            parsedDoc = JSON.parse(content);
+            parsedDoc = JSON.parse(content) as JxMutableNode;
           }
 
           // Open in a tab
           openTab({
             id: fileRelPath,
             documentPath: fileRelPath,
-            document: parsedDoc,
+            document: parsedDoc as JxMutableNode,
             ...(frontmatter != null && { frontmatter }),
             sourceFormat: fileFormat?.name ?? null,
           });
@@ -621,8 +653,9 @@ if (_projectParam) {
   }
 } else {
   // Normal mode: probe for project at server root
-  loadProject();
+  void loadProject();
   render();
+  ensureFsSync();
 }
 
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
@@ -634,18 +667,37 @@ function renderLeftPanel() {
 function loadProject() {
   return _loadProject();
 }
-function openProject() {
-  return _openProject({
+async function openProject() {
+  const result = await _openProject({
     renderActivityBar: () => renderActivityBar(),
     renderLeftPanel,
   });
+  ensureFsSync();
+  return result;
 }
 async function openRecentProject(root: string) {
   try {
     const platform = getPlatform();
+
+    // Multi-window (desktop): if this window already holds a project, open the chosen one in a new
+    // Window (focusing an existing window if it's already open) rather than replacing this project.
+    if (projectState && platform.openProjectInNewWindow) {
+      await platform.openProjectInNewWindow(root);
+      return;
+    }
+
+    // Multi-window (desktop): bind THIS window's backend to the project before reading from it. If
+    // The project is already open in another window, that window is focused and we bail here.
+    if (platform.setWindowProject) {
+      const res = await platform.setWindowProject(root);
+      if (res.deduped) {
+        return;
+      }
+    }
+
     platform.projectRoot = root;
     const content = await platform.readFile("project.json");
-    const config = JSON.parse(content);
+    const config = JSON.parse(content) as ProjectConfig;
 
     closeAllTabs();
 
@@ -654,7 +706,7 @@ async function openRecentProject(root: string) {
       dirs: new Map(),
       expanded: new Set(),
       isSiteProject: true,
-      name: config.name || root.split("/").pop(),
+      name: config.name || root.split("/").pop()!,
       projectConfig: config,
       projectRoot: root,
       searchQuery: "",
@@ -688,6 +740,7 @@ async function openRecentProject(root: string) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
+    ensureFsSync();
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }

package/src/tabs/patch-ops.ts

@@ -0,0 +1,143 @@
+/**
+ * Patch ops — typed descriptors of document mutations, recorded by the mutators in transact.ts
+ * during a transaction. The canvas patcher consumes them to update the live canvas DOM surgically
+ * instead of re-rendering everything. Ops carry paths, not values: consumers read the post-mutation
+ * document as the single source of truth.
+ */
+
+import type { JxPath } from "../state";
+import type { Tab } from "./tab.js";
+
+export type JxPatchOp =
+  /** The node's style changed (any depth: base prop, @media block, nested selector). */
+  | { op: "set-style"; path: JxPath }
+  /** The node's textContent changed. */
+  | { op: "set-text"; path: JxPath }
+  /** A non-style, non-text node property changed (key = property name). */
+  | { op: "set-prop"; path: JxPath; key: string; isEvent?: boolean }
+  /** The node's attributes[attr] changed. */
+  | { op: "set-attr"; path: JxPath; attr: string }
+  /** A node was inserted at parentPath.children[index]. */
+  | { op: "insert"; parentPath: JxPath; index: number }
+  /** The node at path was removed. */
+  | { op: "remove"; path: JxPath }
+  /** The node moved between/within children arrays (indices are post-mutation document truth). */
+  | { op: "move"; fromPath: JxPath; toParentPath: JxPath; toIndex: number }
+  /** The node at path was structurally replaced (wrap, tagName change, $props edit). */
+  | { op: "replace"; path: JxPath }
+  /** A document-level key changed (state/$media/$head/$elements/imports/$layout) — escalates. */
+  | { op: "doc-meta"; key: string };
+
+/**
+ * Value-carrying document mutation, replayable in either direction. Mutators record a
+ * forward/inverse pair per change; history applies them for surgical undo/redo and for
+ * materializing states from checkpoints — without whole-document snapshots per edit.
+ */
+export type JxDocOp =
+  /** Set (or delete, when value is undefined) a key on the node at path. */
+  | { op: "set-key"; path: JxPath; key: string; value?: unknown }
+  /** Insert a node at parentPath.children[index]. */
+  | { op: "insert-child"; parentPath: JxPath; index: number; node: unknown }
+  /** Remove parentPath.children[index]. */
+  | { op: "remove-child"; parentPath: JxPath; index: number }
+  /** Replace parentPath.children[index] with node. */
+  | { op: "set-child"; parentPath: JxPath; index: number; node: unknown }
+  /** Raw two-splice move: remove fromParent.children[fromIndex], insert at toParent[toIndex]. */
+  | {
+      op: "move-child";
+      fromParentPath: JxPath;
+      fromIndex: number;
+      toParentPath: JxPath;
+      toIndex: number;
+    };
+
+export interface JxDocOpPair {
+  forward: JxDocOp;
+  inverse: JxDocOp;
+}
+
+/** Everything recorded during one transaction. */
+export interface TransactionRecord {
+  /** Canvas patch ops (path-only) for surgical DOM updates. */
+  ops: JxPatchOp[];
+  /** Replayable forward/inverse document ops for patch-based history. */
+  docOps: JxDocOpPair[];
+  /**
+   * False when some mutation in the transaction could not produce a guaranteed-correct inverse
+   * (e.g. a move whose parents' paths interact) — history falls back to a checkpoint snapshot.
+   */
+  invertible: boolean;
+}
+
+/**
+ * The canvas-side consumer of patch batches. Registered by the canvas patcher at studio init;
+ * absent in headless tests, where every transaction falls back to the full-render path.
+ */
+export interface PatchConsumer {
+  /** Decide whether this batch can be applied surgically in the current canvas state. */
+  classify: (tab: Tab, ops: JxPatchOp[]) => { patchable: boolean; reason: string };
+  /** Mark a document root reference as surgically consumed (checked by the canvas doc-effect). */
+  markConsumed: (docRef: object) => void;
+  /** Apply the batch to all ready canvas panels. Throws on any failure (caller escalates). */
+  apply: (tab: Tab, ops: JxPatchOp[]) => void;
+  /** Schedule a full canvas render as the fallback path, recording the reason. */
+  escalate: (reason: string) => void;
+}
+
+let _consumer: PatchConsumer | null = null;
+
+export function setPatchConsumer(consumer: PatchConsumer | null) {
+  _consumer = consumer;
+}
+
+export function getPatchConsumer(): PatchConsumer | null {
+  return _consumer;
+}
+
+// ─── Recording ───────────────────────────────────────────────────────────────
+
+let _recording: JxPatchOp[] | null = null;
+let _docOps: JxDocOpPair[] | null = null;
+let _invertible = true;
+
+/** Begin recording patch ops for a transaction. */
+export function beginRecording() {
+  _recording = [];
+  _docOps = [];
+  _invertible = true;
+}
+
+/** Record a patch op describing an in-place mutation. No-op outside a transaction. */
+export function recordPatch(op: JxPatchOp) {
+  if (_recording) {
+    _recording.push(op);
+  }
+}
+
+/** Record a replayable forward/inverse document-op pair. No-op outside a transaction. */
+export function recordDocOp(pair: JxDocOpPair) {
+  if (_docOps) {
+    _docOps.push(pair);
+  }
+}
+
+/** Mark the current transaction as non-invertible — history stores a checkpoint instead. */
+export function markNonInvertible() {
+  _invertible = false;
+}
+
+/**
+ * End recording and return everything recorded. An empty ops array means the mutation ran without
+ * instrumentation (unknown change shape) — callers must treat that as not patchable.
+ */
+export function endRecording(): TransactionRecord {
+  const record: TransactionRecord = {
+    docOps: _docOps ?? [],
+    invertible: _invertible,
+    ops: _recording ?? [],
+  };
+  _recording = null;
+  _docOps = null;
+  _invertible = true;
+  return record;
+}

package/src/tabs/tab.ts

@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 import { effectScope, reactive } from "../reactivity";
 import { formatByName, formatForPath } from "../format/format-host";
+import { normalizeArrayChildren } from "../state";
 import type {
   DocumentStackEntry,
   FunctionEditDef,
@@ -10,6 +11,7 @@ import type {
   InlineEditDef,
 } from "../types";
 import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { JxDocOp } from "./patch-ops";
 
 export interface TabUi {
   rightTab: string;
@@ -39,8 +41,16 @@ export interface TabUi {
 }
 
 interface HistorySnapshot {
-  document: Record<string, unknown>;
+  /** Full document at this state (checkpoint), or null when the ops describe the transition. */
+  document: Record<string, unknown> | null;
+  /** Selection after this state's transaction. */
   selection: (string | number)[] | null;
+  /** Selection before this state's transaction (restored on surgical undo). */
+  selectionBefore?: (string | number)[] | null;
+  /** Replayable ops transforming the previous state into this one. */
+  forwardOps?: JxDocOp[] | null;
+  /** Replayable ops transforming this state back into the previous one. */
+  inverseOps?: JxDocOp[] | null;
 }
 
 export interface Tab {
@@ -145,6 +155,10 @@ export function createTab({
 }) {
   const scope = effectScope();
 
+  // Normalize legacy whole-children repeaters to the canonical array-member form before the doc
+  // (and its first history checkpoint) are stored.
+  normalizeArrayChildren(document);
+
   const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
 
   const tab = scope.run(() => ({