@jxsuite/studio 0.29.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.29.0",
+  "version": "0.31.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -23,19 +23,20 @@
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
+    "build": "bun run scripts/build.ts",
     "build:metafile": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked --metafile=metafile.json",
     "gen:webdata": "bun run scripts/gen-webdata.js",
-    "test": "bun test --isolate",
+    "lint:styles": "bun run scripts/check-styles.ts",
+    "test": "bun run lint:styles && bun test --isolate",
     "test:coverage": "bun test --isolate --coverage",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
-    "@jxsuite/parser": "^0.29.0",
-    "@jxsuite/runtime": "^0.29.0",
-    "@jxsuite/schema": "^0.29.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
+    "@jxsuite/parser": "^0.31.0",
+    "@jxsuite/runtime": "^0.31.0",
+    "@jxsuite/schema": "^0.31.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -61,6 +62,7 @@
     "@spectrum-web-components/picker": "^1.12.1",
     "@spectrum-web-components/picker-button": "^1.12.1",
     "@spectrum-web-components/popover": "^1.12.1",
+    "@spectrum-web-components/progress-circle": "^1.12.1",
     "@spectrum-web-components/search": "^1.12.1",
     "@spectrum-web-components/swatch": "^1.12.1",
     "@spectrum-web-components/switch": "^1.12.1",
@@ -79,11 +81,11 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.10.2",
+    "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.5.8",
+    "@webref/css": "^8.6.0",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.0"
+    "@webref/idl": "^3.81.1"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/about/about-modal.ts

