@jxsuite/studio 0.16.0 → 0.17.0

package/dist/studio.js

@@ -1508,8 +1508,10 @@ var init_tab = __esm(() => {
 var exports_workspace = {};
 __export(exports_workspace, {
   workspace: () => workspace,
+  replaceAllTabs: () => replaceAllTabs,
   openTab: () => openTab,
   closeTab: () => closeTab,
+  closeAllTabs: () => closeAllTabs,
   activeTab: () => activeTab,
   activateTab: () => activateTab
 });
@@ -1531,6 +1533,32 @@ function closeTab(tabId) {
     workspace.activeTabId = workspace.tabOrder[workspace.tabOrder.length - 1] || null;
   }
 }
+function closeAllTabs() {
+  const tabs = [...workspace.tabs.values()];
+  workspace.tabs.clear();
+  workspace.tabOrder = [];
+  workspace.activeTabId = null;
+  for (const tab of tabs) {
+    disposeTab(tab);
+  }
+}
+function replaceAllTabs(newTabOpts) {
+  const oldIds = [...workspace.tabs.keys()];
+  const oldTabs = [...workspace.tabs.values()];
+  const newTab = createTab(newTabOpts);
+  workspace.tabs.set(newTab.id, newTab);
+  workspace.activeTabId = newTab.id;
+  workspace.tabOrder = [newTab.id];
+  for (const id of oldIds) {
+    if (id === newTab.id)
+      continue;
+    workspace.tabs.delete(id);
+  }
+  for (const tab of oldTabs) {
+    disposeTab(tab);
+  }
+  return newTab;
+}
 function activateTab(tabId) {
   if (workspace.tabs.has(tabId))
     workspace.activeTabId = tabId;
@@ -176970,12 +176998,6 @@ async function codeService(action, payload) {
     return null;
   return platform3.codeService(action, payload);
 }
-async function locateDocument(name) {
-  const platform3 = getPlatform();
-  if (!platform3.locateFile)
-    return null;
-  return platform3.locateFile(name);
-}
 var pluginSchemaCache = new Map;
 async function fetchPluginSchema(def3, state) {
   if (!def3.$src || !def3.$prototype)
@@ -177034,58 +177056,6 @@ function getFunctionArgs(editing, document4) {
 // src/files/file-ops.js
 init_platform();
 init_workspace();
-async function openFile() {
-  try {
-    if ("showOpenFilePicker" in window) {
-      const [handle2] = await window.showOpenFilePicker({
-        types: [
-          { description: "Jx Component", accept: { "application/json": [".json"] } },
-          { description: "Markdown Content", accept: { "text/markdown": [".md"] } }
-        ]
-      });
-      const file = await handle2.getFile();
-      const text6 = await file.text();
-      const documentPath = await locateDocument(handle2.name);
-      if (handle2.name.endsWith(".md")) {
-        const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
-        openTab({
-          id: handle2.name,
-          documentPath,
-          fileHandle: handle2,
-          document: document4,
-          frontmatter: frontmatter2,
-          sourceFormat: "md"
-        });
-      } else {
-        const document4 = JSON.parse(text6);
-        openTab({ id: handle2.name, documentPath, fileHandle: handle2, document: document4 });
-      }
-      statusMessage(`Opened ${handle2.name}`);
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = ".json,.md";
-      input.onchange = async () => {
-        const file = input.files?.[0];
-        if (!file)
-          return;
-        const text6 = await file.text();
-        if (file.name.endsWith(".md")) {
-          const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
-          openTab({ id: file.name, document: document4, frontmatter: frontmatter2, sourceFormat: "md" });
-        } else {
-          const document4 = JSON.parse(text6);
-          openTab({ id: file.name, document: document4 });
-        }
-        statusMessage(`Opened ${file.name}`);
-      };
-      input.click();
-    }
-  } catch (e) {
-    if (e.name !== "AbortError")
-      statusMessage(`Error: ${e.message}`);
-  }
-}
 async function loadMarkdown(source) {
   const { transpileJxMarkdown: transpileJxMarkdown2 } = await Promise.resolve().then(() => (init_transpile(), exports_transpile));
   const doc = transpileJxMarkdown2(source);
@@ -178841,23 +178811,6 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     } else {
       canvasEl.removeAttribute("data-content-mode");
     }
-    const platform3 = globalThis.__jxPlatform;
-    if (platform3?.resolveAssetUrl && docBase) {
-      const mediaEls = el.querySelectorAll("img[src], video[src], source[src], video[poster]");
-      for (const node2 of mediaEls) {
-        for (const attr of ["src", "poster"]) {
-          const val = node2.getAttribute(attr);
-          if (val && !val.startsWith("data:") && !val.startsWith("blob:") && !val.startsWith("http")) {
-            try {
-              const resolved = new URL(val, docBase).pathname.replace(/^\//, "");
-              const dataUrl = await platform3.resolveAssetUrl(resolved);
-              if (dataUrl)
-                node2.setAttribute(attr, dataUrl);
-            } catch {}
-          }
-        }
-      }
-    }
     canvasEl.appendChild(el);
     if (canvasMode === "design" || canvasMode === "edit") {
       requestAnimationFrame(() => {
@@ -183083,38 +183036,40 @@ function registerPanelEvents(panel) {
     const tab = activeTab.value;
     const canvasMode = _ctx8.getCanvasMode();
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
+    if (!tab)
+      return;
     for (const el of elements) {
       if (canvas.contains(el) && el !== canvas) {
         if (layoutElements.has(el)) {
           view.layoutSelection = { el, layoutPath: activeLayoutPath };
-          activeTab.value.session.selection = null;
+          tab.session.selection = null;
           renderOnly("rightPanel");
           return;
         }
         view.layoutSelection = null;
         const originalPath = elToPath.get(el);
         if (originalPath) {
-          let path2 = bubbleInlinePath(tab?.doc.document, originalPath);
+          let path2 = bubbleInlinePath(tab.doc.document, originalPath);
           const newMedia = mediaName === "base" ? null : mediaName ?? null;
           const resolvedEl = path2 === originalPath ? el : findCanvasElement(path2, canvas) || el;
-          if (pathsEqual(path2, tab?.session.selection) && isEditableBlock(resolvedEl) && (canvasMode === "edit" || tab?.doc.mode === "content")) {
-            activeTab.value.session.ui.activeMedia = newMedia;
+          if (pathsEqual(path2, tab.session.selection) && isEditableBlock(resolvedEl) && (canvasMode === "edit" || tab.doc.mode === "content")) {
+            tab.session.ui.activeMedia = newMedia;
             _ctx8.enterInlineEdit(resolvedEl, path2);
             return;
           }
-          if (canvasMode === "design" && tab?.doc.mode !== "content") {
+          if (canvasMode === "design" && tab.doc.mode !== "content") {
             updateUi("pendingInlineEdit", { path: path2, mediaName });
-            activeTab.value.session.ui.activeMedia = newMedia;
-            activeTab.value.session.selection = path2;
+            tab.session.ui.activeMedia = newMedia;
+            tab.session.selection = path2;
             return;
           }
-          activeTab.value.session.ui.activeMedia = newMedia;
-          activeTab.value.session.selection = path2;
+          tab.session.ui.activeMedia = newMedia;
+          tab.session.selection = path2;
           return;
         }
       }
     }
-    activeTab.value.session.selection = null;
+    tab.session.selection = null;
   }, opts);
   overlayClk.addEventListener("dblclick", (e) => {
     const barInner = view.blockActionBarEl?.firstElementChild;
@@ -183128,16 +183083,18 @@ function registerPanelEvents(panel) {
       return;
     const tab = activeTab.value;
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
+    if (!tab)
+      return;
     for (const el of elements) {
       if (canvas.contains(el) && el !== canvas) {
         const originalPath = elToPath.get(el);
         if (originalPath) {
-          const path2 = bubbleInlinePath(tab?.doc.document, originalPath);
+          const path2 = bubbleInlinePath(tab.doc.document, originalPath);
           const resolvedEl = path2 === originalPath ? el : findCanvasElement(path2, canvas) || el;
           if (isEditableBlock(resolvedEl)) {
             const newMedia = mediaName === "base" ? null : mediaName ?? null;
-            activeTab.value.session.ui.activeMedia = newMedia;
-            activeTab.value.session.selection = path2;
+            tab.session.ui.activeMedia = newMedia;
+            tab.session.selection = path2;
             _ctx8.enterInlineEdit(resolvedEl, path2);
             return;
           }
@@ -183174,18 +183131,20 @@ function registerPanelEvents(panel) {
         return;
     }
     const tab = activeTab.value;
+    if (!tab)
+      return;
     const el = withPanelPointerEvents(() => document.elementFromPoint(e.clientX, e.clientY));
     if (el && canvas.contains(el) && el !== canvas) {
       let path2 = elToPath.get(el);
       if (path2) {
-        path2 = bubbleInlinePath(tab?.doc.document, path2);
-        if (!pathsEqual(path2, tab?.session.hover)) {
-          activeTab.value.session.hover = path2;
+        path2 = bubbleInlinePath(tab.doc.document, path2);
+        if (!pathsEqual(path2, tab.session.hover)) {
+          tab.session.hover = path2;
           renderOnly("overlays");
         }
       }
-    } else if (tab?.session.hover) {
-      activeTab.value.session.hover = null;
+    } else if (tab.session.hover) {
+      tab.session.hover = null;
       renderOnly("overlays");
     }
   }, opts);
@@ -183388,6 +183347,19 @@ function extOf(name) {
   const dot = name.lastIndexOf(".");
   return dot > 0 ? name.slice(dot).toLowerCase() : "";
 }
+var IMAGE_EXTENSIONS2 = new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico"
+]);
+function isImage(ext) {
+  return IMAGE_EXTENSIONS2.has(ext);
+}
 function categoryFor(dir, ext) {
   if (ext && MEDIA_EXTENSIONS2.has(ext))
     return "Media";
@@ -183645,9 +183617,12 @@ 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>
@@ -184338,6 +184313,48 @@ init_store();
 init_platform();
 init_components();
 init_workspace();
+
+// src/recent-projects.js
+var STORAGE_KEY = "jx-studio-recent-projects";
+var FILES_STORAGE_KEY = "jx-studio-recent-files";
+var MAX_RECENT = 8;
+var MAX_RECENT_FILES = 10;
+function getRecentProjects() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw)
+      return [];
+    return JSON.parse(raw).sort((a, b) => b.timestamp - a.timestamp);
+  } catch {
+    return [];
+  }
+}
+function addRecentProject(name, root2) {
+  const projects = getRecentProjects().filter((p) => p.root !== root2);
+  projects.unshift({ name, root: root2, timestamp: Date.now() });
+  if (projects.length > MAX_RECENT)
+    projects.length = MAX_RECENT;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+}
+function getRecentFiles() {
+  try {
+    const raw = localStorage.getItem(FILES_STORAGE_KEY);
+    if (!raw)
+      return [];
+    return JSON.parse(raw).sort((a, b) => b.timestamp - a.timestamp);
+  } catch {
+    return [];
+  }
+}
+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));
+}
+
+// src/files/files.js
 var fileIconMap = {
   "sp-icon-folder-open": html`<sp-icon-folder-open></sp-icon-folder-open>`,
   "sp-icon-folder": html`<sp-icon-folder></sp-icon-folder>`,
@@ -184389,6 +184406,7 @@ async function openProject({ renderActivityBar, renderLeftPanel }) {
     if (!result)
       return;
     const { config, handle: handle2 } = result;
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
     setProjectState({
       ...projectState,
       projectRoot: handle2.root,
@@ -184422,6 +184440,7 @@ async function openProject({ renderActivityBar, renderLeftPanel }) {
     }
     projectState.projectDirs = foundDirs;
     view.leftTab = "files";
+    addRecentProject(projectState.name, projectState.projectRoot);
     renderActivityBar();
     renderLeftPanel();
     statusMessage(`Opened project: ${projectState.name}`);
@@ -184790,6 +184809,7 @@ async function openFileInTab(path2) {
       sourceFormat: path2.endsWith(".md") ? "md" : null
     });
     projectState.selectedPath = path2;
+    trackRecentFile({ path: path2, name: path2.split("/").pop() || path2 });
     statusMessage(`Opened ${path2.split("/").pop()}`);
   } catch (e) {
     statusMessage(`Error: ${e.message}`);
@@ -185753,6 +185773,16 @@ function createDevServerPlatform() {
       } catch {}
       return null;
     },
+    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 entries2 = await res.json();
+      for (const e of entries2)
+        e.path = stripRoot(e.path);
+      return entries2;
+    },
     async fetchPluginSchema(src, prototype, base2) {
       const params = new URLSearchParams({ src });
       if (prototype)
@@ -210014,6 +210044,67 @@ class IconRemove extends IconBase {
   }
 }
 
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js
+init_index_dev();
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/FullScreen.js
+var FullScreenIcon = ({ width: l = 24, height: r8 = 24, hidden: t15 = false, title: c6 = "Full Screen" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${l}"
+    height="${r8}"
+    viewBox="0 0 20 20"
+    aria-hidden=${t15 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${c6}"
+  >
+    <path
+      d="M12.75,14.93652h-5.5c-1.24072,0-2.25-1.00928-2.25-2.25v-5.5c0-1.24072,1.00928-2.25,2.25-2.25h5.5c1.24072,0,2.25,1.00928,2.25,2.25v5.5c0,1.24072-1.00928,2.25-2.25,2.25ZM7.25,6.43652c-.41357,0-.75.33643-.75.75v5.5c0,.41357.33643.75.75.75h5.5c.41357,0,.75-.33643.75-.75v-5.5c0-.41357-.33643-.75-.75-.75h-5.5Z"
+      fill="currentColor"
+    />
+    <path
+      d="M4.5,19h-2.25c-.68945,0-1.25-.56055-1.25-1.25v-2.25c0-.41406.33594-.75.75-.75s.75.33594.75.75v2h2c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.75,19h-2.25c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h2v-2c0-.41406.33594-.75.75-.75s.75.33594.75.75v2.25c0,.68945-.56055,1.25-1.25,1.25Z"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <path
+      d="M18.25,5.25c-.41406,0-.75-.33594-.75-.75v-2h-2c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h2.25c.68945,0,1.25.56055,1.25,1.25v2.25c0,.41406-.33594.75-.75.75ZM17.75,2.5h.00977-.00977Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.75,5.25c-.41406,0-.75-.33594-.75-.75v-2.25c0-.68945.56055-1.25,1.25-1.25h2.25c.41406,0,.75.33594.75.75s-.33594.75-.75.75h-2v2c0,.41406-.33594.75-.75.75Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons/FullScreen.js
+var FullScreenIcon2 = ({ width: a5 = 24, height: e20 = 24, hidden: t15 = false, title: r8 = "Full Screen" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${e20}"
+    viewBox="0 0 36 36"
+    width="${a5}"
+    aria-hidden=${t15 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r8}"
+  >
+    <path
+      d="M32 24.5V30h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H34v-7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5ZM4 30v-5.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V32h7.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5ZM26 4.5v1a.5.5 0 0 0 .5.5H32v5.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V4h-7.5a.5.5 0 0 0-.5.5ZM4 6h5.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H2v7.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5Z"
+    />
+    <rect height="16" rx=".5" ry=".5" width="20" x="8" y="10" />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js
+class IconFullScreen extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(html8), this.spectrumVersion === 2 ? FullScreenIcon({ hidden: !this.label, title: this.label }) : FullScreenIcon2({ hidden: !this.label, title: this.label });
+  }
+}
+
 // ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconViewColumn.js
 init_index_dev();
 
@@ -211139,6 +211230,7 @@ var 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],
@@ -211167,14 +211259,14 @@ Theme.registerThemeFragment("dark", "color", theme_dark_css_default);
 Theme.registerThemeFragment("medium", "scale", scale_medium_css_default);
 
 // src/ui/panel-resize.js
-var STORAGE_KEY = "jx-studio-panel-widths";
+var STORAGE_KEY2 = "jx-studio-panel-widths";
 var MIN_WIDTH = 160;
 var MAX_RATIO = 0.5;
 var DEFAULT_LEFT = 240;
 var DEFAULT_RIGHT = 280;
 var root2 = document.documentElement;
 try {
-  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY2) || "{}");
   if (saved.left)
     root2.style.setProperty("--panel-w-left", `${saved.left}px`);
   if (saved.right)
@@ -211220,7 +211312,7 @@ function persistWidths() {
   const left = parseInt(getComputedStyle(root2).getPropertyValue("--panel-w-left")) || DEFAULT_LEFT;
   const right = parseInt(getComputedStyle(root2).getPropertyValue("--panel-w-right")) || DEFAULT_RIGHT;
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({ left, right }));
+    localStorage.setItem(STORAGE_KEY2, JSON.stringify({ left, right }));
   } catch {}
 }
 var resizeLeft = document.getElementById("resize-left");
@@ -211233,11 +211325,162 @@ if (resizeRight)
 // src/editor/shortcuts.js
 init_store();
 init_workspace();
+
+// src/panels/quick-search.js
+init_platform();
+var _open = false;
+var _query = "";
+var _results = [];
+var _selectedIndex = 0;
+var _debounceTimer = 0;
+var _container = null;
+function initQuickSearch() {
+  _container = document.createElement("div");
+  _container.style.display = "contents";
+  (document.querySelector("sp-theme") || document.body).appendChild(_container);
+}
+function openQuickSearch() {
+  _open = true;
+  _query = "";
+  _results = [];
+  _selectedIndex = 0;
+  renderOverlay();
+  requestAnimationFrame(() => {
+    const input = _container?.querySelector(".quick-search-input");
+    if (input)
+      input.focus();
+  });
+}
+function closeQuickSearch() {
+  _open = false;
+  renderOverlay();
+}
+async function doSearch(query3) {
+  if (!query3.trim()) {
+    _results = [];
+    _selectedIndex = 0;
+    renderOverlay();
+    return;
+  }
+  try {
+    const platform4 = getPlatform();
+    _results = await platform4.searchFiles(query3.trim().toLowerCase());
+    _selectedIndex = 0;
+    renderOverlay();
+  } catch {
+    _results = [];
+    renderOverlay();
+  }
+}
+function onInput(e20) {
+  _query = e20.target.value;
+  clearTimeout(_debounceTimer);
+  _debounceTimer = setTimeout(() => doSearch(_query), 150);
+  renderOverlay();
+}
+function onKeydown2(e20) {
+  const items = _query.trim() ? _results : getRecentFiles();
+  switch (e20.key) {
+    case "ArrowDown":
+      e20.preventDefault();
+      _selectedIndex = Math.min(_selectedIndex + 1, items.length - 1);
+      renderOverlay();
+      break;
+    case "ArrowUp":
+      e20.preventDefault();
+      _selectedIndex = Math.max(_selectedIndex - 1, 0);
+      renderOverlay();
+      break;
+    case "Enter":
+      e20.preventDefault();
+      if (items[_selectedIndex])
+        selectItem(items[_selectedIndex]);
+      break;
+    case "Escape":
+      e20.preventDefault();
+      closeQuickSearch();
+      break;
+  }
+}
+function selectItem(item) {
+  closeQuickSearch();
+  const path2 = item.path;
+  trackRecentFile({ path: path2, name: path2.split("/").pop() });
+  openFileInTab(path2);
+}
+function fileIcon(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(path2) {
+  const parts = path2.split("/");
+  parts.pop();
+  return parts.length ? parts.join("/") : "";
+}
+function renderOverlay() {
+  if (!_container)
+    return;
+  if (!_open) {
+    render2(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=${(e20) => e20.stopPropagation()}>
+        <input
+          class="quick-search-input"
+          type="text"
+          placeholder="Search project files…"
+          .value=${_query}
+          @input=${onInput}
+          @keydown=${onKeydown2}
+        />
+        <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, i6) => html`
+              <div
+                class="quick-search-item ${i6 === _selectedIndex ? "selected" : ""}"
+                @click=${() => selectItem(item)}
+                @mouseenter=${() => {
+    _selectedIndex = i6;
+    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>
+  `;
+  render2(tpl, _container);
+}
+
+// src/editor/shortcuts.js
 function initShortcuts(getContext) {
   canvasWrap.addEventListener("wheel", (e20) => {
     const { canvasMode, panX, panY, setPan, applyTransform: applyTransform2 } = getContext();
     if (canvasMode === "edit")
       return;
+    if (canvasMode === "manage")
+      return;
     e20.preventDefault();
     if (e20.ctrlKey || e20.metaKey) {
       const rect = canvasWrap.getBoundingClientRect();
@@ -211341,6 +211584,10 @@ function initShortcuts(getContext) {
           e20.preventDefault();
           openProject2();
           break;
+        case "p":
+          e20.preventDefault();
+          openQuickSearch();
+          break;
         case "s":
           e20.preventDefault();
           saveFile2();
@@ -211596,6 +211843,9 @@ function tbBtnTpl(label4, onClick, iconTag) {
 function mount5(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx11 = ctx;
+  if (globalThis.__jxPlatform?.windowControls) {
+    rootEl.classList.add("electrobun-webkit-app-region-drag");
+  }
   _scope4 = effectScope();
   _scope4.run(() => {
     effect(() => {
@@ -211732,10 +211982,52 @@ function toolbarTemplate() {
         `)}
     </sp-action-group>
   `;
+  const windowControls = 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=${(e20) => _ctx11.openRecentProject(e20.target.value)}>
+              ${recentProjects.map((p2) => html`<sp-menu-item value=${p2.root}>${p2.name}</sp-menu-item>`)}
+            </sp-menu>
+          </sp-popover>
+        </overlay-trigger>
+      ` : nothing;
   return html`
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Open Project", _ctx11.openProject, "sp-icon-folder-open")}
-      ${tbBtnTpl("Open File", _ctx11.openFile, "sp-icon-document")}
+      ${tbBtnTpl("Open Project", _ctx11.openProject, "sp-icon-folder-open")} ${recentProjectsTpl}
       ${tbBtnTpl("Save", _ctx11.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
@@ -211743,14 +212035,12 @@ function toolbarTemplate() {
       ${tbBtnTpl("Redo", () => redo(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}
   `;
 }
 
@@ -214890,15 +215180,15 @@ function bindableFieldRow(label4, type2, rawValue, onChange, filterFn = null, ex
   const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
   const signalDefs = Object.entries(defs).filter(([, d5]) => filterFn ? filterFn(d5) : !d5.$handler && d5.$prototype !== "Function");
   let debounce;
-  const onInput = (e20) => {
+  const onInput2 = (e20) => {
     clearTimeout(debounce);
     debounce = setTimeout(() => onChange(e20.target.value), 400);
   };
   const staticVal = isBound ? "" : rawValue ?? "";
-  const staticTpl = type2 === "textarea" ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput}></sp-textfield>` : type2 === "checkbox" ? html`<sp-checkbox
+  const staticTpl = type2 === "textarea" ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput2}></sp-textfield>` : type2 === "checkbox" ? html`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(e20) => onChange(e20.target.checked)}
-          ></sp-checkbox>` : html`<sp-textfield size="s" value=${staticVal} @input=${onInput}></sp-textfield>`;
+          ></sp-checkbox>` : html`<sp-textfield size="s" value=${staticVal} @input=${onInput2}></sp-textfield>`;
   const boundTpl = html`
     <sp-picker
       size="s"
@@ -215003,16 +215293,18 @@ function renderFrontmatterOnlyPanel() {
       fields.push({ field, entry: fieldSchema, value: fm[field] });
     }
     for (const [field, value2] of Object.entries(fm)) {
-      if (!schemaProps[field]) {
-        fields.push({
-          field,
-          entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
-          value: value2
-        });
-      }
+      if (schemaProps[field] || field.startsWith("$"))
+        continue;
+      fields.push({
+        field,
+        entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
+        value: value2
+      });
     }
   } else {
     for (const [field, value2] of Object.entries(fm)) {
+      if (field.startsWith("$"))
+        continue;
       fields.push({
         field,
         entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
@@ -216094,16 +216386,18 @@ function renderPropertiesPanelTemplate(ctx) {
         fields.push({ field, entry: fieldSchema, value: fm[field] });
       }
       for (const [field, value2] of Object.entries(fm)) {
-        if (!schemaProps[field]) {
-          fields.push({
-            field,
-            entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
-            value: value2
-          });
-        }
+        if (schemaProps[field] || field.startsWith("$"))
+          continue;
+        fields.push({
+          field,
+          entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
+          value: value2
+        });
       }
     } else {
       for (const [field, value2] of Object.entries(fm)) {
+        if (field.startsWith("$"))
+          continue;
         fields.push({
           field,
           entry: { type: typeof value2 === "boolean" ? "boolean" : "string" },
@@ -217034,7 +217328,7 @@ mount5(toolbarEl, {
   navigateBack: () => navigateBack(),
   closeFunctionEditor: () => closeFunctionEditor(),
   openProject: () => openProject2(),
-  openFile: () => openFile(),
+  openRecentProject: (root3) => openRecentProject(root3),
   saveFile: () => saveFile(),
   parseMediaEntries,
   getCanvasMode,
@@ -217042,6 +217336,7 @@ mount5(toolbarEl, {
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel()
 });
+initQuickSearch();
 mount8(document.querySelector("#tab-strip"));
 mount3({
   getCanvasMode,
@@ -217262,6 +217557,51 @@ function openProject2() {
     renderLeftPanel
   });
 }
+async function openRecentProject(root3) {
+  try {
+    const platform4 = getPlatform();
+    platform4.projectRoot = root3;
+    const content3 = await platform4.readFile("project.json");
+    const config = JSON.parse(content3);
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+    setProjectState({
+      ...projectState,
+      projectRoot: root3,
+      isSiteProject: true,
+      projectConfig: config,
+      name: config.name || root3.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 entries2 = projectState.dirs.get(".") || [];
+    for (const e20 of entries2) {
+      if (e20.type === "directory" && conventionalDirs.includes(e20.name)) {
+        projectState.expanded.add(e20.path || e20.name);
+        await loadDirectory(e20.path || e20.name);
+      }
+    }
+    addRecentProject(projectState.name, root3);
+    view.leftTab = "files";
+    renderActivityBar();
+    renderLeftPanel();
+    statusMessage(`Opened project: ${projectState.name}`);
+  } catch (e20) {
+    statusMessage(`Error: ${e20.message}`);
+  }
+}
 function renderFilesTemplate2() {
   return renderFilesTemplate({ openProject: openProject2, openFileFromTree, renderLeftPanel });
 }
@@ -217318,5 +217658,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=441141DC7697869B64756E2164756E21
+//# debugId=D4BE66DA4C58521864756E2164756E21
 //# sourceMappingURL=studio.js.map