@jxsuite/studio 0.20.0 → 0.21.0

package/src/panels/block-action-bar.js

@@ -5,11 +5,12 @@
 
 import { html, render as litRender, nothing } from "lit-html";
 import { styleMap } from "lit-html/directives/style-map.js";
+import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
 import { getNodeAtPath, nodeLabel, parentElementPath, childIndex } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateMoveNode } from "../tabs/transact.js";
+import { transactDoc, mutateMoveNode, mutateUpdateProperty } from "../tabs/transact.js";
 import { view } from "../view.js";
 import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-edit.js";
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
@@ -17,6 +18,8 @@ import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 import { getLayerSlot } from "../ui/layers.js";
+import { showSlashMenu } from "../editor/slash-menu.js";
+import { getConvertTargets } from "../editor/convert-targets.js";
 
 /**
  * @typedef {import("../state.js").StudioState} StudioState
@@ -70,9 +73,29 @@ const formatIconMap = /** @type {Record<string, import("lit-html").TemplateResul
 function onBarMousedown(e) {
   if (/** @type {HTMLElement} */ (e.target).closest("sp-textfield")) return;
   if (/** @type {HTMLElement} */ (e.target).closest(".bar-drag-handle")) return;
+  if (/** @type {HTMLElement} */ (e.target).closest(".bar-tag--interactive")) return;
   e.preventDefault();
 }
 
