@jxsuite/studio 0.11.0 → 0.14.0

package/src/panels/stylebook-panel.js

@@ -8,9 +8,6 @@ import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 
 import {
-  getState,
-  update,
-  updateStyle,
   updateSession,
   updateUi,
   canvasWrap,
@@ -18,6 +15,8 @@ import {
   elToPath,
   projectState,
 } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
+import { transactDoc, mutateUpdateStyle } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { defineElement, setSkipServerFunctions } from "@jxsuite/runtime";
 import { componentRegistry } from "../files/components.js";
@@ -49,9 +48,8 @@ let _ctx = null;
  */
 export function renderStylebookMode(ctx) {
   _ctx = ctx;
-  const S = getState();
 
-  const settingsTab = S.ui.settingsTab || "stylebook";
+  const settingsTab = activeTab.value?.session.ui.settingsTab || "stylebook";
 
   const settingsChromeBarTpl = html`
     <div
@@ -94,11 +92,14 @@ export function renderStylebookMode(ctx) {
 
   // Stylebook tab — element catalog / variables
   view.stylebookElToTag = new WeakMap();
-  const rootStyle = getEffectiveStyle(S.document.style);
-  const filter = (S.ui.stylebookFilter || "").toLowerCase();
-  const customizedOnly = S.ui.stylebookCustomizedOnly;
+  const tab = activeTab.value;
+  const rootStyle = getEffectiveStyle(tab?.doc.document?.style);
+  const filter = (tab?.session.ui.stylebookFilter || "").toLowerCase();
+  const customizedOnly = tab?.session.ui.stylebookCustomizedOnly;
 
-  const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(S.document.$media));
+  const { sizeBreakpoints, baseWidth } = parseMediaEntries(
+    getEffectiveMedia(tab?.doc.document?.$media),
+  );
   const hasMedia = sizeBreakpoints.length > 0;
 
   const onTabClick = (/** @type {string} */ t) => {
@@ -110,7 +111,7 @@ export function renderStylebookMode(ctx) {
   };
 
   const onCustomizedToggle = () => {
-    updateUi("stylebookCustomizedOnly", !S.ui.stylebookCustomizedOnly);
+    updateUi("stylebookCustomizedOnly", !tab?.session.ui.stylebookCustomizedOnly);
   };
 
   const chromeBarTpl = html`
@@ -121,7 +122,7 @@ export function renderStylebookMode(ctx) {
     >
       <sp-tabs
         size="s"
-        selected=${S.ui.stylebookTab || "elements"}
+        selected=${tab?.session.ui.stylebookTab || "elements"}
         @change=${(/** @type {any} */ e) => {
           onTabClick(e.target.selected);
         }}
@@ -132,17 +133,17 @@ export function renderStylebookMode(ctx) {
           `,
         )}
       </sp-tabs>
-      ${S.ui.stylebookTab === "elements"
+      ${tab?.session.ui.stylebookTab === "elements"
         ? html`
             <input
               class="field-input"
               style="flex:1;max-width:200px;margin-left:8px"
               placeholder="Filter…"
-              .value=${S.ui.stylebookFilter}
+              .value=${tab?.session.ui.stylebookFilter}
               @input=${onFilterInput}
             />
             <button
-              class="tb-toggle${S.ui.stylebookCustomizedOnly ? " active" : ""}"
+              class="tb-toggle${tab?.session.ui.stylebookCustomizedOnly ? " active" : ""}"
               style="margin-left:4px"
               @click=${onCustomizedToggle}
             >
@@ -176,7 +177,7 @@ export function renderStylebookMode(ctx) {
 
   const renderIntoPanel = (/** @type {any} */ panel, /** @type {any} */ activeBreakpoints) => {
     panel.canvas.classList.add("sb-canvas");
-    if (S.ui.stylebookTab === "elements") {
+    if (tab?.session.ui.stylebookTab === "elements") {
       renderStylebookElementsIntoCanvas(
         panel.canvas,
         rootStyle,
@@ -197,7 +198,7 @@ export function renderStylebookMode(ctx) {
   /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
   let panelEntries;
   if (!hasMedia) {
-    const effectiveMedia = getEffectiveMedia(S.document.$media);
+    const effectiveMedia = getEffectiveMedia(tab?.doc.document?.$media);
     const hasBaseWidth = effectiveMedia && effectiveMedia["--"];
     const label = hasBaseWidth ? `${mediaDisplayName("--")} (${baseWidth}px)` : null;
     const entry = ctx.canvasPanelTemplate(
@@ -268,11 +269,10 @@ export function renderStylebookOverlays() {
   if (!_ctx) return;
   if (canvasPanels.length === 0) return;
 
-  const S = getState();
-  const selectedTag = S.ui.stylebookSelection;
+  const selectedTag = activeTab.value?.session.ui.stylebookSelection;
 
   for (const panel of canvasPanels) {
-    const hoverTag = panel._lastHoverTag;
+    const hoverTag = /** @type {any} */ (panel)._lastHoverTag;
     /**
      * @type {{
      *   cls: string;
@@ -691,8 +691,9 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
                 const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
                 if (swatch) swatch.style.backgroundColor = colorPicker.value;
                 if (!isNew && varName) {
-                  const S = getState();
-                  update(updateStyle(S, [], varName, colorPicker.value));
+                  transactDoc(activeTab.value, (t) =>
+                    mutateUpdateStyle(t, [], varName, colorPicker.value),
+                  );
                 }
               }}
             />
@@ -751,8 +752,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
             const swatch = /** @type {any} */ (row.querySelector(".sb-var-swatch"));
             if (swatch) swatch.style.backgroundColor = v;
             if (!isNew && varName) {
-              const S = getState();
-              update(updateStyle(S, [], varName, v));
+              transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
             }
           }, 400);
         }}
@@ -765,8 +765,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
         const bar = /** @type {any} */ (row.querySelector(".sb-var-size-bar"));
         if (bar) bar.style.width = newVal;
         if (!isNew && varName) {
-          const S = getState();
-          update(updateStyle(S, [], varName, newVal));
+          transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, newVal));
         }
       },
     });
@@ -798,8 +797,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
             const v = textFieldEl.value;
             const fontPrev = /** @type {any} */ (row.querySelector(".sb-var-font-preview"));
             if (fontPrev) fontPrev.style.fontFamily = v;
-            const S = getState();
-            update(updateStyle(S, [], varName, v));
+            transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
           }, 400);
         }}
       ></sp-textfield>
@@ -824,8 +822,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
               const val = getValueFn();
               const generatedVar = friendlyNameToVar(name, catMeta.prefix);
               if (!generatedVar || !val) return;
-              const S = getState();
-              update(updateStyle(S, [], generatedVar, val));
+              transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], generatedVar, val));
             }}
             >Add</sp-action-button
           >
