@jxsuite/studio 0.19.0 → 0.21.0

package/src/files/files.js

@@ -7,20 +7,28 @@
 
 import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
+import { ref } from "lit-html/directives/ref.js";
 import { unified } from "unified";
 import remarkStringify from "remark-stringify";
-import { renderPopover } from "../ui/layers.js";
+import { renderPopover, showDialog, showConfirmDialog } from "../ui/layers.js";
 import remarkDirective from "remark-directive";
 import { stringify as stringifyYaml } from "yaml";
 import { jxToMd } from "../markdown/md-convert.js";
-import { createState, projectState, setProjectState } from "../store.js";
+import { createState, projectState, setProjectState, requireProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
+import {
+  draggable,
+  dropTargetForElements,
+  monitorForElements,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
   workspace,
   openTab,
   activateTab,
+  renameTab,
   replaceAllTabs,
   activeTab,
 } from "../workspace/workspace.js";
@@ -65,7 +73,7 @@ export async function loadProject() {
       name: info.isSiteProject ? info.projectConfig?.name || meta.name : meta.name,
       projectRoot: ".",
       isSiteProject: info.isSiteProject,
-      projectConfig: info.isSiteProject ? info.projectConfig : null,
+      projectConfig: (info.isSiteProject ? info.projectConfig : null) || null,
       projectDirs: info.directories || [],
       dirs: new Map(),
       expanded: new Set(),
@@ -105,7 +113,7 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
     replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
 
     setProjectState({
-      ...projectState,
+      .../** @type {ProjectState} */ (projectState),
       projectRoot: handle.root,
       isSiteProject: true,
       projectConfig: config,
@@ -129,26 +137,26 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
       "public",
       "styles",
     ];
-    const entries = projectState.dirs.get(".") || [];
+    const entries = requireProjectState().dirs.get(".") || [];
     const foundDirs = [];
     for (const e of entries) {
       if (e.type === "directory" && conventionalDirs.includes(e.name)) {
         foundDirs.push(e.name);
-        projectState.expanded.add(e.path || e.name);
+        requireProjectState().expanded.add(e.path || e.name);
         await loadDirectory(e.path || e.name);
       }
     }
-    projectState.projectDirs = foundDirs;
+    requireProjectState().projectDirs = foundDirs;
 
     view.leftTab = "files";
-    addRecentProject(projectState.name, projectState.projectRoot);
+    addRecentProject(requireProjectState().name, requireProjectState().projectRoot);
     renderActivityBar();
     renderLeftPanel();
-    statusMessage(`Opened project: ${projectState.name}`);
+    statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -251,9 +259,9 @@ export function renderFilesTemplate({
           size="xs"
           label="Refresh"
           @click=${async () => {
-            projectState.dirs.clear();
+            requireProjectState().dirs.clear();
             await loadDirectory(".");
-            for (const dir of projectState.expanded) await loadDirectory(dir);
+            for (const dir of requireProjectState().expanded) await loadDirectory(dir);
             renderLeftPanel();
           }}
         >
@@ -264,9 +272,9 @@ export function renderFilesTemplate({
         size="s"
         quiet
         placeholder="Filter files…"
-        value=${projectState.searchQuery}
+        value=${requireProjectState().searchQuery}
         @input=${(/** @type {Event} */ e) => {
-          projectState.searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
+          requireProjectState().searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
           renderLeftPanel();
         }}
         @submit=${(/** @type {Event} */ e) => e.preventDefault()}
@@ -284,7 +292,7 @@ function renderTreeLevelTemplate(
   /** @type {number} */ depth,
   /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
 ) {
-  const entries = projectState.dirs.get(dirPath);
+  const entries = requireProjectState().dirs.get(dirPath);
   if (!entries) {
     loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
     return html`<div
@@ -301,15 +309,15 @@ function renderTreeLevelTemplate(
     return a.name.localeCompare(b.name);
   });
 
-  const query = projectState.searchQuery.toLowerCase();
+  const query = requireProjectState().searchQuery.toLowerCase();
   const filtered = query
     ? sorted.filter((e) => e.type === "directory" || e.name.toLowerCase().includes(query))
     : sorted;
 
   return filtered.map((entry) => {
     const isDir = entry.type === "directory";
-    const isExpanded = projectState.expanded.has(entry.path);
-    const isSelected = projectState.selectedPath === entry.path;
+    const isExpanded = requireProjectState().expanded.has(entry.path);
+    const isSelected = requireProjectState().selectedPath === entry.path;
 
     return html`
       <div
@@ -324,10 +332,10 @@ function renderTreeLevelTemplate(
         @click=${async (/** @type {MouseEvent} */ e) => {
           e.stopPropagation();
           if (isDir) {
-            if (isExpanded) projectState.expanded.delete(entry.path);
+            if (isExpanded) requireProjectState().expanded.delete(entry.path);
             else {
-              projectState.expanded.add(entry.path);
-              if (!projectState.dirs.has(entry.path)) await loadDirectory(entry.path);
+              requireProjectState().expanded.add(entry.path);
+              if (!requireProjectState().dirs.has(entry.path)) await loadDirectory(entry.path);
             }
             ctx.renderLeftPanel();
           } else {
@@ -372,8 +380,8 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
       case "ArrowRight":
         if (focused.dataset.type === "directory") {
           const path = /** @type {string} */ (focused.dataset.path);
-          if (!projectState.expanded.has(path)) {
-            projectState.expanded.add(path);
+          if (!requireProjectState().expanded.has(path)) {
+            requireProjectState().expanded.add(path);
             loadDirectory(path).then(() => {
               const panel = tree.closest(".panel-body");
               if (panel)
@@ -386,9 +394,9 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
         break;
       case "ArrowLeft":
         if (focused.dataset.type === "directory") {
-          const path = focused.dataset.path;
-          if (projectState.expanded.has(path)) {
-            projectState.expanded.delete(path);
+          const path = /** @type {string} */ (focused.dataset.path);
+          if (requireProjectState().expanded.has(path)) {
+            requireProjectState().expanded.delete(path);
             // renderLeftPanel will be called by the caller who sets up keyboard
           }
         }
@@ -407,6 +415,170 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
   if (first) first.setAttribute("tabindex", "0");
 }
 
+/** @type {(() => void)[]} */
+let _fileTreeDndCleanups = [];
+
+/**
+ * Register drag-and-drop on file tree items. Called after each file tree render.
+ *
+ * @param {{ renderLeftPanel: () => void }} ctx
+ */
+export function registerFileTreeDnD({ renderLeftPanel }) {
+  // Clean up previous registrations
+  for (const fn of _fileTreeDndCleanups) fn();
+  _fileTreeDndCleanups = [];
+
+  requestAnimationFrame(() => {
+    const tree = /** @type {HTMLElement | null} */ (document.querySelector(".file-tree"));
+    if (!tree) return;
+
+    const items = /** @type {NodeListOf<HTMLElement>} */ (tree.querySelectorAll(".file-tree-item"));
+
+    items.forEach((row) => {
+      const path = row.dataset.path;
+      const type = row.dataset.type;
+      if (!path) return;
+
+      const cleanups = [
+        draggable({
+          element: row,
+          getInitialData() {
+            return { type: "file-tree", path, entryType: type };
+          },
+          onDragStart() {
+            row.classList.add("dragging");
+          },
+          onDrop() {
+            row.classList.remove("dragging");
+          },
+        }),
+      ];
+
+      if (type === "directory") {
+        cleanups.push(
+          dropTargetForElements({
+            element: row,
+            canDrop({ source }) {
+              if (source.data.type !== "file-tree") return false;
+              const srcPath = /** @type {string} */ (source.data.path);
+              if (srcPath === path) return false;
+              if (srcPath.startsWith(path + "/")) return false;
+              const srcParent = parentDir(srcPath);
+              if (srcParent === path) return false;
+              return true;
+            },
+            onDragEnter() {
+              row.classList.add("drag-over");
+            },
+            onDrag() {
+              if (!row.classList.contains("drag-over")) row.classList.add("drag-over");
+            },
+            onDragLeave() {
+              row.classList.remove("drag-over");
+            },
+            onDrop() {
+              row.classList.remove("drag-over");
+            },
+            getData() {
+              return { type: "file-tree-target", targetDir: path };
+            },
+          }),
+        );
+      }
+
+      _fileTreeDndCleanups.push(combine(...cleanups));
+    });
+
+    // Root-level drop target (move to project root)
+    const rootCleanup = dropTargetForElements({
+      element: tree,
+      canDrop({ source }) {
+        if (source.data.type !== "file-tree") return false;
+        const srcPath = /** @type {string} */ (source.data.path);
+        return parentDir(srcPath) !== ".";
+      },
+      onDragEnter() {
+        tree.classList.add("drag-over-root");
+      },
+      onDragLeave() {
+        tree.classList.remove("drag-over-root");
+      },
+      onDrop() {
+        tree.classList.remove("drag-over-root");
+      },
+      getData() {
+        return { type: "file-tree-target", targetDir: "." };
+      },
+    });
+    _fileTreeDndCleanups.push(rootCleanup);
+
+    // Monitor for drop events
+    const monitorCleanup = monitorForElements({
+      onDrop({ source, location }) {
+        const target = location.current.dropTargets[0];
+        if (!target) return;
+        if (source.data.type !== "file-tree") return;
+        if (target.data.type !== "file-tree-target") return;
+
+        const srcPath = /** @type {string} */ (source.data.path);
+        const targetDirPath = /** @type {string} */ (target.data.targetDir);
+        const fileName = srcPath.split("/").pop();
+        const newPath = targetDirPath === "." ? fileName : `${targetDirPath}/${fileName}`;
+
+        if (newPath === srcPath) return;
+
+        moveFileEntry(srcPath, /** @type {string} */ (newPath), renderLeftPanel);
+      },
+    });
+    _fileTreeDndCleanups.push(monitorCleanup);
+  });
+}
+
+/**
+ * Move a file/directory and update all affected state.
+ *
+ * @param {string} oldPath
+ * @param {string} newPath
+ * @param {() => void} renderLeftPanel
+ */
+async function moveFileEntry(oldPath, newPath, renderLeftPanel) {
+  const platform = getPlatform();
+  try {
+    await platform.renameFile(oldPath, newPath);
+
+    // Update open tabs referencing the moved path
+    for (const [id] of workspace.tabs.entries()) {
+      if (id === oldPath) {
+        renameTab(oldPath, newPath, newPath);
+      } else if (id.startsWith(oldPath + "/")) {
+        const newTabPath = newPath + id.slice(oldPath.length);
+        renameTab(id, newTabPath, newTabPath);
+      }
+    }
+
+    // Refresh affected directories
+    const oldParent = parentDir(oldPath);
+    const newParent = parentDir(newPath);
+    await loadDirectory(oldParent);
+    if (newParent !== oldParent) await loadDirectory(newParent);
+
+    // Auto-expand target directory
+    if (newParent !== ".") requireProjectState().expanded.add(newParent);
+
+    renderLeftPanel();
+    statusMessage(`Moved to ${newPath}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  }
+}
+
+/** @param {string} path @returns {string} */
+function parentDir(path) {
+  const normalized = path.replaceAll("\\", "/");
+  const lastSlash = normalized.lastIndexOf("/");
+  return lastSlash === -1 ? "." : normalized.substring(0, lastSlash);
+}
+
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
 /** @type {ReturnType<typeof renderPopover> | null} */
@@ -452,7 +624,22 @@ function showFileContextMenu(
     y = e.clientY;
 
   _fileCtxHandle = renderPopover(
-    html`<sp-popover open style="position:fixed;z-index:10000;left:${x}px;top:${y}px">
+    html`<sp-popover
+      open
+      style="position:fixed;z-index:10000;left:${x}px;top:${y}px"
+      ${ref((el) => {
+        if (!el) return;
+        requestAnimationFrame(() => {
+          const popover = /** @type {HTMLElement} */ (el);
+          const menuRect = popover.getBoundingClientRect();
+          if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+          if (y + menuRect.height > window.innerHeight)
+            y = window.innerHeight - menuRect.height - 4;
+          popover.style.left = `${x}px`;
+          popover.style.top = `${y}px`;
+        });
+      })}
+    >
       <sp-menu>
         ${items.map((item) =>
           item.label === "\u2014"
@@ -475,18 +662,6 @@ function showFileContextMenu(
       },
     },
   );
-
-  requestAnimationFrame(() => {
-    const popover = /** @type {HTMLElement | null} */ (
-      _fileCtxHandle?.host.querySelector("sp-popover")
-    );
-    if (!popover) return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 
 // ─── File CRUD ────────────────────────────────────────────────────────────────
@@ -497,23 +672,69 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
   const content = name.endsWith(".md")
     ? "---\ntitle: Untitled\n---\n\n"
-    : JSON.stringify({ tagName: "div", children: [] }, null, 2);
+    : JSON.stringify({ tagName: "div", children: [{ tagName: "p", children: [] }] }, null, 2);
   try {
     const platform = getPlatform();
     await platform.writeFile(path, content);
     await loadDirectory(dirPath);
     renderLeftPanel();
     statusMessage(`Created ${path}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
+/** @param {string} currentName @returns {Promise<string | null>} */
+function showRenameFileDialog(currentName) {
+  let value = currentName;
+  return showDialog((done) => {
+    function confirm() {
+      const trimmed = value.trim();
+      if (!trimmed) return;
+      done(trimmed);
+    }
+    const tpl = html`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline="Rename"
+        confirm-label="Rename"
+        cancel-label="Cancel"
+        size="s"
+        @confirm=${confirm}
+        @cancel=${() => done(null)}
+        @close=${() => done(null)}
+      >
+        <sp-textfield
+          style="width:100%"
+          value=${currentName}
+          @input=${(/** @type {Event} */ e) => {
+            value = /** @type {HTMLInputElement} */ (e.target).value || "";
+          }}
+          @keydown=${(/** @type {KeyboardEvent} */ e) => {
+            if (e.key === "Enter") confirm();
+          }}
+        ></sp-textfield>
+      </sp-dialog-wrapper>
+    `;
+    requestAnimationFrame(() => {
+      const layer = document.getElementById("layer-dialog");
+      const tf = /** @type {HTMLElement | null} */ (layer?.querySelector("sp-textfield"));
+      if (tf) {
+        tf.focus();
+        const input = tf.shadowRoot?.querySelector("input");
+        if (input) input.select();
+      }
+    });
+    return tpl;
+  });
+}
+
 async function renameFile(
   /** @type {{ name: string; path: string; type: string }} */ entry,
   /** @type {() => void} */ renderLeftPanel,
 ) {
-  const newName = prompt("New name:", entry.name);
+  const newName = await showRenameFileDialog(entry.name);
   if (!newName || newName === entry.name) return;
   const entryPath = entry.path.replaceAll("\\", "/");
   const parentDir = entryPath.includes("/")
@@ -524,13 +745,16 @@ async function renameFile(
     const platform = getPlatform();
     await platform.renameFile(entry.path, newPath);
     await loadDirectory(parentDir);
-    if (projectState.selectedPath === entry.path) {
-      projectState.selectedPath = newPath;
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = newPath;
+    }
+    if (workspace.tabs.has(entry.path)) {
+      renameTab(entry.path, newPath, newPath);
     }
     renderLeftPanel();
     statusMessage(`Renamed to ${newName}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -538,20 +762,24 @@ async function deleteFile(
   /** @type {{ name: string; path: string; type: string }} */ entry,
   /** @type {() => void} */ renderLeftPanel,
 ) {
-  if (!confirm(`Delete "${entry.name}"?`)) return;
+  const confirmed = await showConfirmDialog("Delete File", `Delete "${entry.name}"?`, {
+    confirmLabel: "Delete",
+    destructive: true,
+  });
+  if (!confirmed) return;
   try {
     const platform = getPlatform();
     await platform.deleteFile(entry.path);
     const delPath = entry.path.replaceAll("\\", "/");
     const parentDir = delPath.includes("/") ? delPath.substring(0, delPath.lastIndexOf("/")) : ".";
     await loadDirectory(parentDir);
-    if (projectState.selectedPath === entry.path) {
-      projectState.selectedPath = null;
+    if (requireProjectState().selectedPath === entry.path) {
+      requireProjectState().selectedPath = null;
     }
     renderLeftPanel();
     statusMessage(`Deleted ${entry.name}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -561,10 +789,10 @@ async function deleteFile(
  * Open a file from the file tree — auto-saves current dirty doc, then loads the new one.
  *
  * @param {{
- *   S: any;
- *   commit: (s: any) => void;
+ *   S: import("../state.js").StudioState;
+ *   commit: (s: import("../state.js").StudioState) => void;
  *   render: () => void;
- *   loadMarkdown: (source: string, handle: any) => void;
+ *   loadMarkdown: (source: string, handle: unknown) => void;
  * }} ctx
  * @param {string} path
  */
@@ -576,11 +804,11 @@ export async function openFileFromTree(ctx, path) {
       const isContent = ctx.S.mode === "content";
       let output;
       if (isContent) {
-        const mdast = jxToMd(ctx.S.document);
+        const mdast = jxToMd(/** @type {JxElement} */ (ctx.S.document));
         const md = unified()
           .use(remarkDirective)
           .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-          .stringify(mdast);
+          .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
         const fm = ctx.S.content?.frontmatter;
         const hasFrontmatter = fm && Object.keys(fm).length > 0;
         output = hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
@@ -588,8 +816,8 @@ export async function openFileFromTree(ctx, path) {
         output = JSON.stringify(ctx.S.document, null, 2);
       }
       await platform.writeFile(ctx.S.documentPath, output);
-    } catch (/** @type {any} */ e) {
-      statusMessage(`Save error: ${e.message}`);
+    } catch (/** @type {unknown} */ e) {
+      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
     }
   }
 
@@ -612,12 +840,12 @@ export async function openFileFromTree(ctx, path) {
     }
 
     // Update tree selection
-    projectState.selectedPath = path;
+    requireProjectState().selectedPath = path;
 
     ctx.render();
     statusMessage(`Opened ${path}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -630,7 +858,7 @@ export async function openFileInTab(path) {
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {
       activateTab(id);
-      projectState.selectedPath = path;
+      requireProjectState().selectedPath = path;
       return;
     }
   }
@@ -657,9 +885,8 @@ export async function openFileInTab(path) {
       frontmatter,
       sourceFormat: path.endsWith(".md") ? "md" : null,
     });
-    projectState.selectedPath = path;
+    requireProjectState().selectedPath = path;
     trackRecentFile({ path, name: path.split("/").pop() || path });
-    view.leftTab = "layers";
 
     if (path === "project.json") {
       const tab = activeTab.value;
@@ -667,7 +894,34 @@ export async function openFileInTab(path) {
     }
 
     statusMessage(`Opened ${path.split("/").pop()}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  }
+}
+
+/**
+ * Reload an already-open tab from disk without changing the active tab. Used to refresh after AI
+ * assistant writes to a file.
+ *
+ * @param {string} path
+ */
+export async function reloadFileInTab(path) {
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path) {
+      const platform = getPlatform();
+      try {
+        const content = await platform.readFile(path);
+        if (!content) return;
+        if (path.endsWith(".md")) {
+          const { document, frontmatter } = await loadMarkdown(content);
+          tab.doc.document = document;
+          tab.doc.content.frontmatter = frontmatter;
+        } else {
+          tab.doc.document = JSON.parse(content);
+        }
+        tab.doc.dirty = false;
+      } catch {}
+      return;
+    }
   }
 }