@jxsuite/studio 0.25.1 → 0.25.3

package/dist/studio.js

@@ -270207,6 +270207,161 @@ function renderFieldRow({
   `;
 }
 
+// src/ui/field-input.ts
+init_lit_html();
+init_live();
+
+// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/directives/keyed.js
+init_lit_html();
+init_directive();
+init_directive_helpers();
+
+class Keyed extends Directive {
+  constructor() {
+    super(...arguments);
+    this.key = nothing;
+  }
+  render(k, v) {
+    this.key = k;
+    return v;
+  }
+  update(part, [k, v]) {
+    if (k !== this.key) {
+      setCommittedValue(part);
+      this.key = k;
+    }
+    return v;
+  }
+}
+var keyed = directive(Keyed);
+
+// src/ui/field-input.ts
+var DEFAULT_DEBOUNCE_MS = 350;
+var _drafts = new Map;
+function getFieldValue(key, committed) {
+  const d2 = _drafts.get(key);
+  return d2 ? d2.value : committed;
+}
+function setDraft(key, value2) {
+  const d2 = _drafts.get(key);
+  if (d2)
+    d2.value = value2;
+  else
+    _drafts.set(key, { value: value2 });
+}
+function scheduleDraftCommit(key, ms, commit) {
+  const d2 = _drafts.get(key);
+  if (!d2)
+    return;
+  if (d2.timer)
+    clearTimeout(d2.timer);
+  d2.timer = setTimeout(() => {
+    const cur = _drafts.get(key);
+    if (!cur)
+      return;
+    delete cur.timer;
+    commit(cur.value);
+  }, ms);
+}
+function commitField(key, commit) {
+  const d2 = _drafts.get(key);
+  if (!d2)
+    return;
+  if (d2.timer)
+    clearTimeout(d2.timer);
+  const value2 = d2.value;
+  _drafts.delete(key);
+  commit(value2);
+}
+function makeHandlers(key, ms, commit, commitMode = "live") {
+  return {
+    onInput: (e) => {
+      const v = e.target.value;
+      setDraft(key, v);
+      if (commitMode === "live")
+        scheduleDraftCommit(key, ms, commit);
+    },
+    onCommit: (e) => {
+      const v = e.target.value;
+      setDraft(key, v);
+      commitField(key, commit);
+    },
+    onKeydown: (e, multiline) => {
+      if (e.key === "Enter" && !multiline) {
+        commitField(key, commit);
+      }
+    }
+  };
+}
+function spTextField(key, value2, commit, opts = {}) {
+  const ms = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  const { onInput, onCommit, onKeydown: onKeydown2 } = makeHandlers(key, ms, commit, opts.commitMode);
+  return keyed(key, html3`
+      <sp-textfield
+        size=${opts.size ?? "s"}
+        placeholder=${opts.placeholder ?? ""}
+        ?disabled=${!!opts.disabled}
+        style=${opts.style ?? ""}
+        .value=${live(getFieldValue(key, value2))}
+        @input=${onInput}
+        @change=${onCommit}
+        @keydown=${(e) => onKeydown2(e, false)}
+      ></sp-textfield>
+    `);
+}
+function spTextArea(key, value2, commit, opts = {}) {
+  const ms = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  const { onInput, onCommit } = makeHandlers(key, ms, commit, opts.commitMode);
+  return keyed(key, html3`
+      <sp-textfield
+        multiline
+        size=${opts.size ?? "s"}
+        placeholder=${opts.placeholder ?? ""}
+        ?disabled=${!!opts.disabled}
+        style=${opts.style ?? ""}
+        .value=${live(getFieldValue(key, value2))}
+        @input=${onInput}
+        @change=${onCommit}
+      ></sp-textfield>
+    `);
+}
+function rawTextArea(key, value2, commit, opts = {}) {
+  const ms = opts.debounceMs ?? DEFAULT_DEBOUNCE_MS;
+  const { onInput, onCommit } = makeHandlers(key, ms, commit, opts.commitMode);
+  const style2 = [
+    `min-height:${opts.minHeight ?? "40px"}`,
+    opts.mono ? "font-family:'SF Mono','Fira Code','Consolas',monospace;font-size:11px" : "",
+    opts.style ?? ""
+  ].filter(Boolean).join(";");
+  return keyed(key, html3`
+      <textarea
+        class="field-input"
+        style=${style2}
+        placeholder=${opts.placeholder ?? ""}
+        ?disabled=${!!opts.disabled}
+        .value=${live(getFieldValue(key, value2))}
+        @input=${onInput}
+        @change=${onCommit}
+      ></textarea>
+    `);
+}
+function spNumberField(value2, commit, opts = {}) {
+  return html3`
+    <sp-number-field
+      size=${opts.size ?? "s"}
+      ?hide-stepper=${opts.hideStepper ?? true}
+      ?disabled=${!!opts.disabled}
+      style=${opts.style ?? ""}
+      .value=${live(value2 !== undefined ? Number(value2) : undefined)}
+      @change=${(e) => {
+    const raw = e.target.value;
+    const n2 = Number(raw);
+    commit(raw === "" || isNaN(n2) ? undefined : n2);
+  }}
+    ></sp-number-field>
+  `;
+}
+
 // src/ui/expression-editor.ts
 init_lit_html();
 init_live();
@@ -270848,17 +271003,10 @@ function signalFieldRow(label4, value2, onChange) {
     prop: label4,
     label: label4,
     hasValue: false,
-    widget: html3`
-      <sp-textfield
-        size="s"
-        .value=${value2}
-        @change=${(e) => {
-      const v = e.target.value;
+    widget: spTextField(`sig:${label4}`, value2, (v) => {
       if (v !== value2)
         onChange(v);
-    }}
-      ></sp-textfield>
-    `
+    }, { commitMode: "blur" })
   });
 }
 function normParam(p) {
@@ -271018,28 +271166,15 @@ function renderSignalEditorTemplate(S, name, def3, ctx) {
     });
   };
   const textareaRow = (label4, value2, onChange, opts = {}) => {
-    let debounce;
     return renderFieldRow({
       prop: label4,
       label: label4,
       hasValue: false,
-      widget: html3`
-        <textarea
-          class="field-input"
-          style=${styleMap({
-        minHeight: opts.minHeight || "40px",
-        ...opts.mono && {
-          fontFamily: "'SF Mono','Fira Code','Consolas',monospace",
-          fontSize: "11px"
-        }
-      })}
-          .value=${value2}
-          @input=${(e) => {
-        clearTimeout(debounce);
-        debounce = setTimeout(() => onChange(e.target.value), 500);
-      }}
-        ></textarea>
-      `
+      widget: rawTextArea(`sig:${label4}`, value2, onChange, {
+        debounceMs: 500,
+        ...opts.minHeight != null && { minHeight: opts.minHeight },
+        ...opts.mono != null && { mono: opts.mono }
+      })
     });
   };
   const nameField = signalFieldRow("Name", name, (v) => {
@@ -271819,7 +271954,7 @@ function _objectWithoutProperties(e, t) {
   return i2;
 }
 
-// ../../node_modules/.bun/@atlaskit+pragmatic-drag-and-drop-hitbox@1.1.0/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/internal/memoize.js
+// ../../node_modules/.bun/@atlaskit+pragmatic-drag-and-drop-hitbox@1.2.0/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/internal/memoize.js
 function isShallowEqual(a, b) {
   var aKeys = Object.keys(a);
   var bKeys = Object.keys(b);
@@ -271844,7 +271979,7 @@ function stable() {
   };
 }
 
-// ../../node_modules/.bun/@atlaskit+pragmatic-drag-and-drop-hitbox@1.1.0/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/tree-item.js
+// ../../node_modules/.bun/@atlaskit+pragmatic-drag-and-drop-hitbox@1.2.0/node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/tree-item.js
 var _excluded = ["block"];
 function ownKeys4(e, r) {
   var t = Object.keys(e);
@@ -274794,6 +274929,18 @@ var _prevStylebookCustomizedOnly = false;
 function initCanvasRender(ctx) {
   _ctx11 = ctx;
 }
+function sourceLang(tab) {
+  if (tab.doc.sourceFormat === "md")
+    return "markdown";
+  return (tab.documentPath || "").endsWith(".js") ? "javascript" : "json";
+}
+function sourceContent(tab, lang) {
+  if (lang === "markdown")
+    return serializeDocument(tab);
+  if (lang === "javascript")
+    return tab.doc.document?.toString?.() || "";
+  return JSON.stringify(tab.doc.document, null, 2);
+}
 function renderCanvas() {
   const tab = activeTab.value;
   if (!tab) {
@@ -274822,13 +274969,11 @@ function renderCanvas() {
     view.functionEditor = null;
   }
   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 editor2 = view.monacoEditor;
+    const newVal = sourceContent(tab, sourceLang(tab));
+    if (!editor2.hasTextFocus() && editor2.getValue() !== newVal) {
+      editor2._ignoreNextChange = true;
+      editor2.setValue(newVal);
     }
     return;
   }
@@ -274907,8 +275052,8 @@ function renderCanvas() {
         ></div>
       </div>`, canvasWrap);
     const filePath = tab.documentPath || "document.json";
-    const lang = filePath.endsWith(".js") ? "javascript" : "json";
-    const content3 = lang === "json" ? JSON.stringify(S.document, null, 2) : S.document?.toString?.() || "";
+    const lang = sourceLang(tab);
+    const content3 = sourceContent(tab, lang);
     const modelUri = Uri2.parse("file:///" + filePath);
     const model = editor.createModel(content3, lang, modelUri);
     view.monacoEditor = editor.create(editorContainer, {
@@ -274933,11 +275078,18 @@ function renderCanvas() {
         return;
       }
       clearTimeout(debounce);
-      debounce = setTimeout(() => {
+      debounce = setTimeout(async () => {
         const tab2 = activeTab.value;
         if (!tab2)
           return;
-        if (lang === "json") {
+        if (lang === "markdown") {
+          try {
+            const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(editor2.getValue());
+            tab2.doc.document = document4;
+            tab2.doc.content.frontmatter = frontmatter2;
+            tab2.doc.dirty = true;
+          } catch {}
+        } else if (lang === "json") {
           try {
             tab2.doc.document = JSON.parse(editor2.getValue());
             tab2.doc.dirty = true;
@@ -276549,28 +276701,9 @@ function renderMetaFieldRow(field, head, applyMutation) {
       })
     });
   }
-  const widget = field.multiline ? html3`
-        <sp-textfield
-          size="s"
-          multiline
-          .value=${live(val)}
-          placeholder="${field.label}…"
-          @input=${debouncedStyleCommit(`head:${field.key}`, 400, (e) => {
-    const content3 = e.target.value?.trim() ?? "";
-    applyMutation((d2) => upsertMeta(d2, field.attr, field.key, content3));
-  })}
-        ></sp-textfield>
-      ` : html3`
-        <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) => {
-    const content3 = e.target.value?.trim() ?? "";
-    applyMutation((d2) => upsertMeta(d2, field.attr, field.key, content3));
-  })}
-        ></sp-textfield>
-      `;
+  const commit = (v) => applyMutation((d2) => upsertMeta(d2, field.attr, field.key, v.trim()));
+  const placeholder = field.key === "viewport" ? "width=device-width, initial-scale=1" : `${field.label}…`;
+  const widget = field.multiline ? spTextArea(`head:${field.key}`, val, commit, { placeholder: `${field.label}…` }) : spTextField(`head:${field.key}`, val, commit, { placeholder });
   return renderFieldRow({
     prop: field.key,
     label: field.label,
@@ -276663,22 +276796,13 @@ function renderHeadTemplate({
     onClear: () => applyMutation((d2) => {
       delete d2.title;
     }),
-    widget: html3`
-              <sp-textfield
-                size="s"
-                .value=${live(title)}
-                placeholder="Page title…"
-                @input=${debouncedStyleCommit("head:title", 400, (e) => {
-      const val = e.target.value?.trim() ?? "";
-      applyMutation((d2) => {
-        if (val)
-          d2.title = val;
-        else
-          delete d2.title;
-      });
-    })}
-              ></sp-textfield>
-            `
+    widget: spTextField("head:title", title, (v) => applyMutation((d2) => {
+      const val = v.trim();
+      if (val)
+        d2.title = val;
+      else
+        delete d2.title;
+    }), { placeholder: "Page title…" })
   })}
           ${PAGE_FIELDS.map((field) => renderMetaFieldRow(field, head, applyMutation))}
           ${renderFieldRow({
@@ -276874,17 +276998,10 @@ function renderFmField(field, entry, value2, requiredFields) {
       label: displayLabel,
       hasValue: hasVal,
       onClear,
-      widget: html3`
-        <sp-textfield
-          size="s"
-          placeholder="comma, separated"
-          .value=${live(display)}
-          @input=${debouncedStyleCommit(`fm:${field}`, 400, (e) => {
-        const arr = e.target.value ? e.target.value.split(",").map((s2) => s2.trim()).filter(Boolean) : undefined;
+      widget: spTextField(`fm:${field}`, display, (v) => {
+        const arr = v ? v.split(",").map((s2) => s2.trim()).filter(Boolean) : undefined;
         transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, arr));
-      })}
-        ></sp-textfield>
-      `
+      }, { placeholder: "comma, separated" })
     });
   }
   if (Array.isArray(entry.enum)) {
@@ -276919,17 +277036,7 @@ function renderFmField(field, entry, value2, requiredFields) {
       label: displayLabel,
       hasValue: hasVal,
       onClear,
-      widget: html3`
-        <sp-number-field
-          size="s"
-          hide-stepper
-          .value=${live(value2 !== undefined ? Number(value2) : undefined)}
-          @change=${debouncedStyleCommit(`fm:${field}`, 400, (e) => {
-        const v = e.target.value;
-        transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, isNaN(Number(v)) ? undefined : Number(v)));
-      })}
-        ></sp-number-field>
-      `
+      widget: spNumberField(value2 !== undefined ? Number(value2) : undefined, (n2) => transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, n2)))
     });
   }
   return renderFieldRow({
@@ -276937,16 +277044,7 @@ function renderFmField(field, entry, value2, requiredFields) {
     label: displayLabel,
     hasValue: hasVal,
     onClear,
-    widget: html3`
-      <sp-textfield
-        size="s"
-        placeholder=${entry.format === "date" ? "YYYY-MM-DD" : ""}
-        .value=${live(value2 || "")}
-        @input=${debouncedStyleCommit(`fm:${field}`, 400, (e) => {
-      transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, e.target.value || undefined));
-    })}
-      ></sp-textfield>
-    `
+    widget: spTextField(`fm:${field}`, value2 || "", (v) => transactDoc(activeTab.value, (t) => mutateUpdateFrontmatter(t, field, v || undefined)), { placeholder: entry.format === "date" ? "YYYY-MM-DD" : "" })
   });
 }
 
@@ -306352,6 +306450,87 @@ function toolbarTemplate() {
 init_lit_html();
 init_store();
 init_reactivity();
+
+// src/panels/panel-scheduler.ts
+function isTextInput(el) {
+  if (!el)
+    return false;
+  const tag5 = el.tagName.toLowerCase();
+  if (tag5 === "input" || tag5 === "textarea")
+    return true;
+  if (tag5 === "sp-textfield" || tag5 === "sp-number-field" || tag5 === "sp-search")
+    return true;
+  if (el.shadowRoot?.activeElement)
+    return isTextInput(el.shadowRoot.activeElement);
+  return false;
+}
+function createPanelScheduler(opts) {
+  const { root: root3, render: render6, 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;
+    if (blocked()) {
+      pending = true;
+      return;
+    }
+    pending = false;
+    rendering = true;
+    try {
+      render6();
+    } finally {
+      rendering = false;
+    }
+  }
+  function schedule() {
+    if (scheduled)
+      return;
+    scheduled = true;
+    rafId = requestAnimationFrame(flush);
+  }
+  function onFocusIn(e20) {
+    editing = isTextInput(e20.target);
+  }
+  function onFocusOut() {
+    editing = false;
+    if (pending)
+      schedule();
+  }
+  return {
+    schedule,
+    isEditing: () => blocked(),
+    bindFocus() {
+      root3.addEventListener("focusin", onFocusIn);
+      root3.addEventListener("focusout", onFocusOut);
+    },
+    unbind() {
+      root3.removeEventListener("focusin", onFocusIn);
+      root3.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();
+    }
+  };
+}
+
+// src/panels/right-panel.ts
 init_workspace2();
 
 // src/panels/events-panel.ts
@@ -309598,21 +309777,12 @@ function bindableFieldRow(label4, type2, rawValue, onChange, filterFn = null, ex
   const defs = tab.doc.document.state || {};
   const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
   const signalDefs = Object.entries(defs).filter(([, d3]) => filterFn ? filterFn(d3) : !d3?.$handler && d3?.$prototype !== "Function");
-  let debounce;
-  const onInput2 = (e20) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => onChange(e20.target.value), 400);
-  };
   const staticVal = isBound ? "" : rawValue ?? "";
-  const staticTpl = type2 === "textarea" ? html3`<sp-textfield
-          multiline
-          size="s"
-          .value=${live(staticVal)}
-          @input=${onInput2}
-        ></sp-textfield>` : type2 === "checkbox" ? html3`<sp-checkbox
+  const fieldKey = `prop:${label4}`;
+  const staticTpl = type2 === "textarea" ? spTextArea(fieldKey, String(staticVal), (v) => onChange(v)) : type2 === "checkbox" ? html3`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(e20) => onChange(e20.target.checked)}
-          ></sp-checkbox>` : html3`<sp-textfield size="s" .value=${live(staticVal)} @input=${onInput2}></sp-textfield>`;
+          ></sp-checkbox>` : spTextField(fieldKey, String(staticVal), (v) => onChange(v));
   const boundTpl = html3`
     <sp-picker
       size="s"
@@ -309856,15 +310026,9 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
     } else if (prop.format === "color") {
       widgetTpl = renderColorSelector(prop.name, staticVal, onChange);
     } else if (prop.format === "date") {
-      widgetTpl = html3`<sp-textfield
-            size="s"
-            placeholder="YYYY-MM-DD"
-            .value=${live(staticVal)}
-            @input=${(e20) => {
-        clearTimeout(debounce);
-        debounce = setTimeout(() => onChange(e20.target.value), 400);
-      }}
-          ></sp-textfield>`;
+      widgetTpl = spTextField(`cprop:${prop.name}`, String(staticVal), (v) => onChange(v), {
+        placeholder: "YYYY-MM-DD"
+      });
     } else if (parsed.kind === "boolean") {
       widgetTpl = html3`<sp-checkbox
             size="s"
@@ -309890,14 +310054,7 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
             @change=${(e20) => onChange(e20.detail?.value ?? e20.target.value)}
           ></jx-value-selector>`;
     } else {
-      widgetTpl = html3`<sp-textfield
-            size="s"
-            .value=${live(staticVal)}
-            @input=${(e20) => {
-        clearTimeout(debounce);
-        debounce = setTimeout(() => onChange(e20.target.value), 400);
-      }}
-          ></sp-textfield>`;
+      widgetTpl = spTextField(`cprop:${prop.name}`, String(staticVal), (v) => onChange(v));
     }
     return html3`
           <div class="style-row" data-prop=${prop.name}>
@@ -310334,13 +310491,7 @@ function renderPropertiesPanelTemplate(ctx) {
                 ></span>` : nothing}
             <sp-field-label size="s">ID</sp-field-label>
           </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node2.$id || "")}
-            @input=${debouncedStyleCommit("prop:$id", 400, (e20) => {
-    transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "$id", e20.target.value || undefined));
-  })}
-          ></sp-textfield>
+          ${spTextField("prop:$id", String(node2.$id || ""), (v) => transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "$id", v || undefined)))}
         </div>
         <div class="style-row" data-prop="className">
           <div class="style-row-label">
@@ -310354,13 +310505,7 @@ function renderPropertiesPanelTemplate(ctx) {
                 ></span>` : nothing}
             <sp-field-label size="s">Class</sp-field-label>
           </div>
-          <sp-textfield
-            size="s"
-            .value=${live(node2.className || "")}
-            @input=${debouncedStyleCommit("prop:className", 400, (e20) => {
-    transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "className", e20.target.value || undefined));
-  })}
-          ></sp-textfield>
+          ${spTextField("prop:className", String(node2.className || ""), (v) => transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "className", v || undefined)))}
         </div>
         ${!Array.isArray(node2.children) || node2.children.length === 0 ? html3`
               <div class="style-row" data-prop="textContent">
@@ -310375,14 +310520,7 @@ function renderPropertiesPanelTemplate(ctx) {
                       ></span>` : nothing}
                   <sp-field-label size="s">Text Content</sp-field-label>
                 </div>
