@jxsuite/studio 0.19.0 → 0.20.0

package/src/settings/css-vars-editor.js

@@ -12,16 +12,16 @@ import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
 
 /** @param {HTMLElement} container */
 export function renderCssVarsEditor(container) {
-  const config = projectState.projectConfig || {};
+  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][];
+   *   color: [string, string | number][];
+   *   font: [string, string | number][];
+   *   size: [string, string | number][];
+   *   other: [string, string | number][];
    * }}
    */
   const groups = { color: [], font: [], size: [], other: [] };
@@ -81,7 +81,7 @@ export function renderCssVarsEditor(container) {
 }
 
 /**
- * @param {[string, any][]} vars
+ * @param {[string, string | number][]} vars
  * @param {Function} updateVar
  * @param {Function} deleteVar
  * @param {Function} addVar
@@ -96,15 +96,17 @@ function renderColorSection(vars, updateVar, deleteVar, addVar) {
             <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)}
+                .value=${val && String(val).startsWith("#") ? val : "#007acc"}
+                @input=${(/** @type {Event} */ e) =>
+                  updateVar(name, /** @type {HTMLInputElement} */ (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)}
+              @change=${(/** @type {Event} */ e) =>
+                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
               style="flex:1;max-width:160px"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -119,7 +121,7 @@ function renderColorSection(vars, updateVar, deleteVar, addVar) {
 }
 
 /**
- * @param {[string, any][]} vars
+ * @param {[string, string | number][]} vars
  * @param {Function} updateVar
  * @param {Function} deleteVar
  * @param {Function} addVar
@@ -135,7 +137,8 @@ function renderFontSection(vars, updateVar, deleteVar, addVar) {
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              @change=${(/** @type {Event} */ e) =>
+                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
               style="flex:1"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -153,11 +156,11 @@ function renderFontSection(vars, updateVar, deleteVar, addVar) {
 }
 
 /**
- * @param {[string, any][]} vars
+ * @param {[string, string | number][]} vars
  * @param {Function} updateVar
  * @param {Function} deleteVar
  * @param {Function} addVar
- * @param {any} rootStyle
+ * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
 function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
@@ -176,7 +179,8 @@ function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaN
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              @change=${(/** @type {Event} */ e) =>
+                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
               style="max-width:120px"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -192,11 +196,11 @@ function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaN
 }
 
 /**
- * @param {[string, any][]} vars
+ * @param {[string, string | number][]} vars
  * @param {Function} updateVar
  * @param {Function} deleteVar
  * @param {Function} addVar
- * @param {any} rootStyle
+ * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
 function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
@@ -210,7 +214,8 @@ function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, media
             <sp-textfield
               size="s"
               .value=${String(val)}
-              @change=${(/** @type {any} */ e) => updateVar(name, e.target.value)}
+              @change=${(/** @type {Event} */ e) =>
+                updateVar(name, /** @type {HTMLInputElement} */ (e.target).value)}
               style="flex:1"
             ></sp-textfield>
             <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
