@jxsuite/studio 0.28.2 → 0.28.4

package/src/settings/defs-editor.ts

@@ -10,15 +10,20 @@
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform";
 import { projectState } from "../store";
-import { fieldCardTpl, addFieldFormTpl, schemaForType, detectFieldFormat } from "./schema-field-ui";
+import { addFieldFormTpl, detectFieldFormat, fieldCardTpl, schemaForType } from "./schema-field-ui";
 
-import type { ProjectConfig, ContentTypeSchema } from "@jxsuite/schema/types";
+import type { FieldHandlers, SchemaProperty } from "./schema-field-ui.js";
+import type {
+  ContentTypeSchema,
+  ContentTypeSchemaField,
+  ProjectConfig,
+} from "@jxsuite/schema/types";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 let selectedDef: string | null = null;
 let showAddField = false;
-let newFieldState = { name: "", type: "string", format: "", required: false };
+let newFieldState = { format: "", name: "", required: false, type: "string" };
 let showNewDef = false;
 let newDefName = "";
 
@@ -43,17 +48,25 @@ function getSelectedDef(): ContentTypeSchema | undefined {
 /** @param {() => void} rerender */
 function handleNewDef(rerender: () => void) {
   const name = newDefName.trim();
-  if (!name) return;
+  if (!name) {
+    return;
+  }
 
   const config = projectState?.projectConfig;
-  if (!config) return;
-  if (!config.$defs) config.$defs = {};
-  if (config.$defs[name]) return; // already exists
+  if (!config) {
+    return;
+  }
+  if (!config.$defs) {
+    config.$defs = {};
+  }
+  if (config.$defs[name]) {
+    return;
+  } // Already exists
 
   config.$defs[name] = {
-    type: "object",
     properties: {},
     required: [],
+    type: "object",
   };
 
   selectedDef = name;
@@ -66,21 +79,31 @@ function handleNewDef(rerender: () => void) {
 /** @param {() => void} rerender */
 function handleAddField(rerender: () => void) {
   const name = newFieldState.name.trim();
-  if (!name || !selectedDef) return;
+  if (!name || !selectedDef) {
+    return;
+  }
 
   const def = getSelectedDef();
-  if (!def) return;
+  if (!def) {
+    return;
+  }
 
-  if (!def.properties) def.properties = {};
+  if (!def.properties) {
+    def.properties = {};
+  }
   def.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
 
   if (newFieldState.required) {
-    if (!def.required) def.required = [];
-    if (!def.required.includes(name)) def.required.push(name);
+    if (!def.required) {
+      def.required = [];
+    }
+    if (!def.required.includes(name)) {
+      def.required.push(name);
+    }
   }
 
   showAddField = false;
-  newFieldState = { name: "", type: "string", format: "", required: false };
+  newFieldState = { format: "", name: "", required: false, type: "string" };
   rerender();
   saveProjectConfig();
 }
@@ -91,7 +114,9 @@ function handleAddField(rerender: () => void) {
  */
 function handleDeleteField(fieldName: string, rerender: () => void) {
   const def = getSelectedDef();
-  if (!def?.properties) return;
+  if (!def?.properties) {
+    return;
+  }
 
   delete def.properties[fieldName];
   if (def.required) {
@@ -108,12 +133,19 @@ function handleDeleteField(fieldName: string, rerender: () => void) {
  */
 function handleToggleRequired(fieldName: string, rerender: () => void) {
   const def = getSelectedDef();
-  if (!def) return;
-  if (!def.required) def.required = [];
+  if (!def) {
+    return;
+  }
+  if (!def.required) {
+    def.required = [];
+  }
 
   const idx = def.required.indexOf(fieldName);
-  if (idx >= 0) def.required.splice(idx, 1);
-  else def.required.push(fieldName);
+  if (idx !== -1) {
+    def.required.splice(idx, 1);
+  } else {
+    def.required.push(fieldName);
+  }
 
   rerender();
   saveProjectConfig();
@@ -126,9 +158,11 @@ function handleToggleRequired(fieldName: string, rerender: () => void) {
  */
 function handleRenameField(oldName: string, newName: string, rerender: () => void) {
   const def = getSelectedDef();
-  if (!def?.properties || !newName || def.properties[newName]) return;
+  if (!def?.properties || !newName || def.properties[newName]) {
+    return;
+  }
 
-  const newProps: Record<string, unknown> = {};
+  const newProps: Record<string, ContentTypeSchemaField> = {};
   for (const [key, val] of Object.entries(def.properties)) {
     newProps[key === oldName ? newName : key] = val;
   }
@@ -149,7 +183,9 @@ function handleRenameField(oldName: string, newName: string, rerender: () => voi
  */
 function handleChangeType(fieldName: string, newType: string, rerender: () => void) {
   const def = getSelectedDef();
-  if (!def?.properties?.[fieldName]) return;
+  if (!def?.properties?.[fieldName]) {
+    return;
+  }
 
   const oldFormat =
     newType === "string" || newType === "array"
@@ -167,7 +203,9 @@ function handleChangeType(fieldName: string, newType: string, rerender: () => vo
  */
 function handleChangeFormat(fieldName: string, format: string, rerender: () => void) {
   const def = getSelectedDef();
-  if (!def?.properties?.[fieldName]) return;
+  if (!def?.properties?.[fieldName]) {
+    return;
+  }
 
   const prop = def.properties[fieldName];
   const type = prop.type || "string";
@@ -190,14 +228,22 @@ function handleAddNestedField(
 ) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent) return;
+  if (!parent) {
+    return;
+  }
 
-  if (!parent.properties) parent.properties = {};
+  if (!parent.properties) {
+    parent.properties = {};
+  }
   parent.properties[fieldState.name] = schemaForType(fieldState.type);
 
   if (fieldState.required) {
-    if (!parent.required) parent.required = [];
-    if (!parent.required.includes(fieldState.name)) parent.required.push(fieldState.name);
+    if (!parent.required) {
+      parent.required = [];
+    }
+    if (!parent.required.includes(fieldState.name)) {
+      parent.required.push(fieldState.name);
+    }
   }
 
   rerender();
@@ -212,7 +258,9 @@ function handleAddNestedField(
 function handleDeleteNested(parentName: string, childName: string, rerender: () => void) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent?.properties) return;
+  if (!parent?.properties) {
+    return;
+  }
 
   delete parent.properties[childName];
   if (parent.required) {
@@ -231,12 +279,19 @@ function handleDeleteNested(parentName: string, childName: string, rerender: ()
 function handleToggleNestedRequired(parentName: string, childName: string, rerender: () => void) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent) return;
-  if (!parent.required) parent.required = [];
+  if (!parent) {
+    return;
+  }
+  if (!parent.required) {
+    parent.required = [];
+  }
 
   const idx = parent.required.indexOf(childName);
-  if (idx >= 0) parent.required.splice(idx, 1);
-  else parent.required.push(childName);
+  if (idx !== -1) {
+    parent.required.splice(idx, 1);
+  } else {
+    parent.required.push(childName);
+  }
 
   rerender();
   saveProjectConfig();
@@ -256,9 +311,11 @@ function handleRenameNested(
 ) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent?.properties || !newChild || parent.properties[newChild]) return;
+  if (!parent?.properties || !newChild || parent.properties[newChild]) {
+    return;
+  }
 
-  const newProps: Record<string, unknown> = {};
+  const newProps: Record<string, ContentTypeSchemaField> = {};
   for (const [key, val] of Object.entries(parent.properties)) {
     newProps[key === oldChild ? newChild : key] = val;
   }
@@ -286,7 +343,9 @@ function handleChangeNestedType(
 ) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent?.properties?.[childName]) return;
+  if (!parent?.properties?.[childName]) {
+    return;
+  }
 
   const oldFormat =
     newType === "string" || newType === "array"
@@ -311,7 +370,9 @@ function handleChangeNestedFormat(
 ) {
   const def = getSelectedDef();
   const parent = def?.properties?.[parentName];
-  if (!parent?.properties?.[childName]) return;
+  if (!parent?.properties?.[childName]) {
+    return;
+  }
 
   const prop = parent.properties[childName];
   const type = prop.type || "string";
@@ -322,9 +383,13 @@ function handleChangeNestedFormat(
 
 /** @param {() => void} rerender */
 function handleDeleteDef(rerender: () => void) {
-  if (!selectedDef) return;
+  if (!selectedDef) {
+    return;
+  }
   const config = projectState?.projectConfig;
-  if (!config?.$defs?.[selectedDef]) return;
+  if (!config?.$defs?.[selectedDef]) {
+    return;
+  }
 
   delete config.$defs[selectedDef];
   selectedDef = null;
@@ -375,7 +440,9 @@ export function renderDefsEditor(container: HTMLElement) {
                   newDefName = (e.target as HTMLInputElement).value;
                 }}
                 @keydown=${(e: KeyboardEvent) => {
-                  if (e.key === "Enter") handleNewDef(rerender);
+                  if (e.key === "Enter") {
+                    handleNewDef(rerender);
+                  }
                   if (e.key === "Escape") {
                     showNewDef = false;
                     rerender();
@@ -411,30 +478,25 @@ export function renderDefsEditor(container: HTMLElement) {
     const properties = def.properties || {};
     const required = def.required || [];
 
-    const handlers: import("./schema-field-ui.js").FieldHandlers = {
-      onDelete: (n: string) => handleDeleteField(n, rerender),
-      onToggleRequired: (n: string) => handleToggleRequired(n, rerender),
-      onRename: (oldN: string, newN: string) => handleRenameField(oldN, newN, rerender),
-      onChangeType: (n: string, t: string) => handleChangeType(n, t, rerender),
-      onChangeFormat: (n: string, f: string) => handleChangeFormat(n, f, rerender),
+    const handlers: FieldHandlers = {
       onAddNestedField: (p: string, s: { name: string; type: string; required: boolean }) =>
         handleAddNestedField(p, s, rerender),
-      onDeleteNested: (p: string, c: string) => handleDeleteNested(p, c, rerender),
-      onToggleNestedRequired: (p: string, c: string) => handleToggleNestedRequired(p, c, rerender),
-      onRenameNested: (p: string, o: string, n: string) => handleRenameNested(p, o, n, rerender),
-      onChangeNestedType: (p: string, c: string, t: string) =>
-        handleChangeNestedType(p, c, t, rerender),
+      onChangeFormat: (n: string, f: string) => handleChangeFormat(n, f, rerender),
       onChangeNestedFormat: (p: string, c: string, f: string) =>
         handleChangeNestedFormat(p, c, f, rerender),
+      onChangeNestedType: (p: string, c: string, t: string) =>
+        handleChangeNestedType(p, c, t, rerender),
+      onChangeType: (n: string, t: string) => handleChangeType(n, t, rerender),
+      onDelete: (n: string) => handleDeleteField(n, rerender),
+      onDeleteNested: (p: string, c: string) => handleDeleteNested(p, c, rerender),
+      onRename: (oldN: string, newN: string) => handleRenameField(oldN, newN, rerender),
+      onRenameNested: (p: string, o: string, n: string) => handleRenameNested(p, o, n, rerender),
+      onToggleNestedRequired: (p: string, c: string) => handleToggleNestedRequired(p, c, rerender),
+      onToggleRequired: (n: string) => handleToggleRequired(n, rerender),
     };
 
     const fieldCards = Object.entries(properties).map(([name, fieldDef]) =>
-      fieldCardTpl(
-        name,
-        fieldDef as import("./schema-field-ui.js").SchemaProperty,
-        required.includes(name),
-        handlers,
-      ),
+      fieldCardTpl(name, fieldDef as SchemaProperty, required.includes(name), handlers),
     );
 
     editorTpl = html`
@@ -453,21 +515,21 @@ export function renderDefsEditor(container: HTMLElement) {
         <div class="schema-field-list">${fieldCards}</div>
         ${showAddField
           ? addFieldFormTpl(newFieldState, {
-              onInput: (field, value) => {
-                newFieldState = { ...newFieldState, [field]: value };
-                rerender();
-              },
-              onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
                 newFieldState = {
-                  name: "",
-                  type: "string",
                   format: "",
+                  name: "",
                   required: false,
+                  type: "string",
                 };
                 rerender();
               },
+              onConfirm: () => handleAddField(rerender),
+              onInput: (field, value) => {
+                newFieldState = { ...newFieldState, [field]: value };
+                rerender();
+              },
             })
           : html`
               <sp-action-button

package/src/settings/general-settings.ts

@@ -6,7 +6,6 @@ import { projectState } from "../store";
 import { updateSiteConfig } from "../site-context";
 import { getPlatform } from "../platform";
 import { openFileInTab } from "../files/files";
-import { closeSettingsModal } from "./settings-modal";
 
 import type { ProjectConfig } from "@jxsuite/schema/types";
 
@@ -18,14 +17,16 @@ export function renderGeneralSettings(container: HTMLElement) {
     const input = document.createElement("input");
     input.type = "file";
     input.accept = "image/*,.ico,.svg";
-    input.onchange = async () => {
+    input.addEventListener("change", async () => {
       const file = input.files?.[0];
-      if (!file) return;
+      if (!file) {
+        return;
+      }
       const platform = getPlatform();
       await platform.uploadFile("public/favicon.ico", file);
       await updateSiteConfig({ favicon: "/favicon.ico" });
       renderGeneralSettings(container);
-    };
+    });
     input.click();
   };
 
@@ -35,7 +36,9 @@ export function renderGeneralSettings(container: HTMLElement) {
     });
   };
 
-  const onEditGlobalStyles = () => {
+  const onEditGlobalStyles = async () => {
+    // Lazy import breaks the general-settings ↔ settings-modal module cycle
+    const { closeSettingsModal } = await import("./settings-modal");
     closeSettingsModal();
     openFileInTab("project.json");
   };
@@ -53,7 +56,9 @@ export function renderGeneralSettings(container: HTMLElement) {
   const onMediaNameChange = (oldKey: string) => (e: Event) => {
     const rawName = (e.target as HTMLInputElement).value.trim();
     const newKey = rawName.startsWith("--") ? rawName : `--${rawName}`;
-    if (newKey === oldKey) return;
+    if (newKey === oldKey) {
+      return;
+    }
     const updated = {} as Record<string, string>;
     for (const [k, v] of Object.entries(media)) {
       updated[k === oldKey ? newKey : k] = v;

package/src/settings/head-editor.ts

@@ -8,11 +8,11 @@ import { html, render as litRender, nothing } from "lit-html";
 import { projectState } from "../store";
 import { updateSiteConfig } from "../site-context";
 import {
-  isGoogleFontEntry,
-  extractFontFamily,
   buildGoogleFontUrl,
-  ensureGoogleFontPreconnects,
   cleanupGoogleFontPreconnects,
+  ensureGoogleFontPreconnects,
+  extractFontFamily,
+  isGoogleFontEntry,
 } from "../utils/google-fonts";
 
 import type { JxHeadEntry, ProjectConfig } from "@jxsuite/schema/types";
@@ -28,7 +28,7 @@ export function renderHeadEditor(container: HTMLElement) {
 
   const addEntry = (tag: string) => {
     const attrs: Record<string, string | boolean> = {};
-    const entry: JxHeadEntry = { tagName: tag, attributes: attrs };
+    const entry: JxHeadEntry = { attributes: attrs, tagName: tag };
     if (tag === "link") {
       attrs.rel = "stylesheet";
       attrs.href = "";
@@ -56,7 +56,9 @@ export function renderHeadEditor(container: HTMLElement) {
     if (key === "content" && (entry.tagName === "script" || entry.tagName === "style")) {
       entry.textContent = val;
     } else {
-      if (!entry.attributes) entry.attributes = {};
+      if (!entry.attributes) {
+        entry.attributes = {};
+      }
       entry.attributes[key] = val;
     }
     save();
@@ -126,7 +128,7 @@ function renderEntryFields(
   const attrs = entry.attributes || {};
 
   switch (entry.tagName) {
-    case "link":
+    case "link": {
       return html`
         <div class="settings-field-row">
           <sp-textfield
@@ -144,7 +146,8 @@ function renderEntryFields(
           ></sp-textfield>
         </div>
       `;
-    case "meta":
+    }
+    case "meta": {
       return html`
         <div class="settings-field-row">
           <sp-textfield
@@ -162,7 +165,8 @@ function renderEntryFields(
           ></sp-textfield>
         </div>
       `;
-    case "script":
+    }
+    case "script": {
       return html`
         <div class="settings-field-row">
           <sp-textfield
@@ -189,7 +193,8 @@ function renderEntryFields(
             `
           : nothing}
       `;
-    case "style":
+    }
+    case "style": {
       return html`
         <div class="head-entry-body">
           <label class="settings-field-label">Style body</label>
@@ -202,8 +207,10 @@ function renderEntryFields(
           ></textarea>
         </div>
       `;
-    default:
+    }
+    default: {
       return nothing;
+    }
   }
 }
 
@@ -224,8 +231,8 @@ function renderGoogleFontsSection(
   const addFont = (family: string) => {
     ensureGoogleFontPreconnects(headEntries);
     headEntries.push({
+      attributes: { href: buildGoogleFontUrl(family), rel: "stylesheet" },
       tagName: "link",
-      attributes: { rel: "stylesheet", href: buildGoogleFontUrl(family) },
     });
     save();
     rerender();
@@ -233,7 +240,9 @@ function renderGoogleFontsSection(
 
   const removeFont = (entry: JxHeadEntry) => {
     const idx = headEntries.indexOf(entry);
-    if (idx >= 0) headEntries.splice(idx, 1);
+    if (idx !== -1) {
+      headEntries.splice(idx, 1);
+    }
     const cleaned = cleanupGoogleFontPreconnects(headEntries);
     if (cleaned !== headEntries) {
       headEntries.length = 0;
@@ -266,9 +275,13 @@ function renderGoogleFontsSection(
         placeholder="Font family name…"
         style="flex:1"
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key !== "Enter") return;
+          if (e.key !== "Enter") {
+            return;
+          }
           const family = (e.target as HTMLInputElement).value?.trim();
-          if (!family) return;
+          if (!family) {
+            return;
+          }
           (e.target as HTMLInputElement).value = "";
           addFont(family);
         }}
@@ -278,7 +291,9 @@ function renderGoogleFontsSection(
         @click=${(e: MouseEvent) => {
           const input = (e.target as HTMLElement).closest("div")?.querySelector("sp-textfield");
           const family = (input as HTMLInputElement | null)?.value?.trim();
-          if (!family) return;
+          if (!family) {
+            return;
+          }
           (input as HTMLInputElement).value = "";
           addFont(family);
         }}