@jxsuite/studio 0.31.1 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -34,9 +34,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
-    "@jxsuite/parser": "^0.31.1",
-    "@jxsuite/runtime": "^0.31.1",
-    "@jxsuite/schema": "^0.31.1",
+    "@jxsuite/parser": "^0.32.0",
+    "@jxsuite/runtime": "^0.32.0",
+    "@jxsuite/schema": "^0.32.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/files/files.ts

@@ -95,6 +95,7 @@ export async function loadProject() {
     });
 
     if (info.isSiteProject) {
+      addRecentProject(requireProjectState().name, meta.root);
       await ensureDependenciesInstalled();
       await loadDirectory(".");
       await loadComponentRegistry();
@@ -1053,7 +1054,11 @@ export async function openFileInTab(path: string) {
       sourceFormat: format?.name ?? null,
     });
     requireProjectState().selectedPath = path;
-    trackRecentFile({ name: path.split("/").pop() || path, path });
+    trackRecentFile({
+      name: path.split("/").pop() || path,
+      path,
+      root: requireProjectState().projectRoot,
+    });
 
     statusMessage(`Opened ${path.split("/").pop()}`);
   } catch (error) {

package/src/panels/quick-search.ts

@@ -4,15 +4,37 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { live } from "lit-html/directives/live.js";
 import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform";
+import { projectState } from "../store";
 import { documentExtensions, formatByExtension, loadFormats } from "../format/format-host";
 import { openFileInTab } from "../files/files";
-import { getRecentFiles, trackRecentFile } from "../recent-projects";
+import { getRecentFiles, getRecentProjects, trackRecentFile } from "../recent-projects";
 import { getLayerSlot } from "../ui/layers";
 
+/**
+ * A row in the Quick Access modal. With a project open the modal lists/searches that project's
+ * files; with no project open it lists recent projects to re-open. The two never mix — the modal
+ * only ever shows files from the current project.
+ */
+interface FileItem {
+  kind: "file";
+  path: string;
+  name: string;
+}
+interface ProjectItem {
+  kind: "project";
+  root: string;
+  name: string;
+}
+type QuickItem = FileItem | ProjectItem;
+
+interface QuickCtx {
+  openRecentProject: (root: string) => void | Promise<void>;
+}
+
+let _ctx: QuickCtx | null = null;
 let _open = false;
 let _query = "";
-/** @type {{ path: string; name?: string }[]} */
-let _results: { path: string; name?: string }[] = [];
+let _results: FileItem[] = [];
 let _selectedIndex = 0;
 let _debounceTimer = 0;
 
@@ -21,8 +43,9 @@ function getContainer() {
   return getLayerSlot("popover", "quick-search");
 }
 
-export function initQuickSearch() {
-  // No-op — container is now provided by the layer system
+/** @param {QuickCtx} [ctx] */
+export function initQuickSearch(ctx?: QuickCtx) {
+  _ctx = ctx ?? null;
 }
 
 export function openQuickSearch() {
@@ -38,6 +61,39 @@ export function closeQuickSearch() {
   renderOverlay();
 }
 
+/** The project root scoping the modal, or null when no project is open. */
+function scopeRoot(): string | null {
+  return projectState ? (projectState.projectRoot ?? null) : null;
+}
+
+/**
+ * Resolve the rows to display for the current query/mode. File search is async (populates
+ * `_results`); recent files and recent-project filtering are synchronous.
+ */
+function currentItems(): { items: QuickItem[]; showingRecent: boolean } {
+  const q = _query.trim();
+  if (!projectState) {
+    // No project open → offer recent projects to re-open, filtered by the query.
+    const needle = q.toLowerCase();
+    const projects = getRecentProjects().filter(
+      (p) =>
+        !needle || p.name.toLowerCase().includes(needle) || p.root.toLowerCase().includes(needle),
+    );
+    return {
+      items: projects.map((p) => ({ kind: "project", name: p.name, root: p.root })),
+      showingRecent: !q,
+    };
+  }
+  if (!q) {
+    const recent = getRecentFiles(scopeRoot() ?? undefined);
+    return {
+      items: recent.map((f) => ({ kind: "file", name: f.name, path: f.path })),
+      showingRecent: true,
+    };
+  }
+  return { items: _results, showingRecent: false };
+}
+
 async function doSearch(query: string) {
   if (!query.trim()) {
     _results = [];
@@ -48,7 +104,12 @@ async function doSearch(query: string) {
   try {
     const platform = getPlatform();
     await loadFormats();
-    _results = await platform.searchFiles(query.trim().toLowerCase(), documentExtensions());
+    const hits = await platform.searchFiles(query.trim().toLowerCase(), documentExtensions());
+    _results = hits.map((h) => ({
+      kind: "file",
+      name: h.name ?? h.path.split("/").pop() ?? "",
+      path: h.path,
+    }));
     _selectedIndex = 0;
     renderOverlay();
   } catch {
@@ -60,12 +121,16 @@ async function doSearch(query: string) {
 function onInput(e: Event) {
   _query = (e.target as HTMLInputElement).value;
   clearTimeout(_debounceTimer);
-  _debounceTimer = setTimeout(() => doSearch(_query), 150) as unknown as number;
+  // Only file search needs the backend (and debouncing); recent-project filtering is synchronous.
+  if (projectState) {
+    _debounceTimer = setTimeout(() => doSearch(_query), 150) as unknown as number;
+  }
+  _selectedIndex = 0;
   renderOverlay();
 }
 
 function onKeydown(e: KeyboardEvent) {
-  const items = _query.trim() ? _results : getRecentFiles();
+  const { items } = currentItems();
   switch (e.key) {
     case "ArrowDown": {
       e.preventDefault();
@@ -97,11 +162,14 @@ function onKeydown(e: KeyboardEvent) {
   }
 }
 
-function selectItem(item: { path: string; name?: string }) {
+function selectItem(item: QuickItem) {
   closeQuickSearch();
-  const { path } = item;
-  trackRecentFile({ name: path.split("/").pop() || "", path });
-  void openFileInTab(path);
+  if (item.kind === "project") {
+    void _ctx?.openRecentProject(item.root);
+    return;
+  }
+  trackRecentFile({ name: item.name, path: item.path, root: scopeRoot() ?? "" });
+  void openFileInTab(item.path);
 }
 
 function fileIcon(name: string) {
@@ -121,6 +189,14 @@ function dirPart(path: string) {
   return parts.length > 0 ? parts.join("/") : "";
 }
 
+/** Collapse a home-prefixed absolute path for compact display. */
+function shortenPath(path: string) {
+  if (path.startsWith("/home/")) {
+    return `~/${path.split("/").slice(3).join("/")}`;
+  }
+  return path;
+}
+
 function renderOverlay() {
   const container = getContainer();
   if (!_open) {
@@ -128,9 +204,15 @@ function renderOverlay() {
     return;
   }
 
-  const recentFiles = getRecentFiles();
-  const showRecent = !_query.trim();
-  const items = showRecent ? recentFiles : _results;
+  const hasProject = projectState != null;
+  const { items, showingRecent } = currentItems();
+  const hasQuery = _query.trim().length > 0;
+
+  const placeholder = hasProject ? "Search project files…" : "Open a recent project…";
+  const sectionLabel = hasProject ? "Recently opened" : "Recent projects";
+  const emptyHint = hasProject
+    ? "Type to search project files"
+    : "No recent projects — open one to get started";
 
   const tpl = html`
     <div class="quick-search-overlay" @click=${closeQuickSearch}>
@@ -138,7 +220,7 @@ function renderOverlay() {
         <input
           class="quick-search-input"
           type="text"
-          placeholder="Search project files…"
+          placeholder=${placeholder}
           .value=${live(_query)}
           @input=${onInput}
           @keydown=${onKeydown}
@@ -149,17 +231,22 @@ function renderOverlay() {
           })}
         />
         <div class="quick-search-results">
-          ${items.length === 0 && _query.trim()
+          ${items.length === 0 && hasQuery
             ? 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>`
+          ${items.length === 0 && !hasQuery
+            ? html`<div class="quick-search-empty">${emptyHint}</div>`
             : nothing}
-          ${showRecent && recentFiles.length > 0
-            ? html`<div class="quick-search-section-label">Recently opened</div>`
+          ${showingRecent && items.length > 0
+            ? html`<div class="quick-search-section-label">${sectionLabel}</div>`
             : nothing}
-          ${items.map(
-            (item, i) => html`
+          ${items.map((item, i) => {
+            const icon =
+              item.kind === "project"
+                ? html`<sp-icon-folder-open size="s"></sp-icon-folder-open>`
+                : fileIcon(item.name);
+            const pathText = item.kind === "project" ? shortenPath(item.root) : dirPart(item.path);
+            return html`
               <div
                 class=${classMap({
                   "quick-search-item": true,
@@ -171,15 +258,13 @@ function renderOverlay() {
                   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}
+                <span class="quick-search-icon">${icon}</span>
+                <span class="quick-search-name">${item.name}</span>
+                <span class="quick-search-path">${pathText}</span>
+                ${showingRecent ? html`<span class="quick-search-badge">recent</span>` : nothing}
               </div>
-            `,
-          )}
+            `;
+          })}
         </div>
       </div>
     </div>

package/src/panels/toolbar.ts

@@ -10,7 +10,7 @@ import { redo as tabRedo, undo as tabUndo } from "../tabs/transact";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { applyPanelCollapse, view } from "../view";
-import { getRecentProjects } from "../recent-projects";
+import { clearRecentProjects, getRecentProjects, removeRecentProject } from "../recent-projects";
 import { openQuickSearch } from "./quick-search";
 import { getPlatform } from "../platform";
 import { refreshGitStatus } from "./git-panel";
@@ -61,8 +61,8 @@ const toolbarIconMap = {
  */
 function tbBtnTpl(label: string, onClick: () => void, iconTag?: string) {
   return html`
-    <sp-action-button size="s" @click=${onClick}>
-      ${iconTag ? toolbarIconMap[iconTag] : nothing} ${label}
+    <sp-action-button size="s" title=${label} @click=${onClick}>
+      ${iconTag ? toolbarIconMap[iconTag] : nothing}<span class="tb-label">${label}</span>
     </sp-action-button>
   `;
 }
@@ -131,10 +131,15 @@ async function handleNewProject() {
   }
 }
 
-/** @param {ToolbarCtx} ctx */
-function minimalToolbarTemplate(ctx: ToolbarCtx) {
+/**
+ * The chevron dropdown beside "Open Project": New Project, the recent-projects list (each with a
+ * remove affordance), and a clear-all action. Shared by both the minimal and full toolbars.
+ *
+ * @param {ToolbarCtx} ctx
+ */
+function recentMenuTpl(ctx: ToolbarCtx) {
   const recentProjects = getRecentProjects();
-  const recentProjectsTpl = html`
+  return html`
     <overlay-trigger placement="bottom-start" triggered-by="click">
       <sp-action-button size="s" slot="trigger" title="Recent projects" class="tb-split-trigger">
         <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
@@ -145,6 +150,9 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
             const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
               void handleNewProject();
+            } else if (val === "__clear__") {
+              clearRecentProjects();
+              render();
             } else {
               void ctx.openRecentProject(val);
             }
@@ -152,14 +160,41 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
         >
           <sp-menu-item value="__new__">New Project…</sp-menu-item>
           ${recentProjects.length > 0
-            ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
-                  (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
-                )}`
+            ? html`
+                <sp-menu-divider></sp-menu-divider>
+                ${recentProjects.map(
+                  (p) => html`
+                    <sp-menu-item value=${p.root} title=${p.root}>
+                      ${p.name}
+                      <sp-action-button
+                        slot="end"
+                        quiet
+                        size="s"
+                        title="Remove from recent"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          removeRecentProject(p.root);
+                          render();
+                        }}
+                      >
+                        <sp-icon-close slot="icon"></sp-icon-close>
+                      </sp-action-button>
+                    </sp-menu-item>
+                  `,
+                )}
+                <sp-menu-divider></sp-menu-divider>
+                <sp-menu-item value="__clear__">Clear recent projects</sp-menu-item>
+              `
             : nothing}
         </sp-menu>
       </sp-popover>
     </overlay-trigger>
   `;
+}
+
+/** @param {ToolbarCtx} ctx */
+function minimalToolbarTemplate(ctx: ToolbarCtx) {
+  const recentProjectsTpl = recentMenuTpl(ctx);
 
   const windowControls = (
     globalThis as unknown as {
@@ -206,25 +241,36 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
 
   return html`
     <div class="tb-split-btn">
-      <sp-action-button size="s" class="tb-split-main" @click=${ctx.openProject}>
-        ${toolbarIconMap["sp-icon-folder-open"]} Open Project
+      <sp-action-button
+        size="s"
+        class="tb-split-main"
+        title="Open Project"
+        @click=${ctx.openProject}
+      >
+        ${toolbarIconMap["sp-icon-folder-open"]}<span class="tb-label">Open Project</span>
       </sp-action-button>
       ${recentProjectsTpl}
     </div>
     ${tbBtnTpl("Manage", openBrowseModal, "sp-icon-view-list")}
-    <sp-action-button size="s" disabled>
-      ${toolbarIconMap["sp-icon-save-floppy"]} Save
+    <sp-action-button size="s" title="Save" disabled>
+      ${toolbarIconMap["sp-icon-save-floppy"]}<span class="tb-label">Save</span>
     </sp-action-button>
     <sp-action-group compact size="s">
-      <sp-action-button size="s" disabled>
-        ${toolbarIconMap["sp-icon-undo"]} Undo
+      <sp-action-button size="s" title="Undo" disabled>
+        ${toolbarIconMap["sp-icon-undo"]}<span class="tb-label">Undo</span>
       </sp-action-button>
-      <sp-action-button size="s" disabled>
-        ${toolbarIconMap["sp-icon-redo"]} Redo
+      <sp-action-button size="s" title="Redo" disabled>
+        ${toolbarIconMap["sp-icon-redo"]}<span class="tb-label">Redo</span>
       </sp-action-button>
     </sp-action-group>
     <div class="tb-spacer"></div>
-    <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
+    <sp-action-button
+      class="tb-search-trigger"
+      size="s"
+      quiet
+      title="Search files (⌘P)"
+      @click=${openQuickSearch}
+    >
       <sp-icon-search slot="icon"></sp-icon-search>
       <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
     </sp-action-button>
@@ -232,8 +278,8 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
     <sp-action-group selects="single" size="s" compact>
       ${modes.map(
         (m) => html`
-          <sp-action-button size="s" disabled ?selected=${m.key === "design"}>
-            ${toolbarIconMap[m.iconTag]}${m.label}
+          <sp-action-button size="s" title=${m.label} disabled ?selected=${m.key === "design"}>
+            ${toolbarIconMap[m.iconTag]}<span class="tb-label">${m.label}</span>
           </sp-action-button>
         `,
       )}
@@ -295,6 +341,7 @@ function toolbarTemplate() {
         (m) => html`
           <sp-action-button
             size="s"
+            title=${m.label}
             ?selected=${canvasMode === m.key}
             ?disabled=${!allowedModes.has(m.key)}
             @click=${() => {
@@ -323,7 +370,7 @@ function toolbarTemplate() {
               ctx.safeRenderRightPanel();
             }}
           >
-            ${toolbarIconMap[m.iconTag]}${m.label}
+            ${toolbarIconMap[m.iconTag]}<span class="tb-label">${m.label}</span>
           </sp-action-button>
         `,
       )}
@@ -408,69 +455,65 @@ function toolbarTemplate() {
         `
     : nothing;
 
-  const recentProjects = getRecentProjects();
-  const recentProjectsTpl = html`
-    <overlay-trigger placement="bottom-start" triggered-by="click">
-      <sp-action-button size="s" slot="trigger" title="Recent projects" class="tb-split-trigger">
-        <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
-      </sp-action-button>
-      <sp-popover slot="click-content" tip>
-        <sp-menu
-          @change=${(e: Event) => {
-            const val = (e.target as unknown as HTMLInputElement).value;
-            if (val === "__new__") {
-              void handleNewProject();
-            } else {
-              void ctx.openRecentProject(val);
-            }
-          }}
-        >
-          <sp-menu-item value="__new__">New Project…</sp-menu-item>
-          ${recentProjects.length > 0
-            ? html`<sp-menu-divider></sp-menu-divider> ${recentProjects.map(
-                  (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
-                )}`
-            : nothing}
-        </sp-menu>
-      </sp-popover>
-    </overlay-trigger>
-  `;
+  const recentProjectsTpl = recentMenuTpl(ctx);
 
   return html`
     ${isMac ? csdTpl : nothing}
     <div class="tb-split-btn">
-      <sp-action-button size="s" class="tb-split-main" @click=${ctx.openProject}>
-        ${toolbarIconMap["sp-icon-folder-open"]} Open Project
+      <sp-action-button
+        size="s"
+        class="tb-split-main"
+        title="Open Project"
+        @click=${ctx.openProject}
+      >
+        ${toolbarIconMap["sp-icon-folder-open"]}<span class="tb-label">Open Project</span>
       </sp-action-button>
       ${recentProjectsTpl}
     </div>
     ${tbBtnTpl("Manage", openBrowseModal, "sp-icon-view-list")}
-    <sp-action-button size="s" ?disabled=${!canSave} @click=${ctx.saveFile}>
-      ${toolbarIconMap["sp-icon-save-floppy"]} Save
+    <sp-action-button size="s" title="Save" ?disabled=${!canSave} @click=${ctx.saveFile}>
+      ${toolbarIconMap["sp-icon-save-floppy"]}<span class="tb-label">Save</span>
     </sp-action-button>
     <sp-action-group compact size="s">
-      <sp-action-button size="s" ?disabled=${!canUndo} @click=${() => tabUndo(activeTab.value!)}>
-        ${toolbarIconMap["sp-icon-undo"]} Undo
+      <sp-action-button
+        size="s"
+        title="Undo"
+        ?disabled=${!canUndo}
+        @click=${() => tabUndo(activeTab.value!)}
+      >
+        ${toolbarIconMap["sp-icon-undo"]}<span class="tb-label">Undo</span>
       </sp-action-button>
-      <sp-action-button size="s" ?disabled=${!canRedo} @click=${() => tabRedo(activeTab.value!)}>
-        ${toolbarIconMap["sp-icon-redo"]} Redo
+      <sp-action-button
+        size="s"
+        title="Redo"
+        ?disabled=${!canRedo}
+        @click=${() => tabRedo(activeTab.value!)}
+      >
+        ${toolbarIconMap["sp-icon-redo"]}<span class="tb-label">Redo</span>
       </sp-action-button>
     </sp-action-group>
     <div class="tb-spacer"></div>
-    <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
+    <sp-action-button
+      class="tb-search-trigger"
+      size="s"
+      quiet
+      title="Search files (⌘P)"
+      @click=${openQuickSearch}
+    >
       <sp-icon-search slot="icon"></sp-icon-search>
       <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
     </sp-action-button>
     ${(activeTab.value?.session.ui.gitStatus?.behind ?? 0) > 0
       ? html`<sp-action-button
           size="s"
+          title="Sync Project"
           @click=${async () => {
             await getPlatform().gitPull();
             await refreshGitStatus();
           }}
         >
           <sp-icon-download slot="icon"></sp-icon-download>
-          Sync Project
+          <span class="tb-label">Sync Project</span>
         </sp-action-button>`
       : nothing}
     <div class="tb-spacer"></div>

package/src/panels/welcome-screen.ts

@@ -5,7 +5,8 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getRecentProjects } from "../recent-projects";
+import { clearRecentProjects, getRecentProjects, removeRecentProject } from "../recent-projects";
+import { renderOnly } from "../store";
 import { platformSupportsClone } from "./git-panel";
 
 interface WelcomeCtx {
@@ -86,17 +87,40 @@ export function renderWelcome(host: HTMLElement) {
           ${recent.length > 0
             ? html`
                 <div class="welcome-section">
-                  <h2 class="welcome-section-title">Recent</h2>
+                  <div class="welcome-section-header">
+                    <h2 class="welcome-section-title">Recent</h2>
+                    <button
+                      class="welcome-clear"
+                      @click=${() => {
+                        clearRecentProjects();
+                        renderOnly("canvas");
+                      }}
+                    >
+                      Clear
+                    </button>
+                  </div>
                   ${recent.map(
                     (p) => html`
-                      <button
-                        class="welcome-recent"
-                        @click=${() => ctx.openRecentProject(p.root)}
-                        title=${p.root}
-                      >
-                        <span class="welcome-recent-name">${p.name}</span>
-                        <span class="welcome-recent-path">${shortenPath(p.root)}</span>
-                      </button>
+                      <div class="welcome-recent-row">
+                        <button
+                          class="welcome-recent"
+                          @click=${() => ctx.openRecentProject(p.root)}
+                          title=${p.root}
+                        >
+                          <span class="welcome-recent-name">${p.name}</span>
+                          <span class="welcome-recent-path">${shortenPath(p.root)}</span>
+                        </button>
+                        <button
+                          class="welcome-recent-remove"
+                          title="Remove from recent"
+                          @click=${() => {
+                            removeRecentProject(p.root);
+                            renderOnly("canvas");
+                          }}
+                        >
+                          ✕
+                        </button>
+                      </div>
                     `,
                   )}
                 </div>