@jxsuite/studio 0.28.5 → 0.29.0

package/src/files/file-ops.ts

@@ -10,6 +10,7 @@
 import { locateDocument } from "../services/code-services";
 import { errorMessage } from "@jxsuite/schema/parse";
 import { statusMessage } from "../panels/statusbar";
+import { validateComponentSlots } from "../services/cem-export";
 import { getPlatform } from "../platform";
 import { activeTab, openTab } from "../workspace/workspace";
 import { isEditing, stopEditing } from "../editor/inline-edit";
@@ -94,7 +95,7 @@ export async function openFile() {
           sourceFormat: format.name,
         });
       } else if (name.endsWith(".json")) {
-        const document = JSON.parse(text);
+        const document = JSON.parse(text) as Record<string, unknown>;
         openTab({ document, documentPath, fileHandle: handle, id: name });
       } else {
         throw noFormatError(name);
@@ -108,8 +109,8 @@ export async function openFile() {
           showOpenFilePicker: (options?: unknown) => Promise<FileSystemFileHandle[]>;
         }
       ).showOpenFilePicker({ types: pickerTypes });
-      const file = await handle.getFile();
-      await handleSource(handle.name, await file.text(), handle);
+      const file = await handle!.getFile();
+      await handleSource(handle!.name, await file.text(), handle!);
     } else {
       // Fallback: file input
       const input = document.createElement("input");
@@ -131,6 +132,26 @@ export async function openFile() {
   }
 }
 
