@jxsuite/studio 0.20.0 → 0.21.0

package/src/editor/slash-menu.js

@@ -8,6 +8,7 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { getLayerSlot } from "../ui/layers.js";
 
 // ─── Commands ─────────────────────────────────────────────────────────────────
@@ -34,7 +35,13 @@ const SLASH_COMMANDS = [
 
 // ─── State ────────────────────────────────────────────────────────────────────
 
-/** @type {{ onSelect: (cmd: SlashCommand) => void; showFilter?: boolean } | null} */
+/**
+ * @type {{
+ *   onSelect: (cmd: SlashCommand) => void;
+ *   showFilter?: boolean;
+ *   commands?: SlashCommand[];
+ * } | null}
+ */
 let callbacks = null;
 let activeIdx = 0;
 /** @type {SlashCommand[]} */
@@ -44,6 +51,10 @@ let open = false;
 let _anchorEl = null;
 /** @type {DOMRect | null} */
 let _anchorRect = null;
+/** @type {HTMLInputElement | null} */
+let _filterEl = null;
+/** @type {HTMLElement | null} */
+let _popoverEl = null;
 
 /** @returns {HTMLElement} */
 function getHost() {
@@ -62,18 +73,23 @@ export function isSlashMenuOpen() {
  *
  * @param {HTMLElement} anchorEl — the element being edited (for positioning)
  * @param {string} filter — current typed filter text (after the "/")
- * @param {{ onSelect: (cmd: SlashCommand) => void; showFilter?: boolean }} cbs
+ * @param {{
+ *   onSelect: (cmd: SlashCommand) => void;
+ *   showFilter?: boolean;
+ *   commands?: SlashCommand[];
+ * }} cbs
  */
 export function showSlashMenu(anchorEl, filter, cbs) {
   callbacks = cbs;
   _anchorEl = anchorEl;
   _anchorRect = anchorEl.getBoundingClientRect();
 
+  const source = cbs.commands || SLASH_COMMANDS;
   filteredItems = filter
-    ? SLASH_COMMANDS.filter(
+    ? source.filter(
         (c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter),
       )
-    : SLASH_COMMANDS;
+    : source;
 
   if (!filteredItems.length && !cbs.showFilter) {
     dismissSlashMenu();
@@ -94,10 +110,7 @@ export function showSlashMenu(anchorEl, filter, cbs) {
 
   if (cbs.showFilter) {
     requestAnimationFrame(() => {
-      const input = /** @type {HTMLInputElement | null} */ (
-        getHost().querySelector(".slash-filter")
-      );
-      if (input) input.focus();
+      if (_filterEl) _filterEl.focus();
     });
   }
 }
@@ -108,6 +121,8 @@ export function dismissSlashMenu() {
   callbacks = null;
   _anchorEl = null;
   _anchorRect = null;
+  _filterEl = null;
+  _popoverEl = null;
   filteredItems = [];
   document.removeEventListener("keydown", onKeydown, true);
   document.removeEventListener("mousedown", onOutsideClick, true);
@@ -127,6 +142,9 @@ function render(anchorEl, showFilter) {
     html`
       <sp-popover
         open
+        ${ref((el) => {
+          _popoverEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
         style="position:fixed;left:${rect.left}px;top:${rect.bottom +
         4}px;z-index:9999;max-height:320px;overflow-y:auto"
       >
@@ -137,6 +155,9 @@ function render(anchorEl, showFilter) {
               placeholder="Filter…"
               autocomplete="off"
               style="display:block;width:100%;box-sizing:border-box;padding:6px 10px;border:none;border-bottom:1px solid var(--border, #444);outline:none;font-size:13px;background:transparent;color:inherit"
+              ${ref((el) => {
+                _filterEl = /** @type {HTMLInputElement | null} */ (el || null);
+              })}
               @input=${onFilterInput}
             />`
           : nothing}
@@ -169,9 +190,7 @@ function render(anchorEl, showFilter) {
 
 /** @param {MouseEvent} e */
 function onOutsideClick(e) {
-  const host = getHost();
-  const popover = host.querySelector("sp-popover");
-  if (popover && !popover.contains(/** @type {Node} */ (e.target))) {
+  if (_popoverEl && !_popoverEl.contains(/** @type {Node} */ (e.target))) {
     dismissSlashMenu();
   }
 }
@@ -188,21 +207,21 @@ function onFilterInput(e) {
   const input = /** @type {HTMLInputElement} */ (e.target);
   const filter = input.value.toLowerCase();
 
+  const source = callbacks?.commands || SLASH_COMMANDS;
   filteredItems = filter
-    ? SLASH_COMMANDS.filter(
+    ? source.filter(
         (c) => c.label.toLowerCase().includes(filter) || c.tag.toLowerCase().includes(filter),
       )
-    : SLASH_COMMANDS;
+    : source;
 
   activeIdx = 0;
   if (_anchorEl) render(_anchorEl, true);
 
   // Re-focus input after re-render
   requestAnimationFrame(() => {
-    const el = /** @type {HTMLInputElement | null} */ (getHost().querySelector(".slash-filter"));
-    if (el && el !== document.activeElement) {
-      el.focus();
-      el.selectionStart = el.selectionEnd = el.value.length;
+    if (_filterEl && _filterEl !== document.activeElement) {
+      _filterEl.focus();
+      _filterEl.selectionStart = _filterEl.selectionEnd = _filterEl.value.length;
     }
   });
 }

package/src/files/files.js

@@ -7,9 +7,10 @@
 
 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";
@@ -17,10 +18,17 @@ import { createState, projectState, setProjectState, requireProjectState } from
 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";
@@ -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 ────────────────────────────────────────────────────────────────
@@ -509,11 +684,57 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
   }
 }
 
+/** @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("/")
@@ -527,6 +748,9 @@ async function renameFile(
     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 {unknown} */ e) {
@@ -538,7 +762,11 @@ 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);

package/src/github/github-publish.js

@@ -1,6 +1,7 @@
 /** Publish a local project to GitHub — creates a new repo and pushes. */
 
 import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { showDialog } from "../ui/layers.js";
 import { authenticateGithub } from "./github-auth.js";
 import { getPlatform } from "../platform.js";
@@ -19,27 +20,24 @@ export async function publishToGithub({ projectName }) {
   if (!token) return false;
 
   const repoOpts = await showDialog((done) => {
+    /** @type {HTMLInputElement | null} */
+    let _nameInput = null;
+    /** @type {HTMLInputElement | null} */
+    let _descInput = null;
+    /** @type {HTMLInputElement | null} */
+    let _privateToggle = null;
+
     return html`
       <sp-dialog-wrapper
         open
         headline="Publish to GitHub"
         confirm-label="Create Repository"
         cancel-label="Cancel"
-        @confirm=${(/** @type {Event} */ e) => {
-          const dialog = /** @type {HTMLElement} */ (e.target);
-          const nameInput = /** @type {HTMLInputElement | null} */ (
-            dialog.querySelector('[name="repo-name"]')
-          );
-          const descInput = /** @type {HTMLInputElement | null} */ (
-            dialog.querySelector('[name="repo-desc"]')
-          );
-          const privateToggle = /** @type {HTMLInputElement | null} */ (
-            dialog.querySelector('[name="repo-private"]')
-          );
+        @confirm=${() => {
           done({
-            name: nameInput?.value || projectName,
-            description: descInput?.value || "",
-            isPrivate: privateToggle?.checked ?? true,
+            name: _nameInput?.value || projectName,
+            description: _descInput?.value || "",
+            isPrivate: _privateToggle?.checked ?? true,
           });
         }}
         @cancel=${() => done(null)}
@@ -52,6 +50,9 @@ export async function publishToGithub({ projectName }) {
             name="repo-name"
             value="${projectName}"
             placeholder="my-project"
+            ${ref((el) => {
+              _nameInput = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
           ></sp-textfield>
 
           <sp-field-label for="repo-desc">Description (optional)</sp-field-label>
@@ -59,10 +60,20 @@ export async function publishToGithub({ projectName }) {
             id="repo-desc"
             name="repo-desc"
             placeholder="A brief description"
+            ${ref((el) => {
+              _descInput = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
           ></sp-textfield>
 
           <sp-field-label>Visibility</sp-field-label>
-          <sp-switch name="repo-private" checked>Private repository</sp-switch>
+          <sp-switch
+            name="repo-private"
+            checked
+            ${ref((el) => {
+              _privateToggle = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
+            >Private repository</sp-switch
+          >
         </div>
       </sp-dialog-wrapper>
     `;

package/src/panels/activity-bar.js

@@ -16,10 +16,11 @@ export function mount() {
   _scope.run(() => {
     effect(() => {
       const tab = activeTab.value;
-      if (!tab) return;
-      const gs = tab.session.ui.gitStatus;
-      if (!gs && !tab.session.ui.gitLoading) {
-        refreshGitStatus();
+      if (tab) {
+        const gs = tab.session.ui.gitStatus;
+        if (!gs && !tab.session.ui.gitLoading) {
+          refreshGitStatus();
+        }
       }
       renderActivityBar();
     });
@@ -92,7 +93,6 @@ export function tabIcon(tag, size) {
 
 export function renderActivityBar() {
   const tab = activeTab.value;
-  if (!tab) return;
   const leftTab = view.leftTab;
   const gitFileCount = tab?.session.ui.gitStatus?.files?.length || 0;
   const tabs = [

package/src/panels/ai-panel.js

@@ -5,9 +5,9 @@
  */
 
 import { html, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import quikchat from "quikchat/md";
 import { getPlatform } from "../platform.js";
-import { rightPanel } from "../store.js";
 import { reloadFileInTab } from "../files/files.js";
 
 // ─── State (module-level, persists across tab switches) ─────────────────────
@@ -34,6 +34,8 @@ let mounted = false;
 let chatInstance = null;
 /** @type {Element | null} */
 let chatContainerEl = null;
+/** @type {HTMLElement | null} */
+let _quikChatEl = null;
 let currentStreamMsgId = /** @type {number | null} */ (null);
 let streamStarted = false;
 /** @type {Set<string>} */
@@ -61,7 +63,7 @@ export function registerRightPanelRender(/** @type {Function} */ fn) {
 // ─── QuikChat Mount ────────────────────────────────────────────────────────
 
 export function mountQuikChat() {
-  const container = rightPanel.querySelector("#ai-quikchat");
+  const container = _quikChatEl;
   if (!container) return;
   if (chatInstance && chatContainerEl === container) return;
 
@@ -393,7 +395,12 @@ export function renderAiPanelTemplate() {
           New Chat
         </sp-action-button>
       </div>
-      <div id="ai-quikchat"></div>
+      <div
+        id="ai-quikchat"
+        ${ref((el) => {
+          _quikChatEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
+      ></div>
     </div>
   `;
 }