@jxsuite/studio 0.27.0 → 0.28.0

package/src/format/format-host.ts

@@ -0,0 +1,212 @@
+/**
+ * Format-host — the studio's view of the project's format registry.
+ *
+ * Format classes are auto-discovered server-side from the project imports map
+ * (specs/extensions.md); the studio introspects them via the PAL (`listFormats`) and invokes
+ * parse/serialize capabilities via `formatAction` (POST /__studio/format in the dev server, RPC on
+ * desktop). The studio itself holds zero format knowledge — `.json` is the single native built-in.
+ */
+
+import { getPlatform } from "../platform";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+
+export interface StudioFormatHints {
+  icon?: string;
+  modes?: string[];
+  documentMode?: {
+    default?: "content" | "component";
+    componentWhen?: { frontmatterKey?: string; matches?: string };
+  };
+  newFileTemplate?: string;
+  elements?: {
+    block?: string[];
+    inline?: string[];
+    void?: string[];
+    textOnly?: string[];
+    nesting?: Record<
+      string,
+      {
+        block?: boolean;
+        inline?: boolean;
+        directive?: boolean;
+        only?: string[];
+      }
+    >;
+  };
+  [key: string]: unknown;
+}
+
+export interface StudioFormat {
+  name: string;
+  extensions: string[];
+  mediaType: string | null;
+  documentKinds: string[];
+  exportTarget: boolean;
+  remote: boolean;
+  studio: StudioFormatHints | null;
+  capabilities: Record<string, { identifier: string; timing: string[] }>;
+}
+
+let _formats: StudioFormat[] = [];
+let _loaded: Promise<StudioFormat[]> | null = null;
+
+/** Load (and cache) the project's format registry from the platform. */
+export function loadFormats(): Promise<StudioFormat[]> {
+  if (!_loaded) {
+    _loaded = (async () => {
+      try {
+        const platform = getPlatform() as {
+          listFormats?: () => Promise<StudioFormat[]>;
+        };
+        _formats = (await platform.listFormats?.()) ?? [];
+      } catch {
+        _formats = [];
+      }
+      return _formats;
+    })();
+  }
+  return _loaded;
+}
+
+/** Invalidate the cached registry (call on project switch). */
+export function refreshFormats() {
+  _loaded = null;
+  _formats = [];
+}
+
+/** Seed the registry directly (tests and hosts that preload format metadata). */
+export function setFormats(formats: StudioFormat[]) {
+  _formats = formats;
+  _loaded = Promise.resolve(formats);
+}
+
+/** The last-loaded registry (synchronous access for render paths). */
+export function getFormats(): StudioFormat[] {
+  return _formats;
+}
+
+/** Look up the format claiming a file extension (".md" or "md"), optionally by capability. */
+export function formatByExtension(ext: string, capability?: string): StudioFormat | undefined {
+  const norm = ext.startsWith(".") ? ext.toLowerCase() : `.${ext.toLowerCase()}`;
+  return _formats.find(
+    (f) => f.extensions.includes(norm) && (!capability || f.capabilities[capability]),
+  );
+}
+
+/** Look up a format by its import name. */
+export function formatByName(name: string | null | undefined): StudioFormat | undefined {
+  if (!name) return undefined;
+  return _formats.find((f) => f.name === name);
+}
+
+/** The format claiming a file path's extension, if any. */
+export function formatForPath(path: string | null | undefined): StudioFormat | undefined {
+  if (!path) return undefined;
+  const dot = path.lastIndexOf(".");
+  if (dot === -1) return undefined;
+  return formatByExtension(path.slice(dot));
+}
+
+/** Registered extensions, optionally filtered by document kind. Never includes ".json". */
+export function documentExtensions(kind?: string): string[] {
+  const exts = new Set<string>();
+  for (const f of _formats) {
+    if (kind && !f.documentKinds.includes(kind)) continue;
+    for (const e of f.extensions) exts.add(e);
+  }
+  exts.delete(".json");
+  return [...exts];
+}
+
+/** The default format for new content documents (first content-kind serializer). */
+export function defaultContentFormat(): StudioFormat | undefined {
+  return _formats.find((f) => f.capabilities.serialize && f.documentKinds.includes("content"));
+}
+
+async function formatAction(payload: Record<string, unknown>): Promise<unknown> {
+  const platform = getPlatform() as {
+    formatAction?: (payload: Record<string, unknown>) => Promise<unknown>;
+  };
+  if (!platform.formatAction) {
+    throw new Error("Platform does not support format actions");
+  }
+  return platform.formatAction(payload);
+}
+
+/** Parse source text into a Jx document via the named format's parse capability. */
+export async function formatParse(
+  name: string,
+  source: string,
+  options?: Record<string, unknown>,
+): Promise<JxMutableNode> {
+  return (await formatAction({
+    format: name,
+    action: "parse",
+    source,
+    options,
+  })) as JxMutableNode;
+}
+
+/** Serialize a Jx document to source text via the named format's serialize capability. */
+export async function formatSerialize(
+  name: string,
+  doc: Record<string, unknown>,
+  options?: Record<string, unknown>,
+): Promise<string> {
+  return (await formatAction({
+    format: name,
+    action: "serialize",
+    doc,
+    options,
+  })) as string;
+}
+
+/**
+ * Split a parsed format document into { document, frontmatter, mode } per the format's
+ * `$studio.documentMode` hints. Component documents (e.g. a frontmatter `tagName` with a hyphen)
+ * keep their full shape; content documents separate frontmatter metadata from the body children.
+ */
+export function splitFormatDocument(format: StudioFormat | undefined, doc: JxMutableNode) {
+  const hints = format?.studio?.documentMode;
+  const componentWhen = hints?.componentWhen;
+  if (componentWhen?.frontmatterKey) {
+    const value = doc[componentWhen.frontmatterKey];
+    const pattern = componentWhen.matches ? new RegExp(componentWhen.matches) : /./;
+    if (typeof value === "string" && pattern.test(value)) {
+      return {
+        document: doc,
+        frontmatter: {} as Record<string, unknown>,
+        mode: "component",
+      };
+    }
+  }
+  if (hints?.default === "component") {
+    return {
+      document: doc,
+      frontmatter: {} as Record<string, unknown>,
+      mode: "component",
+    };
+  }
+
+  // Content document — children form the root-level body; other keys are frontmatter
+  const children = (doc.children as unknown[]) ?? [];
+  if (children.length === 0) children.push({ tagName: "p", children: [] });
+
+  const documentKeys = new Set(["state", "imports"]);
+  const contentDoc: Record<string, unknown> = { children };
+  const frontmatter: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(doc)) {
+    if (key === "children") continue;
+    if (documentKeys.has(key)) {
+      contentDoc[key] = value;
+    } else {
+      frontmatter[key] = value;
+    }
+  }
+
+  return {
+    document: contentDoc as JxMutableNode,
+    frontmatter,
+    mode: "content",
+  };
+}

