@jxsuite/studio 0.23.2 → 0.24.0

package/src/{recent-projects.js → recent-projects.ts}

@@ -1,22 +1,27 @@
+/// <reference lib="dom" />
+interface RecentProject {
+  name: string;
+  root: string;
+  timestamp: number;
+}
+
+interface RecentFile {
+  path: string;
+  name: string;
+  timestamp: number;
+}
+
 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,
-    );
+    return (JSON.parse(raw) as RecentProject[]).sort((a, b) => b.timestamp - a.timestamp);
   } catch {
     return [];
   }
@@ -26,7 +31,7 @@ export function getRecentProjects() {
  * @param {string} name
  * @param {string} root
  */
-export function addRecentProject(name, root) {
+export function addRecentProject(name: string, root: string) {
   const projects = getRecentProjects().filter((p) => p.root !== root);
   projects.unshift({ name, root, timestamp: Date.now() });
   if (projects.length > MAX_RECENT) projects.length = MAX_RECENT;
@@ -42,14 +47,14 @@ 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);
+    return (JSON.parse(raw) as RecentFile[]).sort((a, b) => b.timestamp - a.timestamp);
   } catch {
     return [];
   }
 }
 
 /** @param {{ path: string; name: string }} file */
-export function trackRecentFile(file) {
+export function trackRecentFile(file: { path: string; name: string }) {
   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;

package/src/{resize-edges.js → resize-edges.ts}

@@ -1,14 +1,12 @@
-/**
- * @type {{
- *   __jxPlatform?: {
- *     windowControls?: {
- *       getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
- *       setFrame: (x: number, y: number, w: number, h: number) => void;
- *     };
- *   };
- * }}
- */
-const g = /** @type {any} */ (globalThis);
+/// <reference lib="dom" />
+const g = globalThis as unknown as {
+  __jxPlatform?: {
+    windowControls?: {
+      getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+      setFrame: (x: number, y: number, w: number, h: number) => void;
+    };
+  };
+};
 
 const EDGES = [
   "top",
@@ -52,7 +50,14 @@ export function mountResizeEdges() {
  *   setFrame: (x: number, y: number, w: number, h: number) => void;
  * }} wc
  */
-async function startResize(e, edge, wc) {
+async function startResize(
+  e: MouseEvent,
+  edge: string,
+  wc: {
+    getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+    setFrame: (x: number, y: number, w: number, h: number) => void;
+  },
+) {
   e.preventDefault();
   e.stopPropagation();
 
@@ -62,7 +67,7 @@ async function startResize(e, edge, wc) {
   const startFrame = { ...frame };
 
   /** @param {MouseEvent} me */
-  function onMove(me) {
+  function onMove(me: MouseEvent) {
     const dx = me.screenX - startX;
     const dy = me.screenY - startY;
 

package/src/services/{cem-export.js → cem-export.ts}

@@ -1,13 +1,13 @@
+/// <reference lib="dom" />
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
 /** Collect slot elements from the document tree. */
-export function collectSlots(
-  /** @type {JxMutableNode | null | undefined} */ node,
-  /** @type {string[]} */ slots = [],
-) {
+export function collectSlots(node: JxMutableNode | null | undefined, slots: string[] = []) {
   if (node?.tagName === "slot") {
     slots.push(node.attributes?.name || "");
   }
   if (Array.isArray(node?.children))
-    node.children.forEach((/** @type {JxMutableNode | string} */ c) =>
+    node.children.forEach((c: JxMutableNode | string) =>
       collectSlots(typeof c === "string" ? undefined : c, slots),
     );
   return slots;
@@ -23,7 +23,14 @@ export function collectSlots(
  *   collectCssParts: (node: JxMutableNode) => { name: string }[];
  * }} helpers
  */
-export function exportCemManifest(S, helpers) {
+export function exportCemManifest(
+  S: { document: JxMutableNode },
+  helpers: {
+    defCategory: (d: unknown) => string;
+    normParam: (p: unknown) => unknown;
+    collectCssParts: (node: JxMutableNode) => { name: string }[];
+  },
+) {
   const { defCategory, normParam, collectCssParts } = helpers;
   const doc = S.document;
   const tagName = doc.tagName;
@@ -88,7 +95,7 @@ export function exportCemManifest(S, helpers) {
 
   // Slots
   const slotNames = collectSlots(doc);
-  const slots = slotNames.map((/** @type {string} */ name) => ({
+  const slots = slotNames.map((name: string) => ({
     name: name || "",
     ...(name ? {} : { description: "Default slot" }),
   }));

package/src/services/{code-services.js → code-services.ts}

@@ -1,15 +1,26 @@
 /** OXC code services (server-backed) */
 
-import { getPlatform } from "../platform.js";
-import { projectState } from "../state.js";
-import { getNodeAtPath } from "../store.js";
+import { getPlatform } from "../platform";
+import { projectState } from "../state";
+import { getNodeAtPath } from "../store";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import type { JxPath } from "../state";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+export interface OxLintDiagnostic {
+  severity: string;
+  message: string;
+  help?: string;
+  code?: string;
+  url?: string;
+  labels?: { span: { line: number; column: number; length?: number } }[];
+}
 
 /**
  * @param {string} action
  * @param {unknown} payload
  */
-export async function codeService(action, payload) {
+export async function codeService(action: string, payload: unknown) {
   const platform = getPlatform();
   if (!platform.codeService) return null;
   return platform.codeService(action, payload);
@@ -20,7 +31,7 @@ export async function codeService(action, payload) {
  *
  * @param {string} name
  */
-export async function locateDocument(name) {
+export async function locateDocument(name: string) {
   const platform = getPlatform();
   if (!platform.locateFile) return null;
   return platform.locateFile(name);
@@ -36,7 +47,10 @@ export const pluginSchemaCache = new Map();
  * @param {{ $src?: string; $prototype?: string }} def
  * @param {{ documentPath?: string }} state
  */
-export async function fetchPluginSchema(def, state) {
+export async function fetchPluginSchema(
+  def: { $src?: string; $prototype?: string },
+  state: { documentPath?: string },
+) {
   const importedPath = def.$prototype
     ? projectState?.projectConfig?.imports?.[def.$prototype]
     : null;
@@ -62,22 +76,14 @@ export async function fetchPluginSchema(def, state) {
   }
 }
 
-/**
- * @typedef {{
- *   severity: string;
- *   message: string;
- *   help?: string;
- *   code?: string;
- *   url?: string;
- *   labels?: { span: { line: number; column: number; length?: number } }[];
- * }} OxLintDiagnostic
- */
-
 /**
  * @param {import("monaco-editor").editor.IStandaloneCodeEditor} editor
  * @param {OxLintDiagnostic[]} diagnostics
  */
-export function setLintMarkers(editor, diagnostics) {
+export function setLintMarkers(
+  editor: import("monaco-editor").editor.IStandaloneCodeEditor,
+  diagnostics: OxLintDiagnostic[],
+) {
   const model = editor.getModel();
   if (!model) return;
   const markers = diagnostics
@@ -101,7 +107,7 @@ export function setLintMarkers(editor, diagnostics) {
   monaco.editor.setModelMarkers(
     model,
     "oxlint",
-    /** @type {import("monaco-editor").editor.IMarkerData[]} */ (markers),
+    markers as import("monaco-editor").editor.IMarkerData[],
   );
 }
 
@@ -109,7 +115,10 @@ export function setLintMarkers(editor, diagnostics) {
  * @param {{ type: string; defName?: string; path?: JxPath; eventKey?: string }} editing
  * @param {JxMutableNode | null | undefined} document
  */
-export function getFunctionArgs(editing, document) {
+export function getFunctionArgs(
+  editing: { type: string; defName?: string; path?: JxPath; eventKey?: string },
+  document: JxMutableNode | null | undefined,
+) {
   if (editing.type === "def") {
     const defName = editing.defName;
     return (defName && document?.state?.[defName]?.parameters) || ["state", "event"];

package/src/services/{monaco-setup.js → monaco-setup.ts}

@@ -9,8 +9,7 @@ import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution.
 import jxSchema from "@jxsuite/schema/schema.json";
 import projectSchema from "@jxsuite/schema/project-schema.json";
 
-/** @type {Record<string, string>} */
-const WORKER_PATHS = {
+const WORKER_PATHS: Record<string, string> = {
   json: "/monaco-editor/esm/vs/language/json/json.worker.js",
   typescript: "/monaco-editor/esm/vs/language/typescript/ts.worker.js",
   javascript: "/monaco-editor/esm/vs/language/typescript/ts.worker.js",
@@ -18,7 +17,7 @@ const WORKER_PATHS = {
 };
 
 self.MonacoEnvironment = {
-  getWorker(_, /** @type {string} */ label) {
+  getWorker(_, label: string) {
     const path = WORKER_PATHS[label] || WORKER_PATHS.editorWorkerService;
     return new Worker(path, { type: "module" });
   },

package/src/settings/{content-types-editor.js → content-types-editor.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Content Types Editor — visual schema builder for project content types.
  *
@@ -7,19 +8,16 @@
 
 import { html, render as litRender } from "lit-html";
 import { repeat } from "lit-html/directives/repeat.js";
-import { getPlatform } from "../platform.js";
-import { projectState } from "../store.js";
-import {
-  fieldCardTpl,
-  addFieldFormTpl,
-  schemaForType,
-  detectFieldFormat,
-} from "./schema-field-ui.js";
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import { fieldCardTpl, addFieldFormTpl, schemaForType, detectFieldFormat } from "./schema-field-ui";
+import { toCamelCase } from "../utils/studio-utils";
+
+import type { ProjectConfig, ContentTypeSchema } from "@jxsuite/schema/types";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
-/** @type {string | null} */
-let selectedContentType = null;
+let selectedContentType: string | null = null;
 let showAddField = false;
 let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewContentType = false;
@@ -29,22 +27,24 @@ let newContentTypeName = "";
 
 async function saveProjectConfig() {
   const platform = getPlatform();
-  const config = /** @type {{ projectConfig: ProjectConfig }} */ (projectState).projectConfig;
+  const config = (projectState as { projectConfig: ProjectConfig }).projectConfig;
   await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
 }
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 /** Get the schema object for the selected content type. */
-function getSelectedSchema() {
+function getSelectedSchema(): ContentTypeSchema | undefined {
   const config = projectState?.projectConfig;
-  return config?.contentTypes?.[/** @type {string} */ (selectedContentType)]?.schema;
+  return config?.contentTypes?.[selectedContentType as string]?.schema as
+    | ContentTypeSchema
+    | undefined;
 }
 
 // ─── Handlers ─────────────────────────────────────────────────────────────────
 
 /** @param {() => void} rerender */
-function handleNewContentType(rerender) {
+function handleNewContentType(rerender: () => void) {
   const slug = newContentTypeName
     .toLowerCase()
     .replace(/\s+/g, "-")
@@ -74,9 +74,10 @@ function handleNewContentType(rerender) {
 }
 
 /** @param {() => void} rerender */
-function handleAddField(rerender) {
-  const name = newFieldState.name.trim();
-  if (!name || !selectedContentType) return;
+function handleAddField(rerender: () => void) {
+  const raw = newFieldState.name.trim();
+  if (!raw || !selectedContentType) return;
+  const name = toCamelCase(raw);
 
   const schema = getSelectedSchema();
   if (!schema) return;
@@ -99,13 +100,13 @@ function handleAddField(rerender) {
  * @param {string} fieldName
  * @param {() => void} rerender
  */
-function handleDeleteField(fieldName, rerender) {
+function handleDeleteField(fieldName: string, rerender: () => void) {
   const schema = getSelectedSchema();
   if (!schema?.properties) return;
 
   delete schema.properties[fieldName];
   if (schema.required) {
-    schema.required = schema.required.filter((/** @type {string} */ r) => r !== fieldName);
+    schema.required = schema.required.filter((r: string) => r !== fieldName);
   }
 
   rerender();
@@ -116,7 +117,7 @@ function handleDeleteField(fieldName, rerender) {
  * @param {string} fieldName
  * @param {() => void} rerender
  */
-function handleToggleRequired(fieldName, rerender) {
+function handleToggleRequired(fieldName: string, rerender: () => void) {
   const schema = getSelectedSchema();
   if (!schema) return;
   if (!schema.required) schema.required = [];
@@ -134,21 +135,19 @@ function handleToggleRequired(fieldName, rerender) {
  * @param {string} newName
  * @param {() => void} rerender
  */
-function handleRenameField(oldName, newName, rerender) {
+function handleRenameField(oldName: string, newName: string, rerender: () => void) {
   const schema = getSelectedSchema();
-  if (!schema?.properties || !newName || schema.properties[newName]) return;
+  const normalized = toCamelCase(newName);
+  if (!schema?.properties || !normalized || schema.properties[normalized]) return;
 
-  /** @type {Record<string, unknown>} */
-  const newProps = {};
+  const newProps: Record<string, unknown> = {};
   for (const [key, val] of Object.entries(schema.properties)) {
-    newProps[key === oldName ? newName : key] = val;
+    newProps[key === oldName ? normalized : key] = val;
   }
   schema.properties = newProps;
 
   if (schema.required) {
-    schema.required = schema.required.map((/** @type {string} */ r) =>
-      r === oldName ? newName : r,
-    );
+    schema.required = schema.required.map((r: string) => (r === oldName ? normalized : r));
   }
 
   rerender();
@@ -160,7 +159,7 @@ function handleRenameField(oldName, newName, rerender) {
  * @param {string} newType
  * @param {() => void} rerender
  */
-function handleChangeType(fieldName, newType, rerender) {
+function handleChangeType(fieldName: string, newType: string, rerender: () => void) {
   const schema = getSelectedSchema();
   if (!schema?.properties?.[fieldName]) return;
 
@@ -178,7 +177,7 @@ function handleChangeType(fieldName, newType, rerender) {
  * @param {string} format
  * @param {() => void} rerender
  */
-function handleChangeFormat(fieldName, format, rerender) {
+function handleChangeFormat(fieldName: string, format: string, rerender: () => void) {
   const schema = getSelectedSchema();
   if (!schema?.properties?.[fieldName]) return;
 
@@ -194,7 +193,7 @@ function handleChangeFormat(fieldName, format, rerender) {
  * @param {string} target
  * @param {() => void} rerender
  */
-function handleChangeRefTarget(fieldName, target, rerender) {
+function handleChangeRefTarget(fieldName: string, target: string, rerender: () => void) {
   const schema = getSelectedSchema();
   if (!schema?.properties) return;
 
@@ -210,17 +209,24 @@ function handleChangeRefTarget(fieldName, target, rerender) {
  * @param {{ name: string; type: string; required: boolean }} fieldState
  * @param {() => void} rerender
  */
-function handleAddNestedField(parentName, fieldState, rerender) {
+function handleAddNestedField(
+  parentName: string,
+  fieldState: { name: string; type: string; required: boolean },
+  rerender: () => void,
+) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
   if (!parent) return;
 
+  const name = toCamelCase(fieldState.name);
+  if (!name) return;
+
   if (!parent.properties) parent.properties = {};
-  parent.properties[fieldState.name] = schemaForType(fieldState.type);
+  parent.properties[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.includes(name)) parent.required.push(name);
   }
 
   rerender();
@@ -232,14 +238,14 @@ function handleAddNestedField(parentName, fieldState, rerender) {
  * @param {string} childName
  * @param {() => void} rerender
  */
-function handleDeleteNested(parentName, childName, rerender) {
+function handleDeleteNested(parentName: string, childName: string, rerender: () => void) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties) return;
 
   delete parent.properties[childName];
   if (parent.required) {
-    parent.required = parent.required.filter((/** @type {string} */ r) => r !== childName);
+    parent.required = parent.required.filter((r: string) => r !== childName);
   }
 
   rerender();
@@ -251,7 +257,7 @@ function handleDeleteNested(parentName, childName, rerender) {
  * @param {string} childName
  * @param {() => void} rerender
  */
-function handleToggleNestedRequired(parentName, childName, rerender) {
+function handleToggleNestedRequired(parentName: string, childName: string, rerender: () => void) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
   if (!parent) return;
@@ -271,22 +277,25 @@ function handleToggleNestedRequired(parentName, childName, rerender) {
  * @param {string} newChild
  * @param {() => void} rerender
  */
-function handleRenameNested(parentName, oldChild, newChild, rerender) {
+function handleRenameNested(
+  parentName: string,
+  oldChild: string,
+  newChild: string,
+  rerender: () => void,
+) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
-  if (!parent?.properties || !newChild || parent.properties[newChild]) return;
+  const normalized = toCamelCase(newChild);
+  if (!parent?.properties || !normalized || parent.properties[normalized]) return;
 
-  /** @type {Record<string, unknown>} */
-  const newProps = {};
+  const newProps: Record<string, unknown> = {};
   for (const [key, val] of Object.entries(parent.properties)) {
-    newProps[key === oldChild ? newChild : key] = val;
+    newProps[key === oldChild ? normalized : key] = val;
   }
   parent.properties = newProps;
 
   if (parent.required) {
-    parent.required = parent.required.map((/** @type {string} */ r) =>
-      r === oldChild ? newChild : r,
-    );
+    parent.required = parent.required.map((r: string) => (r === oldChild ? normalized : r));
   }
 
   rerender();
@@ -299,7 +308,12 @@ function handleRenameNested(parentName, oldChild, newChild, rerender) {
  * @param {string} newType
  * @param {() => void} rerender
  */
-function handleChangeNestedType(parentName, childName, newType, rerender) {
+function handleChangeNestedType(
+  parentName: string,
+  childName: string,
+  newType: string,
+  rerender: () => void,
+) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
@@ -319,7 +333,12 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
  * @param {string} format
  * @param {() => void} rerender
  */
-function handleChangeNestedFormat(parentName, childName, format, rerender) {
+function handleChangeNestedFormat(
+  parentName: string,
+  childName: string,
+  format: string,
+  rerender: () => void,
+) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
@@ -332,7 +351,7 @@ function handleChangeNestedFormat(parentName, childName, format, rerender) {
 }
 
 /** @param {() => void} rerender */
-function handleDeleteContentType(rerender) {
+function handleDeleteContentType(rerender: () => void) {
   if (!selectedContentType) return;
   const config = projectState?.projectConfig;
   if (!config?.contentTypes?.[selectedContentType]) return;
@@ -351,7 +370,7 @@ function handleDeleteContentType(rerender) {
  *
  * @param {HTMLElement} container
  */
-export function renderContentTypesEditor(container) {
+export function renderContentTypesEditor(container: HTMLElement) {
   const rerender = () => renderContentTypesEditor(container);
   const config = projectState?.projectConfig;
   const contentTypes = config?.contentTypes || {};
@@ -382,10 +401,10 @@ export function renderContentTypesEditor(container) {
                 size="s"
                 placeholder="content-type-name"
                 .value=${newContentTypeName}
-                @input=${(/** @type {Event} */ e) => {
-                  newContentTypeName = /** @type {HTMLInputElement} */ (e.target).value;
+                @input=${(e: Event) => {
+                  newContentTypeName = (e.target as HTMLInputElement).value;
                 }}
-                @keydown=${(/** @type {KeyboardEvent} */ e) => {
+                @keydown=${(e: KeyboardEvent) => {
                   if (e.key === "Enter") handleNewContentType(rerender);
                   if (e.key === "Escape") {
                     showNewContentType = false;
@@ -419,24 +438,26 @@ export function renderContentTypesEditor(container) {
     editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
   } else {
     const col = contentTypes[selectedContentType];
-    const schema = col.schema || {};
+    const schema = (col.schema || {}) as ContentTypeSchema;
     const properties = schema.properties || {};
     const required = schema.required || [];
 
-    /** @type {import("./schema-field-ui.js").FieldHandlers} */
-    const handlers = {
-      onDelete: (n) => handleDeleteField(n, rerender),
-      onToggleRequired: (n) => handleToggleRequired(n, rerender),
-      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
-      onChangeType: (n, t) => handleChangeType(n, t, rerender),
-      onChangeFormat: (n, f) => handleChangeFormat(n, f, rerender),
-      onChangeRefTarget: (n, target) => handleChangeRefTarget(n, target, rerender),
-      onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
-      onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
-      onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
-      onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
-      onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
-      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, rerender),
+    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),
+      onChangeRefTarget: (n: string, target: string) => handleChangeRefTarget(n, target, rerender),
+      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),
+      onChangeNestedFormat: (p: string, c: string, f: string) =>
+        handleChangeNestedFormat(p, c, f, rerender),
     };
 
     const fieldCards = repeat(