@jxsuite/studio 0.20.0 → 0.21.1

package/src/panels/tab-strip.js

@@ -10,6 +10,7 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { effect, effectScope } from "../reactivity.js";
 import { workspace, activateTab, closeTab } from "../workspace/workspace.js";
+import { showConfirmDialog } from "../ui/layers.js";
 
 /** @typedef {import("../tabs/tab.js").Tab} Tab */
 
@@ -117,12 +118,14 @@ function tabLabel(tab) {
  *
  * @param {string} id
  */
-function requestClose(id) {
+async function requestClose(id) {
   const tab = workspace.tabs.get(id);
   if (!tab) return;
   if (tab.doc.dirty) {
-    const confirmed = window.confirm(
+    const confirmed = await showConfirmDialog(
+      "Unsaved Changes",
       `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,
+      { confirmLabel: "Close", destructive: true },
     );
     if (!confirmed) return;
   }

package/src/settings/content-types-editor.js

@@ -57,7 +57,7 @@ function handleNewContentType(rerender) {
   if (config.contentTypes[slug]) return; // already exists
 
   config.contentTypes[slug] = {
-    source: `./content/${slug}/**/*.md`,
+    source: `./content/${slug}/`,
     schema: { type: "object", properties: {}, required: [] },
   };
 

package/src/settings/settings-modal.js

@@ -20,6 +20,9 @@ let _handle = null;
 /** @type {string} */
 let _activeSection = "general";
 
+/** @type {HTMLElement | null} */
+let _contentEl = null;
+
 const sections = [
   { key: "general", label: "General", icon: "sp-icon-properties" },
   { key: "head", label: "Head", icon: "sp-icon-file-single-web-page" },
@@ -38,6 +41,7 @@ export function closeSettingsModal() {
   if (!_handle) return;
   _handle.close();
   _handle = null;
+  _contentEl = null;
 }
 
 function renderModal() {
@@ -77,7 +81,8 @@ function renderModal() {
         <div
           class="settings-modal-content"
           ${ref((el) => {
-            if (el) requestAnimationFrame(() => renderActiveSection());
+            _contentEl = /** @type {HTMLElement | null} */ (el || null);
+            if (_contentEl) requestAnimationFrame(() => renderActiveSection());
           })}
         ></div>
       </div>
@@ -92,25 +97,23 @@ function renderModal() {
 }
 
 function renderActiveSection() {
-  if (!_handle) return;
-  const container = _handle.host.querySelector(".settings-modal-content");
-  if (!container) return;
+  if (!_handle || !_contentEl) return;
 
   switch (_activeSection) {
     case "general":
-      renderGeneralSettings(/** @type {HTMLElement} */ (container));
+      renderGeneralSettings(_contentEl);
       break;
     case "head":
-      renderHeadEditor(/** @type {HTMLElement} */ (container));
+      renderHeadEditor(_contentEl);
       break;
     case "cssVars":
-      renderCssVarsEditor(/** @type {HTMLElement} */ (container));
+      renderCssVarsEditor(_contentEl);
       break;
     case "definitions":
-      renderDefsEditor(/** @type {HTMLElement} */ (container));
+      renderDefsEditor(_contentEl);
       break;
     case "contentTypes":
-      renderContentTypesEditor(/** @type {HTMLElement} */ (container));
+      renderContentTypesEditor(_contentEl);
       break;
   }
 }

package/src/store.js

@@ -26,17 +26,23 @@ export {
   updateFrontmatter,
 } from "./state.js";
 
-// ─── DOM shortcuts & element refs ────────────────────────────────────────────
+// ─── Shell element refs (populated by initShellRefs) ─────────────────────────
 
-export const $ = (/** @type {string} */ sel) => document.querySelector(sel);
-export const _$$ = (/** @type {string} */ sel) => document.querySelectorAll(sel);
+export let canvasWrap = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let activityBar = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let leftPanel = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let rightPanel = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let toolbarEl = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
+export let statusbarEl = /** @type {HTMLElement} */ (/** @type {unknown} */ (null));
 
-export const canvasWrap = /** @type {HTMLElement} */ (document.querySelector("#canvas-wrap"));
-export const activityBar = /** @type {HTMLElement} */ (document.querySelector("#activity-bar"));
-export const leftPanel = /** @type {HTMLElement} */ (document.querySelector("#left-panel"));
-export const rightPanel = /** @type {HTMLElement} */ (document.querySelector("#right-panel"));
-export const toolbarEl = /** @type {HTMLElement} */ (document.querySelector("#toolbar"));
-export const statusbarEl = /** @type {HTMLElement} */ (document.querySelector("#statusbar"));
+export function initShellRefs() {
+  canvasWrap = /** @type {HTMLElement} */ (document.querySelector("#canvas-wrap"));
+  activityBar = /** @type {HTMLElement} */ (document.querySelector("#activity-bar"));
+  leftPanel = /** @type {HTMLElement} */ (document.querySelector("#left-panel"));
+  rightPanel = /** @type {HTMLElement} */ (document.querySelector("#right-panel"));
+  toolbarEl = /** @type {HTMLElement} */ (document.querySelector("#toolbar"));
+  statusbarEl = /** @type {HTMLElement} */ (document.querySelector("#statusbar"));
+}
 
 // ─── Shared containers (mutated in place by owner modules) ───────────────────
 

package/src/studio.js

@@ -17,6 +17,7 @@ import {
   setProjectState,
   requireProjectState,
   updateUi,
+  initShellRefs,
 } from "./store.js";
 
 import { activeTab, openTab, closeAllTabs } from "./workspace/workspace.js";
@@ -46,6 +47,7 @@ import {
   openFileInTab,
   openHomePage,
   setupTreeKeyboard,
+  registerFileTreeDnD,
   loadDirectory,
 } from "./files/files.js";
 import { renderImportsTemplate } from "./panels/imports-panel.js";
@@ -286,6 +288,8 @@ mountResizeEdges();
 
 // ─── Render loop ──────────────────────────────────────────────────────────────
 
+initShellRefs();
+
 // Mount extracted panel modules
 toolbarPanel.mount(toolbarEl, {
   navigateBack: () => navigateBack(),
@@ -418,6 +422,7 @@ leftPanelMod.mount({
   registerElementsDnD,
   registerComponentsDnD,
   setupTreeKeyboard,
+  registerFileTreeDnD,
   cloneRepository: () => cloneRepository({ openRecentProject }),
   setGitDiffState: (
     /** @type {import("./canvas/canvas-render.js").GitDiffState | null} */ state,
@@ -450,14 +455,17 @@ function safeRenderRightPanel() {
 // Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
-const _openParam = new URLSearchParams(location.search).get("open");
+const _urlParams = new URLSearchParams(location.search);
+const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
-if (_openParam) {
-  // ?open= mode: skip normal loadProject, set up site context from the path
+if (_projectParam) {
+  // ?project= mode: skip normal loadProject, set up site context from the path
   const isAbsPath =
-    _openParam.startsWith("/") || _openParam.startsWith("~") || /^[A-Za-z]:[/\\]/.test(_openParam);
+    _projectParam.startsWith("/") ||
+    _projectParam.startsWith("~") ||
+    /^[A-Za-z]:[/\\]/.test(_projectParam);
   if (!isAbsPath) {
-    statusMessage(`Error: ?open= requires an absolute path (got "${_openParam}")`);
+    statusMessage(`Error: ?project= requires an absolute path (got "${_projectParam}")`);
     render();
   } else {
     render();
@@ -465,7 +473,7 @@ if (_openParam) {
     (async () => {
       try {
         const siteCtx = platform.resolveSiteContext
-          ? await platform.resolveSiteContext(_openParam)
+          ? await platform.resolveSiteContext(_projectParam)
           : { sitePath: null };
 
         if (siteCtx.sitePath) {
@@ -516,8 +524,8 @@ if (_openParam) {
         }
 
         // Read and open the file
-        const _fileParam = new URLSearchParams(location.search).get("file");
-        let fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
+        const _fileParam = _urlParams.get("file");
+        let fileRelPath = _fileParam || siteCtx.fileRelPath || _projectParam;
 
         // When opening project.json, default to home page instead
         if (fileRelPath === "project.json" || fileRelPath.endsWith("/project.json")) {
@@ -560,7 +568,7 @@ if (_openParam) {
           }
 
           render();
-          statusMessage(`Opened ${_openParam}`);
+          statusMessage(`Opened ${fileRelPath}`);
         }
       } catch (/** @type {unknown} */ e) {
         statusMessage(`Error: ${/** @type {Error} */ (e).message}`);

package/src/ui/layers.js

@@ -1,4 +1,4 @@
-import { render as litRender, nothing } from "lit-html";
+import { render as litRender, nothing, html } from "lit-html";
 
 /** @type {HTMLElement} */
 let _popoverLayer;
@@ -37,6 +37,36 @@ export function showDialog(templateFn) {
   });
 }
 
+/**
+ * Show a confirm/cancel dialog. Returns true if confirmed, false otherwise.
+ *
+ * @param {string} headline
+ * @param {string | import("lit-html").TemplateResult} message
+ * @param {{ confirmLabel?: string; cancelLabel?: string; destructive?: boolean }} [opts]
+ * @returns {Promise<boolean>}
+ */
+export function showConfirmDialog(headline, message, opts = {}) {
+  const { confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false } = opts;
+  return showDialog(
+    (done) => html`
+      <sp-dialog-wrapper
+        open
+        underlay
+        headline=${headline}
+        confirm-label=${confirmLabel}
+        cancel-label=${cancelLabel}
+        size="s"
+        @confirm=${() => done(true)}
+        @cancel=${() => done(false)}
+        @close=${() => done(false)}
+        class=${destructive ? "dialog-destructive" : ""}
+      >
+        <p>${message}</p>
+      </sp-dialog-wrapper>
+    `,
+  );
+}
+
 /**
  * Open a persistent modal. Returns a handle with update() and close() methods.
  *

package/src/utils/edit-display.js

@@ -65,12 +65,7 @@ export function prepareForEditMode(node) {
             {
               tagName: "div",
               className: "repeater-perimeter",
-              state: {
-                $map: { item: {}, index: 0 },
-                "$map/item": {},
-                "$map/index": 0,
-              },
-              children: [prepareForEditMode(template)],
+              children: [prepareForEditMode(/** @type {JxMutableNode} */ (template))],
             },
           ];
         } else {

package/src/utils/studio-utils.js

@@ -136,17 +136,17 @@ export function findContentTypeSchema(documentPath, projectConfig) {
     /** @type {Record<string, ContentTypeDef>} */ (projectConfig.contentTypes),
   )) {
     if (!def.source || !def.schema) continue;
-    const src = def.source.replace(/^\.\//, "");
-    const dir = src.split("/")[0];
-    const ext = src.includes("*.md")
-      ? ".md"
-      : src.includes("*.json")
-        ? ".json"
-        : src.includes("*.csv")
-          ? ".csv"
-          : null;
-    if (documentPath.startsWith(dir + "/") && (!ext || documentPath.endsWith(ext))) {
-      return { name, schema: def.schema };
+    const src = def.source.replace(/^\.\//, "").replace(/\/$/, "");
+    const hasExt = src.includes(".") && !src.endsWith("/");
+    if (hasExt) {
+      if (documentPath === src || documentPath.endsWith("/" + src)) {
+        return { name, schema: def.schema };
+      }
+    } else {
+      const ext = `.${def.format || "md"}`;
+      if (documentPath.startsWith(src + "/") && documentPath.endsWith(ext)) {
+        return { name, schema: def.schema };
+      }
     }
   }
   return null;

package/src/workspace/workspace.js

@@ -139,3 +139,22 @@ export function replaceAllTabs(newTabOpts) {
 export function activateTab(tabId) {
   if (workspace.tabs.has(tabId)) workspace.activeTabId = tabId;
 }
+
+/**
+ * Re-key a tab after its backing file has been renamed. Preserves all tab state including unsaved
+ * changes.
+ *
+ * @param {string} oldId
+ * @param {string} newId
+ * @param {string} newDocumentPath
+ */
+export function renameTab(oldId, newId, newDocumentPath) {
+  const tab = workspace.tabs.get(oldId);
+  if (!tab) return;
+  tab.id = newId;
+  tab.documentPath = newDocumentPath;
+  workspace.tabs.delete(oldId);
+  workspace.tabs.set(newId, tab);
+  workspace.tabOrder = workspace.tabOrder.map((id) => (id === oldId ? newId : id));
+  if (workspace.activeTabId === oldId) workspace.activeTabId = newId;
+}