@jxsuite/studio 0.26.2 → 0.28.0

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") {

package/src/panels/shared.ts

@@ -79,7 +79,12 @@ export function defaultDef(tag: string) {
     def.children = [
       {
         tagName: "thead",
-        children: [{ tagName: "tr", children: [{ tagName: "th", textContent: "Header" }] }],
+        children: [
+          {
+            tagName: "tr",
+            children: [{ tagName: "th", textContent: "Header" }],
+          },
+        ],
       },
       {
         tagName: "tbody",

package/src/panels/signals-panel.ts

@@ -420,14 +420,20 @@ export function renderSignalsTemplate(S: SignalsPanelState, ctx: SignalsPanelCtx
                 mutateAddDef(
                   t,
                   n,
-                  /** @type {Record<string, JsonValue>} */ ({ $prototype: protoName }),
+                  /** @type {Record<string, JsonValue>} */ {
+                    $prototype: protoName,
+                  },
                 ),
               );
               expandedSignal = n;
               if (src) {
                 fetchPluginSchema(
                   { $prototype: protoName, $src: src },
-                  { ...(S.documentPath != null && { documentPath: S.documentPath }) },
+                  {
+                    ...(S.documentPath != null && {
+                      documentPath: S.documentPath,
+                    }),
+                  },
                 ).then(() => ctx.renderLeftPanel());
               } else {
                 ctx.renderLeftPanel();
@@ -683,7 +689,10 @@ function renderSignalEditorTemplate(
         exprNode,
         (newNode: any) =>
           transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $expression: newNode })),
-        { stateDefs: Object.keys(S.document.state || {}), allowEventRef: false },
+        {
+          stateDefs: Object.keys(S.document.state || {}),
+          allowEventRef: false,
+        },
       )}
     `;
   }
@@ -830,7 +839,9 @@ function renderFunctionFields(
             quiet
             title="Open in code editor"
             @click=${() => {
-              ctx.updateSession({ ui: { editingFunction: { type: "def", defName: name } } });
+              ctx.updateSession({
+                ui: { editingFunction: { type: "def", defName: name } },
+              });
               ctx.renderCanvas();
             }}
           >
@@ -940,7 +951,10 @@ function renderParameterEditorTemplate(
                 style="flex:1"
                 @change=${(e: Event) => {
                   const next = [...params];
-                  next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
+                  next[i] = {
+                    ...next[i],
+                    name: (e.target as HTMLInputElement).value,
+                  };
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
                   );
@@ -995,7 +1009,9 @@ function renderParameterEditorTemplate(
                 @click=${() => {
                   const next = params.filter((_: unknown, j: number) => j !== i);
                   transactDoc(activeTab.value, (t) =>
-                    mutateUpdateDef(t, name, { parameters: next.length ? next : undefined }),
+                    mutateUpdateDef(t, name, {
+                      parameters: next.length ? next : undefined,
+                    }),
                   );
                 }}
                 >×</span
@@ -1007,7 +1023,9 @@ function renderParameterEditorTemplate(
           class="kv-add"
           @click=${() =>
             transactDoc(activeTab.value, (t) =>
-              mutateUpdateDef(t, name, { parameters: [...params, { name: "" }] }),
+              mutateUpdateDef(t, name, {
+                parameters: [...params, { name: "" }],
+              }),
             )}
         >
           + Add parameter
@@ -1046,7 +1064,10 @@ function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: Sign
             style="flex:1"
             @change=${(e: Event) => {
               const next = [...emits];
-              next[i] = { ...next[i], name: (e.target as HTMLInputElement).value };
+              next[i] = {
+                ...next[i],
+                name: (e.target as HTMLInputElement).value,
+              };
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
           />
@@ -1289,7 +1310,9 @@ export function renderSchemaFieldsTemplate(
                   ? parseInt((e.target as HTMLInputElement).value, 10)
                   : parseFloat((e.target as HTMLInputElement).value);
               transactDoc(activeTab.value, (t) =>
-                mutateUpdateDef(t, name, { [prop]: isNaN(parsed) ? undefined : parsed }),
+                mutateUpdateDef(t, name, {
+                  [prop]: isNaN(parsed) ? undefined : parsed,
+                }),
               );
             }, 400);
           }}
@@ -1375,7 +1398,9 @@ export function renderSchemaFieldsTemplate(
                     @click=${() => {
                       const updated = rows.filter((_: unknown, i: number) => i !== idx);
                       transactDoc(activeTab.value, (t) =>
-                        mutateUpdateDef(t, name, { [prop]: updated.length ? updated : undefined }),
+                        mutateUpdateDef(t, name, {
+                          [prop]: updated.length ? updated : undefined,
+                        }),
                       );
                       ctx?.renderLeftPanel();
                     }}

package/src/panels/style-inputs.ts

@@ -163,7 +163,11 @@ export function buildFontOptions(
  * @param {string} prop @param {string} value @param {(value: string) => void} onChange
  */
 export function renderComboboxInput(
-  entry: { enum?: string[]; examples?: string[]; presets?: { title: string; value: string }[] },
+  entry: {
+    enum?: string[];
+    examples?: string[];
+    presets?: { title: string; value: string }[];
+  },
   prop: string,
   value: string,
   onChange: (value: string) => void,

package/src/panels/style-panel.ts

@@ -246,7 +246,9 @@ function renderShorthandRow(
                       mutateFn(t, shortProp, compress(vals as string[]));
                     });
                   },
-                  { placeholder: !lVal && inherited[name] ? String(inherited[name]) : "" },
+                  {
+                    placeholder: !lVal && inherited[name] ? String(inherited[name]) : "",
+                  },
                 )}
               </div>
             `;
