@jxsuite/studio 0.29.0 → 0.31.0

package/src/platforms/devserver.ts

@@ -9,7 +9,7 @@
  */
 
 import type { ProjectConfig } from "@jxsuite/schema/types";
-import type { DirEntry } from "../types";
+import type { DirEntry, FsEvent, RenameResult } from "../types";
 
 /** A directory entry from the server, tolerating extra wire fields. */
 type WireDirEntry = DirEntry & Record<string, unknown>;
@@ -298,7 +298,7 @@ export function createDevServerPlatform() {
      * @param {string} from
      * @param {string} to
      */
-    async renameFile(from: string, to: string) {
+    async renameFile(from: string, to: string): Promise<RenameResult> {
       const res = await fetch("/__studio/file/rename", {
         body: JSON.stringify({ from: serverPath(from), to: serverPath(to) }),
         headers: { "Content-Type": "application/json" },
@@ -307,6 +307,58 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to rename: ${from} → ${to}`);
       }
+      const report = await readJson<RenameResult>(res);
+      // Map server-root-relative report paths back to project-relative for the studio.
+      if (typeof report.from === "string") {
+        report.from = stripRoot(report.from);
+      }
+      if (typeof report.to === "string") {
+        report.to = stripRoot(report.to);
+      }
+      for (const f of report.references?.files ?? []) {
+        f.path = stripRoot(f.path);
+      }
+      for (const e of report.errors ?? []) {
+        e.path = stripRoot(e.path);
+      }
+      return report;
+    },
+
+    /**
+     * Subscribe to filesystem change events over the dev server's SSE stream. Listens for the named
+     * "fs" event (the preview iframe's default `onmessage` ignores it), strips paths to
+     * project-relative, and drops events for sibling projects outside the active root.
+     */
+    subscribeFileEvents(handler: (events: FsEvent[]) => void) {
+      if (typeof EventSource === "undefined") {
+        return () => {};
+      }
+      const es = new EventSource("/__reload");
+      es.addEventListener("fs", (ev: MessageEvent) => {
+        let payload: { events?: FsEvent[] };
+        try {
+          payload = JSON.parse(ev.data as string) as { events?: FsEvent[] };
+        } catch {
+          return;
+        }
+        const events: FsEvent[] = [];
+        for (const e of payload.events ?? []) {
+          const raw = e.path.replaceAll("\\", "/");
+          if (_projectRoot && raw !== _projectRoot && !raw.startsWith(`${_projectRoot}/`)) {
+            continue;
+          }
+          const path = stripRoot(raw);
+          if (path && !path.startsWith("..")) {
+            events.push({ isDir: e.isDir, path, type: e.type });
+          }
+        }
+        if (events.length > 0) {
+          handler(events);
+        }
+      });
+      return () => {
+        es.close();
+      };
     },
 
     /** @param {string} _path */
@@ -369,6 +421,44 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
+    async installDependencies() {
+      const res = await fetch("/__studio/packages/install", { method: "POST" });
+      if (!res.ok) {
+        return { log: await res.text(), ok: false };
+      }
+      return await res.json();
+    },
+
+    async dependenciesNeedInstall() {
+      const res = await fetch("/__studio/packages/needs-install");
+      if (!res.ok) {
+        return false;
+      }
+      const data = (await res.json()) as { needsInstall?: boolean };
+      return Boolean(data.needsInstall);
+    },
+
+    async outdatedPackages() {
+      const res = await fetch("/__studio/packages/outdated");
+      if (!res.ok) {
+        return [];
+      }
+      return await res.json();
+    },
+
+    /** @param {{ name: string; version: string; dev?: boolean }[]} updates */
+    async setPackageVersions(updates: { name: string; version: string; dev?: boolean }[]) {
+      const res = await fetch("/__studio/packages/set-versions", {
+        body: JSON.stringify({ updates }),
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        return { log: await res.text(), ok: false };
+      }
+      return await res.json();
+    },
+
     // ─── Code services (optional) ─────────────────────────────────────────
 
     /**

package/src/settings/dependencies-editor.ts

@@ -0,0 +1,262 @@
+/// <reference lib="dom" />
+/**
+ * Dependencies settings section — an outdated-aware table of the project's npm dependencies. Shows
+ * current vs latest version, with per-row update/remove, an add-package field, "update all", and
+ * reinstall. @jxsuite/* rows target the version this Studio build embeds; other packages target the
+ * newest published version reported by the backend.
+ */
+
+import { html, render as litRender } from "lit-html";
+import { getPlatform } from "../platform";
+import { VERSION } from "../version";
+import { statusMessage } from "../panels/statusbar";
+import { showProgressModal } from "../ui/progress-modal";
+import { isComparable, isUpgrade, stripRange } from "../packages/semver";
+import type { PackageInfo } from "../types";
+
+const JXSUITE_PREFIX = "@jxsuite/";
+
+interface Update {
+  name: string;
+  version: string;
+  dev: boolean;
+}
+
+let _container: HTMLElement | null = null;
+let _packages: PackageInfo[] | null = null;
+let _latest = new Map<string, string>();
+let _busy = false;
+let _addName = "";
+
+/** The version a package can be updated to, or null if it is already current. */
+function latestFor(p: PackageInfo): string | null {
+  if (p.name.startsWith(JXSUITE_PREFIX) && isComparable(VERSION) && isUpgrade(p.version, VERSION)) {
+    return VERSION;
+  }
+  const registry = _latest.get(p.name);
+  return registry && isUpgrade(p.version, registry) ? registry : null;
+}
+
+async function load() {
+  const platform = getPlatform();
+  try {
+    _packages = await platform.listPackages();
+  } catch {
+    _packages = [];
+  }
+  _latest = new Map();
+  if (platform.outdatedPackages) {
+    try {
+      for (const o of await platform.outdatedPackages()) {
+        _latest.set(o.name, o.latest);
+      }
+    } catch {
+      /* Registry lookups are best-effort */
+    }
+  }
+  render();
+}
+
+async function withBusy(fn: () => Promise<void>) {
+  if (_busy) {
+    return;
+  }
+  _busy = true;
+  render();
+  const progress = showProgressModal({ status: "Running bun…", title: "Updating dependencies" });
+  try {
+    await fn();
+    progress.done();
+  } catch (error) {
+    progress.fail(error instanceof Error ? error.message : String(error));
+  } finally {
+    _busy = false;
+    await load();
+  }
+}
+
+async function onAdd() {
+  const name = _addName.trim();
+  if (!name) {
+    return;
+  }
+  await withBusy(async () => {
+    await getPlatform().addPackage(name);
+    _addName = "";
+    statusMessage(`Added ${name}`);
+  });
+}
+
+async function onRemove(p: PackageInfo) {
+  await withBusy(async () => {
+    await getPlatform().removePackage(p.name);
+    statusMessage(`Removed ${p.name}`);
+  });
+}
+
+async function onUpdate(p: PackageInfo, latest: string) {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  await withBusy(async () => {
+    const target = stripRange(latest);
+    const res = await platform.setPackageVersions!([
+      { dev: Boolean(p.dev), name: p.name, version: `^${target}` },
+    ]);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${p.name} to ${target}`);
+  });
+}
+
+async function onUpdateAll() {
+  const platform = getPlatform();
+  if (!platform.setPackageVersions) {
+    return;
+  }
+  const updates = (_packages ?? [])
+    .map((p): Update | null => {
+      const latest = latestFor(p);
+      return latest
+        ? { dev: Boolean(p.dev), name: p.name, version: `^${stripRange(latest)}` }
+        : null;
+    })
+    .filter((u): u is Update => u !== null);
+  if (updates.length === 0) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform.setPackageVersions!(updates);
+    if (!res.ok) {
+      throw new Error(res.log ?? "Update failed");
+    }
+    statusMessage(`Updated ${updates.length} package(s)`);
+  });
+}
+
+async function onReinstall() {
+  const platform = getPlatform();
+  if (!platform.installDependencies) {
+    return;
+  }
+  await withBusy(async () => {
+    const res = await platform.installDependencies!();
+    if (!res.ok) {
+      throw new Error(res.log ?? "Install failed");
+    }
+    statusMessage("Dependencies reinstalled");
+  });
+}
+
+function row(p: PackageInfo) {
+  const latest = latestFor(p);
+  return html`
+    <sp-table-row>
+      <sp-table-cell>
+        ${p.name}${p.dev
+          ? html`<span style="color:var(--fg-dim);font-size:10px"> · dev</span>`
+          : ""}
+      </sp-table-cell>
+      <sp-table-cell>${p.version}</sp-table-cell>
+      <sp-table-cell>${latest ?? "—"}</sp-table-cell>
+      <sp-table-cell>
+        ${latest
+          ? html`<sp-action-button
+              size="s"
+              quiet
+              ?disabled=${_busy}
+              title="Update to ${latest}"
+              @click=${() => onUpdate(p, latest)}
+            >
+              <sp-icon-refresh slot="icon"></sp-icon-refresh>
+            </sp-action-button>`
+          : ""}
+        <sp-action-button
+          size="s"
+          quiet
+          ?disabled=${_busy}
+          title="Remove"
+          @click=${() => onRemove(p)}
+        >
+          <sp-icon-delete slot="icon"></sp-icon-delete>
+        </sp-action-button>
+      </sp-table-cell>
+    </sp-table-row>
+  `;
+}
+
+function render() {
+  if (!_container) {
+    return;
+  }
+  const pkgs = _packages ?? [];
+  const hasUpdates = pkgs.some((p) => latestFor(p) !== null);
+
+  const tpl = html`
+    <div class="settings-section">
+      <h3 class="settings-section-title">Dependencies</h3>
+      <p class="settings-field-desc">Manage this project's npm dependencies.</p>
+
+      <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
+        <sp-textfield
+          size="s"
+          placeholder="package-name"
+          .value=${_addName}
+          ?disabled=${_busy}
+          @input=${(e: Event) => {
+            _addName = (e.target as HTMLInputElement).value;
+          }}
+        ></sp-textfield>
+        <sp-action-button size="s" ?disabled=${_busy} @click=${onAdd}>
+          <sp-icon-add slot="icon"></sp-icon-add>
+          Add
+        </sp-action-button>
+        <span style="flex:1"></span>
+        ${hasUpdates
+          ? html`<sp-action-button size="s" ?disabled=${_busy} @click=${onUpdateAll}>
+              Update all
+            </sp-action-button>`
+          : ""}
+        <sp-action-button
+          size="s"
+          quiet
+          ?disabled=${_busy}
+          title="Reinstall (bun install)"
+          @click=${onReinstall}
+        >
+          <sp-icon-refresh slot="icon"></sp-icon-refresh>
+          Reinstall
+        </sp-action-button>
+      </div>
+
+      ${_packages === null
+        ? html`<p class="about-muted">Loading…</p>`
+        : pkgs.length === 0
+          ? html`<p class="about-muted">No dependencies.</p>`
+          : html`
+              <sp-table size="s">
+                <sp-table-head>
+                  <sp-table-head-cell>Package</sp-table-head-cell>
+                  <sp-table-head-cell>Current</sp-table-head-cell>
+                  <sp-table-head-cell>Latest</sp-table-head-cell>
+                  <sp-table-head-cell></sp-table-head-cell>
+                </sp-table-head>
+                <sp-table-body> ${pkgs.map((p) => row(p))} </sp-table-body>
+              </sp-table>
+            `}
+    </div>
+  `;
+
+  litRender(tpl, _container);
+}
+
+/** @param {HTMLElement} container */
+export function renderDependenciesEditor(container: HTMLElement) {
+  _container = container;
+  _packages = null;
+  _addName = "";
+  render();
+  void load();
+}

