@jxsuite/studio 0.28.2 → 0.28.4

package/src/settings/schema-field-ui.ts

@@ -45,7 +45,9 @@ export const FORMAT_OPTIONS = ["", "image", "date", "color"];
  * @returns {string}
  */
 export function detectFieldType(schema: SchemaProperty) {
-  if (schema.$ref) return "reference";
+  if (schema.$ref) {
+    return "reference";
+  }
   return schema.type || "string";
 }
 
@@ -56,7 +58,9 @@ export function detectFieldType(schema: SchemaProperty) {
  * @returns {string}
  */
 export function detectFieldFormat(schema: SchemaProperty) {
-  if (schema.type === "array" && schema.items?.format) return schema.items.format;
+  if (schema.type === "array" && schema.items?.format) {
+    return schema.items.format;
+  }
   return schema.format || "";
 }
 
@@ -99,12 +103,17 @@ export function fieldCardTpl(
           @change=${(e: Event) => {
             const target = e.target as HTMLInputElement;
             const newName = target.value.trim();
-            if (newName && newName !== fieldName) handlers.onRename(fieldName, newName);
-            else target.value = fieldName;
+            if (newName && newName !== fieldName) {
+              handlers.onRename(fieldName, newName);
+            } else {
+              target.value = fieldName;
+            }
           }}
           @keydown=${(e: KeyboardEvent) => {
             const target = e.target as HTMLInputElement;
-            if (e.key === "Enter") target.blur();
+            if (e.key === "Enter") {
+              target.blur();
+            }
             if (e.key === "Escape") {
               target.value = fieldName;
               target.blur();
@@ -114,7 +123,9 @@ export function fieldCardTpl(
         ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
         ${type === "string" || type === "array"
           ? formatPickerTpl(format, (f) => {
-              if (handlers.onChangeFormat) handlers.onChangeFormat(fieldName, f);
+              if (handlers.onChangeFormat) {
+                handlers.onChangeFormat(fieldName, f);
+              }
             })
           : nothing}
         <sp-switch
@@ -133,7 +144,7 @@ export function fieldCardTpl(
           <sp-icon-delete slot="icon"></sp-icon-delete>
         </sp-action-button>
       </div>
-      ${isRef && contentTypeNames.length
+      ${isRef && contentTypeNames.length > 0
         ? html`
             <div class="schema-field-ref-target">
               <sp-picker
@@ -141,8 +152,9 @@ export function fieldCardTpl(
                 label="Target"
                 value=${refTarget}
                 @change=${(e: Event) => {
-                  if (handlers.onChangeRefTarget)
+                  if (handlers.onChangeRefTarget) {
                     handlers.onChangeRefTarget(fieldName, (e.target as HTMLInputElement).value);
+                  }
                 }}
               >
                 ${contentTypeNames.map((n) => html`<sp-menu-item value=${n}>${n}</sp-menu-item>`)}
@@ -210,7 +222,9 @@ function nestedFieldCardTpl(
           }}
           @keydown=${(e: KeyboardEvent) => {
             const target = e.target as HTMLInputElement;
-            if (e.key === "Enter") target.blur();
+            if (e.key === "Enter") {
+              target.blur();
+            }
             if (e.key === "Escape") {
               target.value = childName;
               target.blur();
@@ -218,21 +232,24 @@ function nestedFieldCardTpl(
           }}
         ></sp-textfield>
         ${typePickerTpl(type, (newType) => {
-          if (handlers.onChangeNestedType)
+          if (handlers.onChangeNestedType) {
             handlers.onChangeNestedType(parentName, childName, newType);
+          }
         })}
         ${type === "string" || type === "array"
           ? formatPickerTpl(format, (f) => {
-              if (handlers.onChangeNestedFormat)
+              if (handlers.onChangeNestedFormat) {
                 handlers.onChangeNestedFormat(parentName, childName, f);
+              }
             })
           : nothing}
         <sp-switch
           size="s"
           ?checked=${isRequired}
           @change=${() => {
-            if (handlers.onToggleNestedRequired)
+            if (handlers.onToggleNestedRequired) {
               handlers.onToggleNestedRequired(parentName, childName);
+            }
           }}
         >
           Req
@@ -242,7 +259,9 @@ function nestedFieldCardTpl(
           quiet
           title="Delete field"
           @click=${() => {
-            if (handlers.onDeleteNested) handlers.onDeleteNested(parentName, childName);
+            if (handlers.onDeleteNested) {
+              handlers.onDeleteNested(parentName, childName);
+            }
           }}
         >
           <sp-icon-delete slot="icon"></sp-icon-delete>
@@ -276,8 +295,8 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
             if (name && handlers.onAddNestedField) {
               handlers.onAddNestedField(parentName, {
                 name,
-                type,
                 required: false,
+                type,
               });
               target.value = "";
             }
@@ -301,10 +320,12 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
           if (name && handlers.onAddNestedField) {
             handlers.onAddNestedField(parentName, {
               name,
-              type,
               required: false,
+              type,
             });
-            if (nameInput) nameInput.value = "";
+            if (nameInput) {
+              nameInput.value = "";
+            }
           }
         }}
       >
@@ -381,8 +402,12 @@ export function addFieldFormTpl(
         .value=${state.name}
         @input=${(e: Event) => handlers.onInput("name", (e.target as HTMLInputElement).value)}
         @keydown=${(e: KeyboardEvent) => {
-          if (e.key === "Enter") handlers.onConfirm();
-          if (e.key === "Escape") handlers.onCancel();
+          if (e.key === "Enter") {
+            handlers.onConfirm();
+          }
+          if (e.key === "Escape") {
+            handlers.onCancel();
+          }
         }}
       ></sp-textfield>
       ${typePickerTpl(state.type, (t) => handlers.onInput("type", t))}
@@ -412,20 +437,26 @@ export function addFieldFormTpl(
  */
 export function schemaForType(type: string, format?: string) {
   switch (type) {
-    case "number":
+    case "number": {
       return { type: "number" };
-    case "boolean":
+    }
+    case "boolean": {
       return { type: "boolean" };
-    case "array":
+    }
+    case "array": {
       return format
-        ? { type: "array", items: { type: "string", format } }
-        : { type: "array", items: { type: "string" } };
-    case "object":
-      return { type: "object", properties: {}, required: [] };
-    case "reference":
+        ? { items: { format, type: "string" }, type: "array" }
+        : { items: { type: "string" }, type: "array" };
+    }
+    case "object": {
+      return { properties: {}, required: [], type: "object" };
+    }
+    case "reference": {
       return { $ref: "#/contentTypes/" };
-    default:
-      return format ? { type: "string", format } : { type: "string" };
+    }
+    default: {
+      return format ? { format, type: "string" } : { type: "string" };
+    }
   }
 }
 
@@ -437,18 +468,27 @@ export function schemaForType(type: string, format?: string) {
  * @returns {string}
  */
 export function yamlDefault(type: string, format?: string) {
-  if (format === "date") return new Date().toISOString().split("T")[0];
-  if (format === "image") return '""';
+  if (format === "date") {
+    return new Date().toISOString().split("T")[0];
+  }
+  if (format === "image") {
+    return '""';
+  }
   switch (type) {
-    case "boolean":
+    case "boolean": {
       return "false";
-    case "number":
+    }
+    case "number": {
       return "0";
-    case "array":
+    }
+    case "array": {
       return "[]";
-    case "object":
+    }
+    case "object": {
       return "{}";
-    default:
+    }
+    default: {
       return '""';
+    }
   }
 }

package/src/settings/settings-modal.ts

@@ -17,26 +17,30 @@ import { openModal } from "../ui/layers";
 
 let _handle: ReturnType<typeof openModal> | null = null;
 
-let _activeSection: string = "general";
+let _activeSection = "general";
 
 let _contentEl: HTMLElement | null = null;
 
 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" },
+  { icon: "sp-icon-properties", key: "general", label: "General" },
+  { icon: "sp-icon-file-single-web-page", key: "head", label: "Head" },
+  { icon: "sp-icon-brush", key: "cssVars", label: "CSS Variables" },
+  { icon: "sp-icon-data", key: "definitions", label: "Definitions" },
+  { icon: "sp-icon-view-grid", key: "contentTypes", label: "Content Types" },
 ];
 
 export function openSettingsModal() {
-  if (_handle) return;
+  if (_handle) {
+    return;
+  }
   _activeSection = "general";
   renderModal();
 }
 
 export function closeSettingsModal() {
-  if (!_handle) return;
+  if (!_handle) {
+    return;
+  }
   _handle.close();
   _handle = null;
   _contentEl = null;
@@ -54,7 +58,9 @@ function renderModal() {
     <div
       class="settings-modal"
       @keydown=${(e: KeyboardEvent) => {
-        if (e.key === "Escape") closeSettingsModal();
+        if (e.key === "Escape") {
+          closeSettingsModal();
+        }
       }}
     >
       <div class="settings-modal-header">
@@ -69,8 +75,8 @@ function renderModal() {
             (s) => html`
               <button
                 class=${classMap({
-                  "settings-nav-item": true,
                   active: _activeSection === s.key,
+                  "settings-nav-item": true,
                 })}
                 @click=${() => onNavClick(s.key)}
               >
@@ -83,7 +89,9 @@ function renderModal() {
           class="settings-modal-content"
           ${ref((el: Element | undefined) => {
             _contentEl = (el as HTMLElement) || null;
-            if (_contentEl) requestAnimationFrame(() => renderActiveSection());
+            if (_contentEl) {
+              requestAnimationFrame(() => renderActiveSection());
+            }
           })}
         ></div>
       </div>
@@ -98,23 +106,33 @@ function renderModal() {
 }
 
 function renderActiveSection() {
-  if (!_handle || !_contentEl) return;
+  if (!_handle || !_contentEl) {
+    return;
+  }
 
   switch (_activeSection) {
-    case "general":
+    case "general": {
       renderGeneralSettings(_contentEl);
       break;
-    case "head":
+    }
+    case "head": {
       renderHeadEditor(_contentEl);
       break;
-    case "cssVars":
+    }
+    case "cssVars": {
       renderCssVarsEditor(_contentEl);
       break;
-    case "definitions":
+    }
+    case "definitions": {
       renderDefsEditor(_contentEl);
       break;
-    case "contentTypes":
+    }
+    case "contentTypes": {
       renderContentTypesEditor(_contentEl);
       break;
+    }
+    default: {
+      break;
+    }
   }
 }

package/src/site-context.ts

@@ -6,14 +6,14 @@
  * definitions merge on top (file wins on conflict).
  */
 
-import { projectState, setProjectState, requireProjectState } from "./store";
+import { projectState, requireProjectState, setProjectState } from "./store";
 import { getPlatform } from "./platform";
 
 import type {
   JxElement,
+  JxHeadEntry,
   JxMutableNode,
   JxStyle,
-  JxHeadEntry,
   ProjectConfig,
 } from "@jxsuite/schema/types";
 
@@ -24,10 +24,14 @@ import type {
  *   undefined)
  * @returns {Record<string, string>}
  */
-export function getEffectiveMedia(docMedia: Record<string, string> | undefined) {
+export function getEffectiveMedia(docMedia?: Record<string, string>) {
   const siteMedia = projectState?.projectConfig?.$media;
-  if (!siteMedia) return docMedia || {};
-  if (!docMedia) return { ...siteMedia };
+  if (!siteMedia) {
+    return docMedia || {};
+  }
+  if (!docMedia) {
+    return { ...siteMedia };
+  }
   return { ...siteMedia, ...docMedia };
 }
 
@@ -38,22 +42,20 @@ export function getEffectiveMedia(docMedia: Record<string, string> | undefined)
  * @param {JxStyle | undefined} docStyle - The current document's style (may be undefined)
  * @returns {JxStyle}
  */
-export function getEffectiveStyle(docStyle: JxStyle | undefined) {
+export function getEffectiveStyle(docStyle?: JxStyle) {
   const siteStyle = projectState?.projectConfig?.style;
-  if (!siteStyle) return docStyle || {};
-  if (!docStyle) return { ...siteStyle };
+  if (!siteStyle) {
+    return docStyle || {};
+  }
+  if (!docStyle) {
+    return { ...siteStyle };
+  }
   const merged = { ...siteStyle };
   for (const [k, v] of Object.entries(docStyle)) {
-    if (
-      typeof v === "object" &&
-      v !== null &&
-      typeof merged[k] === "object" &&
-      merged[k] !== null
-    ) {
-      merged[k] = { ...(merged[k] as JxStyle), ...(v as JxStyle) };
-    } else {
-      merged[k] = v;
-    }
+    merged[k] =
+      typeof v === "object" && v !== null && typeof merged[k] === "object" && merged[k] !== null
+        ? { ...(merged[k] as JxStyle), ...(v as JxStyle) }
+        : v;
   }
   return merged;
 }
@@ -65,10 +67,14 @@ export function getEffectiveStyle(docStyle: JxStyle | undefined) {
  *   undefined)
  * @returns {Record<string, string>}
  */
-export function getEffectiveImports(docImports: Record<string, string> | undefined) {
+export function getEffectiveImports(docImports?: Record<string, string>) {
   const siteImports = projectState?.projectConfig?.imports;
-  if (!siteImports) return docImports || {};
-  if (!docImports) return { ...siteImports };
+  if (!siteImports) {
+    return docImports || {};
+  }
+  if (!docImports) {
+    return { ...siteImports };
+  }
   return { ...siteImports, ...docImports };
 }
 
@@ -81,9 +87,13 @@ export function getEffectiveImports(docImports: Record<string, string> | undefin
  */
 export function getEffectiveElements(docElements?: (JxElement | string)[]) {
   const siteElements = projectState?.projectConfig?.$elements;
-  if (!siteElements?.length) return docElements || [];
-  if (!docElements?.length) return [...siteElements];
-  const seen: Set<string> = new Set();
+  if (!siteElements?.length) {
+    return docElements || [];
+  }
+  if (!docElements?.length) {
+    return [...siteElements];
+  }
+  const seen = new Set<string>();
   const merged: (JxElement | string)[] = [];
   for (const entry of [...siteElements, ...docElements]) {
     const key = typeof entry === "string" ? entry : entry?.$ref;
@@ -103,9 +113,13 @@ export function getEffectiveElements(docElements?: (JxElement | string)[]) {
  */
 export function getEffectiveHead(docHead?: JxHeadEntry[]) {
   const siteHead = projectState?.projectConfig?.$head;
-  if (!siteHead?.length) return docHead || [];
-  if (!docHead?.length) return [...siteHead];
-  const seen: Set<string> = new Set();
+  if (!siteHead?.length) {
+    return docHead || [];
+  }
+  if (!docHead?.length) {
+    return [...siteHead];
+  }
+  const seen = new Set<string>();
   const merged: JxHeadEntry[] = [];
   for (const entry of [...siteHead, ...docHead]) {
     const key =
@@ -120,7 +134,7 @@ export function getEffectiveHead(docHead?: JxHeadEntry[]) {
 
 // ─── Layout resolution ──────────────────────────────────────────────────────
 
-const layoutCache: Map<string, JxMutableNode> = new Map();
+const layoutCache = new Map<string, JxMutableNode>();
 
 export function invalidateLayoutCache() {
   layoutCache.clear();
@@ -134,7 +148,9 @@ export function invalidateLayoutCache() {
  * @returns {string | null} The layout path, or null if no layout applies
  */
 export function getEffectiveLayoutPath(docLayout: string | false | undefined) {
-  if (docLayout === false) return null;
+  if (docLayout === false) {
+    return null;
+  }
   const defaultLayout = projectState?.projectConfig?.defaults?.layout;
   return docLayout || defaultLayout || null;
 }
@@ -147,8 +163,9 @@ export function getEffectiveLayoutPath(docLayout: string | false | undefined) {
  */
 export async function resolveLayoutDoc(layoutPath: string) {
   const normalized = layoutPath.replace(/^\.\//, "");
-  if (layoutCache.has(normalized))
+  if (layoutCache.has(normalized)) {
     return structuredClone(layoutCache.get(normalized) as JxMutableNode);
+  }
 
   try {
     const platform = getPlatform();
@@ -171,16 +188,18 @@ export async function resolveLayoutDoc(layoutPath: string) {
  */
 export function distributePageIntoLayout(layoutDoc: JxMutableNode, pageDoc: JxMutableNode) {
   const pageChildren = pageDoc.children ?? [];
-  const children = typeof pageChildren === "string" ? [pageChildren] : pageChildren;
+  const children = Array.isArray(pageChildren) ? pageChildren : [];
 
-  const named = new Map();
-  const defaults = [];
+  const named = new Map<string, JxMutableNode[]>();
+  const defaults: (JxMutableNode | string)[] = [];
 
   for (const child of children) {
-    if (child && typeof child === "object" && child.attributes?.slot) {
-      const slotName = child.attributes.slot;
-      if (!named.has(slotName)) named.set(slotName, []);
-      named.get(slotName).push(child);
+    const slotName = typeof child === "object" ? child.attributes?.slot : undefined;
+    if (typeof child === "object" && typeof slotName === "string" && slotName) {
+      if (!named.has(slotName)) {
+        named.set(slotName, []);
+      }
+      named.get(slotName)!.push(child);
     } else {
       defaults.push(child);
     }
@@ -188,10 +207,18 @@ export function distributePageIntoLayout(layoutDoc: JxMutableNode, pageDoc: JxMu
 
   fillSlots(layoutDoc, named, defaults);
 
-  if (pageDoc.state) layoutDoc.state = { ...layoutDoc.state, ...pageDoc.state };
-  if (pageDoc.$media) layoutDoc.$media = { ...layoutDoc.$media, ...pageDoc.$media };
-  if (pageDoc.style) layoutDoc.style = { ...layoutDoc.style, ...pageDoc.style };
-  if (pageDoc.attributes) layoutDoc.attributes = { ...layoutDoc.attributes, ...pageDoc.attributes };
+  if (pageDoc.state) {
+    layoutDoc.state = { ...layoutDoc.state, ...pageDoc.state };
+  }
+  if (pageDoc.$media) {
+    layoutDoc.$media = { ...layoutDoc.$media, ...pageDoc.$media };
+  }
+  if (pageDoc.style) {
+    layoutDoc.style = { ...layoutDoc.style, ...pageDoc.style };
+  }
+  if (pageDoc.attributes) {
+    layoutDoc.attributes = { ...layoutDoc.attributes, ...pageDoc.attributes };
+  }
 
   return layoutDoc;
 }
@@ -201,23 +228,29 @@ function fillSlots(
   named: Map<string, JxMutableNode[]>,
   defaults: (JxMutableNode | string)[],
 ) {
-  if (!node || typeof node !== "object") return;
-  if (!Array.isArray(node.children)) return;
+  if (!node || typeof node !== "object") {
+    return;
+  }
+  if (!Array.isArray(node.children)) {
+    return;
+  }
 
   const newChildren: (JxMutableNode | string)[] = [];
   for (const child of node.children) {
     if (child && typeof child === "object" && child.tagName === "slot") {
       const slotName = child.attributes?.name;
-      if (slotName && named.has(slotName)) {
-        newChildren.push(...(named.get(slotName) as JxMutableNode[]));
+      if (typeof slotName === "string" && slotName && named.has(slotName)) {
+        newChildren.push(...named.get(slotName)!);
         named.delete(slotName);
       } else if (!slotName && defaults.length > 0) {
         newChildren.push(...defaults);
-      } else if (child.children) {
+      } else if (Array.isArray(child.children)) {
         newChildren.push(...child.children);
       }
     } else {
-      if (typeof child !== "string") fillSlots(child, named, defaults);
+      if (typeof child !== "string") {
+        fillSlots(child, named, defaults);
+      }
       newChildren.push(child);
     }
   }