@jxsuite/studio 0.16.1 → 0.18.0

package/src/settings/head-editor.js

@@ -0,0 +1,184 @@
+/**
+ * Head editor — structured form for managing $head entries (link, meta, script, style tags) with
+ * Monaco editor for script/style bodies.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { projectState } from "../store.js";
+import { updateSiteConfig } from "../site-context.js";
+
+/** @param {HTMLElement} container */
+export function renderHeadEditor(container) {
+  const config = projectState.projectConfig || {};
+  const headEntries = config.$head || [];
+
+  const save = () => {
+    updateSiteConfig({ $head: headEntries });
+  };
+
+  const addEntry = (/** @type {string} */ tag) => {
+    /** @type {any} */
+    const entry = { tag };
+    if (tag === "link") {
+      entry.rel = "stylesheet";
+      entry.href = "";
+    } else if (tag === "meta") {
+      entry.name = "";
+      entry.content = "";
+    } else if (tag === "script") {
+      entry.src = "";
+      entry.body = "";
+    } else if (tag === "style") {
+      entry.body = "";
+    }
+    headEntries.push(entry);
+    save();
+    renderHeadEditor(container);
+  };
+
+  const removeEntry = (/** @type {number} */ idx) => {
+    headEntries.splice(idx, 1);
+    save();
+    renderHeadEditor(container);
+  };
+
+  const updateEntry = (
+    /** @type {number} */ idx,
+    /** @type {string} */ key,
+    /** @type {string} */ val,
+  ) => {
+    headEntries[idx][key] = val;
+    save();
+  };
+
+  const tpl = html`
+    <div class="settings-section">
+      <h3 class="settings-section-title">Head</h3>
+      <p class="settings-field-desc">
+        Manage global &lt;head&gt; tags — stylesheets, meta tags, scripts, and inline styles.
+      </p>
+
+      <div class="head-entries">
+        ${headEntries.map(
+          (/** @type {any} */ entry, /** @type {number} */ idx) => html`
+            <div class="head-entry">
+              <div class="head-entry-header">
+                <span class="head-entry-tag">&lt;${entry.tag}&gt;</span>
+                <sp-action-button quiet size="s" @click=${() => removeEntry(idx)}>
+                  <sp-icon-delete slot="icon"></sp-icon-delete>
+                </sp-action-button>
+              </div>
+              <div class="head-entry-fields">${renderEntryFields(entry, idx, updateEntry)}</div>
+            </div>
+          `,
+        )}
+      </div>
+
+      <div class="head-add-actions" style="margin-top:12px;display:flex;gap:8px">
+        <sp-action-button size="s" @click=${() => addEntry("link")}> + Link </sp-action-button>
+        <sp-action-button size="s" @click=${() => addEntry("meta")}> + Meta </sp-action-button>
+        <sp-action-button size="s" @click=${() => addEntry("script")}> + Script </sp-action-button>
+        <sp-action-button size="s" @click=${() => addEntry("style")}> + Style </sp-action-button>
+      </div>
+    </div>
+  `;
+
+  litRender(tpl, container);
+}
+
+/**
+ * @param {any} entry
+ * @param {number} idx
+ * @param {(idx: number, key: string, val: string) => void} updateEntry
+ */
+function renderEntryFields(entry, idx, updateEntry) {
+  /** @type {any} */
+  let debounce;
+  const onFieldChange = (/** @type {string} */ key) => (/** @type {any} */ e) => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      updateEntry(idx, key, e.target.value);
+    }, 300);
+  };
+
+  switch (entry.tag) {
+    case "link":
+      return html`
+        <div class="settings-field-row">
+          <sp-textfield
+            size="s"
+            label="rel"
+            .value=${entry.rel || ""}
+            @change=${onFieldChange("rel")}
+          ></sp-textfield>
+          <sp-textfield
+            size="s"
+            label="href"
+            .value=${entry.href || ""}
+            @change=${onFieldChange("href")}
+            style="flex:1"
+          ></sp-textfield>
+        </div>
+      `;
+    case "meta":
+      return html`
+        <div class="settings-field-row">
+          <sp-textfield
+            size="s"
+            label="name"
+            .value=${entry.name || ""}
+            @change=${onFieldChange("name")}
+          ></sp-textfield>
+          <sp-textfield
+            size="s"
+            label="content"
+            .value=${entry.content || ""}
+            @change=${onFieldChange("content")}
+            style="flex:1"
+          ></sp-textfield>
+        </div>
+      `;
+    case "script":
+      return html`
+        <div class="settings-field-row">
+          <sp-textfield
+            size="s"
+            label="src"
+            .value=${entry.src || ""}
+            @change=${onFieldChange("src")}
+            placeholder="URL or leave empty for inline"
+            style="flex:1"
+          ></sp-textfield>
+        </div>
+        ${!entry.src
+          ? html`
+              <div class="head-entry-body">
+                <label class="settings-field-label">Script body</label>
+                <textarea
+                  class="head-code-editor"
+                  .value=${entry.body || ""}
+                  @input=${onFieldChange("body")}
+                  rows="6"
+                  spellcheck="false"
+                ></textarea>
+              </div>
+            `
+          : nothing}
+      `;
+    case "style":
+      return html`
+        <div class="head-entry-body">
+          <label class="settings-field-label">Style body</label>
+          <textarea
+            class="head-code-editor"
+            .value=${entry.body || ""}
+            @input=${onFieldChange("body")}
+            rows="8"
+            spellcheck="false"
+          ></textarea>
+        </div>
+      `;
+    default:
+      return nothing;
+  }
+}

