@jxsuite/studio 0.28.5 → 0.30.1

package/src/files/file-ops.ts

@@ -10,6 +10,7 @@
 import { locateDocument } from "../services/code-services";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { statusMessage } from "../panels/statusbar";
+import { validateComponentSlots } from "../services/cem-export";
 import { getPlatform } from "../platform";
 import { activeTab, openTab } from "../workspace/workspace";
 import { isEditing, stopEditing } from "../editor/inline-edit";
@@ -94,7 +95,7 @@ export async function openFile() {
           sourceFormat: format.name,
         });
       } else if (name.endsWith(".json")) {
-        const document = JSON.parse(text);
+        const document = JSON.parse(text) as Record<string, unknown>;
         openTab({ document, documentPath, fileHandle: handle, id: name });
       } else {
         throw noFormatError(name);
@@ -108,8 +109,8 @@ export async function openFile() {
           showOpenFilePicker: (options?: unknown) => Promise<FileSystemFileHandle[]>;
         }
       ).showOpenFilePicker({ types: pickerTypes });
-      const file = await handle.getFile();
-      await handleSource(handle.name, await file.text(), handle);
+      const file = await handle!.getFile();
+      await handleSource(handle!.name, await file.text(), handle!);
     } else {
       // Fallback: file input
       const input = document.createElement("input");
@@ -131,6 +132,26 @@ export async function openFile() {
   }
 }
 
+/**
+ * Report a slot-validation warning for component documents (root tagName with a hyphen). The save
+ * still proceeds — the warning replaces the plain success message.
+ *
+ * @param {Tab} tab
+ * @param {string} savedMsg
+ */
+function savedMessage(tab: Tab, savedMsg: string) {
+  const doc = tab.doc.document;
+  const warning =
+    typeof doc.tagName === "string" && doc.tagName.includes("-")
+      ? validateComponentSlots(doc)
+      : null;
+  if (warning) {
+    statusMessage(`${savedMsg} — Warning: ${warning}`, 6000);
+  } else {
+    statusMessage(savedMsg);
+  }
+}
+
 /** Save the current document back to its source location. */
 export async function saveFile() {
   if (isEditing()) {
@@ -147,7 +168,7 @@ export async function saveFile() {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, output);
       tab.doc.dirty = false;
-      statusMessage("Saved");
+      savedMessage(tab, "Saved");
     } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
       const writable =
         await /**
@@ -161,7 +182,7 @@ export async function saveFile() {
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
-      statusMessage("Saved");
+      savedMessage(tab, "Saved");
     } else {
       statusMessage("No save target — use Export");
     }
@@ -209,7 +230,7 @@ export async function exportFile() {
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
-      statusMessage(`Exported as ${handle.name}`);
+      savedMessage(tab, `Exported as ${handle.name}`);
     } else {
       // Fallback: download
       const blob = new Blob([output], { type: mimeType });
@@ -220,7 +241,7 @@ export async function exportFile() {
       a.click();
       URL.revokeObjectURL(url);
       tab.doc.dirty = false;
-      statusMessage("Downloaded");
+      savedMessage(tab, "Downloaded");
     }
   } catch (error) {
     if (!(error instanceof Error && error.name === "AbortError")) {

package/src/files/files.ts

@@ -16,6 +16,7 @@ import { createState, projectState, requireProjectState, setProjectState } from
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 import { loadComponentRegistry } from "./components";
+import { markLocalMutation } from "./fs-events";
 import {
   draggable,
   dropTargetForElements,
@@ -41,8 +42,10 @@ import {
 import { view } from "../view";
 import { addRecentProject, trackRecentFile } from "../recent-projects";
 import type { TemplateResult } from "lit-html";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 import type { StudioState } from "../state.js";
 import type { Tab } from "../tabs/tab.js";
+import type { RenameResult } from "../types";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
@@ -339,7 +342,7 @@ function renderTreeLevelTemplate(
 ): TemplateResult | TemplateResult[] {
   const entries = requireProjectState().dirs.get(dirPath);
   if (!entries) {
-    loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
+    void loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
     return html`<div
       class="file-tree-item"
       style="padding-left:${8 + depth * 16}px;color:var(--fg-dim);font-style:italic"
@@ -427,13 +430,13 @@ export function setupTreeKeyboard(tree: HTMLElement) {
     switch (e.key) {
       case "ArrowDown": {
         if (idx < items.length - 1) {
-          items[idx + 1].focus();
+          items[idx + 1]!.focus();
         }
         break;
       }
       case "ArrowUp": {
         if (idx > 0) {
-          items[idx - 1].focus();
+          items[idx - 1]!.focus();
         }
         break;
       }
@@ -442,7 +445,7 @@ export function setupTreeKeyboard(tree: HTMLElement) {
           const path = focused.dataset.path as string;
           if (!requireProjectState().expanded.has(path)) {
             requireProjectState().expanded.add(path);
-            loadDirectory(path).then(() => {
+            void loadDirectory(path).then(() => {
               const panel = tree.closest(".panel-body");
               if (panel) {
                 (panel.querySelector(".file-tree-item:focus") as HTMLElement | null)?.click();
@@ -619,7 +622,7 @@ export function registerFileTreeDnD({ renderLeftPanel }: { renderLeftPanel: () =
           return;
         }
 
-        moveFileEntry(srcPath, newPath!, renderLeftPanel);
+        void moveFileEntry(srcPath, newPath!, renderLeftPanel);
       },
     });
     _fileTreeDndCleanups.push(monitorCleanup);
@@ -635,8 +638,9 @@ export function registerFileTreeDnD({ renderLeftPanel }: { renderLeftPanel: () =
  */
 async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel: () => void) {
   const platform = getPlatform();
+  markLocalMutation(oldPath, newPath);
   try {
-    await platform.renameFile(oldPath, newPath);
+    const report = await platform.renameFile(oldPath, newPath);
 
     // Update open tabs referencing the moved path
     for (const [id] of workspace.tabs.entries()) {
@@ -661,6 +665,7 @@ async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel:
       requireProjectState().expanded.add(newParent);
     }
 
+    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
     statusMessage(`Moved to ${newPath}`);
   } catch (error) {
@@ -707,16 +712,18 @@ function showFileContextMenu(
       label: "New File\u2026",
     });
   }