@@ -0,0 +1,156 @@
+/// <reference lib="dom" />
+/**
+ * About modal — shows app version, build metadata, external links, the resolved `@jxsuite/*`
+ * package versions, and (on desktop) the release channel / update status.
+ *
+ * Build metadata comes from src/version.ts (injected at bundle time). Package versions are fetched
+ * lazily via the platform; desktop update info is shown only when the active platform implements
+ * the optional `getAppInfo` method.
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { openModal } from "../ui/layers";
+import { getPlatform } from "../platform";
+import { APP_NAME, BUILD_DATE, GIT_COMMIT, LINKS, VERSION } from "../version";
+import type { AppInfo, PackageInfo } from "../types";
+
+let _handle: ReturnType<typeof openModal> | null = null;
+
+let _packages: PackageInfo[] | null = null;
+let _appInfo: AppInfo | null = null;
+
+export function openAboutModal() {
+  if (_handle) {
+    return;
+  }
+  _packages = null;
+  _appInfo = null;
+  renderModal();
+  void loadDetails();
+}
+
+export function closeAboutModal() {
+  if (!_handle) {
+    return;
+  }
+  _handle.close();
+  _handle = null;
+  _packages = null;
+  _appInfo = null;
+}
+
+async function loadDetails() {
+  const platform = getPlatform();
+  try {
+    _packages = await platform.listPackages();
+  } catch {
+    _packages = [];
+  }
+  if (platform.getAppInfo) {
+    try {
+      _appInfo = await platform.getAppInfo();
+    } catch {
+      _appInfo = null;
+    }
+  }
+  if (_handle) {
+    renderModal();
+  }
+}
+
+function formatBuildDate(iso: string) {
+  if (!iso) {
+    return "—";
+  }
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toLocaleString();
+}
+
+function metaRows() {
+  const rows: [string, string][] = [
+    ["Version", VERSION],
+    ["Build date", formatBuildDate(BUILD_DATE)],
+    ["Commit", GIT_COMMIT],
+  ];
+  if (_appInfo) {
+    rows.push(["Channel", _appInfo.channel]);
+    if (_appInfo.updateStatus) {
+      rows.push(["Updates", _appInfo.updateStatus]);
+    }
+  }
+  return rows;
+}
+
+function renderPackages(): TemplateResult {
+  if (_packages === null) {
+    return html`<p class="about-muted">Loading packages…</p>`;
+  }
+  if (_packages.length === 0) {
+    return html`<p class="about-muted">No packages reported.</p>`;
+  }
+  return html`
+    <ul class="about-packages">
+      ${_packages.map(
+        (p) => html`
+          <li class="about-package-row">
+            <span class="about-package-name">${p.name}</span>
+            <span class="about-package-version">${p.version}</span>
+          </li>
+        `,
+      )}
+    </ul>
+  `;
+}
+
+function renderModal() {
+  const tpl = html`
+    <sp-underlay open @close=${closeAboutModal}></sp-underlay>
+    <div
+      class="about-modal"
+      role="dialog"
+      aria-label="About ${APP_NAME}"
+      @keydown=${(e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          closeAboutModal();
+        }
+      }}
+    >
+      <div class="settings-modal-header">
+        <h2 class="settings-modal-title">About ${APP_NAME}</h2>
+        <sp-action-button quiet size="s" @click=${closeAboutModal} title="Close">
+          <sp-icon-close slot="icon"></sp-icon-close>
+        </sp-action-button>
+      </div>
+      <div class="about-modal-body">
+        <dl class="about-meta">
+          ${metaRows().map(
+            ([label, value]) => html`
+              <div class="about-meta-row">
+                <dt class="about-meta-label">${label}</dt>
+                <dd class="about-meta-value">${value}</dd>
+              </div>
+            `,
+          )}
+        </dl>
+
+        <div class="about-links">
+          <a href=${LINKS.github} target="_blank" rel="noreferrer noopener">GitHub</a>
+          <a href=${LINKS.docs} target="_blank" rel="noreferrer noopener">Documentation</a>
+          <a href=${LINKS.license} target="_blank" rel="noreferrer noopener">License</a>
+        </div>
+
+        <section class="about-section">
+          <h3 class="about-section-title">Packages</h3>
+          ${renderPackages()}
+        </section>
+      </div>
+    </div>
+  `;
+
+  if (_handle) {
+    _handle.update(tpl);
+  } else {
+    _handle = openModal(tpl);
+  }
+}

package/src/editor/context-menu.ts

@@ -70,10 +70,12 @@ function nodeToHtml(node: JxNode | string): string {
 async function writeToClipboard(json: Record<string, unknown>) {
   workspace.clipboard = json;
   try {
+    const jxBlob = new Blob([JSON.stringify(json)], { type: JX_MIME });
+    const htmlBlob = new Blob([nodeToHtml(json)], { type: "text/html" });
     await navigator.clipboard.write([
       new ClipboardItem({
-        [JX_MIME]: new Blob([JSON.stringify(json)], { type: JX_MIME }),
-        "text/html": new Blob([nodeToHtml(json)], { type: "text/html" }),
+        [JX_MIME]: jxBlob,
+        "text/html": htmlBlob,
       }),
     ]);
   } catch {

package/src/files/files.ts

@@ -16,20 +16,16 @@ import { createState, projectState, requireProjectState, setProjectState } from
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 import { loadComponentRegistry } from "./components";
+import { ensureDependenciesInstalled } from "../packages/ensure-deps";
+import { maybePromptJxsuiteUpdate } from "../packages/jxsuite-update";
+import { markLocalMutation } from "./fs-events";
 import {
   draggable,
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import {
-  activateTab,
-  activeTab,
-  openTab,
-  renameTab,
-  replaceAllTabs,
-  workspace,
-} from "../workspace/workspace";
+import { activateTab, openTab, renameTab, replaceAllTabs, workspace } from "../workspace/workspace";
 import { parseSourceForPath, serializeDocument } from "./file-ops";
 import {
   documentExtensions,
@@ -44,6 +40,7 @@ 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 ────────────────────────────────────────────────────────────
 
@@ -98,9 +95,11 @@ export async function loadProject() {
     });
 
     if (info.isSiteProject) {
+      await ensureDependenciesInstalled();
       await loadDirectory(".");
       await loadComponentRegistry();
       await openHomePage();
+      void maybePromptJxsuiteUpdate(meta.root);
     }
     // If not a site project (monorepo) — show welcome prompt, don't load tree
   } catch {
@@ -154,6 +153,7 @@ export async function openProject({
       selectedPath: null,
     });
 
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
 
@@ -185,6 +185,7 @@ export async function openProject({
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
+    void maybePromptJxsuiteUpdate(requireProjectState().projectRoot);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -636,8 +637,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()) {
@@ -662,6 +664,7 @@ async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel:
       requireProjectState().expanded.add(newParent);
     }
 
+    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
     statusMessage(`Moved to ${newPath}`);
   } catch (error) {
@@ -779,6 +782,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 =
@@ -849,6 +853,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,
@@ -862,9 +888,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;
@@ -872,8 +899,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)}`);
   }
@@ -892,6 +920,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("/")) : ".";
@@ -1026,13 +1055,6 @@ export async function openFileInTab(path: string) {
     requireProjectState().selectedPath = path;
     trackRecentFile({ name: path.split("/").pop() || path, path });
 
-    if (path === "project.json") {
-      const tab = activeTab.value;
-      if (tab) {
-        tab.session.ui.canvasMode = "stylebook";
-      }
-    }
-
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -1045,6 +1067,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) {

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/packages/ensure-deps.ts

@@ -0,0 +1,39 @@
+/// <reference lib="dom" />
+/**
+ * Ensure the active project's dependencies are installed before the editor loads. When the backend
+ * reports node_modules is missing, run `bun install` behind a blocking progress modal so component
+ * and format resolution see the real dependency tree. No-op on platforms without package support.
+ */
+
+import { getPlatform } from "../platform";
+import { showProgressModal } from "../ui/progress-modal";
+
+export async function ensureDependenciesInstalled(): Promise<void> {
+  const platform = getPlatform();
+  if (!platform.dependenciesNeedInstall || !platform.installDependencies) {
+    return;
+  }
+  let needs = false;
+  try {
+    needs = await platform.dependenciesNeedInstall();
+  } catch {
+    return;
+  }
+  if (!needs) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Running bun install…",
+    title: "Installing dependencies",
+  });
+  try {
+    const result = await platform.installDependencies();
+    if (result.ok) {
+      progress.done();
+    } else {
+      progress.fail(result.log ?? "bun install failed");
+    }
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  }
+}