package/src/settings/settings-modal.js

@@ -0,0 +1,117 @@
+/**
+ * Settings modal — site-wide project settings (CSS variables, definitions, content types, head,
+ * general). Modeled after VS Code / Obsidian settings panels: left sidebar nav + right content
+ * area.
+ */
+
+import { html, render as litRender } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import { renderDefsEditor } from "./defs-editor.js";
+import { renderContentTypesEditor } from "./content-types-editor.js";
+import { renderCssVarsEditor } from "./css-vars-editor.js";
+import { renderHeadEditor } from "./head-editor.js";
+import { renderGeneralSettings } from "./general-settings.js";
+
+/** @type {HTMLElement | null} */
+let _host = null;
+
+/** @type {string} */
+let _activeSection = "general";
+
+const sections = [
+  { key: "general", label: "General", icon: "sp-icon-properties" },
+  { key: "head", label: "Head", icon: "sp-icon-file-single-web-page" },
+  { key: "cssVars", label: "CSS Variables", icon: "sp-icon-brush" },
+  { key: "definitions", label: "Definitions", icon: "sp-icon-data" },
+  { key: "contentTypes", label: "Content Types", icon: "sp-icon-view-grid" },
+];
+
+export function openSettingsModal() {
+  if (_host) return;
+
+  _host = document.createElement("div");
+  _host.style.display = "contents";
+  const themeRoot = document.querySelector("sp-theme") || document.body;
+  themeRoot.appendChild(_host);
+  _activeSection = "general";
+  renderModal();
+}
+
+export function closeSettingsModal() {
+  if (!_host) return;
+  _host.remove();
+  _host = null;
+}
+
+function renderModal() {
+  if (!_host) return;
+
+  const onNavClick = (/** @type {string} */ key) => {
+    _activeSection = key;
+    renderModal();
+    renderActiveSection();
+  };
+
+  const tpl = html`
+    <sp-underlay open @close=${closeSettingsModal}></sp-underlay>
+    <div
+      class="settings-modal"
+      @keydown=${(/** @type {KeyboardEvent} */ e) => {
+        if (e.key === "Escape") closeSettingsModal();
+      }}
+    >
+      <div class="settings-modal-header">
+        <h2 class="settings-modal-title">Settings</h2>
+        <sp-action-button quiet size="s" @click=${closeSettingsModal} title="Close">
+          <sp-icon-close slot="icon"></sp-icon-close>
+        </sp-action-button>
+      </div>
+      <div class="settings-modal-body">
+        <nav class="settings-modal-nav">
+          ${sections.map(
+            (s) => html`
+              <button
+                class="settings-nav-item${_activeSection === s.key ? " active" : ""}"
+                @click=${() => onNavClick(s.key)}
+              >
+                ${s.label}
+              </button>
+            `,
+          )}
+        </nav>
+        <div
+          class="settings-modal-content"
+          ${ref((el) => {
+            if (el) requestAnimationFrame(() => renderActiveSection());
+          })}
+        ></div>
+      </div>
+    </div>
+  `;
+
+  litRender(tpl, _host);
+}
+
+function renderActiveSection() {
+  if (!_host) return;
+  const container = _host.querySelector(".settings-modal-content");
+  if (!container) return;
+
+  switch (_activeSection) {
+    case "general":
+      renderGeneralSettings(/** @type {HTMLElement} */ (container));
+      break;
+    case "head":
+      renderHeadEditor(/** @type {HTMLElement} */ (container));
+      break;
+    case "cssVars":
+      renderCssVarsEditor(/** @type {HTMLElement} */ (container));
+      break;
+    case "definitions":
+      renderDefsEditor(/** @type {HTMLElement} */ (container));
+      break;
+    case "contentTypes":
+      renderContentTypesEditor(/** @type {HTMLElement} */ (container));
+      break;
+  }
+}

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],