@@ -773,7 +775,9 @@ function styleSidebarTemplate(
                       style="flex:1;text-align:left;padding:6px 10px;background:var(--spectrum-gray-200, #1a1a1a);border:none;border-radius:4px;color:var(--spectrum-gray-900, #fafafa);font-size:12px;cursor:pointer"
                       @click=${() => {
                         const newSelector = activeSelector ? `${activeSelector} ${rule}` : rule;
-                        selectStylebookTag(newSelector, undefined, { panCanvas: true });
+                        selectStylebookTag(newSelector, undefined, {
+                          panCanvas: true,
+                        });
                       }}
                     >
                       ${rule}

package/src/panels/stylebook-layers-panel.ts

@@ -57,7 +57,10 @@ export function renderStylebookLayersTemplate(ctx: {
         : [];
       return html`
         <div
-          class=${classMap({ "layer-row": true, selected: tag === selectedLeaf })}
+          class=${classMap({
+            "layer-row": true,
+            selected: tag === selectedLeaf,
+          })}
           style="padding-left:${8 + depth * 16}px"
           @click=${(e: MouseEvent) => {
             e.stopPropagation();
@@ -91,8 +94,14 @@ export function renderStylebookLayersTemplate(ctx: {
         comp: import("../files/components.js").ComponentEntry,
       ) => html`
         <div
-          class=${classMap({ "layer-row": true, selected: comp.tagName === selectedTag })}
-          @click=${() => ctx.selectStylebookTag(comp.tagName, undefined, { panCanvas: true })}
+          class=${classMap({
+            "layer-row": true,
+            selected: comp.tagName === selectedTag,
+          })}
+          @click=${() =>
+            ctx.selectStylebookTag(comp.tagName, undefined, {
+              panCanvas: true,
+            })}
         >
           <span class="layer-tag component-tag" style="background:var(--accent)">⬡</span>
           <span class="layer-label">${comp.tagName}</span>

package/src/panels/stylebook-panel.ts

@@ -65,7 +65,13 @@ interface StylebookCtx {
     el: Element,
     type: string,
     panel: any,
-  ) => { cls: string; top: string; left: string; width: string; height: string };
+  ) => {
+    cls: string;
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+  };
   effectiveZoom: () => number;
 }
 
@@ -235,11 +241,11 @@ export function renderStylebookMode(ctx: StylebookCtx) {
         ${panelEntries.map((e) => e.tpl)}
       </div>
     `,
-    /** @type {HTMLElement} */ (canvasWrap),
+    /** @type {HTMLElement} */ canvasWrap,
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(/** @type {import("./canvas-dnd.js").CanvasPanel} */ (panel));
+    canvasPanels.push(/** @type {import("./canvas-dnd.js").CanvasPanel} */ panel);
     renderIntoPanel(panel, activeSet);
   }
   if (hasMedia) {
@@ -321,7 +327,7 @@ export function refreshStylebookStyles() {
           if (mediaName === "--") continue;
           if (activeBreakpoints.has(mediaName)) {
             const mediaTagStyle = _resolveNestedStyle(
-              /** @type {Record<string, unknown>} */ (val),
+              /** @type {Record<string, unknown>} */ val,
               tag,
             );
             if (mediaTagStyle && typeof mediaTagStyle === "object") {
@@ -389,7 +395,11 @@ export function renderStylebookOverlays() {
 
     if (hoverTag && hoverTag !== selectedTag) {
       const el = findStylebookEl(panel.canvas, hoverTag);
-      if (el) boxes.push({ ..._ctx.overlayBoxDescriptor(el, "hover", panel), label: undefined });
+      if (el)
+        boxes.push({
+          ..._ctx.overlayBoxDescriptor(el, "hover", panel),
+          label: undefined,
+        });
     }
 
     if (selectedTag) {
@@ -408,7 +418,12 @@ export function renderStylebookOverlays() {
           (b) => html`
             <div
               class=${b.cls}
-              style=${styleMap({ top: b.top, left: b.left, width: b.width, height: b.height })}
+              style=${styleMap({
+                top: b.top,
+                left: b.left,
+                width: b.width,
+                height: b.height,
+              })}
             >
               ${b.label ? html`<div class="overlay-label">${b.label}</div>` : nothing}
             </div>
@@ -441,7 +456,7 @@ export function buildStylebookElement(
   if (entry.attributes) {
     for (const [k, v] of Object.entries(entry.attributes)) {
       try {
-        el.setAttribute(k, /** @type {string} */ (v));
+        el.setAttribute(k, /** @type {string} */ v);
       } catch {}
     }
   }
@@ -519,7 +534,8 @@ export async function renderComponentPreview(comp: ComponentEntry) {
         return _componentFallback(comp.tagName);
       }
     } else {
-      if (comp.path && /\.md$/i.test(comp.path)) {
+      if (comp.path && !comp.path.endsWith(".json")) {
+        // Format-class component sources (e.g. markdown) can't be imported as modules
         return _componentFallback(comp.tagName);
       }
       const root = projectState?.projectRoot;

package/src/panels/toolbar.ts

@@ -27,7 +27,12 @@ interface ToolbarCtx {
   openFile?: (path: string) => void;
   saveFile: () => void;
   parseMediaEntries: (media: Record<string, string> | null | undefined) => {
-    sizeBreakpoints: { name: string; query: string; width: number; type: string }[];
+    sizeBreakpoints: {
+      name: string;
+      query: string;
+      width: number;
+      type: string;
+    }[];
     featureQueries: { name: string; query: string }[];
     baseWidth: number;
   };
@@ -171,7 +176,11 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
   const windowControls = (
     globalThis as unknown as {
       __jxPlatform?: {
-        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+        windowControls?: {
+          minimize: () => void;
+          maximize: () => void;
+          close: () => void;
+        };
       };
     }
   ).__jxPlatform?.windowControls;
@@ -381,7 +390,11 @@ function toolbarTemplate() {
   const windowControls = (
     globalThis as unknown as {
       __jxPlatform?: {
-        windowControls?: { minimize: () => void; maximize: () => void; close: () => void };
+        windowControls?: {
+          minimize: () => void;
+          maximize: () => void;
+          close: () => void;
+        };
       };
     }
   ).__jxPlatform?.windowControls;

package/src/platforms/devserver.ts

@@ -352,9 +352,13 @@ export function createDevServerPlatform() {
       return null;
     },
 
-    /** @param {string} query */
-    async searchFiles(query: string) {
-      const glob = `**/*${query}*.{json,md}`;
+    /**
+     * @param {string} query
+     * @param {string[]} [extensions] — extra extensions beyond .json (from the format registry)
+     */
+    async searchFiles(query: string, extensions: string[] = []) {
+      const exts = ["json", ...extensions.map((e: string) => e.replace(/^\./, ""))];
+      const glob = `**/*${query}*.{${exts.join(",")}}`;
       const res = await fetch(
         `/__studio/files?dir=${encodeURIComponent(serverPath("."))}&glob=${encodeURIComponent(glob)}`,
       );
@@ -364,6 +368,31 @@ export function createDevServerPlatform() {
       return entries;
     },
 
+    // ─── Format registry ──────────────────────────────────────────────────
+
+    /** List the project's registered format classes (auto-discovered from imports). */
+    async listFormats() {
+      const res = await fetch(`/__studio/formats?dir=${encodeURIComponent(serverPath("."))}`);
+      if (!res.ok) return [];
+      return (await res.json()).formats ?? [];
+    },
+
+    /**
+     * Invoke a format capability (parse/serialize) server-side.
+     *
+     * @param {Record<string, unknown>} payload — { format, action, source?, doc?, options? }
+     */
+    async formatAction(payload: Record<string, unknown>) {
+      const res = await fetch("/__studio/format", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ...payload, dir: serverPath(".") }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Format action failed");
+      return data.result;
+    },
+
     // ─── Plugin schema ────────────────────────────────────────────────────
 
     /**

package/src/resize-edges.ts

@@ -2,7 +2,12 @@
 const g = globalThis as unknown as {
   __jxPlatform?: {
     windowControls?: {
-      getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+      getFrame: () => Promise<{
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+      }>;
       setFrame: (x: number, y: number, w: number, h: number) => void;
     };
   };
@@ -54,7 +59,12 @@ async function startResize(
   e: MouseEvent,
   edge: string,
   wc: {
-    getFrame: () => Promise<{ x: number; y: number; width: number; height: number }>;
+    getFrame: () => Promise<{
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    }>;
     setFrame: (x: number, y: number, w: number, h: number) => void;
   },
 ) {

package/src/services/cem-export.ts

@@ -54,7 +54,9 @@ export function exportCemManifest(
         ...(d.description ? { description: d.description } : {}),
         ...(d.parameters ? { parameters: d.parameters.map(normParam) } : {}),
         ...(d.deprecated
-          ? { deprecated: typeof d.deprecated === "string" ? d.deprecated : true }
+          ? {
+              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
+            }
           : {}),
       });
       // Collect emits
@@ -80,7 +82,9 @@ export function exportCemManifest(
         ...(d.attribute ? { attribute: d.attribute } : {}),
         ...(d.reflects ? { reflects: true } : {}),
         ...(d.deprecated
-          ? { deprecated: typeof d.deprecated === "string" ? d.deprecated : true }
+          ? {
+              deprecated: typeof d.deprecated === "string" ? d.deprecated : true,
+            }
           : {}),
       });
       if (d.attribute) {
@@ -132,7 +136,9 @@ export function exportCemManifest(
     ],
   };
 
-  const blob = new Blob([JSON.stringify(manifest, null, 2)], { type: "application/json" });
+  const blob = new Blob([JSON.stringify(manifest, null, 2)], {
+    type: "application/json",
+  });
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = url;

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

@@ -466,7 +466,7 @@ export function renderContentTypesEditor(container: HTMLElement) {
       ([name, def]) =>
         fieldCardTpl(
           name,
-          /** @type {import("./schema-field-ui.js").SchemaProperty} */ (def),
+          /** @type {import("./schema-field-ui.js").SchemaProperty} */ def,
           required.includes(name),
           handlers,
           contentTypeNames,
@@ -497,7 +497,12 @@ export function renderContentTypesEditor(container: HTMLElement) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", format: "", required: false };
+                newFieldState = {
+                  name: "",
+                  type: "string",
+                  format: "",
+                  required: false,
+                };
                 rerender();
               },
             })

package/src/settings/defs-editor.ts

@@ -460,7 +460,12 @@ export function renderDefsEditor(container: HTMLElement) {
               onConfirm: () => handleAddField(rerender),
               onCancel: () => {
                 showAddField = false;
-                newFieldState = { name: "", type: "string", format: "", required: false };
+                newFieldState = {
+                  name: "",
+                  type: "string",
+                  format: "",
+                  required: false,
+                };
                 rerender();
               },
             })

package/src/settings/general-settings.ts

@@ -30,7 +30,9 @@ export function renderGeneralSettings(container: HTMLElement) {
   };
 
   const onAdapterChange = (e: Event) => {
-    updateSiteConfig({ build: { ...config.build, adapter: (e.target as HTMLInputElement).value } });
+    updateSiteConfig({
+      build: { ...config.build, adapter: (e.target as HTMLInputElement).value },
+    });
   };
 
   const onEditGlobalStyles = () => {

package/src/settings/schema-field-ui.ts

@@ -157,7 +157,7 @@ export function fieldCardTpl(
                 nestedFieldCardTpl(
                   fieldName,
                   name,
-                  /** @type {SchemaProperty} */ (sub),
+                  /** @type {SchemaProperty} */ sub,
                   nestedRequired.includes(name),
                   handlers,
                 ),
@@ -274,7 +274,11 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
             const typePicker = row?.querySelector("sp-picker") as HTMLInputElement | null;
             const type = typePicker?.value || "string";
             if (name && handlers.onAddNestedField) {
-              handlers.onAddNestedField(parentName, { name, type, required: false });
+              handlers.onAddNestedField(parentName, {
+                name,
+                type,
+                required: false,
+              });
               target.value = "";
             }
           }
@@ -295,7 +299,11 @@ function nestedAddFieldTpl(parentName: string, handlers: FieldHandlers) {
           const name = nameInput?.value?.trim();
           const type = typePicker?.value || "string";
           if (name && handlers.onAddNestedField) {
-            handlers.onAddNestedField(parentName, { name, type, required: false });
+            handlers.onAddNestedField(parentName, {
+              name,
+              type,
+              required: false,
+            });
             if (nameInput) nameInput.value = "";
           }
         }}

package/src/settings/settings-modal.ts

@@ -68,7 +68,10 @@ function renderModal() {
           ${sections.map(
             (s) => html`
               <button
-                class=${classMap({ "settings-nav-item": true, active: _activeSection === s.key })}
+                class=${classMap({
+                  "settings-nav-item": true,
+                  active: _activeSection === s.key,
+                })}
                 @click=${() => onNavClick(s.key)}
               >
                 ${s.label}

package/src/state.ts

@@ -33,7 +33,11 @@ export interface StudioState {
   mode: string;
   content: { frontmatter: Record<string, unknown> };
   ui: Record<string, unknown>;
-  canvas: { status: string; scope: Record<string, unknown> | null; error: string | null };
+  canvas: {
+    status: string;
+    scope: Record<string, unknown> | null;
+    error: string | null;
+  };
 }
 
 interface StudioStackFrame {