package/src/new-project/new-project-modal.ts

@@ -20,7 +20,13 @@ let _handle: ReturnType<typeof openModal> | null = null;
  *   directory: string;
  * }}
  */
-let _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+let _form = {
+  name: "",
+  description: "",
+  url: "",
+  adapter: "static",
+  directory: "",
+};
 
 let _error: string = "";
 
@@ -35,9 +41,18 @@ let _resolve: ((result: { root: string; config: ProjectConfig } | null) => void)
  *
  * @returns {Promise<{ root: string; config: object } | null>}
  */
-export function openNewProjectModal(): Promise<{ root: string; config: ProjectConfig } | null> {
+export function openNewProjectModal(): Promise<{
+  root: string;
+  config: ProjectConfig;
+} | null> {
   if (_handle) return Promise.resolve(null);
-  _form = { name: "", description: "", url: "", adapter: "static", directory: "" };
+  _form = {
+    name: "",
+    description: "",
+    url: "",
+    adapter: "static",
+    directory: "",
+  };
   _error = "";
   _creating = false;
 

package/src/panels/ai-panel.ts

@@ -48,7 +48,9 @@ export function mountAiPanel() {
   checkAuth();
 }
 
-const _g = globalThis as unknown as { __jxRightPanelRender?: { render: () => void } };
+const _g = globalThis as unknown as {
+  __jxRightPanelRender?: { render: () => void };
+};
 
 function rerenderPanel() {
   const { render } = _g.__jxRightPanelRender || {};

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

@@ -31,8 +31,10 @@ import type { JxPath } from "../state";
  *   navigateToComponent: (path: string) => void;
  * } | null}
  */
-let _ctx: { getCanvasMode: () => string; navigateToComponent: (path: string) => void } | null =
-  null;
+let _ctx: {
+  getCanvasMode: () => string;
+  navigateToComponent: (path: string) => void;
+} | null = null;
 
 /**
  * Initialize the block action bar module.

package/src/panels/canvas-dnd.ts

@@ -47,7 +47,12 @@ export function registerPanelDnD(panel: CanvasPanel) {
   // driven from the monitor using only the innermost target.
   /** Innermost drop target if it belongs to this panel's canvas, else null */
   const innermostCanvasTarget = (location: {
-    current: { dropTargets: { data: Record<string | symbol, unknown>; element: Element }[] };
+    current: {
+      dropTargets: {
+        data: Record<string | symbol, unknown>;
+        element: Element;
+      }[];
+    };
   }) => {
     const target = location.current.dropTargets[0];
     if (!target) return null;
@@ -122,7 +127,7 @@ export function registerPanelDnD(panel: CanvasPanel) {
     const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
 
     const cleanup = dropTargetForElements({
-      element: /** @type {HTMLElement} */ (el),
+      element: /** @type {HTMLElement} */ el,
       canDrop({ source }) {
         const srcPath = source.data.path as JxPath | undefined;
         if (srcPath && isAncestor(srcPath, elPath)) return false;
@@ -144,13 +149,21 @@ export function registerPanelDnD(panel: CanvasPanel) {
  */
 function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean): DropResult {
   if (!view.lastDragInput)
-    return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "make-child" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
   const y = view.lastDragInput.clientY;
 
   if (elPath.length === 0) {
     const children = Array.from(el.children) as HTMLElement[];
     if (children.length === 0)
-      return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+      return {
+        instruction: { type: "make-child" },
+        referenceEl: el,
+        targetPath: elPath,
+      };
     return nearestChildEdge(children, y, elPath);
   }
 
@@ -164,10 +177,22 @@ function getCanvasDropResult(el: HTMLElement, elPath: JxPath, isLeaf: boolean):
   }
 
   if (relY < 0.25)
-    return { instruction: { type: "reorder-above" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "reorder-above" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
   if (relY > 0.75)
-    return { instruction: { type: "reorder-below" }, referenceEl: el, targetPath: elPath };
-  return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return {
+      instruction: { type: "reorder-below" },
+      referenceEl: el,
+      targetPath: elPath,
+    };
+  return {
+    instruction: { type: "make-child" },
+    referenceEl: el,
+    targetPath: elPath,
+  };
 }
 
 /**
@@ -202,7 +227,11 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   }
 
   const childPath = [...parentPath, "children", closestIdx];
-  return { instruction, referenceEl: children[closestIdx], targetPath: childPath };
+  return {
+    instruction,
+    referenceEl: children[closestIdx],
+    targetPath: childPath,
+  };
 }
 
 /**

package/src/panels/data-explorer.ts

@@ -77,7 +77,10 @@ export function renderDataExplorerTemplate(
           return html`
             <div class="data-row">
               <div
-                class=${classMap({ "data-row-header": true, expanded: isExpanded })}
+                class=${classMap({
+                  "data-row-header": true,
+                  expanded: isExpanded,
+                })}
                 @click=${() => {
                   if (expandedDataKeys.has(name)) expandedDataKeys.delete(name);
                   else expandedDataKeys.add(name);
@@ -86,7 +89,11 @@ export function renderDataExplorerTemplate(
               >
                 <span class="signal-badge ${defCategory(def)}">${defBadgeLabel(def)}</span>
                 <span class="data-name">${name}</span>
-                <span class=${classMap({ "data-type": true, "data-pending": unwrapped === null })}
+                <span
+                  class=${classMap({
+                    "data-type": true,
+                    "data-pending": unwrapped === null,
+                  })}
                   >${dataTypeLabel(value)}</span
                 >
               </div>

package/src/panels/editors.ts

@@ -104,7 +104,7 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
 
   const body = getFunctionBody(editing);
   const args = getFunctionArgs(
-    /** @type {EditingTarget} */ (editing as EditingTarget),
+    /** @type {EditingTarget} */ editing as EditingTarget,
     activeTab.value?.doc.document,
   );
 

package/src/panels/git-panel.ts

@@ -8,6 +8,7 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { repeat } from "lit-html/directives/repeat.js";
 import { getPlatform } from "../platform";
+import { formatForPath } from "../format/format-host";
 import { updateUi, renderOnly, projectState } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
@@ -191,7 +192,9 @@ export function renderGitPanel(
 
   if (!status && !loading) {
     refreshGitStatus();
-    return html`<div class="git-panel"><div class="git-loading">Loading...</div></div>`;
+    return html`<div class="git-panel">
+      <div class="git-loading">Loading...</div>
+    </div>`;
   }
 
   if (status && !status.isRepo) {
@@ -213,7 +216,10 @@ export function renderGitPanel(
         </sp-action-button>
         <sp-action-button
           size="m"
-          @click=${() => publishToGithub({ projectName: projectState?.name || "my-project" })}
+          @click=${() =>
+            publishToGithub({
+              projectName: projectState?.name || "my-project",
+            })}
           ?disabled=${loading}
         >
           <sp-icon-share slot="icon"></sp-icon-share>
@@ -266,7 +272,10 @@ export function renderGitPanel(
     ? "Up to date"
     : `${status?.ahead ? `${status.ahead} ahead` : ""}${status?.ahead && status?.behind ? ", " : ""}${status?.behind ? `${status.behind} behind` : ""}`;
   const lastUpdatedStr = _lastUpdated
-    ? _lastUpdated.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    ? _lastUpdated.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      })
     : "";
 
   const hasRemotes = (status?.remotes?.length ?? 0) > 0;
@@ -332,7 +341,10 @@ export function renderGitPanel(
           </div>
           <sp-action-button
             size="s"
-            @click=${() => publishToGithub({ projectName: projectState?.name || "my-project" })}
+            @click=${() =>
+              publishToGithub({
+                projectName: projectState?.name || "my-project",
+              })}
             ?disabled=${loading}
           >
             <sp-icon-share slot="icon"></sp-icon-share>
@@ -481,7 +493,7 @@ export function renderGitPanel(
 
     const onFileClick = async () => {
       if (file.status !== "M" && file.status !== "A") return;
-      if (!file.path.endsWith(".md") && !file.path.endsWith(".json")) return;
+      if (!file.path.endsWith(".json") && !formatForPath(file.path)) return;
 
       try {
         const plat = getPlatform();
@@ -494,12 +506,10 @@ export function renderGitPanel(
           plat.readFile(file.path),
         ]);
 
-        const isMarkdown = file.path.endsWith(".md");
         const diffState = {
           filePath: file.path,
           originalContent,
           currentContent,
-          isMarkdown,
           fileStatus: file.status,
         };
 
@@ -579,7 +589,7 @@ export function renderGitPanel(
     for (const f of files) {
       const parts = f.path.split("/");
       let component;
-      if (f.path.endsWith(".json") || f.path.endsWith(".class.json") || f.path.endsWith(".md")) {
+      if (f.path.endsWith(".json") || f.path.endsWith(".class.json") || formatForPath(f.path)) {
         component = parts.length > 1 ? `/${parts[parts.length - 2]}` : `/${parts[0]}`;
       } else {
         component = "Other";

package/src/panels/head-panel.ts

@@ -74,7 +74,12 @@ const PAGE_FIELDS: MetaField[] = [
 
 const OG_FIELDS: MetaField[] = [
   { label: "Title", attr: "property", key: "og:title" },
-  { label: "Description", attr: "property", key: "og:description", multiline: true },
+  {
+    label: "Description",
+    attr: "property",
+    key: "og:description",
+    multiline: true,
+  },
   { label: "Image", attr: "property", key: "og:image", media: true },
   { label: "Type", attr: "property", key: "og:type" },
 ];
@@ -243,7 +248,9 @@ function renderMetaFieldRow(
   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}…` })
+    ? spTextArea(`head:${field.key}`, val, commit, {
+        placeholder: `${field.label}…`,
+      })
     : spTextField(`head:${field.key}`, val, commit, { placeholder });
 
   return renderFieldRow({
@@ -522,7 +529,7 @@ function renderFrontmatterSection() {
   const fields = [];
   if (schemaProps) {
     for (const [field, fieldSchema] of Object.entries(
-      /** @type {Record<string, FmSchemaEntry>} */ (schemaProps),
+      /** @type {Record<string, FmSchemaEntry>} */ schemaProps,
     )) {
       if (RESERVED_FM_KEYS.has(field)) continue;
       fields.push({ field, entry: fieldSchema, value: fm[field] as JsonValue });
@@ -532,7 +539,7 @@ function renderFrontmatterSection() {
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        value: /** @type {JsonValue} */ (value),
+        value: /** @type {JsonValue} */ value,
       });
     }
   } else {
@@ -541,7 +548,7 @@ function renderFrontmatterSection() {
       fields.push({
         field,
         entry: { type: typeof value === "boolean" ? "boolean" : "string" },
-        value: /** @type {JsonValue} */ (value),
+        value: /** @type {JsonValue} */ value,
       });
     }
   }

package/src/panels/left-panel.ts

@@ -170,7 +170,7 @@ function _render() {
    *   content?: { frontmatter?: Record<string, unknown> };
    *   documentPath?: string;
    * }}
-   */ ({
+   */ {
     ui: aTab.session.ui,
     document: aTab.doc.document,
     mode: aTab.doc.mode,
@@ -178,7 +178,7 @@ function _render() {
     canvas: aTab.session.canvas,
     content: aTab.doc.content,
     documentPath: aTab.documentPath,
-  });
+  };
 
   /** @type {TemplateResult | typeof nothing} */
   let content;
@@ -226,12 +226,15 @@ function _render() {
             const tab = activeTab.value!;
             const fm = (tab.doc.content?.frontmatter ?? {}) as Record<string, unknown>;
             const fmHead = fm.$head as unknown[] | undefined;
-            const tmp = { title: fm.title, $head: fmHead ? [...fmHead] : undefined };
+            const tmp = {
+              title: fm.title,
+              $head: fmHead ? [...fmHead] : undefined,
+            };
             fn(tmp);
             if (tmp.title !== fm.title)
               mutateUpdateFrontmatter(tab, "title", tmp.title as JsonValue);
             const newHead = tmp.$head && tmp.$head.length > 0 ? tmp.$head : undefined;
-            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ (newHead));
+            mutateUpdateFrontmatter(tab, "$head", /** @type {JsonValue} */ newHead);
             render();
           }
         : (fn: (doc: object) => void) => {

package/src/panels/panel-events.ts

@@ -211,7 +211,9 @@ export function registerPanelEvents(panel: CanvasPanel) {
           let path = elToPath.get(el);
           if (path) {
             path = bubbleInlinePath(tab?.doc.document, path);
-            showContextMenu(e, path, { onEditComponent: ctx.navigateToComponent });
+            showContextMenu(e, path, {
+              onEditComponent: ctx.navigateToComponent,
+            });
             return;
           }
         }

package/src/panels/properties-panel.ts

@@ -490,12 +490,15 @@ function renderComponentPropsFieldsTemplate(
             }}
           ></sp-number-field>`;
         } else if (parsed.kind === "combobox") {
-          const options = /** @type {{ options?: string[] }} */ (parsed).options as string[];
+          const options = /** @type {{ options?: string[] }} */ parsed.options as string[];
           widgetTpl = html`<jx-value-selector
             .value=${String(staticVal)}
             size="s"
             placeholder="—"
-            .options=${options.map((o) => ({ value: o, label: camelToLabel(o) }))}
+            .options=${options.map((o) => ({
+              value: o,
+              label: camelToLabel(o),
+            }))}
             @change=${(e: Event & { detail?: { value?: string } }) =>
               onChange(e.detail?.value ?? (e.target as HTMLInputElement).value)}
           ></jx-value-selector>`;
@@ -849,7 +852,10 @@ function renderPageSection(node: JxMutableNode) {
 // ─── Layout selection panel ─────────────────────────────────────────────────
 
 function renderLayoutSelectionPanel(ctx: { navigateToComponent: (path: string) => void }) {
-  const { el, layoutPath } = view.layoutSelection as { el: HTMLElement; layoutPath: string };
+  const { el, layoutPath } = view.layoutSelection as {
+    el: HTMLElement;
+    layoutPath: string;
+  };
   const tagName = el?.tagName?.toLowerCase() || "element";
   const className = el?.className || "";
   const displayPath = layoutPath || "layout";

package/src/panels/quick-search.ts

@@ -4,6 +4,7 @@ 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";
+import { loadFormats, documentExtensions, formatByExtension } from "../format/format-host";
 import { openFileInTab } from "../files/files";
 import { getRecentFiles, trackRecentFile } from "../recent-projects";
 import { getLayerSlot } from "../ui/layers";
@@ -46,7 +47,8 @@ async function doSearch(query: string) {
   }
   try {
     const platform = getPlatform();
-    _results = await platform.searchFiles(query.trim().toLowerCase());
+    await loadFormats();
+    _results = await platform.searchFiles(query.trim().toLowerCase(), documentExtensions());
     _selectedIndex = 0;
     renderOverlay();
   } catch {
@@ -95,14 +97,9 @@ function selectItem(item: { path: string; name?: string }) {
 
 function fileIcon(name: string) {
   const ext = name.split(".").pop()?.toLowerCase();
-  switch (ext) {
-    case "json":
-      return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
-    case "md":
-      return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
-    default:
-      return html`<sp-icon-document size="s"></sp-icon-document>`;
-  }
+  if (ext === "json") return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
+  if (ext && formatByExtension(ext)) return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+  return html`<sp-icon-document size="s"></sp-icon-document>`;
 }
 
 function dirPart(path: string) {
@@ -149,7 +146,10 @@ function renderOverlay() {
           ${items.map(
             (item, i) => html`
               <div
-                class=${classMap({ "quick-search-item": true, selected: i === _selectedIndex })}
+                class=${classMap({
+                  "quick-search-item": true,
+                  selected: i === _selectedIndex,
+                })}
                 @click=${() => selectItem(item)}
                 @mouseenter=${() => {
                   _selectedIndex = i;

package/src/panels/right-panel.ts

@@ -189,12 +189,16 @@ function _doRender() {
     // Only render the active panel's content
     if (tab === "properties") {
       litRender(
-        renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent }),
+        renderPropertiesPanelTemplate({
+          navigateToComponent: ctx.navigateToComponent,
+        }),
         _propsContainer!,
       );
     } else if (tab === "events") {
       litRender(
-        eventsSidebarTemplate({ isCustomElementDoc: () => isCustomElementDoc(S) }),
+        eventsSidebarTemplate({
+          isCustomElementDoc: () => isCustomElementDoc(S),
+        }),
         _eventsContainer!,
       );
     } else if (tab === "style") {