@@ -227,7 +232,7 @@ function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, media
 
 /**
  * @param {string} varName
- * @param {any} rootStyle
+ * @param {JxStyle} rootStyle
  * @param {string[]} mediaNames
  */
 function renderMediaOverrides(varName, rootStyle, mediaNames) {
@@ -251,9 +256,10 @@ function renderMediaOverrides(varName, rootStyle, mediaNames) {
             <sp-textfield
               size="s"
               .value=${String(o.value)}
-              @change=${(/** @type {any} */ e) => {
+              @change=${(/** @type {Event} */ e) => {
                 if (!rootStyle[`@${o.mediaName}`]) rootStyle[`@${o.mediaName}`] = {};
-                rootStyle[`@${o.mediaName}`][varName] = e.target.value;
+                /** @type {Record<string, unknown>} */ (rootStyle[`@${o.mediaName}`])[varName] =
+                  /** @type {HTMLInputElement} */ (e.target).value;
                 updateSiteConfig({ style: { ...rootStyle } });
               }}
               style="max-width:120px"
@@ -272,9 +278,9 @@ function renderMediaOverrides(varName, rootStyle, mediaNames) {
  * @param {Function} addVar
  */
 function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
-  /** @type {any} */
+  /** @type {HTMLInputElement | null} */
   let nameEl = null;
-  /** @type {any} */
+  /** @type {HTMLInputElement | null} */
   let valEl = null;
 
   return html`
@@ -283,14 +289,14 @@ function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
         size="s"
         placeholder=${placeholder}
         ${ref((el) => {
-          if (el) nameEl = el;
+          if (el) nameEl = /** @type {HTMLInputElement} */ (el);
         })}
       ></sp-textfield>
       <sp-textfield
         size="s"
         placeholder=${valuePlaceholder}
         ${ref((el) => {
-          if (el) valEl = el;
+          if (el) valEl = /** @type {HTMLInputElement} */ (el);
         })}
       ></sp-textfield>
       <sp-action-button

package/src/settings/defs-editor.js

@@ -29,7 +29,7 @@ let newDefName = "";
 
 async function saveProjectConfig() {
   const platform = getPlatform();
-  const config = /** @type {any} */ (projectState).projectConfig;
+  const config = /** @type {{ projectConfig: ProjectConfig }} */ (projectState).projectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
 }
 
@@ -131,7 +131,7 @@ function handleRenameField(oldName, newName, rerender) {
   const def = getSelectedDef();
   if (!def?.properties || !newName || def.properties[newName]) return;
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const newProps = {};
   for (const [key, val] of Object.entries(def.properties)) {
     newProps[key === oldName ? newName : key] = val;
@@ -253,7 +253,7 @@ function handleRenameNested(parentName, oldChild, newChild, rerender) {
   const parent = def?.properties?.[parentName];
   if (!parent?.properties || !newChild || parent.properties[newChild]) return;
 
-  /** @type {Record<string, any>} */
+  /** @type {Record<string, unknown>} */
   const newProps = {};
   for (const [key, val] of Object.entries(parent.properties)) {
     newProps[key === oldChild ? newChild : key] = val;
@@ -359,10 +359,10 @@ export function renderDefsEditor(container) {
                 size="s"
                 placeholder="TypeName"
                 .value=${newDefName}
-                @input=${(/** @type {any} */ e) => {
-                  newDefName = e.target.value;
+                @input=${(/** @type {Event} */ e) => {
+                  newDefName = /** @type {HTMLInputElement} */ (e.target).value;
                 }}
-                @keydown=${(/** @type {any} */ e) => {
+                @keydown=${(/** @type {KeyboardEvent} */ e) => {
                   if (e.key === "Enter") handleNewDef(rerender);
                   if (e.key === "Escape") {
                     showNewDef = false;
@@ -415,7 +415,12 @@ export function renderDefsEditor(container) {
     };
 
     const fieldCards = Object.entries(properties).map(([name, fieldDef]) =>
-      fieldCardTpl(name, /** @type {any} */ (fieldDef), required.includes(name), handlers),
+      fieldCardTpl(
+        name,
+        /** @type {import("./schema-field-ui.js").SchemaProperty} */ (fieldDef),
+        required.includes(name),
+        handlers,
+      ),
     );
 
     editorTpl = html`

package/src/settings/general-settings.js

@@ -1,4 +1,4 @@
-/** General settings section — favicon, platform adapter, and other site-wide config. */
+/** General settings section — favicon, platform adapter, breakpoints, and other site-wide config. */
 
 import { html, render as litRender, nothing } from "lit-html";
 import { projectState } from "../store.js";
@@ -9,7 +9,7 @@ import { closeSettingsModal } from "./settings-modal.js";
 
 /** @param {HTMLElement} container */
 export function renderGeneralSettings(container) {
-  const config = projectState.projectConfig || {};
+  const config = /** @type {ProjectConfig} */ (projectState?.projectConfig || {});
 
   const onFaviconUpload = async () => {
     const input = document.createElement("input");
@@ -26,7 +26,7 @@ export function renderGeneralSettings(container) {
     input.click();
   };
 
-  const onAdapterChange = (/** @type {any} */ e) => {
+  const onAdapterChange = (/** @type {Event & { target: { value: string } }} */ e) => {
     updateSiteConfig({ build: { ...config.build, adapter: e.target.value } });
   };
 
@@ -35,6 +35,43 @@ export function renderGeneralSettings(container) {
     openFileInTab("project.json");
   };
 
+  // ─── Breakpoints ($media) ───────────────────────────────────────────────────
+
+  const media = /** @type {Record<string, string>} */ (config.$media || {});
+  const mediaEntries = Object.entries(media);
+
+  const onMediaValueChange =
+    (/** @type {string} */ key) => (/** @type {Event & { target: { value: string } }} */ e) => {
+      const updated = { ...media, [key]: e.target.value };
+      updateSiteConfig({ $media: updated });
+    };
+
+  const onMediaNameChange =
+    (/** @type {string} */ oldKey) => (/** @type {Event & { target: { value: string } }} */ e) => {
+      const rawName = e.target.value.trim();
+      const newKey = rawName.startsWith("--") ? rawName : `--${rawName}`;
+      if (newKey === oldKey) return;
+      const updated = /** @type {Record<string, string>} */ ({});
+      for (const [k, v] of Object.entries(media)) {
+        updated[k === oldKey ? newKey : k] = v;
+      }
+      updateSiteConfig({ $media: updated });
+      renderGeneralSettings(container);
+    };
+
+  const onRemoveBreakpoint = (/** @type {string} */ key) => () => {
+    const updated = { ...media };
+    delete updated[key];
+    updateSiteConfig({ $media: updated });
+    renderGeneralSettings(container);
+  };
+
+  const onAddBreakpoint = () => {
+    const updated = { ...media, "--new": "(max-width: 480px)" };
+    updateSiteConfig({ $media: updated });
+    renderGeneralSettings(container);
+  };
+
   const currentFavicon = config.favicon;
 
   const tpl = html`
@@ -80,6 +117,51 @@ export function renderGeneralSettings(container) {
         </sp-picker>
       </div>
 
+      <div class="settings-field">
+        <label class="settings-field-label">Breakpoints</label>
+        <p class="settings-field-desc">
+          Responsive breakpoints for canvas panels and media query styles.
+        </p>
+        <div class="settings-media-list">
+          ${mediaEntries.map(([key, value]) => {
+            const isBase = key === "--";
+            return html`
+              <div class="settings-media-row">
+                ${isBase
+                  ? html`<span class="settings-media-name-fixed">Base</span>`
+                  : html`<sp-textfield
+                      size="s"
+                      class="settings-media-name"
+                      .value=${key.replace(/^--/, "")}
+                      placeholder="name"
+                      @change=${onMediaNameChange(key)}
+                    ></sp-textfield>`}
+                <sp-textfield
+                  size="s"
+                  class="settings-media-value"
+                  .value=${value}
+                  placeholder=${isBase ? "1280px" : "(max-width: 768px)"}
+                  @change=${onMediaValueChange(key)}
+                ></sp-textfield>
+                ${isBase
+                  ? nothing
+                  : html`<sp-action-button
+                      size="s"
+                      quiet
+                      title="Remove breakpoint"
+                      @click=${onRemoveBreakpoint(key)}
+                    >
+                      ×
+                    </sp-action-button>`}
+              </div>
+            `;
+          })}
+        </div>
+        <sp-action-button size="s" style="margin-top:8px" @click=${onAddBreakpoint}>
+          + Add Breakpoint
+        </sp-action-button>
+      </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>

package/src/settings/head-editor.js

@@ -16,24 +16,26 @@ import {
 
 /** @param {HTMLElement} container */
 export function renderHeadEditor(container) {
-  const config = projectState.projectConfig || {};
-  const headEntries = config.$head || [];
+  const config = /** @type {ProjectConfig} */ (projectState?.projectConfig || {});
+  const headEntries = /** @type {JxHeadEntry[]} */ (config.$head || []);
 
   const save = () => {
     updateSiteConfig({ $head: headEntries });
   };
 
   const addEntry = (/** @type {string} */ tag) => {
-    /** @type {any} */
-    const entry = { tagName: tag, attributes: {} };
+    /** @type {Record<string, string | boolean>} */
+    const attrs = {};
+    /** @type {JxHeadEntry} */
+    const entry = { tagName: tag, attributes: attrs };
     if (tag === "link") {
-      entry.attributes.rel = "stylesheet";
-      entry.attributes.href = "";
+      attrs.rel = "stylesheet";
+      attrs.href = "";
     } else if (tag === "meta") {
-      entry.attributes.name = "";
-      entry.attributes.content = "";
+      attrs.name = "";
+      attrs.content = "";
     } else if (tag === "script") {
-      entry.attributes.src = "";
+      attrs.src = "";
     } else if (tag === "style") {
       entry.content = "";
     }
@@ -80,7 +82,7 @@ export function renderHeadEditor(container) {
 
       <div class="head-entries">
         ${headEntries.map(
-          (/** @type {any} */ entry, /** @type {number} */ idx) => html`
+          (/** @type {JxHeadEntry} */ entry, /** @type {number} */ idx) => html`
             <div class="head-entry">
               <div class="head-entry-header">
                 <span class="head-entry-tag">&lt;${entry.tagName}&gt;</span>
@@ -107,17 +109,17 @@ export function renderHeadEditor(container) {
 }
 
 /**
- * @param {any} entry
+ * @param {JxHeadEntry} entry
  * @param {number} idx
  * @param {(idx: number, key: string, val: string) => void} updateEntry
  */
 function renderEntryFields(entry, idx, updateEntry) {
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let debounce;
-  const onFieldChange = (/** @type {string} */ key) => (/** @type {any} */ e) => {
+  const onFieldChange = (/** @type {string} */ key) => (/** @type {Event} */ e) => {
     clearTimeout(debounce);
     debounce = setTimeout(() => {
-      updateEntry(idx, key, e.target.value);
+      updateEntry(idx, key, /** @type {HTMLInputElement} */ (e.target).value);
     }, 300);
   };
 
@@ -208,7 +210,7 @@ function renderEntryFields(entry, idx, updateEntry) {
 /**
  * Render the Google Fonts management section.
  *
- * @param {any[]} headEntries
+ * @param {JxHeadEntry[]} headEntries
  * @param {() => void} save
  * @param {() => void} rerender
  */
@@ -225,7 +227,7 @@ function renderGoogleFontsSection(headEntries, save, rerender) {
     rerender();
   };
 
-  const removeFont = (/** @type {any} */ entry) => {
+  const removeFont = (/** @type {JxHeadEntry} */ entry) => {
     const idx = headEntries.indexOf(entry);
     if (idx >= 0) headEntries.splice(idx, 1);
     const cleaned = cleanupGoogleFontPreconnects(headEntries);
@@ -243,7 +245,9 @@ function renderGoogleFontsSection(headEntries, save, rerender) {
         ? fontEntries.map(
             (entry) => html`
               <div class="head-entry" style="flex-direction:row;align-items:center;gap:8px">
-                <span style="flex:1">${extractFontFamily(entry.attributes.href)}</span>
+                <span style="flex:1"
+                  >${extractFontFamily(String(entry.attributes?.href || ""))}</span
+                >
                 <sp-action-button quiet size="s" @click=${() => removeFont(entry)}>
                   <sp-icon-delete slot="icon"></sp-icon-delete>
                 </sp-action-button>
@@ -257,21 +261,23 @@ function renderGoogleFontsSection(headEntries, save, rerender) {
         size="s"
         placeholder="Font family name…"
         style="flex:1"
-        @keydown=${(/** @type {any} */ e) => {
+        @keydown=${(/** @type {KeyboardEvent} */ e) => {
           if (e.key !== "Enter") return;
-          const family = e.target.value?.trim();
+          const family = /** @type {HTMLInputElement} */ (e.target).value?.trim();
           if (!family) return;
-          e.target.value = "";
+          /** @type {HTMLInputElement} */ (e.target).value = "";
           addFont(family);
         }}
       ></sp-textfield>
       <sp-action-button
         size="s"
-        @click=${(/** @type {any} */ e) => {
-          const input = e.target.closest("div")?.querySelector("sp-textfield");
-          const family = input?.value?.trim();
+        @click=${(/** @type {MouseEvent} */ e) => {
+          const input = /** @type {HTMLElement} */ (e.target)
+            .closest("div")
+            ?.querySelector("sp-textfield");
+          const family = /** @type {HTMLInputElement | null} */ (input)?.value?.trim();
           if (!family) return;
-          input.value = "";
+          /** @type {HTMLInputElement} */ (input).value = "";
           addFont(family);
         }}
       >