package/src/settings/general-settings.ts

@@ -94,16 +94,18 @@ export function renderGeneralSettings(container: HTMLElement) {
             ? html`<img
                 src=${currentFavicon}
                 alt="Current favicon"
-                style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:4px;padding:2px"
+                style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);padding:2px"
               />`
             : html`<div
-                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:11px"
+                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-50, 11px)"
               >
                 —
               </div>`}
           <sp-action-button size="s" @click=${onFaviconUpload}> Upload Favicon </sp-action-button>
           ${currentFavicon
-            ? html`<span style="font-size:11px;color:var(--fg-dim)">${currentFavicon}</span>`
+            ? html`<span style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
+                >${currentFavicon}</span
+              >`
             : nothing}
         </div>
       </div>

package/src/settings/settings-modal.ts

@@ -13,6 +13,7 @@ import { renderContentTypesEditor } from "./content-types-editor";
 import { renderCssVarsEditor } from "./css-vars-editor";
 import { renderHeadEditor } from "./head-editor";
 import { renderGeneralSettings } from "./general-settings";
+import { renderDependenciesEditor } from "./dependencies-editor";
 import { openModal } from "../ui/layers";
 
 let _handle: ReturnType<typeof openModal> | null = null;
@@ -27,6 +28,7 @@ const sections = [
   { icon: "sp-icon-brush", key: "cssVars", label: "CSS Variables" },
   { icon: "sp-icon-data", key: "definitions", label: "Definitions" },
   { icon: "sp-icon-view-grid", key: "contentTypes", label: "Content Types" },
+  { icon: "sp-icon-box", key: "dependencies", label: "Dependencies" },
 ];
 
 export function openSettingsModal() {
@@ -131,6 +133,10 @@ function renderActiveSection() {
       renderContentTypesEditor(_contentEl);
       break;
     }
+    case "dependencies": {
+      renderDependenciesEditor(_contentEl);
+      break;
+    }
     default: {
       break;
     }

package/src/studio.ts

@@ -59,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";
@@ -72,6 +74,8 @@ import { mountResizeEdges } from "./resize-edges";
 import { codeService } from "./services/code-services";
 import { defBadgeLabel, defCategory, renderSignalsTemplate } from "./panels/signals-panel";
 import { loadComponentRegistry } from "./files/components";
+import { ensureDependenciesInstalled } from "./packages/ensure-deps";
+import { maybePromptJxsuiteUpdate } from "./packages/jxsuite-update";
 
 import { html, render as litRender } from "lit-html";
 
@@ -506,6 +510,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");
 
@@ -551,6 +562,7 @@ if (_projectParam) {
             selectedPath: siteCtx.fileRelPath || null,
           });
 
