@jxsuite/studio 0.25.1 → 0.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.25.1",
-    "@jxsuite/runtime": "^0.25.1",
-    "@jxsuite/schema": "^0.25.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
+    "@jxsuite/parser": "^0.25.2",
+    "@jxsuite/runtime": "^0.25.2",
+    "@jxsuite/schema": "^0.25.2",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/canvas/canvas-render.ts

@@ -11,7 +11,7 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { canvasWrap, canvasPanels, updateCanvas } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { loadMarkdown } from "../files/file-ops";
+import { loadMarkdown, serializeDocument } from "../files/file-ops";
 import { renderWelcome } from "../panels/welcome-screen";
 import { projectState } from "../state";
 import {
@@ -75,6 +75,22 @@ export function initCanvasRender(ctx: CanvasRenderCtx) {
   _ctx = ctx;
 }
 
+/** Monaco language for the source view of a tab's document. */
+function sourceLang(tab: import("../tabs/tab.js").Tab) {
+  if (tab.doc.sourceFormat === "md") return "markdown";
+  return (tab.documentPath || "").endsWith(".js") ? "javascript" : "json";
+}
+
+/**
+ * The full source text for the source view. Markdown files serialize to their on-disk form
+ * (frontmatter YAML — title, $head, etc. — plus the body), not just the JSON of the body tree.
+ */
+function sourceContent(tab: import("../tabs/tab.js").Tab, lang: string) {
+  if (lang === "markdown") return serializeDocument(tab);
+  if (lang === "javascript") return tab.doc.document?.toString?.() || "";
+  return JSON.stringify(tab.doc.document, null, 2);
+}
+
 export function renderCanvas() {
   const tab = activeTab.value;
   if (!tab) {
@@ -118,15 +134,15 @@ export function renderCanvas() {
     view.functionEditor = null;
   }
 
-  // Source mode: update existing Monaco editor without recreating
+  // Source mode: update existing Monaco editor without recreating. Don't replace the buffer while
+  // the user is actively typing in it — that would reformat under the cursor (the source view is
+  // the editing surface here, mirroring the panel draft-state behaviour).
   if (canvasMode === "source" && view.monacoEditor) {
-    const filePath = tab.documentPath || "document.json";
-    const isJs = filePath.endsWith(".js");
-    const newVal = isJs ? S.document?.toString?.() || "" : JSON.stringify(S.document, null, 2);
-    const currentVal = view.monacoEditor.getValue();
-    if (currentVal !== newVal) {
-      view.monacoEditor._ignoreNextChange = true;
-      view.monacoEditor.setValue(newVal);
+    const editor = view.monacoEditor;
+    const newVal = sourceContent(tab, sourceLang(tab));
+    if (!editor.hasTextFocus() && editor.getValue() !== newVal) {
+      editor._ignoreNextChange = true;
+      editor.setValue(newVal);
     }
     return;
   }
@@ -234,9 +250,8 @@ export function renderCanvas() {
     );
 
     const filePath = tab.documentPath || "document.json";
-    const lang = filePath.endsWith(".js") ? "javascript" : "json";
-    const content =
-      lang === "json" ? JSON.stringify(S.document, null, 2) : S.document?.toString?.() || "";
+    const lang = sourceLang(tab);
+    const content = sourceContent(tab, lang);
     const modelUri = monaco.Uri.parse("file:///" + filePath);
     const model = monaco.editor.createModel(content, lang, modelUri);
     view.monacoEditor = monaco.editor.create(editorContainer as unknown as HTMLElement, {
@@ -262,10 +277,20 @@ export function renderCanvas() {
         return;
       }
       clearTimeout(debounce);
-      debounce = setTimeout(() => {
+      debounce = setTimeout(async () => {
         const tab = activeTab.value;
         if (!tab) return;
-        if (lang === "json") {
+        if (lang === "markdown") {
+          try {
+            // Parse the full markdown source back into body + frontmatter (title, $head, etc.).
+            const { document, frontmatter } = await loadMarkdown(editor.getValue());
+            tab.doc.document = document as JxMutableNode;
+            tab.doc.content.frontmatter = frontmatter;
+            tab.doc.dirty = true;
+          } catch {
+            // Unparseable markdown — don't update state
+          }
+        } else if (lang === "json") {
           try {
             tab.doc.document = JSON.parse(editor.getValue());
             tab.doc.dirty = true;

package/src/panels/head-panel.ts

@@ -9,8 +9,9 @@
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { renderFieldRow } from "../ui/field-row";
+import { spTextField, spTextArea, spNumberField } from "../ui/field-input";
 import { renderMediaPicker } from "../ui/media-picker";
-import { debouncedStyleCommit, renderOnly, projectState } from "../store";
+import { renderOnly, projectState } from "../store";
 import type { JsonValue, DirEntry } from "../types";
 import { activeTab } from "../workspace/workspace";
 import { transactDoc, mutateUpdateFrontmatter } from "../tabs/transact";
@@ -237,32 +238,13 @@ function renderMetaFieldRow(
     });
   }
 
+  const commit = (v: string) =>
+    applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, v.trim()));
+  const placeholder =
+    field.key === "viewport" ? "width=device-width, initial-scale=1" : `${field.label}…`;
   const widget = field.multiline
-    ? html`
-        <sp-textfield
-          size="s"
-          multiline
-          .value=${live(val)}
-          placeholder="${field.label}…"
-          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (e: Event) => {
-            const content = (e.target as HTMLInputElement).value?.trim() ?? "";
-            applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, content));
-          })}
-        ></sp-textfield>
-      `
-    : html`
-        <sp-textfield
-          size="s"
-          .value=${live(val)}
-          placeholder=${field.key === "viewport"
-            ? "width=device-width, initial-scale=1"
-            : `${field.label}…`}
-          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (e: Event) => {
-            const content = (e.target as HTMLInputElement).value?.trim() ?? "";
-            applyMutation((d: JxMutableNode) => upsertMeta(d, field.attr, field.key, content));
-          })}
-        ></sp-textfield>
-      `;
+    ? spTextArea(`head:${field.key}`, val, commit, { placeholder: `${field.label}…` })
+    : spTextField(`head:${field.key}`, val, commit, { placeholder });
 
   return renderFieldRow({
     prop: field.key,
@@ -396,20 +378,17 @@ export function renderHeadTemplate({
               applyMutation((d: JxMutableNode) => {
                 delete d.title;
               }),
-            widget: html`
-              <sp-textfield
-                size="s"
-                .value=${live(title)}
-                placeholder="Page title…"
-                @input=${debouncedStyleCommit("head:title", 400, (e: Event) => {
-                  const val = (e.target as HTMLInputElement).value?.trim() ?? "";
-                  applyMutation((d: JxMutableNode) => {
-                    if (val) d.title = val;
-                    else delete d.title;
-                  });
-                })}
-              ></sp-textfield>
-            `,
+            widget: spTextField(
+              "head:title",
+              title,
+              (v: string) =>
+                applyMutation((d: JxMutableNode) => {
+                  const val = v.trim();
+                  if (val) d.title = val;
+                  else delete d.title;
+                }),
+              { placeholder: "Page title…" },
+            ),
           })}
           ${PAGE_FIELDS.map((field) => renderMetaFieldRow(field, head, applyMutation))}
           ${renderFieldRow({
@@ -620,28 +599,26 @@ function renderFmField(
   }
 
   if (entry.type === "array") {
-    const display = Array.isArray(value) ? value.join(", ") : value || "";
+    const display = Array.isArray(value) ? value.join(", ") : (value as string) || "";
     return renderFieldRow({
       prop: field,
       label: displayLabel,
       hasValue: hasVal,
       onClear,
-      widget: html`
-        <sp-textfield
-          size="s"
-          placeholder="comma, separated"
-          .value=${live(display)}
-          @input=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
-            const arr = (e.target as HTMLInputElement).value
-              ? (e.target as HTMLInputElement).value
-                  .split(",")
-                  .map((s: string) => s.trim())
-                  .filter(Boolean)
-              : undefined;
-            transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
-          })}
-        ></sp-textfield>
-      `,
+      widget: spTextField(
+        `fm:${field}`,
+        display,
+        (v: string) => {
+          const arr = v
+            ? v
+                .split(",")
+                .map((s: string) => s.trim())
+                .filter(Boolean)
+            : undefined;
+          transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
+        },
+        { placeholder: "comma, separated" },
+      ),
     });
   }
 
@@ -684,19 +661,9 @@ function renderFmField(
       label: displayLabel,
       hasValue: hasVal,
       onClear,
-      widget: html`
-        <sp-number-field
-          size="s"
-          hide-stepper
-          .value=${live(value !== undefined ? Number(value) : undefined)}
-          @change=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
-            const v = (e.target as HTMLInputElement).value;
-            transactDoc(activeTab.value, (t) =>
-              mutateUpdateFrontmatter(t, field, isNaN(Number(v)) ? undefined : Number(v)),
-            );
-          })}
-        ></sp-number-field>
-      `,
+      widget: spNumberField(value !== undefined ? Number(value) : undefined, (n) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, n)),
+      ),
     });
   }
 
@@ -705,17 +672,12 @@ function renderFmField(
     label: displayLabel,
     hasValue: hasVal,
     onClear,
-    widget: html`
-      <sp-textfield
-        size="s"
-        placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
-        .value=${live(value || "")}
-        @input=${debouncedStyleCommit(`fm:${field}`, 400, (e: Event) => {
-          transactDoc(activeTab.value, (t) =>
-            mutateUpdateFrontmatter(t, field, (e.target as HTMLInputElement).value || undefined),
-          );
-        })}
-      ></sp-textfield>
-    `,
+    widget: spTextField(
+      `fm:${field}`,
+      (value as string) || "",
+      (v: string) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)),
+      { placeholder: entry.format === "date" ? "YYYY-MM-DD" : "" },
+    ),
   });
 }

package/src/panels/left-panel.ts

@@ -11,6 +11,7 @@ import { html, render as litRender, nothing } from "lit-html";
 import type { TemplateResult } from "lit-html";
 import { leftPanel, updateSession } from "../store";
 import { effect, effectScope } from "../reactivity";
+import { createPanelScheduler, type PanelScheduler } from "./panel-scheduler";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 import { transact, mutateUpdateFrontmatter } from "../tabs/transact";
@@ -49,18 +50,7 @@ let _ctx: LeftPanelCtx | null = null;
 
 let _scope: import("@vue/reactivity").EffectScope | null = null;
 
-let _rendering = false;
-let _scheduled = false;
-let _hasFocus = false;
-
-function _onFocusIn() {
-  _hasFocus = true;
-}
-
-function _onFocusOut() {
-  _hasFocus = false;
-  render();
-}
+let _scheduler: PanelScheduler | null = null;
 
 /**
  * Mount the left panel orchestrator.
@@ -69,8 +59,8 @@ function _onFocusOut() {
  */
 export function mount(ctx: LeftPanelCtx) {
   _ctx = ctx;
-  leftPanel.addEventListener("focusin", _onFocusIn);
-  leftPanel.addEventListener("focusout", _onFocusOut);
+  _scheduler = createPanelScheduler({ root: leftPanel, render: _doRender });
+  _scheduler.bindFocus();
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -85,9 +75,7 @@ export function mount(ctx: LeftPanelCtx) {
         void tab.session.ui.gitLoading;
         void tab.session.ui.gitError;
       }
-      if (!_hasFocus) {
-        render();
-      }
+      render();
     });
   });
 }
@@ -96,25 +84,21 @@ export function unmount() {
   _scope?.stop();
   _scope = null;
   _ctx = null;
-  leftPanel.removeEventListener("focusin", _onFocusIn);
-  leftPanel.removeEventListener("focusout", _onFocusOut);
-  _hasFocus = false;
+  _scheduler?.unbind();
+  _scheduler = null;
 }
 
+/**
+ * Request a render. Coalesced and deferred while a text input in the panel is focused (so explicit
+ * callers — renderOnly("leftPanel"), tab switches, etc. — can never clobber a field mid-edit).
+ */
 export function render() {
-  if (!_ctx) return;
-  if (_rendering) return;
-  if (!_scheduled) {
-    _scheduled = true;
-    queueMicrotask(_flush);
-  }
+  _scheduler?.schedule();
 }
 
-function _flush() {
-  _scheduled = false;
+/** Actual DOM paint, invoked by the scheduler. Includes a Lit-marker-corruption recovery retry. */
+function _doRender() {
   if (!_ctx) return;
-  if (_rendering) return;
-  _rendering = true;
   try {
     _render();
   } catch (e) {
@@ -127,8 +111,6 @@ function _flush() {
     } catch (e2) {
       console.error("left-panel retry failed:", e2);
     }
-  } finally {
-    _rendering = false;
   }
 
   if (view.leftTab === "layers") {

package/src/panels/panel-scheduler.ts

@@ -0,0 +1,126 @@
+/// <reference lib="dom" />
+/**
+ * Panel-scheduler.ts — Shared focus-aware render scheduler for Studio panels.
+ *
+ * Generalizes the guard that previously lived only in the right panel: render requests are
+ * coalesced via requestAnimationFrame and DEFERRED while a text input inside the panel root is
+ * focused, then flushed on focusout. Routing every render path (reactive effect, renderOnly(...),
+ * explicit calls) through one scheduler means a focused field is never rebuilt mid-edit — which is
+ * what previously truncated or dropped characters in the document/head sidebar.
+ */
+
+/**
+ * Is the element (or its shadow-DOM active descendant) a text-entry control whose value would be
+ * clobbered by a re-render? Covers native inputs and the Spectrum web components used in panels.
+ *
+ * @param {Element | null} el
+ * @returns {boolean}
+ */
+export function isTextInput(el: Element | null): boolean {
+  if (!el) return false;
+  const tag = el.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea") return true;
+  if (tag === "sp-textfield" || tag === "sp-number-field" || tag === "sp-search") return true;
+  if (el.shadowRoot?.activeElement) return isTextInput(el.shadowRoot.activeElement);
+  return false;
+}
+
+export interface PanelScheduler {
+  /** Request a render. Coalesced; deferred while a text input in the panel is focused. */
+  schedule(): void;
+  /** True when a render would currently be deferred (text input focused or blockWhile()). */
+  isEditing(): boolean;
+  /** Attach focusin/focusout listeners to the panel root. */
+  bindFocus(): void;
+  /** Detach listeners and cancel any pending frame. */
+  unbind(): void;
+  /** Render immediately, bypassing the rAF coalescing (still respects the focus guard). */
+  flushNow(): void;
+}
+
+/**
+ * Create a focus-aware render scheduler bound to a panel root.
+ *
+ * @param {{
+ *   root: HTMLElement;
+ *   render: () => void;
+ *   blockWhile?: () => boolean;
+ * }} opts
+ *   - `render` does the actual DOM paint; `blockWhile` is an extra defer predicate (e.g. a color
+ *     popover being open).
+ * @returns {PanelScheduler}
+ */
+export function createPanelScheduler(opts: {
+  root: HTMLElement;
+  render: () => void;
+  blockWhile?: () => boolean;
+}): PanelScheduler {
+  const { root, render, blockWhile } = opts;
+  let editing = false;
+  let scheduled = false;
+  let pending = false;
+  let rendering = false;
+  let rafId = 0;
+
+  const blocked = () => editing || (blockWhile ? blockWhile() : false);
+
+  function flush() {
+    scheduled = false;
+    rafId = 0;
+    if (rendering) return;
+    // Defer while a field is focused — flushed later by focusout (or the next schedule()).
+    if (blocked()) {
+      pending = true;
+      return;
+    }
+    pending = false;
+    rendering = true;
+    try {
+      render();
+    } finally {
+      rendering = false;
+    }
+  }
+
+  function schedule() {
+    if (scheduled) return;
+    scheduled = true;
+    rafId = requestAnimationFrame(flush);
+  }
+
+  function onFocusIn(e: FocusEvent) {
+    editing = isTextInput(e.target as Element);
+  }
+
+  function onFocusOut() {
+    // Clear the editing flag and schedule a flush. If focus is merely moving to another field in
+    // the same panel, the synchronous focusin that follows re-sets `editing` before the rAF runs,
+    // so the deferred render keeps waiting (no mid-edit clobber).
+    editing = false;
+    if (pending) schedule();
+  }
+
+  return {
+    schedule,
+    isEditing: () => blocked(),
+    bindFocus() {
+      root.addEventListener("focusin", onFocusIn);
+      root.addEventListener("focusout", onFocusOut);
+    },
+    unbind() {
+      root.removeEventListener("focusin", onFocusIn);
+      root.removeEventListener("focusout", onFocusOut);
+      if (rafId) cancelAnimationFrame(rafId);
+      scheduled = false;
+      pending = false;
+      editing = false;
+      rendering = false;
+    },
+    flushNow() {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = 0;
+      scheduled = false;
+      flush();
+    },
+  };
+}

package/src/panels/properties-panel.ts

@@ -20,6 +20,7 @@ import { view } from "../view";
 import { componentRegistry } from "../files/components";
 import { widgetForType } from "./style-inputs";
 import { renderFieldRow } from "../ui/field-row";
+import { spTextField, spTextArea } from "../ui/field-input";
 import {
   attrLabel,
   inferInputType,
@@ -96,28 +97,17 @@ function bindableFieldRow(
         (d as JxPrototypeDef)?.$prototype !== "Function",
   );
 
-  /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let debounce: ReturnType<typeof setTimeout> | undefined;
-  const onInput = (e: Event) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => onChange((e.target as HTMLInputElement).value), 400);
-  };
-
   const staticVal = isBound ? "" : (rawValue ?? "");
+  const fieldKey = `prop:${label}`;
   const staticTpl =
     type === "textarea"
-      ? html`<sp-textfield
-          multiline
-          size="s"
-          .value=${live(staticVal)}
-          @input=${onInput}
-        ></sp-textfield>`
+      ? spTextArea(fieldKey, String(staticVal), (v: string) => onChange(v))
       : type === "checkbox"
         ? html`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(e: Event) => onChange((e.target as HTMLInputElement).checked)}
           ></sp-checkbox>`
-        : html`<sp-textfield size="s" .value=${live(staticVal)} @input=${onInput}></sp-textfield>`;
+        : spTextField(fieldKey, String(staticVal), (v: string) => onChange(v));
 
   const boundTpl = html`
     <sp-picker
@@ -476,15 +466,14 @@ function renderComponentPropsFieldsTemplate(
         } else if (prop.format === "color") {
           widgetTpl = renderColorSelector(prop.name, staticVal, onChange);
         } else if (prop.format === "date") {
-          widgetTpl = html`<sp-textfield
-            size="s"
-            placeholder="YYYY-MM-DD"
-            .value=${live(staticVal)}
-            @input=${(e: Event) => {
-              clearTimeout(debounce);
-              debounce = setTimeout(() => onChange((e.target as HTMLInputElement).value), 400);
-            }}
-          ></sp-textfield>`;
+          widgetTpl = spTextField(
+            `cprop:${prop.name}`,
+            String(staticVal),
+            (v: string) => onChange(v),
+            {
+              placeholder: "YYYY-MM-DD",
+            },
+          );
         } else if (parsed.kind === "boolean") {
           widgetTpl = html`<sp-checkbox
             size="s"
@@ -511,14 +500,9 @@ function renderComponentPropsFieldsTemplate(
               onChange(e.detail?.value ?? (e.target as HTMLInputElement).value)}
           ></jx-value-selector>`;
         } else {
-          widgetTpl = html`<sp-textfield
-            size="s"
-            .value=${live(staticVal)}
-            @input=${(e: Event) => {
-              clearTimeout(debounce);
-              debounce = setTimeout(() => onChange((e.target as HTMLInputElement).value), 400);
-            }}
-          ></sp-textfield>`;
+          widgetTpl = spTextField(`cprop:${prop.name}`, String(staticVal), (v: string) =>
+            onChange(v),
+          );
         }
 
         return html`
@@ -1085,20 +1069,11 @@ export function renderPropertiesPanelTemplate(ctx: {
               : nothing}
             <sp-field-label size="s">ID</sp-field-label>
           </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node.$id || "")}
-            @input=${debouncedStyleCommit("prop:$id", 400, (e: Event) => {
-              transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(
-                  t,
-                  path,
-                  "$id",
-                  (e.target as HTMLInputElement).value || undefined,
-                ),
-              );
-            })}
-          ></sp-textfield>
+          ${spTextField("prop:$id", String(node.$id || ""), (v: string) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateProperty(t, path, "$id", v || undefined),
+            ),
+          )}
         </div>
         <div class="style-row" data-prop="className">
           <div class="style-row-label">
