@jxsuite/studio 0.16.1 → 0.18.0

package/src/panels/toolbar.js

@@ -11,6 +11,8 @@ import { activeTab } from "../workspace/workspace.js";
 import { getEffectiveMedia } from "../site-context.js";
 import { mediaDisplayName } from "./shared.js";
 import { view } from "../view.js";
+import { getRecentProjects } from "../recent-projects.js";
+import { openQuickSearch } from "./quick-search.js";
 
 /** @type {HTMLElement | null} */
 let _rootEl = null;
@@ -62,6 +64,9 @@ function tbBtnTpl(label, onClick, iconTag) {
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
+  if (/** @type {any} */ (globalThis).__jxPlatform?.windowControls) {
+    rootEl.classList.add("electrobun-webkit-app-region-drag");
+  }
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -189,9 +194,12 @@ function toolbarTemplate() {
     { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
     { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
     { key: "source", label: "Code", iconTag: "sp-icon-code" },
-    { key: "settings", label: "Settings", iconTag: "sp-icon-gears" },
+    { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" },
   ];
 
+  const isProjectFile = S.documentPath === "project.json";
+  const allowedModes = isProjectFile ? new Set(["stylebook", "source"]) : null;
+
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>
       ${modes.map(
@@ -199,8 +207,10 @@ function toolbarTemplate() {
           <sp-action-button
             size="s"
             ?selected=${canvasMode === m.key}
+            ?disabled=${allowedModes && !allowedModes.has(m.key)}
             @click=${() => {
               if (canvasMode === m.key) return;
+              if (allowedModes && !allowedModes.has(m.key)) return;
               if (S.ui.editingFunction) {
                 if (view.functionEditor) {
                   view.functionEditor.dispose();
@@ -212,7 +222,7 @@ function toolbarTemplate() {
               view.panY = 0;
               /** @type {Record<string, any>} */
               const uiPatch = { editingFunction: null };
-              if (m.key === "settings") uiPatch.rightTab = "style";
+              if (m.key === "stylebook") uiPatch.rightTab = "style";
               if (m.key === "manage") view.leftTab = "files";
               updateSession({ ui: uiPatch });
               _ctx.renderCanvas();
@@ -226,10 +236,60 @@ function toolbarTemplate() {
     </sp-action-group>
   `;
 
+  const windowControls = /** @type {any} */ (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=${(/** @type {any} */ e) => _ctx.openRecentProject(e.target.value)}>
+              ${recentProjects.map(
+                (p) => html`<sp-menu-item value=${p.root}>${p.name}</sp-menu-item>`,
+              )}
+            </sp-menu>
+          </sp-popover>
+        </overlay-trigger>
+      `
+    : nothing;
+
   return html`
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")}
-      ${tbBtnTpl("Open File", _ctx.openFile, "sp-icon-document")}
+      ${tbBtnTpl("Open Project", _ctx.openProject, "sp-icon-folder-open")} ${recentProjectsTpl}
       ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
@@ -237,17 +297,11 @@ function toolbarTemplate() {
       ${tbBtnTpl("Redo", () => tabRedo(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}
   `;
 }

package/src/platforms/devserver.js

@@ -315,6 +315,18 @@ export function createDevServerPlatform() {
       return null;
     },
 
+    /** @param {string} query */
+    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 entries = await res.json();
+      for (const e of entries) e.path = stripRoot(e.path);
+      return entries;
+    },
+
     // ─── Plugin schema ────────────────────────────────────────────────────
 
     /**

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/settings/css-vars-editor.js

@@ -0,0 +1,307 @@
+/**
+ * CSS Variables editor — form-based editor for managing design tokens. Colors and fonts are NOT
+ * media-aware; sizes/spacing are media-aware.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import { projectState } from "../store.js";
+import { updateSiteConfig } from "../site-context.js";
+import { getEffectiveMedia } from "../site-context.js";
+import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
+
+/** @param {HTMLElement} container */
+export function renderCssVarsEditor(container) {
+  const config = projectState.projectConfig || {};
+  const rootStyle = config.style || {};
+  const media = getEffectiveMedia(config.$media);
+
+  /**
+   * @type {{
+   *   color: [string, any][];
+   *   font: [string, any][];
+   *   size: [string, any][];
+   *   other: [string, any][];
+   * }}
+   */
+  const groups = { color: [], font: [], size: [], other: [] };
+  for (const [k, v] of Object.entries(rootStyle)) {
+    if (!k.startsWith("--")) continue;
+    if (typeof v !== "string" && typeof v !== "number") continue;
+    if (k.startsWith("--color")) groups.color.push([k, v]);
+    else if (k.startsWith("--font")) groups.font.push([k, v]);
+    else if (k.startsWith("--size") || k.startsWith("--spacing") || k.startsWith("--radius"))
+      groups.size.push([k, v]);
+    else groups.other.push([k, v]);
+  }
+
+  const mediaNames = media ? Object.keys(media).filter((m) => m !== "--") : [];
+
+  const save = () => {
+    updateSiteConfig({ style: { ...rootStyle } });
+  };
+
+  const updateVar = (/** @type {string} */ name, /** @type {string} */ val) => {
+    rootStyle[name] = val;
+    save();
+  };
+
+  const deleteVar = (/** @type {string} */ name) => {
+    delete rootStyle[name];
+    save();
+    renderCssVarsEditor(container);
+  };
+
+  const addVar = (
+    /** @type {string} */ prefix,
+    /** @type {string} */ friendlyName,
+    /** @type {string} */ val,
+  ) => {
+    const varName = friendlyNameToVar(friendlyName, prefix);
+    if (!varName || !val) return;
+    rootStyle[varName] = val;
+    save();
+    renderCssVarsEditor(container);
+  };
+
+  const tpl = html`
+    <div class="settings-section">
+      <h3 class="settings-section-title">CSS Variables</h3>
+
+      ${renderColorSection(groups.color, updateVar, deleteVar, addVar)}
+      ${renderFontSection(groups.font, updateVar, deleteVar, addVar)}
+      ${renderSizeSection(groups.size, updateVar, deleteVar, addVar, rootStyle, mediaNames)}
+      ${groups.other.length > 0
+        ? renderOtherSection(groups.other, updateVar, deleteVar, addVar, rootStyle, mediaNames)
+        : nothing}
+    </div>
+  `;
+
+  litRender(tpl, container);
+}
+
+/**
+ * @param {[string, any][]} vars
+ * @param {Function} updateVar
+ * @param {Function} deleteVar
+ * @param {Function} addVar
+ */
+function renderColorSection(vars, updateVar, deleteVar, addVar) {
+  return html`
+    <div class="css-vars-group">
+      <h4 class="css-vars-group-title">Colors</h4>
+      ${vars.map(
+        ([name, val]) => html`
+          <div class="css-var-row">
+            <div class="css-var-swatch" style="background:${val}">
+              <input
+                type="color"
+                .value=${val && val.startsWith("#") ? val : "#007acc"}
+                @input=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              />
+            </div>
+            <span class="css-var-name">${varDisplayName(name, "--color-")}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(val)}
+              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              style="flex:1;max-width:160px"
+            ></sp-textfield>
+            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
+              <sp-icon-delete slot="icon"></sp-icon-delete>
+            </sp-action-button>
+          </div>
+        `,
+      )}
+      ${renderAddRow("--color-", "Primary Blue", "#007acc", addVar)}
+    </div>
+  `;
+}
+
+/**
+ * @param {[string, any][]} vars
+ * @param {Function} updateVar
+ * @param {Function} deleteVar
+ * @param {Function} addVar
+ */
+function renderFontSection(vars, updateVar, deleteVar, addVar) {
+  return html`
+    <div class="css-vars-group">
+      <h4 class="css-vars-group-title">Fonts</h4>
+      ${vars.map(
+        ([name, val]) => html`
+          <div class="css-var-row">
+            <span class="css-var-name">${varDisplayName(name, "--font-")}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(val)}
+              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              style="flex:1"
+            ></sp-textfield>
+            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
+              <sp-icon-delete slot="icon"></sp-icon-delete>
+            </sp-action-button>
+          </div>
+          <div class="css-var-font-preview" style="font-family:${val}">
+            The quick brown fox jumps over the lazy dog
+          </div>
+        `,
+      )}
+      ${renderAddRow("--font-", "Body Serif", "'Georgia', serif", addVar)}
+    </div>
+  `;
+}
+
+/**
+ * @param {[string, any][]} vars
+ * @param {Function} updateVar
+ * @param {Function} deleteVar
+ * @param {Function} addVar
+ * @param {any} rootStyle
+ * @param {string[]} mediaNames
+ */
+function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
+  return html`
+    <div class="css-vars-group">
+      <h4 class="css-vars-group-title">Sizes &amp; Spacing</h4>
+      ${vars.map(
+        ([name, val]) => html`
+          <div class="css-var-row">
+            <span class="css-var-name"
+              >${varDisplayName(name, "--size-") ||
+              varDisplayName(name, "--spacing-") ||
+              varDisplayName(name, "--radius-") ||
+              name}</span
+            >
+            <sp-textfield
+              size="s"
+              .value=${String(val)}
+              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              style="max-width:120px"
+            ></sp-textfield>
+            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
+              <sp-icon-delete slot="icon"></sp-icon-delete>
+            </sp-action-button>
+          </div>
+          ${mediaNames.length > 0 ? renderMediaOverrides(name, rootStyle, mediaNames) : nothing}
+        `,
+      )}
+      ${renderAddRow("--size-", "Spacing Large", "32px", addVar)}
+    </div>
+  `;
+}
+
+/**
+ * @param {[string, any][]} vars
+ * @param {Function} updateVar
+ * @param {Function} deleteVar
+ * @param {Function} addVar
+ * @param {any} rootStyle
+ * @param {string[]} mediaNames
+ */
+function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
+  return html`
+    <div class="css-vars-group">
+      <h4 class="css-vars-group-title">Other</h4>
+      ${vars.map(
+        ([name, val]) => html`
+          <div class="css-var-row">
+            <span class="css-var-name">${name}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(val)}
+              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              style="flex:1"
+            ></sp-textfield>
+            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
+              <sp-icon-delete slot="icon"></sp-icon-delete>
+            </sp-action-button>
+          </div>
+          ${mediaNames.length > 0 ? renderMediaOverrides(name, rootStyle, mediaNames) : nothing}
+        `,
+      )}
+      ${renderAddRow("--", "Custom Var", "value", addVar)}
+    </div>
+  `;
+}
+
+/**
+ * @param {string} varName
+ * @param {any} rootStyle
+ * @param {string[]} mediaNames
+ */
+function renderMediaOverrides(varName, rootStyle, mediaNames) {
+  const overrides = [];
+  for (const mediaName of mediaNames) {
+    const mediaKey = `@${mediaName}`;
+    const mediaBlock = rootStyle[mediaKey];
+    if (mediaBlock && typeof mediaBlock === "object" && mediaBlock[varName]) {
+      overrides.push({ mediaName, value: mediaBlock[varName] });
+    }
+  }
+
+  if (overrides.length === 0) return nothing;
+
+  return html`
+    <div class="css-var-media-overrides">
+      ${overrides.map(
+        (o) => html`
+          <div class="css-var-media-row">
+            <span class="css-var-media-label">@${o.mediaName}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(o.value)}
+              @change=${(/** @type {any} */ e) => {
+                if (!rootStyle[`@${o.mediaName}`]) rootStyle[`@${o.mediaName}`] = {};
+                rootStyle[`@${o.mediaName}`][varName] = e.target.value;
+                updateSiteConfig({ style: { ...rootStyle } });
+              }}
+              style="max-width:120px"
+            ></sp-textfield>
+          </div>
+        `,
+      )}
+    </div>
+  `;
+}
+
+/**
+ * @param {string} prefix
+ * @param {string} placeholder
+ * @param {string} valuePlaceholder
+ * @param {Function} addVar
+ */
+function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
+  /** @type {any} */
+  let nameEl = null;
+  /** @type {any} */
+  let valEl = null;
+
+  return html`
+    <div class="css-var-add-row">
+      <sp-textfield
+        size="s"
+        placeholder=${placeholder}
+        ${ref((el) => {
+          if (el) nameEl = el;
+        })}
+      ></sp-textfield>
+      <sp-textfield
+        size="s"
+        placeholder=${valuePlaceholder}
+        ${ref((el) => {
+          if (el) valEl = el;
+        })}
+      ></sp-textfield>
+      <sp-action-button
+        size="s"
+        @click=${() => {
+          if (nameEl && valEl) {
+            addVar(prefix, nameEl.value, valEl.value);
+          }
+        }}
+        >Add</sp-action-button
+      >
+    </div>
+  `;
+}

package/src/settings/general-settings.js

@@ -0,0 +1,94 @@
+/** General settings section — favicon, platform adapter, and other site-wide config. */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { projectState } from "../store.js";
+import { updateSiteConfig } from "../site-context.js";
+import { getPlatform } from "../platform.js";
+import { openFileInTab } from "../files/files.js";
+import { closeSettingsModal } from "./settings-modal.js";
+
+/** @param {HTMLElement} container */
+export function renderGeneralSettings(container) {
+  const config = projectState.projectConfig || {};
+
+  const onFaviconUpload = async () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*,.ico,.svg";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const platform = getPlatform();
+      await platform.uploadFile("public/favicon.ico", file);
+      await updateSiteConfig({ favicon: "/favicon.ico" });
+      renderGeneralSettings(container);
+    };
+    input.click();
+  };
+
+  const onAdapterChange = (/** @type {any} */ e) => {
+    updateSiteConfig({ adapter: e.target.value });
+  };
+
+  const onEditGlobalStyles = () => {
+    closeSettingsModal();
+    openFileInTab("project.json");
+  };
+
+  const currentFavicon = config.favicon;
+
+  const tpl = html`
+    <div class="settings-section">
+      <h3 class="settings-section-title">General</h3>
+
+      <div class="settings-field">
+        <label class="settings-field-label">Favicon</label>
+        <p class="settings-field-desc">Upload an image to use as the site favicon.</p>
+        <div style="display:flex;align-items:center;gap:12px">
+          ${currentFavicon
+            ? html`<img
+                src=${currentFavicon}
+                alt="Current favicon"
+                style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:4px;padding:2px"
+              />`
+            : html`<div
+                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:11px"
+              >
+                —
+              </div>`}
+          <sp-action-button size="s" @click=${onFaviconUpload}> Upload Favicon </sp-action-button>
+          ${currentFavicon
+            ? html`<span style="font-size:11px;color:var(--fg-dim)">${currentFavicon}</span>`
+            : nothing}
+        </div>
+      </div>
+
+      <div class="settings-field">
+        <label class="settings-field-label">Platform Adapter</label>
+        <p class="settings-field-desc">Build adapter for deployment target.</p>
+        <sp-picker
+          size="s"
+          label="Platform Adapter"
+          .value=${config.adapter || "static"}
+          @change=${onAdapterChange}
+        >
+          <sp-menu-item value="static">Static</sp-menu-item>
+          <sp-menu-item value="bun">Bun</sp-menu-item>
+          <sp-menu-item value="node">Node</sp-menu-item>
+          <sp-menu-item value="cloudflare-workers">Cloudflare Workers</sp-menu-item>
+          <sp-menu-item value="cloudflare-pages">Cloudflare Pages</sp-menu-item>
+        </sp-picker>
+      </div>
+
+      <div class="settings-field">
+        <label class="settings-field-label">Global Styles</label>
+        <p class="settings-field-desc">Edit default element styles that apply across all pages.</p>
+        <sp-action-button size="s" @click=${onEditGlobalStyles}>
+          Edit Global Styles
+        </sp-action-button>
+      </div>
+    </div>
+  `;
+
+  litRender(tpl, container);
+}