+          await ensureDependenciesInstalled();
           await loadComponentRegistry();
 
           // Load directory tree and populate projectDirs from conventional dirs found
@@ -575,6 +587,7 @@ if (_projectParam) {
             }
           }
           requireProjectState().projectDirs = foundDirs;
+          void maybePromptJxsuiteUpdate(siteCtx.sitePath);
         }
 
         // Read and open the file
@@ -646,6 +659,7 @@ if (_projectParam) {
   // Normal mode: probe for project at server root
   void loadProject();
   render();
+  ensureFsSync();
 }
 
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
@@ -657,11 +671,13 @@ 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 {
@@ -701,6 +717,7 @@ async function openRecentProject(root: string) {
       selectedPath: null,
     });
 
+    await ensureDependenciesInstalled();
     await loadDirectory(".");
     await loadComponentRegistry();
 
@@ -728,6 +745,8 @@ async function openRecentProject(root: string) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
+    ensureFsSync();
+    void maybePromptJxsuiteUpdate(root);
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }

package/src/tabs/tab.ts

@@ -90,12 +90,15 @@ export interface Tab {
   };
 }
 
-/** @returns {TabUi} */
-function createDefaultUi() {
+/**
+ * @param {string} canvasMode — initial canvas mode (the tab's first allowed mode)
+ * @returns {TabUi}
+ */
+function createDefaultUi(canvasMode: string) {
   return {
     activeMedia: null,
     activeSelector: null,
-    canvasMode: "edit",
+    canvasMode,
     editingFunction: null,
     featureToggles: {},
     gitBranches: null,
@@ -160,6 +163,9 @@ export function createTab({
   normalizeArrayChildren(document);
 
   const resolvedModes = capabilities?.modes ?? inferModes(documentPath, sourceFormat);
+  // A tab opens in its first allowed mode — never one the toolbar would disable.
+  // Formats author mode order so the default comes first (edit, stylebook, etc.).
+  const initialCanvasMode = resolvedModes[0] ?? "edit";
 
   const tab = scope.run(() => ({
     capabilities: { modes: resolvedModes },
@@ -190,7 +196,7 @@ export function createTab({
       documentStack: [],
       hover: null,
       selection: null,
-      ui: createDefaultUi(),
+      ui: createDefaultUi(initialCanvasMode),
     }),
   })) as unknown as Tab;
 

package/src/types.ts

@@ -53,6 +53,36 @@ export interface ComponentMeta {
 export interface PackageInfo {
   name: string;
   version: string;
+  /** True when the dependency lives in `devDependencies` rather than `dependencies`. */
+  dev?: boolean;
+}
+
+/** A dependency with a newer version available, as reported by `bun outdated` / the npm registry. */
+export interface OutdatedInfo {
+  name: string;
+  /** The version range pinned in package.json (e.g. "^0.19.0"). */
+  current: string;
+  /** The newest published version. */
+  latest: string;
+  /** The newest version satisfying the current range, if known. */
+  wanted?: string;
+  dev?: boolean;
+}
+
+/** Result of a package mutation that runs `bun install` (install / set-versions). */
+export interface PackageOpResult {
+  ok: boolean;
+  /** Combined stdout/stderr from the bun invocation, surfaced to the user on failure. */
+  log?: string;
+}
+
+/** Desktop app/build info surfaced in the About screen. */
+export interface AppInfo {
+  version: string;
+  channel: string;
+  hash: string;
+  /** Human-readable update status (e.g. "Up to date", "Update available"), if known. */
+  updateStatus?: string;
 }
 
 export interface CodeServiceResult {
@@ -69,6 +99,30 @@ export interface DirEntry {
   modified?: string;
 }
 
+/** A filesystem change pushed from the backend (project-relative, forward-slashed path). */
+export interface FsEvent {
+  type: "add" | "change" | "unlink" | "addDir" | "unlinkDir";
+  path: string;
+  isDir: boolean;
+}
+
+/** Result of a rename, including the references rewritten across the project (refactor report). */
+export interface RenameResult {
+  ok: boolean;
+  from: string;
+  to: string;
+  isDir?: boolean;
+  references?: {
+    filesChanged: number;
+    refsUpdated: number;
+    files: { path: string; count: number }[];
+  };
+  errors?: { path: string; error: string }[];
+  tag?: { from: string; to: string; filesChanged: number; refsUpdated: number };
+  tagSkipped?: string;
+  error?: string;
+}
+
 export interface StudioPlatform {
   id: string;
   projectRoot: string;
@@ -90,12 +144,39 @@ export interface StudioPlatform {
   writeFile: (path: string, content: string) => Promise<void>;
   uploadFile: (path: string, data: string | File | Blob | ArrayBuffer) => Promise<unknown>;
   deleteFile: (path: string) => Promise<void>;
-  renameFile: (from: string, to: string) => Promise<void>;
+  renameFile: (from: string, to: string) => Promise<RenameResult>;
   createDirectory: (path: string) => Promise<void>;
+  /**
+   * Subscribe to backend filesystem change events for the active project. Returns an unsubscribe
+   * function. Optional: platforms without a watcher omit it and the sidebar stays manual-refresh.
+   */
+  subscribeFileEvents?: (handler: (events: FsEvent[]) => void) => () => void;
   discoverComponents: (dir?: string) => Promise<ComponentMeta[]>;
   addPackage: (name: string) => Promise<unknown>;
   removePackage: (name: string) => Promise<unknown>;
   listPackages: () => Promise<PackageInfo[]>;
+  /**
+   * Run `bun install` in the project root. Optional: platforms without a Bun-capable backend omit
+   * it and the install-on-open / reinstall affordances are skipped.
+   */
+  installDependencies?: () => Promise<PackageOpResult>;
+  /** Whether the project has uninstalled dependencies (node_modules missing). */
+  dependenciesNeedInstall?: () => Promise<boolean>;
+  /** List dependencies that have a newer version available. */
+  outdatedPackages?: () => Promise<OutdatedInfo[]>;
+  /**
+   * Rewrite the version range of each named package (preserving its dependencies/devDependencies
+   * placement) and run `bun install`. Used by the @jxsuite bump and per-dependency updates.
+   */
+  setPackageVersions?: (
+    updates: { name: string; version: string; dev?: boolean }[],
+  ) => Promise<PackageOpResult>;
+  /**
+   * Desktop-only app/build info (release channel, commit hash, update status). Platforms without a
+   * native shell (e.g. the dev server) omit it, and the About screen hides the corresponding
+   * section.
+   */
+  getAppInfo?: () => Promise<AppInfo>;
   codeService: (action: string, payload: unknown) => Promise<CodeServiceResult | null>;
   resolveSiteContext: (filePath: string) => Promise<{
     sitePath: string | null;

package/src/ui/expression-editor.ts

@@ -332,7 +332,8 @@ function renderLiteralEditor(operand: unknown, onChange: (newVal: JxExpressionOp
                 @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
                 >true</sp-checkbox
               >`
-            : html`<span style="font-size:12px;color:var(--spectrum-global-color-gray-600)"
+            : html`<span
+                style="font-size:var(--spectrum-font-size-75, 12px);color:var(--spectrum-gray-600, #808080)"
                 >null</span
               >`}
     </div>
@@ -425,7 +426,7 @@ function renderSpliceArgsEditor(
             class="array-object-row"
             style="display:flex;gap:4px;align-items:center;margin-bottom:4px"
           >
-            <span style="font-size:10px;color:var(--spectrum-global-color-gray-600);min-width:30px">
+            <span style="font-size:10px;color:var(--spectrum-gray-600, #808080);min-width:30px">
               ${labels[idx] ?? "item"}
             </span>
             ${renderOperandEditor(
@@ -496,7 +497,7 @@ export function renderExpressionEditor(
 
   const nestStyle =
     depth > 0
-      ? "border-left:2px solid var(--spectrum-global-color-gray-300);margin-left:8px;padding-left:8px;"
+      ? "border-left:2px solid var(--spectrum-gray-300, #3c3c3c);margin-left:8px;padding-left:8px;"
       : "";
 
   return html`