@jxsuite/studio 0.31.0 → 0.32.0

package/dist/studio.js

@@ -195544,6 +195544,7 @@ function findContentTypeSchema(documentPath, projectConfig) {
   if (!documentPath || !projectConfig?.contentTypes) {
     return null;
   }
+  const docPath = documentPath.replaceAll("\\", "/");
   for (const [name, def3] of Object.entries(projectConfig.contentTypes)) {
     if (!def3.source || !def3.schema) {
       continue;
@@ -195551,12 +195552,12 @@ function findContentTypeSchema(documentPath, projectConfig) {
     const src = def3.source.replace(/^\.\//, "").replace(/\/$/, "");
     const hasExt = src.includes(".") && !src.endsWith("/");
     if (hasExt) {
-      if (documentPath === src || documentPath.endsWith(`/${src}`)) {
+      if (docPath === src || docPath.endsWith(`/${src}`)) {
         return { name, schema: def3.schema };
       }
     } else {
       const ext = def3.format === "json" ? ".json" : formatByName(def3.format)?.extensions[0] ?? defaultContentFormat()?.extensions[0] ?? ".json";
-      if (documentPath.startsWith(`${src}/`) && documentPath.endsWith(ext)) {
+      if (docPath.startsWith(`${src}/`) && docPath.endsWith(ext)) {
         return { name, schema: def3.schema };
       }
     }
@@ -201543,6 +201544,7 @@ async function loadMediaCache() {
     m.path = m.path.replace(/^\/public\//, "/");
   }
   mediaCacheLoaded = true;
+  renderOnly("leftPanel", "rightPanel");
 }
 function invalidateMediaCache() {
   mediaCache = [];
@@ -203717,45 +203719,108 @@ var init_file_ops = __esm(() => {
 });
 
 // src/recent-projects.ts
-function getRecentProjects() {
+function backend() {
+  if (!hasPlatform()) {
+    return null;
+  }
+  const platform3 = getPlatform();
+  return platform3.getRecentProjects && platform3.saveRecentProjects ? platform3 : null;
+}
+function loadFromLocalStorage() {
   try {
     const raw = localStorage.getItem(STORAGE_KEY);
     if (!raw) {
       return [];
     }
-    return JSON.parse(raw).toSorted((a, b) => b.timestamp - a.timestamp);
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
   } catch {
     return [];
   }
 }
+function currentList() {
+  return backend() ? cache : loadFromLocalStorage();
+}
+function commit(list2) {
+  cache = list2;
+  const store = backend();
+  if (store) {
+    store.saveRecentProjects(list2);
+  } else {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(list2));
+    } catch {}
+  }
+}
+async function hydrateRecentProjects() {
+  const store = backend();
+  if (!store) {
+    return;
+  }
+  try {
+    cache = await store.getRecentProjects();
+  } catch {
+    cache = [];
+  }
+}
+function getRecentProjects() {
+  return currentList().toSorted((a, b) => b.timestamp - a.timestamp);
+}
 function addRecentProject(name, root) {
-  const projects = getRecentProjects().filter((p) => p.root !== root);
+  const projects = currentList().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));
+  commit(projects);
+}
+function removeRecentProject(root) {
+  commit(currentList().filter((p) => p.root !== root));
 }
-function getRecentFiles() {
+function clearRecentProjects() {
+  cache = [];
+  const store = backend();
+  if (store) {
+    store.saveRecentProjects([]);
+  } else {
+    localStorage.removeItem(STORAGE_KEY);
+  }
+}
+function loadRecentFiles() {
   try {
     const raw = localStorage.getItem(FILES_STORAGE_KEY);
     if (!raw) {
       return [];
     }
-    return JSON.parse(raw).toSorted((a, b) => b.timestamp - a.timestamp);
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : [];
   } catch {
     return [];
   }
 }
+function getRecentFiles(root) {
+  const all = loadRecentFiles().toSorted((a, b) => b.timestamp - a.timestamp);
+  return root == null ? all : all.filter((f) => f.root === root);
+}
 function trackRecentFile(file) {
-  const recent = getRecentFiles().filter((f) => f.path !== file.path);
-  recent.unshift({ name: file.name, path: file.path, timestamp: Date.now() });
-  if (recent.length > MAX_RECENT_FILES) {
-    recent.length = MAX_RECENT_FILES;
+  const all = loadRecentFiles().filter((f) => !(f.root === file.root && f.path === file.path));
+  all.unshift({ name: file.name, path: file.path, root: file.root, timestamp: Date.now() });
+  const perRoot = new Map;
+  const kept = [];
+  for (const f of all.toSorted((a, b) => b.timestamp - a.timestamp)) {
+    const n2 = (perRoot.get(f.root) ?? 0) + 1;
+    perRoot.set(f.root, n2);
+    if (n2 <= MAX_RECENT_FILES) {
+      kept.push(f);
+    }
   }
-  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(recent));
+  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(kept));
 }
-var STORAGE_KEY = "jx-studio-recent-projects", FILES_STORAGE_KEY = "jx-studio-recent-files", MAX_RECENT = 8, MAX_RECENT_FILES = 10;
+var STORAGE_KEY = "jx-studio-recent-projects", FILES_STORAGE_KEY = "jx-studio-recent-files", MAX_RECENT = 8, MAX_RECENT_FILES = 10, cache;
+var init_recent_projects = __esm(() => {
+  init_platform3();
+  cache = [];
+});
 
 // ../../node_modules/lit-html/development/directives/repeat.js
 var generateMap = (list2, start2, end) => {
@@ -217800,7 +217865,7 @@ function startLayerTitleEdit(path, rerender) {
     input.remove();
     label.style.display = "";
   };
-  const commit = () => {
+  const commit2 = () => {
     if (committed) {
       return;
     }
@@ -217818,7 +217883,7 @@ function startLayerTitleEdit(path, rerender) {
     cleanup();
     rerender();
   };
-  input.addEventListener("blur", commit);
+  input.addEventListener("blur", commit2);
   input.addEventListener("keydown", (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
@@ -218565,7 +218630,7 @@ var init_ensure_deps = __esm(() => {
 });
 
 // src/version.ts
-var APP_NAME = "Jx Studio", VERSION = "0.31.0", BUILD_DATE = "2026-06-24T16:30:57.146Z", GIT_COMMIT = "1abc394", LINKS;
+var APP_NAME = "Jx Studio", VERSION = "0.32.0", BUILD_DATE = "2026-06-24T21:38:38.074Z", GIT_COMMIT = "d2ad6ce", LINKS;
 var init_version = __esm(() => {
   LINKS = {
     github: "https://github.com/jxsuite/jx",
@@ -218859,6 +218924,7 @@ async function loadProject() {
       selectedPath: null
     });
     if (info.isSiteProject) {
+      addRecentProject(requireProjectState().name, meta.root);
       await ensureDependenciesInstalled();
       await loadDirectory(".");
       await loadComponentRegistry();
@@ -219571,7 +219637,11 @@ async function openFileInTab(path) {
       sourceFormat: format3?.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) {
     statusMessage(`Error: ${errorMessage(error)}`);
@@ -219628,6 +219698,7 @@ var init_files2 = __esm(() => {
   init_file_ops();
   init_format_host();
   init_view3();
+  init_recent_projects();
   fileIconMap = {
     "sp-icon-document": html3`<sp-icon-document></sp-icon-document>`,
     "sp-icon-file-code": html3`<sp-icon-file-code></sp-icon-file-code>`,
@@ -220516,17 +220587,17 @@ var desc = (obj, name, descriptor) => {
 };
 
 // ../../node_modules/@lit/reactive-element/development/decorators/query.js
-function query(selector, cache) {
+function query(selector, cache2) {
   return (protoOrTarget, nameOrContext, descriptor) => {
     const doQuery = (el) => {
       const result = el.renderRoot?.querySelector(selector) ?? null;
-      if (DEV_MODE6 && result === null && cache && !el.hasUpdated) {
+      if (DEV_MODE6 && result === null && cache2 && !el.hasUpdated) {
         const name = typeof nameOrContext === "object" ? nameOrContext.name : nameOrContext;
         issueWarning5("", `@query'd field ${JSON.stringify(String(name))} with the 'cache' ` + `flag set for selector '${selector}' has been accessed before ` + `the first update and returned null. This is expected if the ` + `renderRoot tree has not been provided beforehand (e.g. via ` + `Declarative Shadow DOM). Therefore the value hasn't been cached.`);
       }
       return result;
     };
-    if (cache) {
+    if (cache2) {
       const { get, set } = typeof nameOrContext === "object" ? protoOrTarget : descriptor ?? (() => {
         const key = DEV_MODE6 ? Symbol(`${String(nameOrContext)} (@query() cache)`) : Symbol();
         return {
@@ -224224,8 +224295,8 @@ function hasFixedPositionAncestor(element2, stopNode) {
   }
   return getComputedStyle3(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
-function getClippingElementAncestors(element2, cache) {
-  const cachedResult = cache.get(element2);
+function getClippingElementAncestors(element2, cache2) {
+  const cachedResult = cache2.get(element2);
   if (cachedResult) {
     return cachedResult;
   }
@@ -224247,7 +224318,7 @@ function getClippingElementAncestors(element2, cache) {
     }
     currentNode = getParentNode(currentNode);
   }
-  cache.set(element2, result);
+  cache2.set(element2, result);
   return result;
 }
 function getClippingRect(_ref) {
@@ -224524,14 +224595,14 @@ var noOffsets, SCROLLBAR_MAX = 25, absoluteOrFixed, getElementRects = async func
     }
   };
 }, platform3, offset2, shift3, flip2, size3, arrow2, computePosition2 = (reference, floating, options) => {
-  const cache = new Map;
+  const cache2 = new Map;
   const mergedOptions = {
     platform: platform3,
     ...options
   };
   const platformWithCache = {
     ...mergedOptions.platform,
-    _c: cache
+    _c: cache2
   };
   return computePosition(reference, floating, {
     ...mergedOptions,
@@ -254247,6 +254318,8 @@ init_format_host();
 
 // src/panels/welcome-screen.ts
 init_lit_html();
+init_recent_projects();
+init_store();
 init_git_panel();
 var _ctx4 = null;
 function initWelcome(ctx) {
@@ -254310,16 +254383,39 @@ function renderWelcome(host) {
 
           ${recent.length > 0 ? html3`
                 <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) => html3`
-                      <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>
               ` : nothing}
@@ -256744,15 +256840,15 @@ function isShallowEqual(a, b) {
 }
 function stable() {
   var isEqual2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : isShallowEqual;
-  var cache = null;
+  var cache2 = null;
   return function(value) {
-    if (cache && isEqual2(cache.value, value)) {
-      return cache.value;
+    if (cache2 && isEqual2(cache2.value, value)) {
+      return cache2.value;
     }
-    cache = {
+    cache2 = {
       value
     };
-    return cache.value;
+    return cache2.value;
   };
 }
 
@@ -260646,11 +260742,11 @@ function renderMetaFieldRow(field, head, applyMutation) {
       })
     });
   }
-  const commit = (v) => applyMutation((d2) => upsertMeta(d2, field.attr, field.key, v.trim()));
+  const commit2 = (v) => applyMutation((d2) => upsertMeta(d2, field.attr, field.key, v.trim()));
   const placeholder = field.key === "viewport" ? "width=device-width, initial-scale=1" : `${field.label}…`;
-  const widget = field.multiline ? spTextArea(`head:${field.key}`, val, commit, {
+  const widget = field.multiline ? spTextArea(`head:${field.key}`, val, commit2, {
     placeholder: `${field.label}…`
-  }) : spTextField(`head:${field.key}`, val, commit, { placeholder });
+  }) : spTextField(`head:${field.key}`, val, commit2, { placeholder });
   return renderFieldRow({
     hasValue: Boolean(val),
     label: field.label,
@@ -287020,9 +287116,12 @@ init_class_map();
 init_live();
 init_ref();
 init_platform3();
+init_store();
 init_format_host();
 init_files2();
+init_recent_projects();
 init_layers();
+var _ctx12 = null;
 var _open = false;
 var _query = "";
 var _results = [];
@@ -287031,7 +287130,9 @@ var _debounceTimer = 0;
 function getContainer() {
   return getLayerSlot("popover", "quick-search");
 }
-function initQuickSearch() {}
+function initQuickSearch(ctx) {
+  _ctx12 = ctx ?? null;
+}
 function openQuickSearch() {
   _open = true;
   _query = "";
@@ -287043,6 +287144,28 @@ function closeQuickSearch() {
   _open = false;
   renderOverlay();
 }
+function scopeRoot() {
+  return projectState ? projectState.projectRoot ?? null : null;
+}
+function currentItems() {
+  const q = _query.trim();
+  if (!projectState) {
+    const needle = q.toLowerCase();
+    const projects = getRecentProjects().filter((p2) => !needle || p2.name.toLowerCase().includes(needle) || p2.root.toLowerCase().includes(needle));
+    return {
+      items: projects.map((p2) => ({ kind: "project", name: p2.name, root: p2.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(query3) {
   if (!query3.trim()) {
     _results = [];
@@ -287053,7 +287176,12 @@ async function doSearch(query3) {
   try {
     const platform4 = getPlatform();
     await loadFormats();
-    _results = await platform4.searchFiles(query3.trim().toLowerCase(), documentExtensions());
+    const hits = await platform4.searchFiles(query3.trim().toLowerCase(), documentExtensions());
+    _results = hits.map((h3) => ({
+      kind: "file",
+      name: h3.name ?? h3.path.split("/").pop() ?? "",
+      path: h3.path
+    }));
     _selectedIndex = 0;
     renderOverlay();
   } catch {
@@ -287064,11 +287192,14 @@ async function doSearch(query3) {
 function onInput(e20) {
   _query = e20.target.value;
   clearTimeout(_debounceTimer);
-  _debounceTimer = setTimeout(() => doSearch(_query), 150);
+  if (projectState) {
+    _debounceTimer = setTimeout(() => doSearch(_query), 150);
+  }
+  _selectedIndex = 0;
   renderOverlay();
 }
 function onKeydown2(e20) {
-  const items = _query.trim() ? _results : getRecentFiles();
+  const { items } = currentItems();
   switch (e20.key) {
     case "ArrowDown": {
       e20.preventDefault();
@@ -287101,9 +287232,12 @@ function onKeydown2(e20) {
 }
 function selectItem(item) {
   closeQuickSearch();
-  const { path } = item;
-  trackRecentFile({ name: path.split("/").pop() || "", path });
-  openFileInTab(path);
+  if (item.kind === "project") {
+    _ctx12?.openRecentProject(item.root);
+    return;
+  }
+  trackRecentFile({ name: item.name, path: item.path, root: scopeRoot() ?? "" });
+  openFileInTab(item.path);
 }
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase();
@@ -287120,22 +287254,31 @@ function dirPart(path) {
   parts2.pop();
   return parts2.length > 0 ? parts2.join("/") : "";
 }
+function shortenPath2(path) {
+  if (path.startsWith("/home/")) {
+    return `~/${path.split("/").slice(3).join("/")}`;
+  }
+  return path;
+}
 function renderOverlay() {
   const container = getContainer();
   if (!_open) {
     render2(nothing, container);
     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 = html3`
     <div class="quick-search-overlay" @click=${closeQuickSearch}>
       <div class="quick-search-panel" @click=${(e20) => e20.stopPropagation()}>
         <input
           class="quick-search-input"
           type="text"
-          placeholder="Search project files…"
+          placeholder=${placeholder}
           .value=${live(_query)}
           @input=${onInput}
           @keydown=${onKeydown2}
@@ -287146,29 +287289,31 @@ function renderOverlay() {
   })}
         />
         <div class="quick-search-results">
-          ${items.length === 0 && _query.trim() ? html3`<div class="quick-search-empty">No results</div>` : nothing}
-          ${items.length === 0 && !_query.trim() && recentFiles.length === 0 ? html3`<div class="quick-search-empty">Type to search project files</div>` : nothing}
-          ${showRecent && recentFiles.length > 0 ? html3`<div class="quick-search-section-label">Recently opened</div>` : nothing}
-          ${items.map((item, i7) => html3`
+          ${items.length === 0 && hasQuery ? html3`<div class="quick-search-empty">No results</div>` : nothing}
+          ${items.length === 0 && !hasQuery ? html3`<div class="quick-search-empty">${emptyHint}</div>` : nothing}
+          ${showingRecent && items.length > 0 ? html3`<div class="quick-search-section-label">${sectionLabel}</div>` : nothing}
+          ${items.map((item, i7) => {
+    const icon = item.kind === "project" ? html3`<sp-icon-folder-open size="s"></sp-icon-folder-open>` : fileIcon(item.name);
+    const pathText = item.kind === "project" ? shortenPath2(item.root) : dirPart(item.path);
+    return html3`
               <div
                 class=${classMap({
-    "quick-search-item": true,
-    selected: i7 === _selectedIndex
-  })}
+      "quick-search-item": true,
+      selected: i7 === _selectedIndex
+    })}
                 @click=${() => selectItem(item)}
                 @mouseenter=${() => {
-    _selectedIndex = i7;
-    renderOverlay();
-  }}
+      _selectedIndex = i7;
+      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 ? html3`<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 ? html3`<span class="quick-search-badge">recent</span>` : nothing}
               </div>
-            `)}
+            `;
+  })}
         </div>
       </div>
     </div>
@@ -287734,6 +287879,7 @@ init_transact();
 init_reactivity();
 init_workspace2();
 init_view3();
+init_recent_projects();
 init_platform3();
 init_git_panel();
 
@@ -288645,7 +288791,7 @@ var _dirDerived = true;
 
 // src/panels/toolbar.ts
 var _rootEl = null;
-var _ctx12 = null;
+var _ctx13 = null;
 var _scope4 = null;
 var toolbarIconMap = {
   "sp-icon-artboard": html3`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
@@ -288665,14 +288811,14 @@ var toolbarIconMap = {
 };
 function tbBtnTpl(label, onClick, iconTag) {
   return html3`
-    <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>
   `;
 }
 function mount5(rootEl, ctx) {
   _rootEl = rootEl;
-  _ctx12 = ctx;
+  _ctx13 = ctx;
   if (globalThis.__jxPlatform?.windowControls) {
     rootEl.classList.add("electrobun-webkit-app-region-drag");
   }
@@ -288698,7 +288844,7 @@ function mount5(rootEl, ctx) {
   });
 }
 function render6() {
-  if (!_rootEl || !_ctx12) {
+  if (!_rootEl || !_ctx13) {
     return;
   }
   try {
@@ -288709,13 +288855,13 @@ function render6() {
 }
 async function handleNewProject() {
   const result = await openNewProjectModal();
-  if (result && _ctx12) {
-    await _ctx12.openRecentProject(result.root);
+  if (result && _ctx13) {
+    await _ctx13.openRecentProject(result.root);
   }
 }
-function minimalToolbarTemplate(ctx) {
+function recentMenuTpl(ctx) {
   const recentProjects = getRecentProjects();
-  const recentProjectsTpl = html3`
+  return html3`
     <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>
@@ -288726,17 +288872,45 @@ function minimalToolbarTemplate(ctx) {
     const val = e20.target.value;
     if (val === "__new__") {
       handleNewProject();
+    } else if (val === "__clear__") {
+      clearRecentProjects();
+      render6();
     } else {
       ctx.openRecentProject(val);
     }
   }}
         >
           <sp-menu-item value="__new__">New Project…</sp-menu-item>
-          ${recentProjects.length > 0 ? html3`<sp-menu-divider></sp-menu-divider> ${recentProjects.map((p2) => html3`<sp-menu-item value=${p2.root}>${p2.name}</sp-menu-item>`)}` : nothing}
+          ${recentProjects.length > 0 ? html3`
+                <sp-menu-divider></sp-menu-divider>
+                ${recentProjects.map((p2) => html3`
+                    <sp-menu-item value=${p2.root} title=${p2.root}>
+                      ${p2.name}
+                      <sp-action-button
+                        slot="end"
+                        quiet
+                        size="s"
+                        title="Remove from recent"
+                        @click=${(e20) => {
+    e20.stopPropagation();
+    removeRecentProject(p2.root);
+    render6();
+  }}
+                      >
+                        <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>
   `;
+}
+function minimalToolbarTemplate(ctx) {
+  const recentProjectsTpl = recentMenuTpl(ctx);
   const windowControls = globalThis.__jxPlatform?.windowControls;
   const csdTpl = windowControls ? html3`
         <sp-action-group class="window-controls" size="s">
@@ -288769,33 +288943,44 @@ function minimalToolbarTemplate(ctx) {
       ` : nothing;
   return html3`
     <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>
     <div class="tb-spacer"></div>
     <sp-action-group selects="single" size="s" compact>
       ${modes.map((m3) => html3`
-          <sp-action-button size="s" disabled ?selected=${m3.key === "design"}>
-            ${toolbarIconMap[m3.iconTag]}${m3.label}
+          <sp-action-button size="s" title=${m3.label} disabled ?selected=${m3.key === "design"}>
+            ${toolbarIconMap[m3.iconTag]}<span class="tb-label">${m3.label}</span>
           </sp-action-button>
         `)}
     </sp-action-group>
@@ -288823,10 +289008,10 @@ var modes = [
 ];
 function toolbarTemplate() {
   const tab = activeTab.value;
-  if (!_ctx12) {
+  if (!_ctx13) {
     return html3``;
   }
-  const ctx = _ctx12;
+  const ctx = _ctx13;
   if (!tab) {
     return minimalToolbarTemplate(ctx);
   }
@@ -288847,6 +289032,7 @@ function toolbarTemplate() {
       ${modes.map((m3) => html3`
           <sp-action-button
             size="s"
+            title=${m3.label}
             ?selected=${canvasMode === m3.key}
             ?disabled=${!allowedModes.has(m3.key)}
             @click=${() => {
@@ -288874,7 +289060,7 @@ function toolbarTemplate() {
     ctx.safeRenderRightPanel();
   }}
           >
-            ${toolbarIconMap[m3.iconTag]}${m3.label}
+            ${toolbarIconMap[m3.iconTag]}<span class="tb-label">${m3.label}</span>
           </sp-action-button>
         `)}
     </sp-action-group>
@@ -288942,63 +289128,63 @@ function toolbarTemplate() {
             </sp-action-button>
           </sp-action-group>
         ` : nothing;
-  const recentProjects = getRecentProjects();
-  const recentProjectsTpl = html3`
-    <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=${(e20) => {
-    const val = e20.target.value;
-    if (val === "__new__") {
-      handleNewProject();
-    } else {
-      ctx.openRecentProject(val);
-    }
-  }}
-        >
-          <sp-menu-item value="__new__">New Project…</sp-menu-item>
-          ${recentProjects.length > 0 ? html3`<sp-menu-divider></sp-menu-divider> ${recentProjects.map((p2) => html3`<sp-menu-item value=${p2.root}>${p2.name}</sp-menu-item>`)}` : nothing}
-        </sp-menu>
-      </sp-popover>
-    </overlay-trigger>
-  `;
+  const recentProjectsTpl = recentMenuTpl(ctx);
   return html3`
     ${isMac2 ? 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=${() => undo(activeTab.value)}>
-        ${toolbarIconMap["sp-icon-undo"]} Undo
+      <sp-action-button
+        size="s"
+        title="Undo"
+        ?disabled=${!canUndo}
+        @click=${() => undo(activeTab.value)}
+      >
+        ${toolbarIconMap["sp-icon-undo"]}<span class="tb-label">Undo</span>
       </sp-action-button>
-      <sp-action-button size="s" ?disabled=${!canRedo} @click=${() => redo(activeTab.value)}>
-        ${toolbarIconMap["sp-icon-redo"]} Redo
+      <sp-action-button
+        size="s"
+        title="Redo"
+        ?disabled=${!canRedo}
+        @click=${() => redo(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 ? html3`<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>
     ${modeSwitcherTpl}
@@ -292537,7 +292723,7 @@ function kvRow(key, value, onChange, onDelete, datalistId = null) {
   let debounceTimer;
   let currentKey = key;
   let currentVal = value;
-  const commit = () => {
+  const commit2 = () => {
     clearTimeout(debounceTimer);
     debounceTimer = setTimeout(() => onChange(currentKey, currentVal), 400);
   };
@@ -292550,7 +292736,7 @@ function kvRow(key, value, onChange, onDelete, datalistId = null) {
         .value=${live(key)}
         @input=${(e20) => {
     currentKey = e20.target.value;
-    commit();
+    commit2();
   }}
         @change=${datalistId === "css-props" ? (e20) => {
     const el = e20.target.closest(".kv-row")?.querySelector(".kv-val");
@@ -292566,7 +292752,7 @@ function kvRow(key, value, onChange, onDelete, datalistId = null) {
         placeholder=${placeholder}
         @input=${(e20) => {
     currentVal = e20.target.value;
-    commit();
+    commit2();
   }}
       ></sp-textfield>
       <sp-action-button size="xs" quiet @click=${onDelete}>
@@ -294455,11 +294641,11 @@ function renderAiPanelTemplate() {
 }
 
 // src/panels/right-panel.ts
-var _ctx13 = null;
+var _ctx14 = null;
 var _scope5 = null;
 var _scheduler = null;
 function mount6(ctx) {
-  _ctx13 = ctx;
+  _ctx14 = ctx;
   mountAiPanel();
   registerRightPanelRender(render7);
   _scheduler = createPanelScheduler({
@@ -294511,11 +294697,11 @@ function _ensureContainers() {
   _assistantContainer.style.cssText = "display:flex;flex-direction:column;overflow:hidden";
 }
 function _doRender() {
-  if (!_ctx13) {
+  if (!_ctx14) {
     return;
   }
   try {
-    const ctx = _ctx13;
+    const ctx = _ctx14;
     const aTab = activeTab.value;
     if (!aTab) {
       rightPanel.textContent = "";
@@ -294597,7 +294783,7 @@ function _doRender() {
     console.error("right-panel render error:", error);
   }
   requestAnimationFrame(() => mountQuikChat());
-  _ctx13.updateForcedPseudoPreview();
+  _ctx14.updateForcedPseudoPreview();
 }
 
 // src/panels/left-panel.ts
@@ -294819,11 +295005,11 @@ function renderElementsTemplate(ctx) {
 }
 
 // src/panels/left-panel.ts
-var _ctx14 = null;
+var _ctx15 = null;
 var _scope6 = null;
 var _scheduler2 = null;
 function mount7(ctx) {
-  _ctx14 = ctx;
+  _ctx15 = ctx;
   _scheduler2 = createPanelScheduler({ render: _doRender2, root: leftPanel });
   _scheduler2.bindFocus();
   _scope6 = effectScope();
@@ -294847,7 +295033,7 @@ function render8() {
   _scheduler2?.schedule();
 }
 function _doRender2() {
-  if (!_ctx14) {
+  if (!_ctx15) {
     return;
   }
   try {
@@ -294879,7 +295065,7 @@ function buildHeadDoc(doc, fm) {
   };
 }
 function _render() {
-  const ctx = _ctx14;
+  const ctx = _ctx15;
   const tab = view.leftTab;
   if (tab === "files") {
     render2(html3`<div class="panel-body">${ctx.renderFilesTemplate()}</div>`, leftPanel);
@@ -295087,11 +295273,11 @@ init_reactivity();
 init_workspace2();
 init_site_context();
 var _host2 = null;
-var _ctx15 = null;
+var _ctx16 = null;
 var _scope8 = null;
 function mount9(host, ctx) {
   _host2 = host;
-  _ctx15 = ctx;
+  _ctx16 = ctx;
   _scope8 = effectScope();
   _scope8.run(() => {
     effect(() => {
@@ -295110,11 +295296,11 @@ function mount9(host, ctx) {
   });
 }
 function render10() {
-  if (!_host2 || !_ctx15) {
+  if (!_host2 || !_ctx16) {
     return;
   }
   try {
-    render2(tabBarTemplate(_ctx15), _host2);
+    render2(tabBarTemplate(_ctx16), _host2);
   } catch (error) {
     console.error("tab-bar render error:", error);
   }
@@ -295206,7 +295392,9 @@ function tabBarTemplate(ctx) {
     </div>
   `;
 }
+
 // src/studio.ts
+init_recent_projects();
 function getCanvasMode() {
   return activeTab.value?.session.ui.canvasMode ?? "design";
 }
@@ -295380,7 +295568,7 @@ mount5(toolbarEl, {
   setCanvasMode
 });
 initLayers();
-initQuickSearch();
+initQuickSearch({ openRecentProject: (root2) => openRecentProject(root2) });
 mount8(document.querySelector("#tab-strip"));
 mount9(document.querySelector("#tab-bar"), {
   closeFunctionEditor: () => closeFunctionEditor(),
@@ -295650,6 +295838,10 @@ if (_projectParam) {
   render();
   ensureFsSync();
 }
+hydrateRecentProjects().then(() => {
+  render6();
+  render();
+});
 function renderLeftPanel() {
   render8();
 }
@@ -295720,6 +295912,9 @@ async function openRecentProject(root2) {
     ensureFsSync();
     maybePromptJxsuiteUpdate(root2);
   } catch (error) {
+    removeRecentProject(root2);
+    render6();
+    render();
     statusMessage(`Error: ${errorMessage(error)}`);
   }
 }
@@ -295787,5 +295982,5 @@ effect(() => {
   }
 });
 
-//# debugId=BA04C2B472069B1A64756E2164756E21
+//# debugId=AE7238B52581CB6F64756E2164756E21
 //# sourceMappingURL=studio.js.map