+/**
+ * Report a slot-validation warning for component documents (root tagName with a hyphen). The save
+ * still proceeds — the warning replaces the plain success message.
+ *
+ * @param {Tab} tab
+ * @param {string} savedMsg
+ */
+function savedMessage(tab: Tab, savedMsg: string) {
+  const doc = tab.doc.document;
+  const warning =
+    typeof doc.tagName === "string" && doc.tagName.includes("-")
+      ? validateComponentSlots(doc)
+      : null;
+  if (warning) {
+    statusMessage(`${savedMsg} — Warning: ${warning}`, 6000);
+  } else {
+    statusMessage(savedMsg);
+  }
+}
+
 /** Save the current document back to its source location. */
 export async function saveFile() {
   if (isEditing()) {
@@ -147,7 +168,7 @@ export async function saveFile() {
       const platform = getPlatform();
       await platform.writeFile(tab.documentPath, output);
       tab.doc.dirty = false;
-      statusMessage("Saved");
+      savedMessage(tab, "Saved");
     } else if (tab.fileHandle && "createWritable" in tab.fileHandle) {
       const writable =
         await /**
@@ -161,7 +182,7 @@ export async function saveFile() {
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
-      statusMessage("Saved");
+      savedMessage(tab, "Saved");
     } else {
       statusMessage("No save target — use Export");
     }
@@ -209,7 +230,7 @@ export async function exportFile() {
       await writable.write(output);
       await writable.close();
       tab.doc.dirty = false;
-      statusMessage(`Exported as ${handle.name}`);
+      savedMessage(tab, `Exported as ${handle.name}`);
     } else {
       // Fallback: download
       const blob = new Blob([output], { type: mimeType });
@@ -220,7 +241,7 @@ export async function exportFile() {
       a.click();
       URL.revokeObjectURL(url);
       tab.doc.dirty = false;
-      statusMessage("Downloaded");
+      savedMessage(tab, "Downloaded");
     }
   } catch (error) {
     if (!(error instanceof Error && error.name === "AbortError")) {

package/src/files/files.ts

@@ -41,6 +41,7 @@ import {
 import { view } from "../view";
 import { addRecentProject, trackRecentFile } from "../recent-projects";
 import type { TemplateResult } from "lit-html";
+import type { JxMutableNode } from "@jxsuite/schema/types";
 import type { StudioState } from "../state.js";
 import type { Tab } from "../tabs/tab.js";
 
@@ -339,7 +340,7 @@ function renderTreeLevelTemplate(
 ): TemplateResult | TemplateResult[] {
   const entries = requireProjectState().dirs.get(dirPath);
   if (!entries) {
-    loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
+    void loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
     return html`<div
       class="file-tree-item"
       style="padding-left:${8 + depth * 16}px;color:var(--fg-dim);font-style:italic"
@@ -427,13 +428,13 @@ export function setupTreeKeyboard(tree: HTMLElement) {
     switch (e.key) {
       case "ArrowDown": {
         if (idx < items.length - 1) {
-          items[idx + 1].focus();
+          items[idx + 1]!.focus();
         }
         break;
       }
       case "ArrowUp": {
         if (idx > 0) {
-          items[idx - 1].focus();
+          items[idx - 1]!.focus();
         }
         break;
       }
@@ -442,7 +443,7 @@ export function setupTreeKeyboard(tree: HTMLElement) {
           const path = focused.dataset.path as string;
           if (!requireProjectState().expanded.has(path)) {
             requireProjectState().expanded.add(path);
-            loadDirectory(path).then(() => {
+            void loadDirectory(path).then(() => {
               const panel = tree.closest(".panel-body");
               if (panel) {
                 (panel.querySelector(".file-tree-item:focus") as HTMLElement | null)?.click();
@@ -619,7 +620,7 @@ export function registerFileTreeDnD({ renderLeftPanel }: { renderLeftPanel: () =
           return;
         }
 
-        moveFileEntry(srcPath, newPath!, renderLeftPanel);
+        void moveFileEntry(srcPath, newPath!, renderLeftPanel);
       },
     });
     _fileTreeDndCleanups.push(monitorCleanup);
@@ -707,16 +708,18 @@ function showFileContextMenu(
       label: "New File\u2026",
     });
   }
-  items.push({ label: "\u2014" });
-  items.push({
-    action: () => renameFile(entry, ctx.renderLeftPanel),
-    label: "Rename\u2026",
-  });
-  items.push({
-    action: () => deleteFile(entry, ctx.renderLeftPanel),
-    danger: true,
-    label: "Delete",
-  });
+  items.push(
+    { label: "\u2014" },
+    {
+      action: () => renameFile(entry, ctx.renderLeftPanel),
+      label: "Rename\u2026",
+    },
+    {
+      action: () => deleteFile(entry, ctx.renderLeftPanel),
+      danger: true,
+      label: "Delete",
+    },
+  );
 
   let x = e.clientX,
     y = e.clientY;
@@ -751,7 +754,7 @@ function showFileContextMenu(
                 style=${item.danger ? "color: var(--danger)" : ""}
                 @click=${() => {
                   dismissFileContextMenu();
-                  item.action?.();
+                  void item.action?.();
                 }}
                 >${item.label}</sp-menu-item
               >`,
@@ -953,12 +956,12 @@ export async function openFileFromTree(
     }
 
     if (formatForPath(path)) {
-      await ctx.loadMarkdown(content, null);
+      ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
       ctx.S.dirty = false;
       ctx.commit(ctx.S);
     } else if (path.endsWith(".json")) {
-      const doc = JSON.parse(content);
+      const doc = JSON.parse(content) as JxMutableNode;
       const newS = createState(doc);
       newS.documentPath = path;
       newS.dirty = false;
@@ -999,14 +1002,15 @@ export async function openFileInTab(path: string) {
     }
 
     await loadFormats();
-    let document, frontmatter;
+    let document: Record<string, unknown>;
+    let frontmatter: Record<string, unknown> | undefined;
     const format = formatForPath(path);
     if (format) {
       const result = await parseSourceForPath(path, content);
       ({ document } = result);
       ({ frontmatter } = result);
     } else if (path.endsWith(".json")) {
-      document = JSON.parse(content);
+      document = JSON.parse(content) as Record<string, unknown>;
     } else {
       throw noFormatError(path);
     }
@@ -1056,7 +1060,7 @@ export async function reloadFileInTab(path: string) {
           tab.doc.document = document;
           tab.doc.content.frontmatter = frontmatter;
         } else if (path.endsWith(".json")) {
-          tab.doc.document = JSON.parse(content);
+          tab.doc.document = JSON.parse(content) as JxMutableNode;
         }
         tab.doc.dirty = false;
       } catch {}

package/src/github/github-auth.ts

@@ -12,6 +12,18 @@ import { showDialog } from "../ui/layers";
 const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
 const STORAGE_KEY = "jx_github_token";
 
+interface DeviceCodeResponse {
+  device_code: string;
+  user_code: string;
+  verification_uri: string;
+  interval?: number;
+}
+
+interface TokenResponse {
+  access_token?: string;
+  error?: string;
+}
+
 export function getGithubToken() {
   return localStorage.getItem(STORAGE_KEY);
 }
@@ -44,7 +56,7 @@ export async function authenticateGithub() {
   if (!codeRes.ok) {
     throw new Error("Failed to initiate GitHub device flow");
   }
-  const codeData = await codeRes.json();
+  const codeData = (await codeRes.json()) as DeviceCodeResponse;
 
   const { device_code, user_code, verification_uri, interval = 5 } = codeData;
 
@@ -69,7 +81,7 @@ export async function authenticateGithub() {
           },
           method: "POST",
         });
-        const tokenData = await tokenRes.json();
+        const tokenData = (await tokenRes.json()) as TokenResponse;
 
         if (tokenData.access_token) {
           localStorage.setItem(STORAGE_KEY, tokenData.access_token);

package/src/github/github-publish.ts

@@ -9,6 +9,16 @@ import { authenticateGithub } from "./github-auth";
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 
+interface GithubErrorResponse {
+  errors?: { message?: string }[];
+  message?: string;
+}
+
+interface GithubRepoResponse {
+  clone_url: string;
+  html_url: string;
+}
+
 /**
  * Full "Publish to GitHub" flow: 1. Authenticate (or reuse stored token) 2. Prompt for repo name /
  * visibility 3. Create the repo via GitHub API 4. Add remote + push
@@ -105,13 +115,13 @@ export async function publishToGithub({ projectName }: { projectName: string })
   });
 
   if (!createRes.ok) {
-    const err = await createRes.json();
+    const err = (await createRes.json()) as GithubErrorResponse;
     const msg = err.errors?.[0]?.message || err.message || "Failed to create repository";
     statusMessage(`Error: ${msg}`);
     return false;
   }
 
-  const repo = await createRes.json();
+  const repo = (await createRes.json()) as GithubRepoResponse;
   const platform = getPlatform();
 
   statusMessage("Setting remote and pushing…");

package/src/panels/activity-bar.ts

@@ -21,7 +21,7 @@ export function mount() {
       if (tab) {
         const gs = tab.session.ui.gitStatus;
         if (!gs && !tab.session.ui.gitLoading) {
-          refreshGitStatus();
+          void refreshGitStatus();
         }
       }
       renderActivityBar();

package/src/panels/ai-panel.ts

@@ -43,6 +43,14 @@ interface QuikChatInstance {
   historyImport: (history: unknown[]) => void;
 }
 
+type QuikChatCtor = new (
+  container: HTMLElement,
+  onSend: (chat: unknown, msg: string) => void,
+  opts: Record<string, unknown>,
+) => QuikChatInstance;
+
+const QuikChat = quikchat as unknown as QuikChatCtor;
+
 let chatInstance: QuikChatInstance | null = null;
 let chatContainerEl: Element | null = null;
 let _quikChatEl: HTMLElement | null = null;
@@ -57,7 +65,7 @@ export function mountAiPanel() {
     return;
   }
   mounted = true;
-  checkAuth();
+  void checkAuth();
 }
 
 const _g = globalThis as unknown as {
@@ -87,10 +95,10 @@ export function mountQuikChat() {
     return;
   }
 
-  chatInstance = new quikchat(
+  chatInstance = new QuikChat(
     container,
     (_chat: unknown, msg: string) => {
-      handleUserSend(msg);
+      void handleUserSend(msg);
     },
     {
       messagesArea: { alternating: false },
@@ -197,14 +205,14 @@ function stop() {
     return;
   }
   const plat = getPlatform();
-  plat.aiStopSession(sessionId);
+  void plat.aiStopSession(sessionId);
   finishStream();
 }
 
 function newChat() {
   if (sessionId) {
     const plat = getPlatform();
-    plat.aiDeleteSession(sessionId);
+    void plat.aiDeleteSession(sessionId);
   }
   disconnectStream();
   messages = [];
@@ -223,6 +231,31 @@ function newChat() {
 
 // ─── SSE Stream ─────────────────────────────────────────────────────────────
 
+/** SSE `stream_event` payload (subset used here). */
+interface StreamEventData {
+  event?: { type?: string; delta?: { type?: string; text?: string } };
+}
+
+/** SSE `result` payload (subset used here). */
+interface ResultData {
+  result?: string;
+  is_error?: boolean;
+}
+
+/** SSE `error` payload (subset used here). */
+interface ErrorData {
+  error?: string;
+}
+
+/** Parse SSE JSON into the expected shape. Returns null on malformed input. */
+function parseSse<T>(raw: unknown): T | null {
+  try {
+    return JSON.parse(String(raw)) as T;
+  } catch {
+    return null;
+  }
+}
+
 async function connectStream(id: string) {
   disconnectStream();
   const plat = getPlatform();
@@ -230,40 +263,37 @@ async function connectStream(id: string) {
   eventSource = new EventSource(url);
 
   eventSource.addEventListener("stream_event", (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      const evt = data.event;
-      if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
-        const token = evt.delta.text;
-        currentAssistantText += token;
-        if (chatInstance && currentStreamMsgId != null) {
-          if (!streamStarted) {
-            chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
-            streamStarted = true;
-          } else {
-            chatInstance.messageAppendContent(currentStreamMsgId, token);
-          }
+    const data = parseSse<StreamEventData>((e as MessageEvent).data);
+    const evt = data?.event;
+    if (evt?.type === "content_block_delta" && evt.delta?.type === "text_delta") {
+      const token = evt.delta.text ?? "";
+      currentAssistantText += token;
+      if (chatInstance && currentStreamMsgId != null) {
+        if (!streamStarted) {
+          chatInstance.messageReplaceContent(currentStreamMsgId, currentAssistantText);
+          streamStarted = true;
+        } else {
+          chatInstance.messageAppendContent(currentStreamMsgId, token);
         }
       }
-    } catch {}
+    }
   });
 
   eventSource.addEventListener("assistant", (e) => {
-    try {
-      handleAssistantMessage(JSON.parse(e.data));
-    } catch {}
+    const data = parseSse<AssistantMessageData>((e as MessageEvent).data);
+    if (data) {
+      handleAssistantMessage(data);
+    }
   });
 
   eventSource.addEventListener("result", (e) => {
-    try {
-      const data = JSON.parse(e.data);
-      if (data.result && data.is_error) {
-        if (chatInstance && currentStreamMsgId != null) {
-          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
-        }
-        currentAssistantText = `Error: ${data.result}`;
+    const data = parseSse<ResultData>((e as MessageEvent).data);
+    if (data?.result && data.is_error) {
+      if (chatInstance && currentStreamMsgId != null) {
+        chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.result}`);
       }
-    } catch {}
+      currentAssistantText = `Error: ${data.result}`;
+    }
     finishStream();
   });
 
@@ -272,15 +302,13 @@ async function connectStream(id: string) {
   });
 
   eventSource.addEventListener("error", (e) => {
-    try {
-      const data = JSON.parse((e as MessageEvent).data);
-      if (data.error) {
-        if (chatInstance && currentStreamMsgId != null) {
-          chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
-        }
-        currentAssistantText = `Error: ${data.error}`;
+    const data = parseSse<ErrorData>((e as MessageEvent).data);
+    if (data?.error) {
+      if (chatInstance && currentStreamMsgId != null) {
+        chatInstance.messageReplaceContent(currentStreamMsgId, `Error: ${data.error}`);
       }
-    } catch {}
+      currentAssistantText = `Error: ${data.error}`;
+    }
     finishStream();
   });
 
@@ -306,7 +334,7 @@ function finishStream() {
 
   if (pendingFileReloads.size > 0) {
     for (const fp of pendingFileReloads) {
-      reloadFileInTab(fp);
+      void reloadFileInTab(fp);
     }
     pendingFileReloads.clear();
   }

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

@@ -9,13 +9,21 @@ import { styleMap } from "lit-html/directives/style-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import { childIndex, childList, getNodeAtPath, nodeLabel, parentElementPath } from "../store";
+import {
+  childIndex,
+  childList,
+  elToScope,
+  getNodeAtPath,
+  nodeLabel,
+  parentElementPath,
+} from "../store";
 import { activeTab } from "../workspace/workspace";
 import { mutateMoveNode, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { getActiveElement, getInlineActions, isEditing } from "../editor/inline-edit";
 import type { InlineAction } from "../editor/inline-edit";
 import { isTagActiveInSelection, toggleInlineFormat } from "../editor/inline-format";
+import { buildMergeTags } from "../editor/merge-tags";
 import { componentRegistry } from "../files/components";
 import { convertToComponent } from "../editor/convert-to-component";
 import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers";
@@ -224,6 +232,60 @@ function applyInlineFormat(action: InlineAction) {
   requestAnimationFrame(() => renderBlockActionBar());
 }
 
+/**
+ * Open the merge-tag menu — a searchable list of `${…}` template tokens for the data available in
+ * the current state. Reuses the shared slash-menu popover (filter + keyboard nav + dismiss).
+ *
+ * @param {MouseEvent} e
+ */
+function onMergeTagClick(e: MouseEvent) {
+  e.stopPropagation();
+  const anchorEl = e.currentTarget as HTMLElement;
+  const tab = activeTab.value;
+  const editable = getActiveElement();
+  const state = (tab?.doc.document.state ?? {}) as Record<string, unknown>;
+  const scope = getActivePanel()?.liveCtx?.scope ?? null;
+  const localScope = editable ? (elToScope.get(editable) ?? null) : null;
+
+  const commands = buildMergeTags(state, scope, localScope).map((t) => ({
+    description: t.hint,
+    label: t.label,
+    tag: t.token,
+  }));
+
+  showSlashMenu(anchorEl, "", {
+    commands,
+    onSelect: (cmd) => insertMergeTag(cmd.tag),
+    showFilter: true,
+  });
+}
+
+/**
+ * Insert a `${token}` template expression at the saved selection inside the active contenteditable.
+ * Mirrors onFormatClick's range-restore flow and inserts via execCommand so it joins the
+ * contenteditable's native undo stack (like paste).
+ *
+ * @param {string} token
+ */
+function insertMergeTag(token: string) {
+  if (!view.savedRange) {
+    return;
+  }
+  const anchor = view.savedRange.startContainer;
+  const editableRoot = (
+    anchor?.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor?.parentElement
+  )?.closest("[contenteditable]");
+  if (!editableRoot) {
+    return;
+  }
+  const sel = window.getSelection();
+  (editableRoot as HTMLElement).focus();
+  sel?.removeAllRanges();
+  sel?.addRange(view.savedRange);
+  document.execCommand("insertText", false, `\${${token}}`);
+  requestAnimationFrame(() => renderBlockActionBar());
+}
+
 /** Dismiss the link popover if open. */
 export function dismissLinkPopover() {
   const host = getLayerSlot("popover", "link-popover");
@@ -515,6 +577,15 @@ export function renderBlockActionBar() {
                   `,
                 )}
               </sp-action-group>
+              <sp-action-button
+                size="xs"
+                quiet
+                title="Insert data"
+                @mousedown=${captureSelectionRange}
+                @click=${onMergeTagClick}
+              >
+                <sp-icon-data slot="icon"></sp-icon-data>
+              </sp-action-button>
             `
           : nothing}
       </div>