@@ -1116,20 +1091,11 @@ export function renderPropertiesPanelTemplate(ctx: {
               : nothing}
             <sp-field-label size="s">Class</sp-field-label>
           </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node.className || "")}
-            @input=${debouncedStyleCommit("prop:className", 400, (e: Event) => {
-              transactDoc(activeTab.value, (t) =>
-                mutateUpdateProperty(
-                  t,
-                  path,
-                  "className",
-                  (e.target as HTMLInputElement).value || undefined,
-                ),
-              );
-            })}
-          ></sp-textfield>
+          ${spTextField("prop:className", String(node.className || ""), (v: string) =>
+            transactDoc(activeTab.value, (t) =>
+              mutateUpdateProperty(t, path, "className", v || undefined),
+            ),
+          )}
         </div>
         ${!Array.isArray(node.children) || node.children.length === 0
           ? html`
@@ -1149,25 +1115,14 @@ export function renderPropertiesPanelTemplate(ctx: {
                     : nothing}
                   <sp-field-label size="s">Text Content</sp-field-label>
                 </div>
-                <sp-textfield
-                  size="s"
-                  multiline
-                  .value=${live(
-                    typeof node.textContent === "string"
-                      ? node.textContent
-                      : (node.textContent ?? ""),
-                  )}
-                  @input=${debouncedStyleCommit("prop:textContent", 400, (e: Event) => {
+                ${spTextArea(
+                  "prop:textContent",
+                  typeof node.textContent === "string" ? node.textContent : "",
+                  (v: string) =>
                     transactDoc(activeTab.value, (t) =>
-                      mutateUpdateProperty(
-                        t,
-                        path,
-                        "textContent",
-                        (e.target as HTMLInputElement).value || undefined,
-                      ),
-                    );
-                  })}
-                ></sp-textfield>
+                      mutateUpdateProperty(t, path, "textContent", v || undefined),
+                    ),
+                )}
               </div>
             `
           : nothing}