@jxsuite/studio 0.17.0 → 0.18.0

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);
+}

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;
+  }
+}