-  items.push({ label: "\u2014" });
-  items.push({
-    action: () => renameFile(entry, ctx.renderLeftPanel),
-    label: "Rename\u2026",
-  });
-  items.push({
-    action: () => deleteFile(entry, ctx.renderLeftPanel),
-    danger: true,
-    label: "Delete",
-  });
+  items.push(
+    { label: "\u2014" },
+    {
+      action: () => renameFile(entry, ctx.renderLeftPanel),
+      label: "Rename\u2026",
+    },
+    {
+      action: () => deleteFile(entry, ctx.renderLeftPanel),
+      danger: true,
+      label: "Delete",
+    },
+  );
 
   let x = e.clientX,
     y = e.clientY;
@@ -751,7 +758,7 @@ function showFileContextMenu(
                 style=${item.danger ? "color: var(--danger)" : ""}
                 @click=${() => {
                   dismissFileContextMenu();
-                  item.action?.();
+                  void item.action?.();
                 }}
                 >${item.label}</sp-menu-item
               >`,
@@ -776,6 +783,7 @@ async function createNewFile(dirPath: string, renderLeftPanel: () => void) {
     return;
   }
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
+  markLocalMutation(path);
   await loadFormats();
   const format = formatForPath(name);
   const content =
@@ -846,6 +854,28 @@ function showRenameFileDialog(currentName: string): Promise<string | null> {
   });
 }
 
+/** Build the status-bar message for a rename, summarising any reference/tag rewrites. */
+function renameStatus(newName: string, report: RenameResult): string {
+  const refs = report.references;
+  const tagNote = report.tag ? `; tag → <${report.tag.to}> (${report.tag.refsUpdated})` : "";
+  if (refs && refs.refsUpdated > 0) {
+    return `Renamed to ${newName}; updated ${refs.refsUpdated} reference(s) in ${refs.filesChanged} file(s)${tagNote}`;
+  }
+  if (tagNote) {
+    return `Renamed to ${newName}${tagNote}`;
+  }
+  return `Renamed to ${newName}`;
+}
+
+/** Reload any open tabs whose references the refactor rewrote (so the editor shows new paths). */
+function reloadRewrittenTabs(report: RenameResult, skipPath: string): void {
+  for (const f of report.references?.files ?? []) {
+    if (f.path !== skipPath && workspace.tabs.has(f.path)) {
+      void reloadFileInTab(f.path);
+    }
+  }
+}
+
 async function renameFile(
   entry: { name: string; path: string; type: string },
   renderLeftPanel: () => void,
@@ -859,9 +889,10 @@ async function renameFile(
     ? entryPath.slice(0, entryPath.lastIndexOf("/"))
     : ".";
   const newPath = parentDirPath === "." ? newName : `${parentDirPath}/${newName}`;
+  markLocalMutation(entry.path, newPath);
   try {
     const platform = getPlatform();
-    await platform.renameFile(entry.path, newPath);
+    const report = await platform.renameFile(entry.path, newPath);
     await loadDirectory(parentDirPath);
     if (requireProjectState().selectedPath === entry.path) {
       requireProjectState().selectedPath = newPath;
@@ -869,8 +900,9 @@ async function renameFile(
     if (workspace.tabs.has(entry.path)) {
       renameTab(entry.path, newPath, newPath);
     }
+    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
-    statusMessage(`Renamed to ${newName}`);
+    statusMessage(renameStatus(newName, report));
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -889,6 +921,7 @@ async function deleteFile(
   }
   try {
     const platform = getPlatform();
+    markLocalMutation(entry.path);
     await platform.deleteFile(entry.path);
     const delPath = entry.path.replaceAll("\\", "/");
     const parentDirPath = delPath.includes("/") ? delPath.slice(0, delPath.lastIndexOf("/")) : ".";
@@ -953,12 +986,12 @@ export async function openFileFromTree(
     }
 
     if (formatForPath(path)) {
-      await ctx.loadMarkdown(content, null);
+      ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
       ctx.S.dirty = false;
       ctx.commit(ctx.S);
     } else if (path.endsWith(".json")) {
-      const doc = JSON.parse(content);
+      const doc = JSON.parse(content) as JxMutableNode;
       const newS = createState(doc);
       newS.documentPath = path;
       newS.dirty = false;
@@ -999,14 +1032,15 @@ export async function openFileInTab(path: string) {
     }
 
     await loadFormats();
-    let document, frontmatter;
+    let document: Record<string, unknown>;
+    let frontmatter: Record<string, unknown> | undefined;
     const format = formatForPath(path);
     if (format) {
       const result = await parseSourceForPath(path, content);
       ({ document } = result);
       ({ frontmatter } = result);
     } else if (path.endsWith(".json")) {
-      document = JSON.parse(content);
+      document = JSON.parse(content) as Record<string, unknown>;
     } else {
       throw noFormatError(path);
     }
@@ -1041,6 +1075,16 @@ export async function openFileInTab(path: string) {
  *
  * @param {string} path
  */
+/** Reload an open tab from disk when an external change arrives — but only if it is not dirty. */
+export function reloadCleanTab(path: string): void {
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path && !tab.doc.dirty) {
+      void reloadFileInTab(path);
+      return;
+    }
+  }
+}
+
 export async function reloadFileInTab(path: string) {
   for (const [, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {
@@ -1056,7 +1100,7 @@ export async function reloadFileInTab(path: string) {
           tab.doc.document = document;
           tab.doc.content.frontmatter = frontmatter;
         } else if (path.endsWith(".json")) {
-          tab.doc.document = JSON.parse(content);
+          tab.doc.document = JSON.parse(content) as JxMutableNode;
         }
         tab.doc.dirty = false;
       } catch {}

package/src/files/fs-events.ts

@@ -0,0 +1,162 @@
+/// <reference lib="dom" />
+/**
+ * Fs-events.ts — reconcile backend filesystem events into the cached sidebar tree.
+ *
+ * `applyFsEvents` is a pure, in-place reducer over `projectState.dirs`/`expanded` (unit-testable
+ * without a DOM). `startFsSync` is the only impure part: it feature-detects the platform's
+ * `subscribeFileEvents`, debounces bursts, drops the echoes of the user's own local mutations, and
+ * triggers a single re-render through the existing left-panel render path (no imperative DOM).
+ */
+
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import type { DirEntry, FsEvent } from "../types";
+
+const RECENT_MS = 1500;
+const recentLocal = new Map<string, number>();
+
+const norm = (p: string) => p.replaceAll("\\", "/");
+
+/** Mark paths the user just mutated locally so the watcher's echo of them is ignored briefly. */
+export function markLocalMutation(...paths: string[]): void {
+  const expiry = Date.now() + RECENT_MS;
+  for (const p of paths) {
+    if (p) {
+      recentLocal.set(norm(p), expiry);
+    }
+  }
+}
+
+/** True while a path is within the recent-local-mutation window (self-cleans on expiry). */
+export function isRecentLocal(path: string): boolean {
+  const key = norm(path);
+  const expiry = recentLocal.get(key);
+  if (expiry === undefined) {
+    return false;
+  }
+  if (Date.now() > expiry) {
+    recentLocal.delete(key);
+    return false;
+  }
+  return true;
+}
+
+function parentDir(path: string): string {
+  const i = path.lastIndexOf("/");
+  return i === -1 ? "." : path.slice(0, i);
+}
+
+function baseName(path: string): string {
+  const i = path.lastIndexOf("/");
+  return i === -1 ? path : path.slice(i + 1);
+}
+
+/**
+ * Apply backend FS events to the cached directory tree in place, returning the set of directories
+ * whose contents changed. Idempotent — re-adding an existing entry or removing an absent one is a
+ * no-op, which absorbs watcher echoes. `change` events touch no tree state (name/type are stable).
+ */
+export function applyFsEvents(
+  dirs: Map<string, DirEntry[]>,
+  expanded: Set<string>,
+  events: FsEvent[],
+): Set<string> {
+  const changedDirs = new Set<string>();
+  for (const ev of events) {
+    const parent = parentDir(ev.path);
+    if (ev.type === "add" || ev.type === "addDir") {
+      const entries = dirs.get(parent);
+      if (entries && !entries.some((e) => e.path === ev.path)) {
+        entries.push({
+          name: baseName(ev.path),
+          path: ev.path,
+          type: ev.isDir ? "directory" : "file",
+        });
+        changedDirs.add(parent);
+      }
+      if (ev.type === "addDir" && !dirs.has(ev.path)) {
+        dirs.set(ev.path, []);
+      }
+    } else if (ev.type === "unlink" || ev.type === "unlinkDir") {
+      const entries = dirs.get(parent);
+      if (entries) {
+        const idx = entries.findIndex((e) => e.path === ev.path);
+        if (idx !== -1) {
+          entries.splice(idx, 1);
+          changedDirs.add(parent);
+        }
+      }
+      if (ev.type === "unlinkDir") {
+        dirs.delete(ev.path);
+        const nestedDirs: string[] = [];
+        for (const key of dirs.keys()) {
+          if (key.startsWith(`${ev.path}/`)) {
+            nestedDirs.push(key);
+          }
+        }
+        for (const key of nestedDirs) {
+          dirs.delete(key);
+        }
+        const staleExpanded: string[] = [];
+        for (const key of expanded) {
+          if (key === ev.path || key.startsWith(`${ev.path}/`)) {
+            staleExpanded.push(key);
+          }
+        }
+        for (const key of staleExpanded) {
+          expanded.delete(key);
+        }
+      }
+    }
+  }
+  return changedDirs;
+}
+
+export interface FsSyncContext {
+  renderLeftPanel: () => void;
+  /** Optional hook for an external content change to an open file (e.g. reload a clean tab). */
+  onContentChange?: (path: string) => void;
+}
+
+/**
+ * Subscribe the sidebar to backend filesystem events. Returns an unsubscribe function; a no-op when
+ * the platform has no watcher (desktop without one, or tests). Bursts are debounced into one
+ * render.
+ */
+export function startFsSync(ctx: FsSyncContext): () => void {
+  const platform = getPlatform();
+  if (!platform.subscribeFileEvents) {
+    return () => {};
+  }
+  let pending: FsEvent[] = [];
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const flush = () => {
+    timer = null;
+    const state = projectState;
+    const batch = pending.filter((e) => !isRecentLocal(e.path));
+    pending = [];
+    if (!state || batch.length === 0) {
+      return;
+    }
+    const changedDirs = applyFsEvents(state.dirs, state.expanded, batch);
+    if (ctx.onContentChange) {
+      for (const ev of batch) {
+        if (ev.type === "change") {
+          ctx.onContentChange(ev.path);
+        }
+      }
+    }
+    if (changedDirs.size > 0) {
+      ctx.renderLeftPanel();
+    }
+  };
+
+  return platform.subscribeFileEvents((events) => {
+    pending.push(...events);
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(flush, 50);
+  });
+}

package/src/github/github-auth.ts

@@ -12,6 +12,18 @@ import { showDialog } from "../ui/layers";
 const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
 const STORAGE_KEY = "jx_github_token";
 
+interface DeviceCodeResponse {
+  device_code: string;
+  user_code: string;
+  verification_uri: string;
+  interval?: number;
+}
+
+interface TokenResponse {
+  access_token?: string;
+  error?: string;
+}
+
 export function getGithubToken() {
   return localStorage.getItem(STORAGE_KEY);
 }
@@ -44,7 +56,7 @@ export async function authenticateGithub() {
   if (!codeRes.ok) {
     throw new Error("Failed to initiate GitHub device flow");
   }
-  const codeData = await codeRes.json();
+  const codeData = (await codeRes.json()) as DeviceCodeResponse;
 
   const { device_code, user_code, verification_uri, interval = 5 } = codeData;
 
@@ -69,7 +81,7 @@ export async function authenticateGithub() {
           },
           method: "POST",
         });
-        const tokenData = await tokenRes.json();
+        const tokenData = (await tokenRes.json()) as TokenResponse;
 
         if (tokenData.access_token) {
           localStorage.setItem(STORAGE_KEY, tokenData.access_token);

package/src/github/github-publish.ts

@@ -9,6 +9,16 @@ import { authenticateGithub } from "./github-auth";
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 
+interface GithubErrorResponse {
+  errors?: { message?: string }[];
+  message?: string;
+}
+
+interface GithubRepoResponse {
+  clone_url: string;
+  html_url: string;
+}
+
 /**
  * Full "Publish to GitHub" flow: 1. Authenticate (or reuse stored token) 2. Prompt for repo name /
  * visibility 3. Create the repo via GitHub API 4. Add remote + push
@@ -105,13 +115,13 @@ export async function publishToGithub({ projectName }: { projectName: string })
   });
 
   if (!createRes.ok) {
-    const err = await createRes.json();
+    const err = (await createRes.json()) as GithubErrorResponse;
     const msg = err.errors?.[0]?.message || err.message || "Failed to create repository";
     statusMessage(`Error: ${msg}`);
     return false;
   }
 
-  const repo = await createRes.json();
+  const repo = (await createRes.json()) as GithubRepoResponse;
   const platform = getPlatform();
 
   statusMessage("Setting remote and pushing…");

package/src/panels/activity-bar.ts

@@ -21,7 +21,7 @@ export function mount() {
       if (tab) {
         const gs = tab.session.ui.gitStatus;
         if (!gs && !tab.session.ui.gitLoading) {
-          refreshGitStatus();
+          void refreshGitStatus();
         }
       }
       renderActivityBar();