+/**
+ * @param {MouseEvent} e
+ * @param {import("../editor/convert-targets.js").SlashCommand[]} targets
+ * @param {JxPath} selection
+ */
+function onTagBadgeClick(e, targets, selection) {
+  e.stopPropagation();
+  const anchorEl = /** @type {HTMLElement} */ (e.currentTarget);
+  showSlashMenu(anchorEl, "", {
+    showFilter: targets.length > 6,
+    commands: targets,
+    onSelect: (cmd) => {
+      transactDoc(activeTab.value, (t) => {
+        mutateUpdateProperty(t, selection, "tagName", cmd.tag);
+      });
+    },
+  });
+}
+
 /** Saved selection range for format button mousedown→click flow */
 function captureSelectionRange() {
   const sel = window.getSelection();
@@ -226,9 +249,11 @@ function showLinkPopover(anchorBtn) {
 
   const rect = anchorBtn.getBoundingClientRect();
 
+  /** @type {HTMLInputElement | null} */
+  let _linkField = null;
+
   const onApply = () => {
-    const field = /** @type {HTMLInputElement | null} */ (host.querySelector("sp-textfield"));
-    const url = field?.value || "";
+    const url = _linkField?.value || "";
     if (existingLink) {
       existingLink.setAttribute("href", url);
     } else if (url) {
@@ -272,6 +297,10 @@ function showLinkPopover(anchorBtn) {
           style="width:200px"
           value=${existingLink?.getAttribute("href") || ""}
           @keydown=${onKeydown}
+          ${ref((el) => {
+            _linkField = /** @type {HTMLInputElement | null} */ (el || null);
+            if (el) requestAnimationFrame(() => /** @type {HTMLElement} */ (el).focus());
+          })}
         ></sp-textfield>
         <sp-action-button size="xs" @click=${onApply}>
           ${existingLink ? "Update" : "Apply"}
@@ -283,10 +312,6 @@ function showLinkPopover(anchorBtn) {
     `,
     host,
   );
-
-  requestAnimationFrame(
-    () => /** @type {HTMLElement | null} */ (host.querySelector("sp-textfield"))?.focus(),
-  );
 }
 
 /** Move the selected node up (swap with previous sibling). */
@@ -360,6 +385,21 @@ export function renderBlockActionBar() {
     ? actions.filter((a) => isTagActiveInSelection(a.tag, el)).map((a) => a.tag)
     : [];
 
+  // Conversion targets for badge click
+  const isComponent =
+    node.tagName?.includes("-") &&
+    componentRegistry.some((/** @type {{ tagName: string }} */ c) => c.tagName === node.tagName);
+  const isEmpty =
+    !node.textContent &&
+    (!node.children ||
+      node.children.length === 0 ||
+      (Array.isArray(node.children) &&
+        node.children.length === 1 &&
+        typeof node.children[0] === "object" &&
+        node.children[0]?.tagName === "br"));
+  const convertTargets = !isComponent ? getConvertTargets(tag, isEmpty) : [];
+  const badgeInteractive = convertTargets.length > 0;
+
   litRender(
     html`
       <div
@@ -369,10 +409,34 @@ export function renderBlockActionBar() {
       >
         ${selection.length >= 2 ? renderParentSelector() : nothing}
 
-        <span class="bar-tag">${node.$id || (node.tagName ?? "div")}</span>
+        <span
+          class="bar-tag${badgeInteractive ? " bar-tag--interactive" : ""}"
+          @click=${badgeInteractive
+            ? (/** @type {MouseEvent} */ e) => onTagBadgeClick(e, convertTargets, selection)
+            : nothing}
+          >${node.$id || (node.tagName ?? "div")}</span
+        >
 
         ${selection.length >= 2
-          ? html`<span class="bar-drag-handle" title="Drag to reorder">⠿</span>`
+          ? html`<span
+              class="bar-drag-handle"
+              title="Drag to reorder"
+              ${ref((el) => {
+                if (!el) return;
+                if (view.selDragCleanup) {
+                  view.selDragCleanup();
+                  view.selDragCleanup = null;
+                }
+                view.selDragCleanup = draggable({
+                  element: /** @type {HTMLElement} */ (el),
+                  getInitialData: () => ({
+                    type: "tree-node",
+                    path: activeTab.value?.session.selection,
+                  }),
+                });
+              })}
+              >⠿</span
+            >`
           : nothing}
         ${selection.length >= 2 ? renderMoveArrows() : nothing}
         ${selection.length >= 2 && node.tagName
@@ -444,20 +508,5 @@ export function renderBlockActionBar() {
     if (barRect.right > window.innerWidth) {
       bar.style.left = `${Math.max(0, window.innerWidth - barRect.width)}px`;
     }
-    // Attach drag handle
-    const currentTab = activeTab.value;
-    if (currentTab?.session.selection && currentTab.session.selection.length >= 2) {
-      const handle = /** @type {HTMLElement | null} */ (bar.querySelector(".bar-drag-handle"));
-      if (handle) {
-        if (view.selDragCleanup) {
-          view.selDragCleanup();
-          view.selDragCleanup = null;
-        }
-        view.selDragCleanup = draggable({
-          element: handle,
-          getInitialData: () => ({ type: "tree-node", path: activeTab.value?.session.selection }),
-        });
-      }
-    }
   });
 }

package/src/panels/git-panel.js

@@ -10,7 +10,7 @@ import { getPlatform } from "../platform.js";
 import { updateUi, renderOnly, projectState } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
-import { showDialog } from "../ui/layers.js";
+import { showDialog, showConfirmDialog } from "../ui/layers.js";
 import { statusMessage } from "./statusbar.js";
 import { publishToGithub } from "../github/github-publish.js";
 
@@ -531,7 +531,12 @@ export function renderGitPanel(S, ctx) {
                   title="Discard changes"
                   @click=${async () => {
                     if (file.status === "U") return;
-                    if (!confirm(`Discard changes to ${file.path}?`)) return;
+                    const confirmed = await showConfirmDialog(
+                      "Discard Changes",
+                      `Discard changes to ${file.path}?`,
+                      { confirmLabel: "Discard", destructive: true },
+                    );
+                    if (!confirmed) return;
                     await gitAction("gitDiscard", [file.path]);
                   }}
                   ?disabled=${file.status === "U"}

package/src/panels/imports-panel.js

@@ -12,6 +12,7 @@ import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { projectState } from "../store.js";
 import { updateSiteConfig } from "../site-context.js";
 import { getPlatform } from "../platform.js";
+import { showConfirmDialog } from "../ui/layers.js";
 
 /** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
 
@@ -185,7 +186,11 @@ function renderSiteLevelImports(renderLeftPanel) {
                 size="xs"
                 title="Remove package"
                 @click=${async () => {
-                  if (!confirm("Remove " + pkg + "?")) return;
+                  const confirmed = await showConfirmDialog("Remove Package", `Remove ${pkg}?`, {
+                    confirmLabel: "Remove",
+                    destructive: true,
+                  });
+                  if (!confirmed) return;
                   try {
                     const platform = getPlatform();
                     await platform.removePackage(pkg);

package/src/panels/left-panel.js

@@ -40,6 +40,7 @@ import { selectStylebookTag, stylebookMeta } from "./stylebook-panel.js";
  *   registerElementsDnD: () => void;
  *   registerComponentsDnD: () => void;
  *   setupTreeKeyboard: (tree: HTMLElement) => void;
+ *   registerFileTreeDnD: (ctx: { renderLeftPanel: () => void }) => void;
  *   setGitDiffState: (state: import("../canvas/canvas-render.js").GitDiffState | null) => void;
  *   cloneRepository?: () => void;
  * }} LeftPanelCtx
@@ -53,6 +54,16 @@ let _scope = null;
 
 let _rendering = false;
 let _scheduled = false;
+let _hasFocus = false;
+
+function _onFocusIn() {
+  _hasFocus = true;
+}
+
+function _onFocusOut() {
+  _hasFocus = false;
+  render();
+}
 
 /**
  * Mount the left panel orchestrator.
@@ -61,6 +72,8 @@ let _scheduled = false;
  */
 export function mount(ctx) {
   _ctx = ctx;
+  leftPanel.addEventListener("focusin", _onFocusIn);
+  leftPanel.addEventListener("focusout", _onFocusOut);
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -75,7 +88,9 @@ export function mount(ctx) {
         void tab.session.ui.gitLoading;
         void tab.session.ui.gitError;
       }
-      render();
+      if (!_hasFocus) {
+        render();
+      }
     });
   });
 }
@@ -84,6 +99,9 @@ export function unmount() {
   _scope?.stop();
   _scope = null;
   _ctx = null;
+  leftPanel.removeEventListener("focusin", _onFocusIn);
+  leftPanel.removeEventListener("focusout", _onFocusOut);
+  _hasFocus = false;
 }
 
 export function render() {
@@ -132,6 +150,7 @@ function _render() {
     litRender(html`<div class="panel-body">${ctx.renderFilesTemplate()}</div>`, leftPanel);
     const tree = /** @type {HTMLElement | null} */ (leftPanel.querySelector(".file-tree"));
     if (tree) ctx.setupTreeKeyboard(tree);
+    ctx.registerFileTreeDnD({ renderLeftPanel: render });
     return;
   }
 

package/src/panels/properties-panel.js

@@ -97,14 +97,19 @@ function bindableFieldRow(
   const staticVal = isBound ? "" : (rawValue ?? "");
   const staticTpl =
     type === "textarea"
-      ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput}></sp-textfield>`
+      ? html`<sp-textfield
+          multiline
+          size="s"
+          .value=${live(staticVal)}
+          @input=${onInput}
+        ></sp-textfield>`
       : type === "checkbox"
         ? html`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(/** @type {Event} */ e) =>
               onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
           ></sp-checkbox>`
-        : html`<sp-textfield size="s" value=${staticVal} @input=${onInput}></sp-textfield>`;
+        : html`<sp-textfield size="s" .value=${live(staticVal)} @input=${onInput}></sp-textfield>`;
 
   const boundTpl = html`
     <sp-picker
@@ -189,7 +194,7 @@ function kvRow(
       <sp-textfield
         size="s"
         class="kv-key"
-        value=${key}
+        .value=${live(key)}
         @input=${(/** @type {Event} */ e) => {
           currentKey = /** @type {HTMLInputElement} */ (e.target).value;
           commit();
@@ -210,7 +215,7 @@ function kvRow(
       <sp-textfield
         size="s"
         class="kv-val"
-        value=${value}
+        .value=${live(value)}
         placeholder=${placeholder}
         @input=${(/** @type {Event} */ e) => {
           currentVal = /** @type {HTMLInputElement} */ (e.target).value;
@@ -316,7 +321,7 @@ function renderSwitchFieldsTemplate(
         <div class="field-row" style="display:flex;align-items:center;gap:4px;margin-bottom:3px">
           <input
             class="field-input"
-            value=${caseName}
+            .value=${live(caseName)}
             style="flex:1"
             @input=${(/** @type {Event} */ e) => {
               clearTimeout(debounce);
@@ -476,7 +481,7 @@ function renderComponentPropsFieldsTemplate(
           widgetTpl = html`<sp-textfield
             size="s"
             placeholder="YYYY-MM-DD"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(/** @type {Event} */ e) => {
               clearTimeout(debounce);
               debounce = setTimeout(
@@ -495,7 +500,7 @@ function renderComponentPropsFieldsTemplate(
         } else if (parsed.kind === "number") {
           widgetTpl = html`<sp-number-field
             size="s"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(/** @type {Event} */ e) => {
               clearTimeout(debounce);
               debounce = setTimeout(
@@ -519,7 +524,7 @@ function renderComponentPropsFieldsTemplate(
         } else {
           widgetTpl = html`<sp-textfield
             size="s"
-            value=${staticVal}
+            .value=${live(staticVal)}
             @input=${(/** @type {Event} */ e) => {
               clearTimeout(debounce);
               debounce = setTimeout(
@@ -612,7 +617,7 @@ function renderMediaFieldsTemplate(/** @type {JxMutableNode} */ node) {
         class="field-input"
         style="width:70px;flex:none"
         placeholder="320px"
-        value=${media["--"] || ""}
+        .value=${live(media["--"] || "")}
         @input=${(/** @type {Event} */ e) => {
           clearTimeout(baseDebounce);
           baseDebounce = setTimeout(() => {
@@ -716,7 +721,7 @@ function mediaBreakpointRowTemplate(/** @type {string} */ name, /** @type {strin
       <div style="display:flex;align-items:center;gap:4px;margin-bottom:2px">
         <input
           class="field-input"
-          value=${mediaDisplayName(name)}
+          .value=${live(mediaDisplayName(name))}
           style="flex:1;font-weight:600;font-size:12px"
           @input=${(/** @type {Event} */ e) => {
             const newKey = friendlyNameToMedia(/** @type {HTMLInputElement} */ (e.target).value);
@@ -755,7 +760,7 @@ function mediaBreakpointRowTemplate(/** @type {string} */ name, /** @type {strin
       <div style="display:flex;gap:4px;align-items:center">
         <input
           class="field-input bp-query-input"
-          value=${query}
+          .value=${live(query)}
           style="flex:1"
           @input=${(/** @type {Event} */ e) => {
             clearTimeout(debounceTimer);

package/src/panels/quick-search.js

@@ -1,6 +1,7 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { live } from "lit-html/directives/live.js";
+import { ref } from "lit-html/directives/ref.js";
 import { getPlatform } from "../platform.js";
 import { openFileInTab } from "../files/files.js";
 import { getRecentFiles, trackRecentFile } from "../recent-projects.js";
@@ -28,10 +29,6 @@ export function openQuickSearch() {
   _results = [];
   _selectedIndex = 0;
   renderOverlay();
-  requestAnimationFrame(() => {
-    const input = getContainer().querySelector(".quick-search-input");
-    if (input) /** @type {HTMLInputElement} */ (input).focus();
-  });
 }
 
 export function closeQuickSearch() {
@@ -136,6 +133,9 @@ function renderOverlay() {
           .value=${live(_query)}
           @input=${onInput}
           @keydown=${onKeydown}
+          ${ref((el) => {
+            if (el) requestAnimationFrame(() => /** @type {HTMLInputElement} */ (el).focus());
+          })}
         />
         <div class="quick-search-results">
           ${items.length === 0 && _query.trim()

package/src/panels/right-panel.js

@@ -39,6 +39,16 @@ let _scope = null;
 
 let _rendering = false;
 let _scheduled = false;
+let _hasFocus = false;
+
+function _onFocusIn() {
+  _hasFocus = true;
+}
+
+function _onFocusOut() {
+  _hasFocus = false;
+  render();
+}
 
 /**
  * Mount the right panel.
@@ -49,6 +59,8 @@ export function mount(ctx) {
   _ctx = ctx;
   mountAiPanel();
   registerRightPanelRender(render);
+  rightPanel.addEventListener("focusin", _onFocusIn);
+  rightPanel.addEventListener("focusout", _onFocusOut);
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
@@ -66,20 +78,7 @@ export function mount(ctx) {
       void tab.session.ui.styleFilterActive;
       void tab.session.ui.inspectorSections;
 
-      const colorPopoverOpen = isColorPopoverOpen();
-      const activeTag = document.activeElement?.tagName;
-      const rightHasFocus =
-        !colorPopoverOpen &&
-        rightPanel.contains(document.activeElement) &&
-        (activeTag === "INPUT" ||
-          activeTag === "TEXTAREA" ||
-          activeTag === "SP-TEXTFIELD" ||
-          activeTag === "SP-NUMBER-FIELD" ||
-          activeTag === "SP-PICKER" ||
-          activeTag === "SP-COMBOBOX" ||
-          activeTag === "SP-SEARCH");
-
-      if (!rightHasFocus) {
+      if (!_hasFocus && !isColorPopoverOpen()) {
         render();
       }
     });
@@ -90,6 +89,9 @@ export function unmount() {
   _scope?.stop();
   _scope = null;
   _ctx = null;
+  rightPanel.removeEventListener("focusin", _onFocusIn);
+  rightPanel.removeEventListener("focusout", _onFocusOut);
+  _hasFocus = false;
 }
 
 export function render() {

package/src/panels/signals-panel.js

@@ -8,6 +8,7 @@ import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import { styleMap } from "lit-html/directives/style-map.js";
+import { projectState } from "../state.js";
 import { activeTab } from "../workspace/workspace.js";
 import {
   transactDoc,
@@ -59,6 +60,11 @@ import { fetchPluginSchema, pluginSchemaCache } from "../services/code-services.
  *   parameters?: Record<string, unknown>[];
  *   emits?: Record<string, unknown>[];
  *   fields?: unknown;
+ *   contentType?: string;
+ *   id?: unknown;
+ *   filter?: Record<string, unknown>;
+ *   sort?: { field?: string; order?: string };
+ *   limit?: number;
  * }} SignalDef
  *
  * @typedef {{ name: string; type?: { text?: string }; description?: string; optional?: boolean }} CemParameter
@@ -730,6 +736,9 @@ function renderDataSourceFields(
       )}
     `;
   }
+  if (proto === "ContentEntry" || proto === "ContentCollection") {
+    return renderContentPrototypeFields(name, def, proto);
+  }
   if (proto === "Set" || proto === "Map" || proto === "FormData") {
     const fieldName = proto === "FormData" ? "fields" : "default";
     const fieldLabel = proto === "FormData" ? "Fields" : "Default";
@@ -751,6 +760,117 @@ function renderDataSourceFields(
   return renderExternalPrototypeEditorTemplate(S, name, def, ctx);
 }
 
+/** ContentEntry/ContentCollection fields for signal editor */
+function renderContentPrototypeFields(
+  /** @type {string} */ name,
+  /** @type {SignalDef} */ def,
+  /** @type {string} */ proto,
+) {
+  const contentTypes = projectState?.projectConfig?.contentTypes;
+  const typeNames = contentTypes ? Object.keys(contentTypes) : [];
+  const currentType = def.contentType || "";
+  const schema = /** @type {ContentTypeSchema | undefined} */ (
+    currentType && contentTypes?.[currentType]?.schema
+  ) ||
+  undefined;
+
+  const contentTypeField = typeNames.length
+    ? html`
+        <div class="signal-field-row">
+          <label class="signal-field-label">Content Type</label>
+          <sp-picker
+            size="s"
+            value=${currentType}
+            style="width:100%"
+            @change=${(/** @type {Event} */ e) => {
+              const v = /** @type {HTMLSelectElement} */ (e.target).value;
+              transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v }));
+            }}
+          >
+            ${typeNames.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
+          </sp-picker>
+        </div>
+      `
+    : signalFieldRow("Content Type", currentType, (/** @type {string} */ v) =>
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v })),
+      );
+
+  /** @type {import("lit-html").TemplateResult | symbol} */
+  let entryFields = nothing;
+  if (proto === "ContentEntry") {
+    const idVal = def.id;
+    const idStr =
+      idVal && typeof idVal === "object" && /** @type {Record<string, unknown>} */ (idVal).$ref
+        ? /** @type {string} */ (/** @type {Record<string, unknown>} */ (idVal).$ref)
+        : typeof idVal === "string"
+          ? idVal
+          : "";
+    entryFields = signalFieldRow("ID", idStr, (/** @type {string} */ v) => {
+      const val = v.startsWith("#/") ? { $ref: v } : v;
+      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { id: val }));
+    });
+  } else {
+    const filterStr = def.filter ? JSON.stringify(def.filter) : "";
+    const sortStr = def.sort ? `${def.sort.field || ""} ${def.sort.order || ""}`.trim() : "";
+    const limitStr = def.limit != null ? String(def.limit) : "";
+    entryFields = html`
+      ${signalFieldRow("Filter", filterStr, (/** @type {string} */ v) => {
+        try {
+          const parsed = v ? JSON.parse(v) : undefined;
+          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { filter: parsed }));
+        } catch {}
+      })}
+      ${signalFieldRow("Sort", sortStr, (/** @type {string} */ v) => {
+        if (!v) {
+          transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { sort: undefined }));
+          return;
+        }
+        const [field, order] = v.split(" ");
+        transactDoc(activeTab.value, (t) =>
+          mutateUpdateDef(t, name, { sort: { field, order: order || "asc" } }),
+        );
+      })}
+      ${signalFieldRow("Limit", limitStr, (/** @type {string} */ v) => {
+        const num = v ? parseInt(v, 10) : undefined;
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { limit: num }));
+      })}
+    `;
+  }
+
+  /** @type {import("lit-html").TemplateResult | symbol} */
+  let schemaFields = nothing;
+  if (schema?.properties) {
+    const fields = Object.entries(schema.properties);
+    const required = new Set(schema.required || []);
+    schemaFields = html`
+      <div style="margin-top:8px;padding:6px 0;border-top:1px solid var(--border-dim)">
+        <div style="font-size:11px;color:var(--fg-dim);margin-bottom:4px;font-weight:500">
+          Fields (${currentType})
+        </div>
+        ${fields.map(
+          ([field, fieldDef]) => html`
+            <div style="font-size:11px;padding:2px 0;display:flex;gap:4px;align-items:center">
+              <code style="color:var(--fg-default)">${field}</code>
+              <span style="color:var(--fg-dim)">${/** @type {any} */ (fieldDef).type || ""}</span>
+              ${required.has(field)
+                ? html`<span style="color:var(--color-accent,#f36f32);font-size:9px">req</span>`
+                : nothing}
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  return html`
+    ${contentTypeField}
+    ${signalFieldRow("Prototype", proto, (/** @type {string} */ v) =>
+      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $prototype: v })),
+    )}
+    ${entryFields} ${schemaFields}
+  `;
+}
+
 /** Function fields for signal editor */
 function renderFunctionFields(
   /** @type {SignalsPanelState} */ S,

package/src/panels/statusbar.js

@@ -38,11 +38,14 @@ export function mountStatusbar() {
       renderStatusbar();
     });
   });
+
+  statusbarEl?.addEventListener("click", _onStatusbarClick);
 }
 
 export function unmountStatusbar() {
   _scope?.stop();
   _scope = null;
+  statusbarEl?.removeEventListener("click", _onStatusbarClick);
 }
 
 // ─── Statusbar ───────────────────────────────────────────────────────────────
@@ -81,7 +84,8 @@ export function renderStatusbar() {
   statusbarEl.innerHTML = parts.join("  |  ") || "Jx Studio";
 }
 
-statusbarEl?.addEventListener("click", (e) => {
+/** @param {Event} e */
+function _onStatusbarClick(e) {
   const target = /** @type {HTMLElement} */ (e.target);
   if (!target.classList.contains("sb-path-seg")) return;
   const pathStr = target.dataset.path;
@@ -93,7 +97,7 @@ statusbarEl?.addEventListener("click", (e) => {
   } catch {
     // ignore
   }
-});
+}
 
 /**
  * Show a temporary status message.

package/src/panels/style-panel.js

@@ -872,7 +872,7 @@ export function _fieldRow(
       ? html`<sp-textfield
           multiline
           size="s"
-          value=${value ?? ""}
+          .value=${live(value ?? "")}
           @input=${onInput}
         ></sp-textfield>`
       : type === "checkbox"
@@ -881,7 +881,11 @@ export function _fieldRow(
             @change=${(/** @type {Event} */ e) =>
               onChange(/** @type {HTMLInputElement} */ (e.target).checked)}
           ></sp-checkbox>`
-        : html`<sp-textfield size="s" value=${value ?? ""} @input=${onInput}></sp-textfield>`;
+        : html`<sp-textfield
+            size="s"
+            .value=${live(value ?? "")}
+            @input=${onInput}
+          ></sp-textfield>`;
   return html`
     <div class="field-row">
       <sp-field-label size="s">${label}</sp-field-label>