@jxsuite/studio 0.28.5 → 0.30.1

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 && {
@@ -706,9 +706,9 @@ function renderSignalEditorTemplate(
         : signalFieldRow("Default", defaultVal, (v: string) => {
             let parsed: unknown = v;
             if (def.type === "integer") {
-              parsed = Number.parseInt(v, 10) || 0;
+              parsed = Math.trunc(Number(v)) || 0;
             } else if (def.type === "number") {
-              parsed = Number.parseFloat(v) || 0;
+              parsed = Number(v) || 0;
             } else if (def.type === "boolean") {
               parsed = v === "true";
             } else if (def.type === "array" || def.type === "object") {
@@ -860,7 +860,7 @@ function renderDataSourceFields(
       )}
       ${signalFieldRow("Version", String(def.version || 1), (v: string) =>
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateDef(t, name, { version: Number.parseInt(v, 10) || 1 }),
+          mutateUpdateDef(t, name, { version: Math.trunc(Number(v)) || 1 }),
         ),
       )}
     `;
@@ -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>
@@ -1279,6 +1279,14 @@ function resolveSchemaEnum(
  * @param {(val: unknown) => void} onChange
  * @param {Record<string, unknown>} [parentDef] - Parent def for resolving dependent enum refs
  */
+/** Parse a numeric field value, returning NaN for blank input (so callers can treat it as unset). */
+function parseNumericField(raw: string, integer: boolean): number {
+  if (raw.trim() === "") {
+    return Number.NaN;
+  }
+  return integer ? Math.trunc(Number(raw)) : Number(raw);
+}
+
 function renderInlineField(
   key: string,
   schema: Record<string, unknown>,
@@ -1319,10 +1327,10 @@ function renderInlineField(
       .value=${value !== undefined ? value : nothing}
       step=${schema.type === "integer" ? "1" : nothing}
       @change=${(e: Event) => {
-        const parsed =
-          schema.type === "integer"
-            ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-            : Number.parseFloat((e.target as HTMLInputElement).value);
+        const parsed = parseNumericField(
+          (e.target as HTMLInputElement).value,
+          schema.type === "integer",
+        );
         onChange(Number.isNaN(parsed) ? undefined : parsed);
       }}
     ></sp-number-field>`;
@@ -1357,7 +1365,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 {}
@@ -1439,10 +1447,10 @@ export function renderSchemaFieldsTemplate(
           @change=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(() => {
-              const parsed =
-                ps.type === "integer"
-                  ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-                  : Number.parseFloat((e.target as HTMLInputElement).value);
+              const parsed = parseNumericField(
+                (e.target as HTMLInputElement).value,
+                ps.type === "integer",
+              );
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, {
                   [prop]: Number.isNaN(parsed) ? undefined : parsed,
@@ -1490,7 +1498,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 +1509,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 +1636,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 +1646,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);
                   }}
                 >
                   ×