@jxsuite/studio 0.28.5 → 0.29.0

package/src/panels/signals-panel.ts

@@ -214,7 +214,7 @@ export function defBadgeLabel(def: SignalDef | unknown) {
  * @param {string} name
  * @param {SignalDef | null | undefined} def
  */
-export function defHint(name: string, def: SignalDef | null | undefined) {
+export function defHint(_name: string, def: SignalDef | null | undefined) {
   if (!def) {
     return "";
   }
@@ -413,15 +413,15 @@ export function renderSignalsTemplate(S: SignalsPanelState, ctx: SignalsPanelCtx
     state: [],
   } as Record<string, [string, SignalDef][]>;
   for (const [name, def] of entries) {
-    groups[defCategory(def)].push([name, asSignalDef(def)]);
+    groups[defCategory(def)]!.push([name, asSignalDef(def)]);
   }
 
   const categories = [
-    { items: groups.state, key: "state", label: "State" },
-    { items: groups.computed, key: "computed", label: "Computed" },
-    { items: groups.data, key: "data", label: "Data" },
-    { items: groups.expression, key: "expression", label: "Expressions" },
-    { items: groups.function, key: "function", label: "Functions" },
+    { items: groups.state!, key: "state", label: "State" },
+    { items: groups.computed!, key: "computed", label: "Computed" },
+    { items: groups.data!, key: "data", label: "Data" },
+    { items: groups.expression!, key: "expression", label: "Expressions" },
+    { items: groups.function!, key: "function", label: "Functions" },
   ];
 
   const collapsedCats = (S._collapsedSignalCats ||= new Set());
@@ -515,7 +515,7 @@ export function renderSignalsTemplate(S: SignalsPanelState, ctx: SignalsPanelCtx
               );
               expandedSignal = n;
               if (src) {
-                fetchPluginSchema(
+                void fetchPluginSchema(
                   { $prototype: protoName, $src: src },
                   {
                     ...(S.documentPath != null && {
@@ -887,7 +887,7 @@ function renderDataSourceFields(
     return textareaRow(fieldLabel, defaultStr, (v: string) => {
       try {
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateDef(t, name, { [fieldName]: JSON.parse(v) }),
+          mutateUpdateDef(t, name, { [fieldName]: JSON.parse(v) as unknown }),
         );
       } catch {}
     });
@@ -901,7 +901,7 @@ function renderFunctionFields(
   S: SignalsPanelState,
   name: string,
   def: SignalDef,
-  textareaRow: (
+  _textareaRow: (
     label: string,
     value: string,
     onChange: (value: string) => void,
@@ -962,7 +962,7 @@ function renderFunctionFields(
 
 /** Render CEM parameter editor with basic/advanced toggle. */
 function renderParameterEditorTemplate(
-  S: SignalsPanelState,
+  _S: SignalsPanelState,
   name: string,
   def: SignalDef,
   ctx: SignalsPanelCtx,
@@ -1061,7 +1061,7 @@ function renderParameterEditorTemplate(
                 @change=${(e: Event) => {
                   const next = [...params];
                   const val = (e.target as HTMLInputElement).value;
-                  const { type: _t, ...rest } = next[i];
+                  const { type: _t, ...rest } = next[i]!;
                   next[i] = val ? { ...rest, type: { text: val } } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
@@ -1076,7 +1076,7 @@ function renderParameterEditorTemplate(
                 @change=${(e: Event) => {
                   const next = [...params];
                   const val = (e.target as HTMLInputElement).value;
-                  const { description: _d, ...rest } = next[i];
+                  const { description: _d, ...rest } = next[i]!;
                   next[i] = val ? { ...rest, description: val } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
@@ -1090,7 +1090,7 @@ function renderParameterEditorTemplate(
                 @change=${(e: Event) => {
                   const next = [...params];
                   const { checked } = e.target as HTMLInputElement;
-                  const { optional: _o, ...rest } = next[i];
+                  const { optional: _o, ...rest } = next[i]!;
                   next[i] = checked ? { ...rest, optional: true } : rest;
                   transactDoc(activeTab.value, (t) =>
                     mutateUpdateDef(t, name, { parameters: next }),
@@ -1174,7 +1174,7 @@ function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: Sign
             @change=${(e: Event) => {
               const next = [...emits];
               const val = (e.target as HTMLInputElement).value;
-              const { type: _t, ...rest } = next[i];
+              const { type: _t, ...rest } = next[i]!;
               next[i] = val ? { ...rest, type: { text: val } } : rest;
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
@@ -1187,7 +1187,7 @@ function renderEmitsEditorTemplate(S: SignalsPanelState, name: string, def: Sign
             @change=${(e: Event) => {
               const next = [...emits];
               const val = (e.target as HTMLInputElement).value;
-              const { description: _d, ...rest } = next[i];
+              const { description: _d, ...rest } = next[i]!;
               next[i] = val ? { ...rest, description: val } : rest;
               transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { emits: next }));
             }}
@@ -1248,7 +1248,7 @@ function resolveSchemaEnum(
       const match = ref.match(/#\/\$context\/contentTypes\/\{@(\w+)\}\/schema\/properties/);
       if (match && parentDef) {
         const [, paramName] = match;
-        const typeName = parentDef[paramName] as string | undefined;
+        const typeName = parentDef[paramName!] as string | undefined;
         if (typeName) {
           const ct = projectState?.projectConfig?.contentTypes?.[typeName] as
             | Record<string, unknown>
@@ -1357,7 +1357,7 @@ function renderJsonTextField(
         try {
           transactDoc(activeTab.value, (t) =>
             mutateUpdateDef(t, name, {
-              [prop]: JSON.parse((e.target as HTMLInputElement).value),
+              [prop]: JSON.parse((e.target as HTMLInputElement).value) as unknown,
             }),
           );
         } catch {}
@@ -1490,7 +1490,7 @@ export function renderSchemaFieldsTemplate(
                   try {
                     transactDoc(activeTab.value, (t) =>
                       mutateUpdateDef(t, name, {
-                        [prop]: JSON.parse((e.target as HTMLInputElement).value),
+                        [prop]: JSON.parse((e.target as HTMLInputElement).value) as unknown,
                       }),
                     );
                   } catch {}
@@ -1501,7 +1501,9 @@ export function renderSchemaFieldsTemplate(
         `;
       } else if (ps.type === "array" && ps.items?.type === "object" && ps.items?.properties) {
         // Array of objects with defined schema → multi-row inline form
-        const rows = Array.isArray(currentValue) ? currentValue : [];
+        const rows: Record<string, unknown>[] = Array.isArray(currentValue)
+          ? (currentValue as Record<string, unknown>[])
+          : [];
         const itemProps = ps.items.properties as Record<string, Record<string, unknown>>;
         control = html`
           <div class="array-object-field">
@@ -1626,7 +1628,7 @@ export function renderExternalPrototypeEditorTemplate(
           ${schema.description
             ? html`<div class="signal-hint" style="padding:4px 0 8px">${schema.description}</div>`
             : nothing}
-          ${renderSchemaFieldsTemplate(schema, def, name, S, ctx)}
+          ${renderSchemaFieldsTemplate(schema as JsonSchema, def, name, S, ctx)}
         `;
       }
     } else {
@@ -1636,7 +1638,7 @@ export function renderExternalPrototypeEditorTemplate(
       >
         Loading schema…
       </div>`;
-      fetchPluginSchema(def, {
+      void fetchPluginSchema(def, {
         ...(S.documentPath != null && { documentPath: S.documentPath }),
       }).then((schema) => {
         if (schema) {

package/src/panels/statusbar.ts

@@ -70,19 +70,28 @@ export function renderStatusbar() {
     const node = getNodeAtPath(tab.doc.document, sel);
     parts.push(`Selected: ${esc(nodeLabel(node))}`);
 
+    // Walk the path one structural step at a time. Most steps are `["children", index]` or
+    // `["cases", name]` pairs, but a repeater template is reached by a lone `"map"` segment — so the
+    // Step width varies. Emitting a crumb per node keeps the array pseudo-element ("Repeater") and
+    // Its template both visible instead of collapsing the array into a bare `[index]`.
     const pathSegments = [];
-    for (let i = 0; i < sel.length; i += 2) {
-      const subPath = sel.slice(0, i + 2);
+    for (let i = 0; i < sel.length; ) {
+      const seg = sel[i];
+      const step = seg === "map" ? 1 : 2;
+      const subPath = sel.slice(0, i + step);
       const childNode = getNodeAtPath(tab.doc.document, subPath);
       const fallbackTag = childNode?.tag;
       const label =
-        childNode?.tagName ||
-        (typeof fallbackTag === "string" ? fallbackTag : "") ||
-        `[${sel[i + 1]}]`;
+        childNode?.$prototype === "Array"
+          ? "Repeater"
+          : childNode?.tagName ||
+            (typeof fallbackTag === "string" ? fallbackTag : "") ||
+            (seg === "cases" ? String(sel[i + 1]) : `[${sel[i + 1]}]`);
       const dataPath = JSON.stringify(subPath);
       pathSegments.push(
         `<span class="sb-path-seg" data-path='${esc(dataPath)}'>${esc(label)}</span>`,
       );
+      i += step;
     }
     parts.push(`Path: ${pathSegments.join(' <span class="sb-path-sep">&gt;</span> ')}`);
   } else if (tab?.session.ui.stylebookSelection) {
@@ -106,7 +115,7 @@ function _onStatusbarClick(e: Event) {
     return;
   }
   try {
-    const path = JSON.parse(pathStr);
+    const path = JSON.parse(pathStr) as JxPath;
     updateSession({ selection: path });
     renderOnly("leftPanel", "rightPanel", "canvas");
   } catch {

package/src/panels/style-panel.ts

@@ -505,10 +505,10 @@ function styleSidebarTemplate(
       continue;
     }
     const sec = ((entry as Record<string, unknown>).$section as string) || "other";
-    sectionProps[sec].push({ entry, prop });
+    sectionProps[sec]!.push({ entry, prop });
   }
   for (const sec of cssMeta.$sections) {
-    sectionProps[sec.key].sort(
+    sectionProps[sec.key]!.sort(
       (
         a: { prop: string; entry: CssPropertyEntry },
         b: { prop: string; entry: CssPropertyEntry },
@@ -545,7 +545,7 @@ function styleSidebarTemplate(
   const sectionTemplates = cssMeta.$sections
     .filter((sec) => sec.key !== "other")
     .map((sec) => {
-      const entries = sectionProps[sec.key];
+      const entries = sectionProps[sec.key]!;
 
       const sectionActiveProps = entries.filter(
         ({ prop, entry }: { prop: string; entry: CssPropertyEntry }) => {

package/src/panels/style-utils.ts

@@ -4,7 +4,6 @@ import type { JxMutableNode } from "@jxsuite/schema/types";
 
 import { getNodeAtPath } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { camelToKebab } from "../utils/studio-utils";
 import cssMeta from "../../data/css-meta.json";
 
 let cssInitialMap = new Map<string, string>();
@@ -246,9 +245,10 @@ export function currentFontFamily() {
   }
   const m = typeof raw === "string" && raw.match(/^var\((--[^)]+)\)$/);
   if (m) {
-    return tab?.doc.document?.style?.[m[1]] || "";
+    return tab?.doc.document?.style?.[m[1]!] || "";
   }
   return raw;
 }
 
-export { cssMeta, camelToKebab };
+export { default as cssMeta } from "../../data/css-meta.json";
+export { camelToKebab } from "../utils/studio-utils";

package/src/panels/stylebook-panel.ts

@@ -78,7 +78,7 @@ interface StylebookCtx {
   effectiveZoom: () => number;
 }
 
-export { stylebookMeta };
+export { default as stylebookMeta } from "../../data/stylebook-meta.json";
 
 /**
  * Resolve a nested tag path in a style object. e.g., "table th" → style["table"]["th"]
@@ -102,7 +102,7 @@ function _resolveNestedStyle(style: Record<string, unknown>, tagPath: string) {
 let _ctx: StylebookCtx | null = null;
 
 /** Lookup: tag → entry from stylebookMeta (built once) */
-const _entryByTag = new Map();
+const _entryByTag = new Map<string, StylebookEntry>();
 for (const section of stylebookMeta.$sections) {
   for (const entry of section.elements as StylebookEntry[]) {
     _entryByTag.set(entry.tag, entry);
@@ -289,7 +289,7 @@ export function refreshStylebookStyles() {
       const htmlEl = el as HTMLElement;
       // Determine if it's a compound selector (e.g. "ul li") or simple tag
       const parts = tag.split(" ");
-      const leafTag = parts.at(-1);
+      const leafTag = parts.at(-1)!;
       const entry = _entryByTag.get(leafTag);
 
       // Reset to base style
@@ -379,7 +379,7 @@ export function selectStylebookTag(tag: string, media?: string | null, { panCanv
   renderStylebookOverlays();
 
   if (tag && panCanvas && canvasPanels.length > 0) {
-    const el = findStylebookEl(canvasPanels[0].canvas, tag);
+    const el = findStylebookEl(canvasPanels[0]!.canvas, tag);
     if (el) {
       panToCanvasEl(el);
     }

package/src/panels/tab-bar.ts

@@ -0,0 +1,198 @@
+/// <reference lib="dom" />
+/**
+ * Tab bar — a per-tab contextual action bar rendered between the tab strip and the edit content.
+ * Standardizes Back/breadcrumb navigation, media feature toggles, and mode actions (Code-mode
+ * Export) into a single bar shared identically by every edit mode.
+ *
+ * Follows the same module shape as tab-strip.ts: mount(host, ctx) → effectScope/effect → render().
+ * The bar collapses (renders `nothing`, so `#tab-bar:empty` hides the row) when there is nothing
+ * contextual to show.
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { updateUi } from "../store";
+import { effect, effectScope } from "../reactivity";
+import { activeTab } from "../workspace/workspace";
+import { getEffectiveMedia } from "../site-context";
+import { mediaDisplayName } from "./shared";
+import type { DocumentStackEntry, FunctionEditDef } from "../types";
+import type { EffectScope } from "@vue/reactivity";
+import type { TemplateResult } from "lit-html";
+
+interface TabBarCtx {
+  navigateBack: () => void;
+  navigateToLevel: (level: number) => void;
+  closeFunctionEditor: () => void;
+  exportFile: () => void;
+  getCanvasMode: () => string;
+  parseMediaEntries: (media: Record<string, string> | null | undefined) => {
+    sizeBreakpoints: {
+      name: string;
+      query: string;
+      width: number;
+      type: string;
+    }[];
+    featureQueries: { name: string; query: string }[];
+    baseWidth: number;
+  };
+}
+
+let _host: HTMLElement | null = null;
+
+let _ctx: TabBarCtx | null = null;
+
+let _scope: EffectScope | null = null;
+
+/**
+ * Mount the tab bar into the given host element.
+ *
+ * @param {HTMLElement} host
+ * @param {TabBarCtx} ctx
+ */
+export function mount(host: HTMLElement, ctx: TabBarCtx) {
+  _host = host;
+  _ctx = ctx;
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      if (tab) {
+        // Read reactive properties to establish tracking — mirrors the toolbar's subset
+        void tab.doc.document;
+        void tab.doc.mode;
+        void tab.documentPath;
+        void tab.session.documentStack.length;
+        void tab.session.ui.canvasMode;
+        void tab.session.ui.editingFunction;
+        void tab.session.ui.featureToggles;
+      }
+      render();
+    });
+  });
+}
+
+export function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _host = null;
+  _ctx = null;
+}
+
+export function render() {
+  if (!_host || !_ctx) {
+    return;
+  }
+  try {
+    litRender(tabBarTemplate(_ctx), _host);
+  } catch (error) {
+    console.error("tab-bar render error:", error);
+  }
+}
+
+function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
+  const tab = activeTab.value;
+  if (!tab) {
+    return nothing;
+  }
+
+  const S = {
+    document: tab.doc.document,
+    documentPath: tab.documentPath,
+    documentStack: tab.session.documentStack,
+    ui: tab.session.ui,
+  };
+  const canvasMode = ctx.getCanvasMode();
+  const editing = S.ui.editingFunction as FunctionEditDef | null;
+  const hasStack = S.documentStack && S.documentStack.length > 0;
+
+  // ── Left region: navigation context (function editor takes precedence over the stack) ──
+  let navTpl: TemplateResult | typeof nothing = nothing;
+  if (editing) {
+    const docName = S.documentPath?.split("/").pop() || S.document?.tagName || "document";
+    const funcLabel = editing.type === "def" ? `ƒ ${editing.defName}` : `ƒ ${editing.eventKey}`;
+    navTpl = html`
+      <div class="breadcrumb">
+        <sp-action-button size="s" title="Close editor" @click=${ctx.closeFunctionEditor}>
+          <sp-icon-back slot="icon"></sp-icon-back>
+          Back
+        </sp-action-button>
+        <span class="breadcrumb-item">${docName}</span>
+        <span class="breadcrumb-sep"> › </span>
+        <span class="breadcrumb-item current">${funcLabel}</span>
+      </div>
+    `;
+  } else if (hasStack) {
+    navTpl = html`
+      <div class="breadcrumb">
+        <sp-action-button size="s" title="Return to parent document" @click=${ctx.navigateBack}>
+          <sp-icon-back slot="icon"></sp-icon-back>
+          Back
+        </sp-action-button>
+        ${S.documentStack.map(
+          (frame: DocumentStackEntry, i: number) => html`
+            <span class="breadcrumb-item clickable" @click=${() => ctx.navigateToLevel(i)}
+              >${frame.documentPath?.split("/").pop() || "untitled"}</span
+            >
+            <span class="breadcrumb-sep"> › </span>
+          `,
+        )}
+        <span class="breadcrumb-item current">
+          ${S.documentPath?.split("/").pop() || S.document?.tagName || "document"}
+        </span>
+      </div>
+    `;
+  }
+
+  // ── Right region: media feature toggles ──
+  const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document?.$media));
+  const togglesTpl =
+    featureQueries.length > 0
+      ? html`
+          <sp-action-group compact size="s">
+            ${featureQueries.map(
+              ({ name, query }: { name: string; query: string }) => html`
+                <sp-action-button
+                  toggles
+                  size="s"
+                  title=${query}
+                  ?selected=${Boolean(S.ui.featureToggles[name])}
+                  @click=${() => {
+                    const newToggles = {
+                      ...S.ui.featureToggles,
+                      [name]: !S.ui.featureToggles[name],
+                    };
+                    updateUi("featureToggles", newToggles);
+                  }}
+                >
+                  ${mediaDisplayName(name)}
+                </sp-action-button>
+              `,
+            )}
+          </sp-action-group>
+        `
+      : nothing;
+
+  // ── Right region: mode actions (Code-mode Export) ──
+  const exportTpl =
+    !editing && canvasMode === "source"
+      ? html`
+          <sp-action-button size="s" @click=${ctx.exportFile}>
+            <sp-icon-export slot="icon"></sp-icon-export>
+            Export
+          </sp-action-button>
+        `
+      : nothing;
+
+  // Collapse the bar entirely when there is nothing contextual to show.
+  if (navTpl === nothing && togglesTpl === nothing && exportTpl === nothing) {
+    return nothing;
+  }
+
+  return html`
+    <div class="tab-bar">
+      ${navTpl}
+      <div class="tb-spacer"></div>
+      ${togglesTpl} ${exportTpl}
+    </div>
+  `;
+}

package/src/panels/tab-strip.ts

@@ -77,7 +77,7 @@ function render() {
                 @auxclick=${(e: MouseEvent) => {
                   if (e.button === 1) {
                     e.preventDefault();
-                    requestClose(id);
+                    void requestClose(id);
                   }
                 }}
                 title=${tab.documentPath || "Untitled"}
@@ -88,7 +88,7 @@ function render() {
                   class="tab-strip-close"
                   @click=${(e: Event) => {
                     e.stopPropagation();
-                    requestClose(id);
+                    void requestClose(id);
                   }}
                 >
                   ×

package/src/panels/toolbar.ts

@@ -5,13 +5,10 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateSession, updateUi } from "../store";
+import { updateSession } from "../store";
 import { redo as tabRedo, undo as tabUndo } from "../tabs/transact";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import type { DocumentStackEntry } from "../types";
-import { getEffectiveMedia } from "../site-context";
-import { mediaDisplayName } from "./shared";
 import { applyPanelCollapse, view } from "../view";
 import { getRecentProjects } from "../recent-projects";
 import { openQuickSearch } from "./quick-search";
@@ -23,21 +20,9 @@ import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
 
 interface ToolbarCtx {
-  navigateBack: () => void;
-  navigateToLevel: (level: number) => void;
   openProject: () => void;
   openFile?: (path: string) => void;
   saveFile: () => void;
-  parseMediaEntries: (media: Record<string, string> | null | undefined) => {
-    sizeBreakpoints: {
-      name: string;
-      query: string;
-      width: number;
-      type: string;
-    }[];
-    featureQueries: { name: string; query: string }[];
-    baseWidth: number;
-  };
   getCanvasMode: () => string;
   setCanvasMode: (mode: string) => void;
   renderCanvas: () => void;
@@ -54,7 +39,6 @@ let _scope: EffectScope | null = null;
 
 const toolbarIconMap = {
   "sp-icon-artboard": html`<sp-icon-artboard slot="icon"></sp-icon-artboard>`,
-  "sp-icon-back": html`<sp-icon-back slot="icon"></sp-icon-back>`,
   "sp-icon-brush": html`<sp-icon-brush slot="icon"></sp-icon-brush>`,
   "sp-icon-code": html`<sp-icon-code slot="icon"></sp-icon-code>`,
   "sp-icon-delete": html`<sp-icon-delete slot="icon"></sp-icon-delete>`,
@@ -160,9 +144,9 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
           @change=${(e: Event) => {
             const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
-              handleNewProject();
+              void handleNewProject();
             } else {
-              ctx.openRecentProject(val);
+              void ctx.openRecentProject(val);
             }
           }}
         >
@@ -298,65 +282,12 @@ function toolbarTemplate() {
 
   const S = {
     dirty: tab.doc.dirty,
-    document: tab.doc.document,
-    documentPath: tab.documentPath,
-    documentStack: tab.session.documentStack,
     fileHandle: tab.fileHandle,
     mode: tab.doc.mode,
     selection: tab.session.selection,
     ui: tab.session.ui,
   };
   const canvasMode = ctx.getCanvasMode();
-  const hasStack = S.documentStack && S.documentStack.length > 0;
-
-  const breadcrumbTpl = hasStack
-    ? html`
-        <div class="breadcrumb">
-          <sp-action-button size="s" title="Return to parent document" @click=${ctx.navigateBack}>
-            ${toolbarIconMap["sp-icon-back"]}Back
-          </sp-action-button>
-          ${S.documentStack.map(
-            (frame: DocumentStackEntry, i: number) => html`
-              <span class="breadcrumb-item clickable" @click=${() => ctx.navigateToLevel(i)}
-                >${frame.documentPath?.split("/").pop() || "untitled"}</span
-              >
-              <span class="breadcrumb-sep"> › </span>
-            `,
-          )}
-          <span class="breadcrumb-item current">
-            ${S.documentPath?.split("/").pop() || S.document.tagName || "document"}
-          </span>
-        </div>
-      `
-    : nothing;
-
-  const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document.$media));
-  const togglesTpl =
-    featureQueries.length > 0
-      ? html`
-          <sp-action-group compact size="s">
-            ${featureQueries.map(
-              (/** @type {{ name: string; query: string }} */ { name, query }) => html`
-                <sp-action-button
-                  toggles
-                  size="s"
-                  title=${query}
-                  ?selected=${Boolean(S.ui.featureToggles[name])}
-                  @click=${() => {
-                    const newToggles = {
-                      ...S.ui.featureToggles,
-                      [name]: !S.ui.featureToggles[name],
-                    };
-                    updateUi("featureToggles", newToggles);
-                  }}
-                >
-                  ${mediaDisplayName(name)}
-                </sp-action-button>
-              `,
-            )}
-          </sp-action-group>
-        `
-      : nothing;
 
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>
@@ -488,9 +419,9 @@ function toolbarTemplate() {
           @change=${(e: Event) => {
             const val = (e.target as unknown as HTMLInputElement).value;
             if (val === "__new__") {
-              handleNewProject();
+              void handleNewProject();
             } else {
-              ctx.openRecentProject(val);
+              void ctx.openRecentProject(val);
             }
           }}
         >
@@ -543,7 +474,7 @@ function toolbarTemplate() {
         </sp-action-button>`
       : nothing}
     <div class="tb-spacer"></div>
-    ${breadcrumbTpl} ${togglesTpl} ${modeSwitcherTpl}
+    ${modeSwitcherTpl}
     <sp-action-button
       quiet
       size="s"