@jxsuite/studio 0.16.0 → 0.17.0

package/src/recent-projects.js

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

package/src/studio.js

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

package/src/ui/spectrum.js

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

package/src/workspace/workspace.js

@@ -84,6 +84,50 @@ export function closeTab(tabId) {
   }
 }
 
+/** Close all open tabs, disposing each. Defers reactivity until fully cleared. */
+export function closeAllTabs() {
+  const tabs = [...workspace.tabs.values()];
+  workspace.tabs.clear();
+  workspace.tabOrder = [];
+  workspace.activeTabId = null;
+  for (const tab of tabs) {
+    disposeTab(tab);
+  }
+}
+
+/**
+ * Replace all existing tabs with a new one atomically. Ensures activeTab is never null during the
+ * transition.
+ *
+ * @param {{
+ *   id: string;
+ *   documentPath?: string | null;
+ *   document: Record<string, any>;
+ *   frontmatter?: Record<string, unknown>;
+ *   sourceFormat?: string | null;
+ * }} newTabOpts
+ * @returns {import("../tabs/tab.js").Tab}
+ */
+export 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;
+}
+
 /**
  * Switch to an existing tab.
  *