@@ -858,8 +855,7 @@ function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
               class="sb-var-del"
               style="pointer-events:auto"
               @click=${() => {
-                const S = getState();
-                update(updateStyle(S, [], varName, undefined));
+                transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, undefined));
               }}
             >
               <sp-icon-delete slot="icon"></sp-icon-delete>

package/src/panels/tab-strip.js

@@ -0,0 +1,124 @@
+/**
+ * Tab strip — renders open tabs above the canvas area.
+ *
+ * Uses the reactive workspace model: reads from workspace.tabOrder, workspace.tabs,
+ * workspace.activeTabId. Clicks call activateTab/closeTab from workspace.js.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { effect, effectScope } from "../reactivity.js";
+import { workspace, activateTab, closeTab } from "../workspace/workspace.js";
+
+/** @typedef {import("../tabs/tab.js").Tab} Tab */
+
+/** @type {HTMLElement | null} */
+let _host = null;
+
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
+
+/**
+ * Mount the tab strip into the given host element.
+ *
+ * @param {HTMLElement} host
+ */
+export function mount(host) {
+  _host = host;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      void workspace.tabOrder;
+      void workspace.activeTabId;
+      for (const tab of workspace.tabs.values()) {
+        void tab.doc.dirty;
+        void tab.documentPath;
+      }
+      render();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _host = null;
+}
+
+function render() {
+  if (!_host) return;
+
+  if (workspace.tabOrder.length <= 1) {
+    litRender(nothing, _host);
+    return;
+  }
+
+  litRender(
+    html`
+      <div class="tab-strip">
+        ${workspace.tabOrder.map((id) => {
+          const tab = workspace.tabs.get(id);
+          if (!tab) return nothing;
+          const isActive = id === workspace.activeTabId;
+          const isDirty = tab.doc.dirty;
+          const label = tabLabel(tab);
+          return html`
+            <div
+              class="tab-strip-tab ${isActive ? "active" : ""}"
+              @click=${() => activateTab(id)}
+              @auxclick=${(/** @type {MouseEvent} */ e) => {
+                if (e.button === 1) {
+                  e.preventDefault();
+                  requestClose(id);
+                }
+              }}
+              title=${tab.documentPath || "Untitled"}
+            >
+              <span class="tab-strip-label">${label}</span>
+              ${isDirty ? html`<span class="tab-strip-dirty">●</span>` : nothing}
+              <button
+                class="tab-strip-close"
+                @click=${(/** @type {Event} */ e) => {
+                  e.stopPropagation();
+                  requestClose(id);
+                }}
+              >
+                ×
+              </button>
+            </div>
+          `;
+        })}
+      </div>
+    `,
+    _host,
+  );
+}
+
+/**
+ * Derive a short label from the tab's documentPath.
+ *
+ * @param {Tab} tab
+ * @returns {string}
+ */
+function tabLabel(tab) {
+  const path = tab.documentPath;
+  if (!path) return "Untitled";
+  const parts = path.split("/");
+  return parts[parts.length - 1];
+}
+
+/**
+ * Close a tab, prompting if dirty.
+ *
+ * @param {string} id
+ */
+function requestClose(id) {
+  const tab = workspace.tabs.get(id);
+  if (!tab) return;
+  if (tab.doc.dirty) {
+    const confirmed = window.confirm(
+      `"${tabLabel(tab)}" has unsaved changes. Close without saving?`,
+    );
+    if (!confirmed) return;
+  }
+  closeTab(id);
+}