-                <sp-textfield
-                  size="s"
-                  multiline
-                  .value=${live(typeof node2.textContent === "string" ? node2.textContent : node2.textContent ?? "")}
-                  @input=${debouncedStyleCommit("prop:textContent", 400, (e20) => {
-    transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "textContent", e20.target.value || undefined));
-  })}
-                ></sp-textfield>
+                ${spTextArea("prop:textContent", typeof node2.textContent === "string" ? node2.textContent : "", (v) => transactDoc(activeTab.value, (t15) => mutateUpdateProperty(t15, path2, "textContent", v || undefined)))}
               </div>
             ` : nothing}
         <div class="style-row" data-prop="hidden">
@@ -311579,34 +311717,17 @@ function renderAiPanelTemplate() {
 // src/panels/right-panel.ts
 var _ctx13 = null;
 var _scope5 = null;
-var _rendering = false;
-var _scheduled2 = false;
-var _hasFocus = false;
-function _isTextInput(el) {
-  if (!el)
-    return false;
-  const tag5 = el.tagName.toLowerCase();
-  if (tag5 === "input" || tag5 === "textarea")
-    return true;
-  if (tag5 === "sp-textfield" || tag5 === "sp-number-field" || tag5 === "sp-search")
-    return true;
-  if (el.shadowRoot?.activeElement)
-    return _isTextInput(el.shadowRoot.activeElement);
-  return false;
-}
-function _onFocusIn(e21) {
-  _hasFocus = _isTextInput(e21.target);
-}
-function _onFocusOut() {
-  _hasFocus = false;
-  render6();
-}
+var _scheduler = null;
 function mount6(ctx) {
   _ctx13 = ctx;
   mountAiPanel();
   registerRightPanelRender(render6);
-  rightPanel.addEventListener("focusin", _onFocusIn);
-  rightPanel.addEventListener("focusout", _onFocusOut);
+  _scheduler = createPanelScheduler({
+    root: rightPanel,
+    render: _doRender,
+    blockWhile: isColorPopoverOpen
+  });
+  _scheduler.bindFocus();
   _scope5 = effectScope();
   _scope5.run(() => {
     effect(() => {
@@ -311623,22 +311744,12 @@ function mount6(ctx) {
       tab.session.ui.styleFilter;
       tab.session.ui.styleFilterActive;
       tab.session.ui.inspectorSections;
-      if (!_hasFocus && !isColorPopoverOpen()) {
-        render6();
-      }
+      render6();
     });
   });
 }
-var _rafId = 0;
 function render6() {
-  if (!_ctx13)
-    return;
-  if (_rendering)
-    return;
-  if (!_scheduled2) {
-    _scheduled2 = true;
-    _rafId = requestAnimationFrame(_flush2);
-  }
+  _scheduler?.schedule();
 }
 var _propsContainer = null;
 var _eventsContainer = null;
@@ -311658,16 +311769,9 @@ function _ensureContainers() {
   _assistantContainer.className = "panel-body";
   _assistantContainer.style.cssText = "display:flex;flex-direction:column;overflow:hidden";
 }
-function _flush2() {
-  _scheduled2 = false;
-  _rafId = 0;
+function _doRender() {
   if (!_ctx13)
     return;
-  if (_rendering)
-    return;
-  if (_hasFocus || isColorPopoverOpen())
-    return;
-  _rendering = true;
   try {
     const ctx = _ctx13;
     const aTab = activeTab.value;
@@ -311745,8 +311849,6 @@ function _flush2() {
     _lastTab = tab;
   } catch (e21) {
     console.error("right-panel render error:", e21);
-  } finally {
-    _rendering = false;
   }
   requestAnimationFrame(() => mountQuikChat());
   _ctx13.updateForcedPseudoPreview();
@@ -311960,20 +312062,11 @@ function renderElementsTemplate(ctx) {
 // src/panels/left-panel.ts
 var _ctx14 = null;
 var _scope6 = null;
-var _rendering2 = false;
-var _scheduled3 = false;
-var _hasFocus2 = false;
-function _onFocusIn2() {
-  _hasFocus2 = true;
-}
-function _onFocusOut2() {
-  _hasFocus2 = false;
-  render7();
-}
+var _scheduler2 = null;
 function mount7(ctx) {
   _ctx14 = ctx;
-  leftPanel.addEventListener("focusin", _onFocusIn2);
-  leftPanel.addEventListener("focusout", _onFocusOut2);
+  _scheduler2 = createPanelScheduler({ root: leftPanel, render: _doRender2 });
+  _scheduler2.bindFocus();
   _scope6 = effectScope();
   _scope6.run(() => {
     effect(() => {
@@ -311987,29 +312080,16 @@ function mount7(ctx) {
         tab.session.ui.gitLoading;
         tab.session.ui.gitError;
       }
-      if (!_hasFocus2) {
-        render7();
-      }
+      render7();
     });
   });
 }
 function render7() {
-  if (!_ctx14)
-    return;
-  if (_rendering2)
-    return;
-  if (!_scheduled3) {
-    _scheduled3 = true;
-    queueMicrotask(_flush3);
-  }
+  _scheduler2?.schedule();
 }
-function _flush3() {
-  _scheduled3 = false;
+function _doRender2() {
   if (!_ctx14)
     return;
-  if (_rendering2)
-    return;
-  _rendering2 = true;
   try {
     _render();
   } catch (e21) {
@@ -312021,8 +312101,6 @@ function _flush3() {
     } catch (e22) {
       console.error("left-panel retry failed:", e22);
     }
-  } finally {
-    _rendering2 = false;
   }
   if (view.leftTab === "layers") {
     const sel = leftPanel.querySelector(".layer-row.selected");
@@ -312738,5 +312816,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=8A6CA76BD8515F1464756E2164756E21
+//# debugId=2006FB9B9654EF0F64756E2164756E21
 //# sourceMappingURL=studio.js.map