@jxsuite/studio 0.16.1 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.16.1",
+  "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/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

@@ -18,6 +18,7 @@ import { loadComponentRegistry } from "./components.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();
@@ -131,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}`);
@@ -633,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/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 ────────────────────────────────────────────────────
 
     /**

package/src/recent-projects.js

@@ -0,0 +1,57 @@
+const STORAGE_KEY = "jx-studio-recent-projects";
+const FILES_STORAGE_KEY = "jx-studio-recent-files";
+const MAX_RECENT = 8;
+const MAX_RECENT_FILES = 10;
+
+/**
+ * @typedef {{ name: string; root: string; timestamp: number }} RecentProject
+ *
+ * @typedef {{ path: string; name: string; timestamp: number }} RecentFile
+ */
+
+/** @returns {RecentProject[]} */
+export function getRecentProjects() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    return /** @type {RecentProject[]} */ (JSON.parse(raw)).sort(
+      (a, b) => b.timestamp - a.timestamp,
+    );
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * @param {string} name
+ * @param {string} root
+ */
+export function addRecentProject(name, root) {
+  const projects = getRecentProjects().filter((p) => p.root !== root);
+  projects.unshift({ name, root, timestamp: Date.now() });
+  if (projects.length > MAX_RECENT) projects.length = MAX_RECENT;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+}
+
+export function clearRecentProjects() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+/** @returns {RecentFile[]} */
+export function getRecentFiles() {
+  try {
+    const raw = localStorage.getItem(FILES_STORAGE_KEY);
+    if (!raw) return [];
+    return /** @type {RecentFile[]} */ (JSON.parse(raw)).sort((a, b) => b.timestamp - a.timestamp);
+  } catch {
+    return [];
+  }
+}
+
+/** @param {{ path: string; name: string }} file */
+export function trackRecentFile(file) {
+  const recent = getRecentFiles().filter((f) => f.path !== file.path);
+  recent.unshift({ path: file.path, name: file.name, timestamp: Date.now() });
+  if (recent.length > MAX_RECENT_FILES) recent.length = MAX_RECENT_FILES;
+  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(recent));
+}

package/src/studio.js

@@ -16,7 +16,7 @@ import {
   updateUi,
 } from "./store.js";
 
-import { activeTab, openTab } from "./workspace/workspace.js";
+import { activeTab, openTab, replaceAllTabs } from "./workspace/workspace.js";
 import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "./tabs/transact.js";
 import { effect } from "./reactivity.js";
 
@@ -35,19 +35,14 @@ import {
   setStatusbarRenderer,
   mountStatusbar,
 } from "./panels/statusbar.js";
-import {
-  openFile,
-  loadMarkdown,
-  saveFile,
-  exportFile,
-  serializeDocument,
-} from "./files/file-ops.js";
+import { loadMarkdown, saveFile, exportFile, serializeDocument } from "./files/file-ops.js";
 import {
   loadProject as _loadProject,
   openProject as _openProject,
   renderFilesTemplate as _renderFilesTemplate,
   openFileInTab,
   setupTreeKeyboard,
+  loadDirectory,
 } from "./files/files.js";
 import { renderImportsTemplate } from "./panels/imports-panel.js";
 import { renderHeadTemplate } from "./panels/head-panel.js";
@@ -86,6 +81,8 @@ import { renderBlockActionBar, initBlockActionBar } from "./panels/block-action-
 import { initCssData } from "./panels/style-utils.js";
 import { updateForcedPseudoPreview } from "./panels/pseudo-preview.js";
 import { initPanelEvents } from "./panels/panel-events.js";
+import { initQuickSearch } from "./panels/quick-search.js";
+import { addRecentProject } from "./recent-projects.js";
 
 // ─── Globals ──────────────────────────────────────────────────────────────────
 // These mutable variables are local to studio.js for now. As sections are extracted
@@ -260,7 +257,7 @@ toolbarPanel.mount(toolbarEl, {
   navigateBack: () => navigateBack(),
   closeFunctionEditor: () => closeFunctionEditor(),
   openProject: () => openProject(),
-  openFile: () => openFile(),
+  openRecentProject: (/** @type {string} */ root) => openRecentProject(root),
   saveFile: () => saveFile(),
   parseMediaEntries,
   getCanvasMode,
@@ -269,6 +266,8 @@ toolbarPanel.mount(toolbarEl, {
   safeRenderRightPanel: () => safeRenderRightPanel(),
 });
 
+initQuickSearch();
+
 tabStrip.mount(/** @type {HTMLElement} */ (document.querySelector("#tab-strip")));
 
 overlaysPanel.mount({
@@ -543,6 +542,56 @@ function openProject() {
     renderLeftPanel,
   });
 }
+async function openRecentProject(/** @type {string} */ root) {
+  try {
+    const platform = getPlatform();
+    platform.projectRoot = root;
+    const content = await platform.readFile("project.json");
+    const config = JSON.parse(content);
+
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+
+    setProjectState({
+      ...projectState,
+      projectRoot: root,
+      isSiteProject: true,
+      projectConfig: config,
+      name: config.name || root.split("/").pop(),
+      dirs: new Map(),
+      expanded: new Set(),
+      selectedPath: null,
+      searchQuery: "",
+    });
+
+    await loadDirectory(".");
+    await loadComponentRegistry();
+
+    const conventionalDirs = [
+      "pages",
+      "layouts",
+      "components",
+      "content",
+      "data",
+      "public",
+      "styles",
+    ];
+    const entries = projectState.dirs.get(".") || [];
+    for (const e of entries) {
+      if (e.type === "directory" && conventionalDirs.includes(e.name)) {
+        projectState.expanded.add(e.path || e.name);
+        await loadDirectory(e.path || e.name);
+      }
+    }
+
+    addRecentProject(projectState.name, root);
+    view.leftTab = "files";
+    renderActivityBar();
+    renderLeftPanel();
+    statusMessage(`Opened project: ${projectState.name}`);
+  } catch (/** @type {any} */ e) {
+    statusMessage(`Error: ${e.message}`);
+  }
+}
 function renderFilesTemplate() {
   return _renderFilesTemplate({ openProject, openFileFromTree, renderLeftPanel });
 }

package/src/ui/spectrum.js

@@ -114,6 +114,7 @@ import { IconDistributeHorizontalCenter } from "@spectrum-web-components/icons-w
 import { IconTextBaselineShift } from "@spectrum-web-components/icons-workflow/src/elements/IconTextBaselineShift.js";
 import { IconFlipVertical } from "@spectrum-web-components/icons-workflow/src/elements/IconFlipVertical.js";
 import { IconRemove } from "@spectrum-web-components/icons-workflow/src/elements/IconRemove.js";
+import { IconFullScreen } from "@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js";
 import { IconViewColumn } from "@spectrum-web-components/icons-workflow/src/elements/IconViewColumn.js";
 import { IconBox } from "@spectrum-web-components/icons-workflow/src/elements/IconBox.js";
 import { IconVisibility } from "@spectrum-web-components/icons-workflow/src/elements/IconVisibility.js";
@@ -244,6 +245,7 @@ const components = [
   ["sp-icon-text-baseline-shift", IconTextBaselineShift],
   ["sp-icon-flip-vertical", IconFlipVertical],
   ["sp-icon-remove", IconRemove],
+  ["sp-icon-full-screen", IconFullScreen],
   ["sp-icon-download", IconDownload],
   ["sp-icon-checkmark", IconCheckmark],
   ["sp-icon-view-column", IconViewColumn],