@jxsuite/studio 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {

package/src/browse/browse.js

@@ -6,7 +6,7 @@
  * button with type-aware entity creation (including content types from project.json).
  */
 
-import { html, render as litRender } from "lit-html";
+import { html, render as litRender, nothing } from "lit-html";
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
 import { yamlDefault } from "../settings/schema-field-ui.js";
@@ -62,6 +62,22 @@ function extOf(name) {
   return dot > 0 ? name.slice(dot).toLowerCase() : "";
 }
 
+const IMAGE_EXTENSIONS = new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico",
+]);
+
+/** @param {string} ext */
+function isImage(ext) {
+  return IMAGE_EXTENSIONS.has(ext);
+}
+
 /** Map a file path to a display category. Media files override by extension. */
 function categoryFor(/** @type {string} */ dir, /** @type {string} */ ext) {
   if (ext && MEDIA_EXTENSIONS.has(ext)) return "Media";
@@ -396,9 +412,14 @@ export async function renderBrowse(container, ctx) {
                 <sp-table-row
                   value=${f.path}
                   class="browse-row"
-                  @click=${() => ctx.openFile(f.path)}
+                  style=${isImage(f.ext) ? "cursor:default" : ""}
+                  @click=${isImage(f.ext) ? nothing : () => ctx.openFile(f.path)}
                 >
-                  <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
+                  <sp-table-cell class="browse-name-cell"
+                    >${isImage(f.ext)
+                      ? html`<img class="browse-thumb" src="/${f.path}" />`
+                      : nothing}${f.name}</sp-table-cell
+                  >
                   <sp-table-cell>${f.category}</sp-table-cell>
                   <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>

package/src/canvas/canvas-live-render.js

@@ -390,38 +390,12 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       canvasEl.removeAttribute("data-content-mode");
     }
 
-    // Resolve relative asset URLs through the PAL for environments that can't
-    // serve project files natively (e.g. ElectroBun's views:// scheme).
-    const platform = /** @type {any} */ (globalThis).__jxPlatform;
-    if (platform?.resolveAssetUrl && docBase) {
-      const mediaEls = el.querySelectorAll("img[src], video[src], source[src], video[poster]");
-      for (const node of mediaEls) {
-        for (const attr of ["src", "poster"]) {
-          const val = node.getAttribute(attr);
-          if (
-            val &&
-            !val.startsWith("data:") &&
-            !val.startsWith("blob:") &&
-            !val.startsWith("http")
-          ) {
-            try {
-              const resolved = new URL(val, docBase).pathname.replace(/^\//, "");
-              const dataUrl = await platform.resolveAssetUrl(resolved);
-              if (dataUrl) node.setAttribute(attr, dataUrl);
-            } catch {}
-          }
-        }
-      }
-    }
-
     canvasEl.appendChild(el);
+
     if (canvasMode === "design" || canvasMode === "edit") {
-      // Custom element connectedCallbacks render children asynchronously —
-      // sweep again after they've had a chance to run
       requestAnimationFrame(() => {
         const editingEl = getActiveElement();
         for (const child of canvasEl.querySelectorAll("*")) {
-          // Preserve pointer-events on the actively-edited element
           if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
           if (editingEl && child === editingEl) continue;
           /** @type {any} */ (child).style.pointerEvents = "none";

package/src/editor/shortcuts.js

@@ -17,6 +17,7 @@ import {
 } from "../tabs/transact.js";
 import { isEditing } from "./inline-edit.js";
 import { copyNode, cutNode, pasteNode } from "./context-menu.js";
+import { openQuickSearch } from "../panels/quick-search.js";
 
 /** @typedef {import("../state.js").JxPath} JxPath */
 
@@ -44,6 +45,8 @@ export function initShortcuts(getContext) {
       const { canvasMode, panX, panY, setPan, applyTransform } = getContext();
       // Edit (content) mode: let the scroll container handle scrolling natively
       if (canvasMode === "edit") return;
+      // Manage mode: browse table handles its own scrolling
+      if (canvasMode === "manage") return;
       e.preventDefault();
       if (e.ctrlKey || e.metaKey) {
         // Zoom towards cursor
@@ -164,6 +167,10 @@ export function initShortcuts(getContext) {
           e.preventDefault();
           openProject();
           break;
+        case "p":
+          e.preventDefault();
+          openQuickSearch();
+          break;
         case "s":
           e.preventDefault();
           saveFile();

package/src/files/files.js

@@ -15,9 +15,10 @@ import { createState, projectState, setProjectState } from "../store.js";
 import { getPlatform } from "../platform.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { loadComponentRegistry } from "./components.js";
-import { workspace, openTab, activateTab } from "../workspace/workspace.js";
+import { workspace, openTab, activateTab, replaceAllTabs } from "../workspace/workspace.js";
 import { loadMarkdown } from "./file-ops.js";
 import { view } from "../view.js";
+import { addRecentProject, trackRecentFile } from "../recent-projects.js";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
@@ -32,7 +33,7 @@ const fileIconMap = /** @type {Record<string, import("lit-html").TemplateResult>
 
 // ─── File management ──────────────────────────────────────────────────────────
 
-async function loadDirectory(/** @type {string} */ dirPath) {
+export async function loadDirectory(/** @type {string} */ dirPath) {
   if (!projectState) return;
   try {
     const platform = getPlatform();
@@ -92,6 +93,8 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
 
     const { config, handle } = result;
 
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+
     setProjectState({
       ...projectState,
       projectRoot: handle.root,
@@ -129,6 +132,7 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
     projectState.projectDirs = foundDirs;
 
     view.leftTab = "files";
+    addRecentProject(projectState.name, projectState.projectRoot);
     renderActivityBar();
     renderLeftPanel();
     statusMessage(`Opened project: ${projectState.name}`);
@@ -631,6 +635,7 @@ export async function openFileInTab(path) {
       sourceFormat: path.endsWith(".md") ? "md" : null,
     });
     projectState.selectedPath = path;
+    trackRecentFile({ path, name: path.split("/").pop() || path });
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (/** @type {any} */ e) {
     statusMessage(`Error: ${e.message}`);

package/src/panels/panel-events.js

@@ -81,12 +81,14 @@ export function registerPanelEvents(panel) {
         document.elementsFromPoint(e.clientX, e.clientY),
       );
 
+      if (!tab) return;
+
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           // Layout element clicked — show layout info instead of selecting in page doc
           if (layoutElements.has(el)) {
             view.layoutSelection = { el, layoutPath: activeLayoutPath };
-            activeTab.value.session.selection = null;
+            tab.session.selection = null;
             renderOnly("rightPanel");
             return;
           }
@@ -94,35 +96,35 @@ export function registerPanelEvents(panel) {
 
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = bubbleInlinePath(tab?.doc.document, originalPath);
+            let path = bubbleInlinePath(tab.doc.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
 
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
-              pathsEqual(path, tab?.session.selection) &&
+              pathsEqual(path, tab.session.selection) &&
               isEditableBlock(resolvedEl) &&
-              (canvasMode === "edit" || tab?.doc.mode === "content")
+              (canvasMode === "edit" || tab.doc.mode === "content")
             ) {
-              activeTab.value.session.ui.activeMedia = newMedia;
+              tab.session.ui.activeMedia = newMedia;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
 
-            if (canvasMode === "design" && tab?.doc.mode !== "content") {
+            if (canvasMode === "design" && tab.doc.mode !== "content") {
               updateUi("pendingInlineEdit", { path, mediaName });
-              activeTab.value.session.ui.activeMedia = newMedia;
-              activeTab.value.session.selection = path;
+              tab.session.ui.activeMedia = newMedia;
+              tab.session.selection = path;
               return;
             }
 
-            activeTab.value.session.ui.activeMedia = newMedia;
-            activeTab.value.session.selection = path;
+            tab.session.ui.activeMedia = newMedia;
+            tab.session.selection = path;
             return;
           }
         }
       }
-      activeTab.value.session.selection = null;
+      tab.session.selection = null;
     },
     opts,
   );
@@ -149,16 +151,18 @@ export function registerPanelEvents(panel) {
         document.elementsFromPoint(e.clientX, e.clientY),
       );
 
+      if (!tab) return;
+
       for (const el of elements) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = bubbleInlinePath(tab?.doc.document, originalPath);
+            const path = bubbleInlinePath(tab.doc.document, originalPath);
             const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
-              activeTab.value.session.ui.activeMedia = newMedia;
-              activeTab.value.session.selection = path;
+              tab.session.ui.activeMedia = newMedia;
+              tab.session.selection = path;
               _ctx.enterInlineEdit(resolvedEl, path);
               return;
             }
@@ -217,18 +221,19 @@ export function registerPanelEvents(panel) {
           return;
       }
       const tab = activeTab.value;
+      if (!tab) return;
       const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
-          path = bubbleInlinePath(tab?.doc.document, path);
-          if (!pathsEqual(path, tab?.session.hover)) {
-            activeTab.value.session.hover = path;
+          path = bubbleInlinePath(tab.doc.document, path);
+          if (!pathsEqual(path, tab.session.hover)) {
+            tab.session.hover = path;
             renderOnly("overlays");
           }
         }
-      } else if (tab?.session.hover) {
-        activeTab.value.session.hover = null;
+      } else if (tab.session.hover) {
+        tab.session.hover = null;
         renderOnly("overlays");
       }
     },

package/src/panels/properties-panel.js

@@ -222,16 +222,16 @@ function renderFrontmatterOnlyPanel() {
       fields.push({ field, entry: fieldSchema, value: fm[field] });
     }
     for (const [field, value] of Object.entries(fm)) {
-      if (!schemaProps[field]) {
-        fields.push({
-          field,
-          entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-          value,
-        });
-      }
+      if (schemaProps[field] || field.startsWith("$")) continue;
+      fields.push({
+        field,
+        entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+        value,
+      });
     }
   } else {
     for (const [field, value] of Object.entries(fm)) {
+      if (field.startsWith("$")) continue;
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
@@ -1656,16 +1656,16 @@ export function renderPropertiesPanelTemplate(ctx) {
               fields.push({ field, entry: fieldSchema, value: fm[field] });
             }
             for (const [field, value] of Object.entries(fm)) {
-              if (!schemaProps[field]) {
-                fields.push({
-                  field,
-                  entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-                  value,
-                });
-              }
+              if (schemaProps[field] || field.startsWith("$")) continue;
+              fields.push({
+                field,
+                entry: { type: typeof value === "boolean" ? "boolean" : "string" },
+                value,
+              });
             }
           } else {
             for (const [field, value] of Object.entries(fm)) {
+              if (field.startsWith("$")) continue;
               fields.push({
                 field,
                 entry: { type: typeof value === "boolean" ? "boolean" : "string" },

package/src/panels/quick-search.js

@@ -0,0 +1,170 @@
+import { html, render as litRender, nothing } from "lit-html";
+import { getPlatform } from "../platform.js";
+import { openFileInTab } from "../files/files.js";
+import { getRecentFiles, trackRecentFile } from "../recent-projects.js";
+
+let _open = false;
+let _query = "";
+/** @type {any[]} */
+let _results = [];
+let _selectedIndex = 0;
+let _debounceTimer = 0;
+
+/** @type {HTMLElement | null} */
+let _container = null;
+
+export function initQuickSearch() {
+  _container = document.createElement("div");
+  _container.style.display = "contents";
+  (document.querySelector("sp-theme") || document.body).appendChild(_container);
+}
+
+export function openQuickSearch() {
+  _open = true;
+  _query = "";
+  _results = [];
+  _selectedIndex = 0;
+  renderOverlay();
+  requestAnimationFrame(() => {
+    const input = _container?.querySelector(".quick-search-input");
+    if (input) /** @type {HTMLInputElement} */ (input).focus();
+  });
+}
+
+export function closeQuickSearch() {
+  _open = false;
+  renderOverlay();
+}
+
+async function doSearch(/** @type {string} */ query) {
+  if (!query.trim()) {
+    _results = [];
+    _selectedIndex = 0;
+    renderOverlay();
+    return;
+  }
+  try {
+    const platform = getPlatform();
+    _results = await platform.searchFiles(query.trim().toLowerCase());
+    _selectedIndex = 0;
+    renderOverlay();
+  } catch {
+    _results = [];
+    renderOverlay();
+  }
+}
+
+function onInput(/** @type {Event} */ e) {
+  _query = /** @type {HTMLInputElement} */ (e.target).value;
+  clearTimeout(_debounceTimer);
+  _debounceTimer = /** @type {any} */ (setTimeout(() => doSearch(_query), 150));
+  renderOverlay();
+}
+
+function onKeydown(/** @type {KeyboardEvent} */ e) {
+  const items = _query.trim() ? _results : getRecentFiles();
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      _selectedIndex = Math.min(_selectedIndex + 1, items.length - 1);
+      renderOverlay();
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      _selectedIndex = Math.max(_selectedIndex - 1, 0);
+      renderOverlay();
+      break;
+    case "Enter":
+      e.preventDefault();
+      if (items[_selectedIndex]) selectItem(items[_selectedIndex]);
+      break;
+    case "Escape":
+      e.preventDefault();
+      closeQuickSearch();
+      break;
+  }
+}
+
+function selectItem(/** @type {any} */ item) {
+  closeQuickSearch();
+  const path = item.path;
+  trackRecentFile({ path, name: path.split("/").pop() });
+  openFileInTab(path);
+}
+
+function fileIcon(/** @type {string} */ name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "json":
+      return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
+    case "md":
+      return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+    default:
+      return html`<sp-icon-document size="s"></sp-icon-document>`;
+  }
+}
+
+function dirPart(/** @type {string} */ path) {
+  const parts = path.split("/");
+  parts.pop();
+  return parts.length ? parts.join("/") : "";
+}
+
+function renderOverlay() {
+  if (!_container) return;
+  if (!_open) {
+    litRender(nothing, _container);
+    return;
+  }
+
+  const recentFiles = getRecentFiles();
+  const showRecent = !_query.trim();
+  const items = showRecent ? recentFiles : _results;
+
+  const tpl = html`
+    <div class="quick-search-overlay" @click=${closeQuickSearch}>
+      <div class="quick-search-panel" @click=${(/** @type {Event} */ e) => e.stopPropagation()}>
+        <input
+          class="quick-search-input"
+          type="text"
+          placeholder="Search project files…"
+          .value=${_query}
+          @input=${onInput}
+          @keydown=${onKeydown}
+        />
+        <div class="quick-search-results">
+          ${items.length === 0 && _query.trim()
+            ? html`<div class="quick-search-empty">No results</div>`
+            : nothing}
+          ${items.length === 0 && !_query.trim() && recentFiles.length === 0
+            ? html`<div class="quick-search-empty">Type to search project files</div>`
+            : nothing}
+          ${showRecent && recentFiles.length
+            ? html`<div class="quick-search-section-label">Recently opened</div>`
+            : nothing}
+          ${items.map(
+            (item, i) => html`
+              <div
+                class="quick-search-item ${i === _selectedIndex ? "selected" : ""}"
+                @click=${() => selectItem(item)}
+                @mouseenter=${() => {
+                  _selectedIndex = i;
+                  renderOverlay();
+                }}
+              >
+                <span class="quick-search-icon"
+                  >${fileIcon(item.name || item.path.split("/").pop())}</span
+                >
+                <span class="quick-search-name">${item.name || item.path.split("/").pop()}</span>
+                <span class="quick-search-path">${dirPart(item.path)}</span>
+                ${showRecent ? html`<span class="quick-search-badge">recent</span>` : nothing}
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+    </div>
+  `;
+
+  litRender(tpl, _container);
+}

package/src/panels/toolbar.js

@@ -11,6 +11,8 @@ import { activeTab } from "../workspace/workspace.js";
 import { getEffectiveMedia } from "../site-context.js";
 import { mediaDisplayName } from "./shared.js";
 import { view } from "../view.js";
+import { getRecentProjects } from "../recent-projects.js";
+import { openQuickSearch } from "./quick-search.js";
 
 /** @type {HTMLElement | null} */
 let _rootEl = null;
@@ -62,6 +64,9 @@ function tbBtnTpl(label, onClick, iconTag) {
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
+  if (/** @type {any} */ (globalThis).__jxPlatform?.windowControls) {
+    rootEl.classList.add("electrobun-webkit-app-region-drag");
+  }
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -226,10 +231,60 @@ function toolbarTemplate() {
     </sp-action-group>
   `;
 
+  const windowControls = /** @type {any} */ (globalThis).__jxPlatform?.windowControls;
+  const csdTpl = windowControls
+    ? html`
+        <sp-action-group class="window-controls" size="s">
+          <sp-action-button
+            quiet
+            size="s"
+            title="Minimize"
+            @click=${() => windowControls.minimize()}
+          >
+            <sp-icon-remove slot="icon"></sp-icon-remove>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Maximize"
+            @click=${() => windowControls.maximize()}
+          >
+            <sp-icon-full-screen slot="icon"></sp-icon-full-screen>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Close"
+            class="csd-close"
+            @click=${() => windowControls.close()}
+          >
+            <sp-icon-close slot="icon"></sp-icon-close>
+          </sp-action-button>
+        </sp-action-group>
+      `
+    : nothing;
+
+  const recentProjects = getRecentProjects();
+  const recentProjectsTpl = recentProjects.length
+    ? html`
+        <overlay-trigger placement="bottom-start">
+          <sp-action-button size="s" slot="trigger" title="Recent projects">
+            <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+          </sp-action-button>
+          <sp-popover slot="click-content" tip>
+            <sp-menu @change=${(/** @type {any} */ e) => _ctx.openRecentProject(e.target.value)}>
+              ${recentProjects.map(
+                (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
+              )}
+            </sp-menu>
+          </sp-popover>
+        </overlay-trigger>
+      `
+    : nothing;
+
   return html`
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")}
-      ${tbBtnTpl("Open File", _ctx.openFile, "sp-icon-document")}
+      ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")} ${recentProjectsTpl}
       ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
@@ -237,17 +292,11 @@ function toolbarTemplate() {
       ${tbBtnTpl("Redo", () => tabRedo(activeTab.value), "sp-icon-redo")}
     </sp-action-group>
     <div class="tb-spacer"></div>
-    ${S.documentPath
-      ? html`<span class="tb-file-title" title=${S.documentPath}
-          >${S.documentPath}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
-        >`
-      : S.fileHandle
-        ? html`<span class="tb-file-title"
-            >${S.fileHandle.name}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
-          >`
-        : nothing}
-    ${breadcrumbTpl}
+    <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
+      <sp-icon-search slot="icon"></sp-icon-search>
+      <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
+    </sp-action-button>
     <div class="tb-spacer"></div>
-    ${togglesTpl} ${modeSwitcherTpl}
+    ${breadcrumbTpl} ${togglesTpl} ${modeSwitcherTpl} ${csdTpl}
   `;
 }

package/src/platforms/devserver.js

@@ -315,6 +315,18 @@ export function createDevServerPlatform() {
       return null;
     },
 
+    /** @param {string} query */
+    async searchFiles(query) {
+      const glob = `**/*${query}*.{json,md}`;
+      const res = await fetch(
+        `/__studio/files?dir=${encodeURIComponent(serverPath("."))}&glob=${encodeURIComponent(glob)}`,
+      );
+      if (!res.ok) return [];
+      const entries = await res.json();
+      for (const e of entries) e.path = stripRoot(e.path);
+      return entries;
+    },
+
     // ─── Plugin schema ────────────────────────────────────────────────────
 
     /**