@jxsuite/studio 0.16.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.15.0",
+    "@jxsuite/runtime": "^0.18.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

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-render.js

@@ -173,8 +173,8 @@ export function renderCanvas() {
     return;
   }
 
-  // Settings mode: render element catalog with panzoom surface
-  if (canvasMode === "settings") {
+  // Stylebook mode: render element catalog with panzoom surface
+  if (canvasMode === "stylebook") {
     renderStylebookMode({
       canvasPanelTemplate,
       applyTransform,

package/src/canvas/canvas-utils.js

@@ -170,7 +170,7 @@ export function applyTransform() {
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
   renderZoomIndicator();
   renderOnly("overlays");
-  if (_ctx.getCanvasMode() === "settings") _ctx.renderStylebookOverlays();
+  if (_ctx.getCanvasMode() === "stylebook") _ctx.renderStylebookOverlays();
 }
 
 /** Calculate zoom + pan to fit all panels within the viewport. */

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,16 @@ 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, replaceAllTabs } from "../workspace/workspace.js";
+import {
+  workspace,
+  openTab,
+  activateTab,
+  replaceAllTabs,
+  activeTab,
+} 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 +39,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 +138,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 +641,13 @@ export async function openFileInTab(path) {
       sourceFormat: path.endsWith(".md") ? "md" : null,
     });
     projectState.selectedPath = path;
+    trackRecentFile({ path, name: path.split("/").pop() || path });
+
+    if (path === "project.json") {
+      const tab = activeTab.value;
+      if (tab) tab.session.ui.canvasMode = "stylebook";
+    }
+
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (/** @type {any} */ e) {
     statusMessage(`Error: ${e.message}`);

package/src/panels/activity-bar.js

@@ -5,6 +5,7 @@ import { activityBar, renderOnly } from "../store.js";
 import { effect, effectScope } from "../reactivity.js";
 import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
+import { openSettingsModal } from "../settings/settings-modal.js";
 
 /** @type {import("@vue/reactivity").EffectScope | null} */
 let _scope = null;
@@ -113,6 +114,17 @@ export function renderActivityBar() {
         `,
       )}
     </sp-tabs>
+    <div style="margin-top:auto;padding:8px 0;display:flex;justify-content:center">
+      <sp-action-button
+        quiet
+        size="m"
+        title="Settings"
+        aria-label="Settings"
+        @click=${() => openSettingsModal()}
+      >
+        <sp-icon-gears slot="icon"></sp-icon-gears>
+      </sp-action-button>
+    </div>
   `;
   litRender(tpl, /** @type {any} */ (activityBar));
 }

package/src/panels/left-panel.js

@@ -131,7 +131,7 @@ function _render() {
   let content;
   if (tab === "layers")
     content =
-      ctx.getCanvasMode() === "settings"
+      ctx.getCanvasMode() === "stylebook"
         ? renderStylebookLayersTemplate({
             selectStylebookTag,
             stylebookMeta,
@@ -197,7 +197,7 @@ function _render() {
   litRender(html`<div class="panel-body">${content}</div>`, leftPanel);
 
   // Post-render side effects
-  if (tab === "layers" && ctx.getCanvasMode() !== "settings") ctx.registerLayersDnD();
+  if (tab === "layers" && ctx.getCanvasMode() !== "stylebook") ctx.registerLayersDnD();
   else if (tab === "imports") {
     /* no post-render DnD needed */
   } else if (tab === "blocks") {

package/src/panels/overlays.js

@@ -83,7 +83,7 @@ function _flush() {
   const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx.getCanvasMode();
 
-  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "settings") {
+  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "stylebook") {
     for (const p of canvasPanels) {
       litRender(nothing, p.overlay);
       p.overlayClk.style.pointerEvents = "none";
@@ -95,7 +95,7 @@ function _flush() {
     return;
   }
 
-  if (canvasMode === "settings") {
+  if (canvasMode === "stylebook") {
     const enable = stylebookTab === "elements";
     for (const p of canvasPanels) {
       p.overlayClk.style.pointerEvents = enable ? "" : "none";

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/style-panel.js

@@ -620,7 +620,7 @@ function styleSidebarTemplate(node, activeMediaTab, activeSelector) {
 export function renderStylePanelTemplate(ctx) {
   const tab = activeTab.value;
   if (!tab) return html`<div class="empty-state">No document loaded</div>`;
-  if (ctx.getCanvasMode() === "settings" && tab.session.ui.stylebookSelection) {
+  if (ctx.getCanvasMode() === "stylebook" && tab.session.ui.stylebookSelection) {
     const node = tab.doc.document;
     if (!node) return html`<div class="empty-state">No document loaded</div>`;
     return html`