package/src/panels/toolbar.js

@@ -4,7 +4,10 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { getState, update, updateSession, updateUi, undo, redo, subscribe } from "../store.js";
+import { updateSession, updateUi } from "../store.js";
+import { undo as tabUndo, redo as tabRedo } from "../tabs/transact.js";
+import { effect, effectScope } from "../reactivity.js";
+import { activeTab } from "../workspace/workspace.js";
 import { getEffectiveMedia } from "../site-context.js";
 import { mediaDisplayName } from "./shared.js";
 import { view } from "../view.js";
@@ -15,8 +18,8 @@ let _rootEl = null;
 /** @type {any} */
 let _ctx = null;
 
-/** @type {(() => void) | null} */
-let _unsub = null;
+/** @type {import("@vue/reactivity").EffectScope | null} */
+let _scope = null;
 
 const toolbarIconMap = /** @type {Record<string, any>} */ ({
   "sp-icon-folder-open": html`<sp-icon-folder-open slot="icon"></sp-icon-folder-open>`,
@@ -59,12 +62,28 @@ function tbBtnTpl(label, onClick, iconTag) {
 export function mount(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx = ctx;
-  _unsub = subscribe(() => render());
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (!tab) return;
+      // Read reactive properties to establish tracking
+      void tab.doc.document;
+      void tab.doc.dirty;
+      void tab.doc.mode;
+      void tab.session.selection;
+      void tab.session.ui.canvasMode;
+      void tab.session.ui.editingFunction;
+      void tab.session.ui.featureToggles;
+      void tab.session.ui.rightTab;
+      render();
+    });
+  });
 }
 
 export function unmount() {
-  _unsub?.();
-  _unsub = null;
+  _scope?.stop();
+  _scope = null;
   _rootEl = null;
   _ctx = null;
 }
@@ -79,7 +98,18 @@ export function render() {
 }
 
 function toolbarTemplate() {
-  const S = getState();
+  const tab = activeTab.value;
+  if (!tab) return html``;
+  const S = /** @type {any} */ ({
+    document: tab.doc.document,
+    ui: tab.session.ui,
+    mode: tab.doc.mode,
+    selection: tab.session.selection,
+    dirty: tab.doc.dirty,
+    documentPath: tab.documentPath,
+    fileHandle: tab.fileHandle,
+    documentStack: tab.session.documentStack,
+  });
   const canvasMode = _ctx.getCanvasMode();
   const hasStack = S.documentStack && S.documentStack.length > 0;
   const hasFunc = !!S.ui.editingFunction;
@@ -183,7 +213,7 @@ function toolbarTemplate() {
               /** @type {Record<string, any>} */
               const uiPatch = { editingFunction: null };
               if (m.key === "settings") uiPatch.rightTab = "style";
-              if (m.key === "manage") uiPatch.leftTab = "files";
+              if (m.key === "manage") view.leftTab = "files";
               updateSession({ ui: uiPatch });
               _ctx.renderCanvas();
               _ctx.safeRenderRightPanel();
@@ -203,8 +233,8 @@ function toolbarTemplate() {
       ${tbBtnTpl("Save", _ctx.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Undo", () => update(undo(getState())), "sp-icon-undo")}
-      ${tbBtnTpl("Redo", () => update(redo(getState())), "sp-icon-redo")}
+      ${tbBtnTpl("Undo", () => tabUndo(activeTab.value), "sp-icon-undo")}
+      ${tbBtnTpl("Redo", () => tabRedo(activeTab.value), "sp-icon-redo")}
     </sp-action-group>
     <div class="tb-spacer"></div>
     ${S.documentPath

package/src/reactivity.js

@@ -0,0 +1,28 @@
+/**
+ * Re-exports from @vue/reactivity. All studio code imports reactivity primitives from here (not
+ * directly from the package) for grep-ability and potential future wrapping.
+ *
+ * Version is pinned to match @jxsuite/runtime — reactive proxies from one version don't track in
+ * effects from another. See migrate-reactivity-workspace.md for rationale.
+ *
+ * Batching note: Vue's reactivity batches synchronous effect re-runs within a microtask. Use
+ * queueMicrotask() or Promise.resolve().then() to wait for the flush if needed (@vue/reactivity
+ * standalone doesn't ship nextTick).
+ */
+export {
+  reactive,
+  ref,
+  computed,
+  readonly,
+  shallowReactive,
+  shallowRef,
+  effect,
+  effectScope,
+  getCurrentScope,
+  onScopeDispose,
+  pauseTracking,
+  resetTracking,
+  toRaw,
+  isReactive,
+  isRef,
+} from "@vue/reactivity";

package/src/settings/content-types-editor.js

@@ -8,14 +8,19 @@
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
-import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.js";
+import {
+  fieldCardTpl,
+  addFieldFormTpl,
+  schemaForType,
+  detectFieldFormat,
+} from "./schema-field-ui.js";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 /** @type {string | null} */
 let selectedContentType = null;
 let showAddField = false;
-let newFieldState = { name: "", type: "string", required: false };
+let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewContentType = false;
 let newContentTypeName = "";
 
@@ -76,7 +81,7 @@ function handleAddField(rerender) {
   if (!schema) return;
 
   if (!schema.properties) schema.properties = {};
-  schema.properties[name] = schemaForType(newFieldState.type);
+  schema.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
 
   if (newFieldState.required) {
     if (!schema.required) schema.required = [];
@@ -84,7 +89,7 @@ function handleAddField(rerender) {
   }
 
   showAddField = false;
-  newFieldState = { name: "", type: "string", required: false };
+  newFieldState = { name: "", type: "string", format: "", required: false };
   rerender();
   saveProjectConfig();
 }
@@ -158,7 +163,27 @@ function handleChangeType(fieldName, newType, rerender) {
   const schema = getSelectedSchema();
   if (!schema?.properties?.[fieldName]) return;
 
-  schema.properties[fieldName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(schema.properties[fieldName])
+      : undefined;
+  schema.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeFormat(fieldName, format, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties?.[fieldName]) return;
+
+  const prop = schema.properties[fieldName];
+  const type = prop.type || "string";
+  schema.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -278,7 +303,29 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
   const parent = schema?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
 
-  parent.properties[childName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(parent.properties[childName])
+      : undefined;
+  parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeNestedFormat(parentName, childName, format, rerender) {
+  const schema = getSelectedSchema();
+  const parent = schema?.properties?.[parentName];
+  if (!parent?.properties?.[childName]) return;
+
+  const prop = parent.properties[childName];
+  const type = prop.type || "string";
+  parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -381,12 +428,14 @@ export function renderContentTypesEditor(container) {
       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 fieldCards = Object.entries(properties).map(([name, def]) =>
@@ -423,7 +472,7 @@ export function renderContentTypesEditor(container) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", required: false };
+                newFieldState = { name: "", type: "string", format: "", required: false };
                 rerender();
               },
             })

package/src/settings/defs-editor.js

@@ -9,14 +9,19 @@
 import { html, render as litRender } from "lit-html";
 import { getPlatform } from "../platform.js";
 import { projectState } from "../store.js";
-import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.js";
+import {
+  fieldCardTpl,
+  addFieldFormTpl,
+  schemaForType,
+  detectFieldFormat,
+} from "./schema-field-ui.js";
 
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 /** @type {string | null} */
 let selectedDef = null;
 let showAddField = false;
-let newFieldState = { name: "", type: "string", required: false };
+let newFieldState = { name: "", type: "string", format: "", required: false };
 let showNewDef = false;
 let newDefName = "";
 
@@ -70,7 +75,7 @@ function handleAddField(rerender) {
   if (!def) return;
 
   if (!def.properties) def.properties = {};
-  def.properties[name] = schemaForType(newFieldState.type);
+  def.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
 
   if (newFieldState.required) {
     if (!def.required) def.required = [];
@@ -78,7 +83,7 @@ function handleAddField(rerender) {
   }
 
   showAddField = false;
-  newFieldState = { name: "", type: "string", required: false };
+  newFieldState = { name: "", type: "string", format: "", required: false };
   rerender();
   saveProjectConfig();
 }
@@ -150,7 +155,27 @@ function handleChangeType(fieldName, newType, rerender) {
   const def = getSelectedDef();
   if (!def?.properties?.[fieldName]) return;
 
-  def.properties[fieldName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(def.properties[fieldName])
+      : undefined;
+  def.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} fieldName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeFormat(fieldName, format, rerender) {
+  const def = getSelectedDef();
+  if (!def?.properties?.[fieldName]) return;
+
+  const prop = def.properties[fieldName];
+  const type = prop.type || "string";
+  def.properties[fieldName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -256,7 +281,29 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
   const parent = def?.properties?.[parentName];
   if (!parent?.properties?.[childName]) return;
 
-  parent.properties[childName] = schemaForType(newType);
+  const oldFormat =
+    newType === "string" || newType === "array"
+      ? detectFieldFormat(parent.properties[childName])
+      : undefined;
+  parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+
+/**
+ * @param {string} parentName
+ * @param {string} childName
+ * @param {string} format
+ * @param {() => void} rerender
+ */
+function handleChangeNestedFormat(parentName, childName, format, rerender) {
+  const def = getSelectedDef();
+  const parent = def?.properties?.[parentName];
+  if (!parent?.properties?.[childName]) return;
+
+  const prop = parent.properties[childName];
+  const type = prop.type || "string";
+  parent.properties[childName] = schemaForType(type, format || undefined);
   rerender();
   saveProjectConfig();
 }
@@ -358,11 +405,13 @@ export function renderDefsEditor(container) {
       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),
       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 fieldCards = Object.entries(properties).map(([name, fieldDef]) =>
@@ -392,7 +441,7 @@ export function renderDefsEditor(container) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", required: false };
+                newFieldState = { name: "", type: "string", format: "", required: false };
                 rerender();
               },
             })