@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/dnd.ts

@@ -16,14 +16,15 @@ import {
 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 
 import {
-  leftPanel,
-  getNodeAtPath,
-  parentElementPath,
   childIndex,
+  childList,
+  getNodeAtPath,
   isAncestor,
+  leftPanel,
+  parentElementPath,
   renderOnly,
 } from "../store";
-import { transact, transactDoc, mutateMoveNode, mutateInsertNode } from "../tabs/transact";
+import { mutateInsertNode, mutateMoveNode, transact, transactDoc } from "../tabs/transact";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 import { componentRegistry, computeRelativePath } from "../files/components";
@@ -31,6 +32,7 @@ import { renderComponentPreview } from "./stylebook-panel";
 import { defaultDef, unsafeTags } from "./shared";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { ComponentEntry } from "../files/components.js";
 
 interface DragCanDragArgs {
   element: HTMLElement;
@@ -54,26 +56,30 @@ interface DragMonitorDropArgs {
 export function registerLayersDnD() {
   requestAnimationFrame(() => {
     const container = leftPanel?.querySelector(".layers-container") as HTMLElement | null;
-    if (!container) return;
+    if (!container) {
+      return;
+    }
 
-    (container.querySelectorAll("[data-dnd-row]") as NodeListOf<HTMLElement>).forEach((row) => {
+    for (const row of container.querySelectorAll("[data-dnd-row]") as NodeListOf<HTMLElement>) {
       const rowPath = (row.dataset.path as string)
         .split("/")
-        .map((s: string) => (/^\d+$/.test(s) ? parseInt(s) : s)) as JxPath;
-      const rowDepth = parseInt(row.dataset.dndDepth as string) || 0;
-      const isVoid = row.hasAttribute("data-dnd-void");
-      const isExpanded = row.hasAttribute("data-dnd-expanded");
+        .map((s: string) => (/^\d+$/.test(s) ? Number.parseInt(s, 10) : s)) as JxPath;
+      const rowDepth = Number.parseInt(row.dataset.dndDepth as string, 10) || 0;
+      const isVoid = Object.hasOwn(row.dataset, "dndVoid");
+      const isExpanded = Object.hasOwn(row.dataset, "dndExpanded");
 
       const cleanup = combine(
         draggable({
-          element: row,
           canDrag({ element: _el, input }: DragCanDragArgs) {
             const target = document.elementFromPoint(input.clientX, input.clientY) as HTMLElement;
-            if (target?.closest(".layer-actions")) return false;
+            if (target?.closest(".layer-actions")) {
+              return false;
+            }
             return true;
           },
+          element: row,
           getInitialData() {
-            return { type: "tree-node", path: rowPath };
+            return { path: rowPath, type: "tree-node" };
           },
           onDragStart() {
             row.classList.add("dragging");
@@ -93,19 +99,27 @@ export function registerLayersDnD() {
           element: row,
           canDrop({ source }: DragDropSourceArgs) {
             const srcPath = source.data.path as JxPath | undefined;
-            if (srcPath && isAncestor(srcPath, rowPath)) return false;
+            if (srcPath && isAncestor(srcPath, rowPath)) {
+              return false;
+            }
             return true;
           },
-          getData({ input, element }: any) {
+          getData({
+            input,
+            element,
+          }: {
+            input: Parameters<typeof attachInstruction>[1]["input"];
+            element: Element;
+          }) {
             return attachInstruction(
               { path: rowPath },
               {
-                input,
-                element,
+                block: isVoid ? ["make-child"] : [],
                 currentLevel: rowDepth,
+                element,
                 indentPerLevel: 16,
+                input,
                 mode: isExpanded ? "expanded" : "standard",
-                block: isVoid ? ["make-child"] : [],
               },
             ) as Record<string | symbol, unknown>;
           },
@@ -116,35 +130,33 @@ export function registerLayersDnD() {
             showLayerDropGap(row, self.data, container);
           },
           // No onDragLeave clear — the gap persists while the pointer crosses dead space
-          // between rows; the monitor clears it when the drag moves to a non-tree target.
+          // Between rows; the monitor clears it when the drag moves to a non-tree target.
           onDrop() {
             clearLayerDropGap(container);
           },
         }),
       );
       view.dndCleanups.push(cleanup);
-    });
+    }
 
     // Global monitor
     const monitorCleanup = monitorForElements({
-      onDropTargetChange({ location }: DragMonitorDropArgs) {
-        // Clear the layer gap when the drag moves onto a non-tree target (e.g. a canvas
-        // element). When there is no target at all, keep the gap so it persists.
-        const inner = location.current.dropTargets[0];
-        if (inner && !extractInstruction(inner.data)) clearLayerDropGap(container);
-      },
       onDrop({ source, location }: DragMonitorDropArgs) {
         clearLayerDropGap(container);
-        const target = location.current.dropTargets[0];
-        if (!target) return;
+        const [target] = location.current.dropTargets;
+        if (!target) {
+          return;
+        }
         const instruction = extractInstruction(target.data);
-        if (!instruction || instruction.type === "instruction-blocked") return;
+        if (!instruction || instruction.type === "instruction-blocked") {
+          return;
+        }
         const srcData = source.data;
         const targetPath = target.data.path as JxPath;
 
         // If the source had children, persist collapse at the new location
         const srcRow = srcData.type === "tree-node" && source.element;
-        const wasExpanded = srcRow && srcRow.hasAttribute("data-dnd-expanded");
+        const wasExpanded = srcRow && Object.hasOwn(srcRow.dataset, "dndExpanded");
 
         applyDropInstruction(instruction, srcData, targetPath);
 
@@ -152,11 +164,19 @@ export function registerLayersDnD() {
           const tab = activeTab.value;
           const newPath = tab?.session.selection;
           if (newPath) {
-            const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
+            const collapsed = (view._layersCollapsed ||= new Set());
             collapsed.add(newPath.join("/"));
           }
         }
       },
+      onDropTargetChange({ location }: DragMonitorDropArgs) {
+        // Clear the layer gap when the drag moves onto a non-tree target (e.g. a canvas
+        // Element). When there is no target at all, keep the gap so it persists.
+        const [inner] = location.current.dropTargets;
+        if (inner && !extractInstruction(inner.data)) {
+          clearLayerDropGap(container);
+        }
+      },
     });
     view.dndCleanups.push(monitorCleanup);
   });
@@ -166,48 +186,52 @@ export function registerLayersDnD() {
 export function registerComponentsDnD() {
   requestAnimationFrame(() => {
     const container = leftPanel?.querySelector(".components-section") as HTMLElement | null;
-    if (!container) return;
-
-    (container.querySelectorAll("[data-component-tag]") as NodeListOf<HTMLElement>).forEach(
-      (row) => {
-        const tagName = row.dataset.componentTag;
-        if (!tagName) return;
-        const comp = componentRegistry.find(
-          (c: import("../files/components.js").ComponentEntry) => c.tagName === tagName,
-        );
-        if (!comp) return;
+    if (!container) {
+      return;
+    }
 
-        // Fill preview with live rendered component
-        const preview = row.querySelector(".element-card-preview");
-        if (preview && !preview.querySelector(tagName)) {
-          renderComponentPreview(comp).then((el: HTMLElement) => {
-            preview.textContent = "";
-            preview.appendChild(el);
-          });
-        }
+    for (const row of container.querySelectorAll(
+      "[data-component-tag]",
+    ) as NodeListOf<HTMLElement>) {
+      const tagName = row.dataset.componentTag;
+      if (!tagName) {
+        continue;
+      }
+      const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tagName);
+      if (!comp) {
+        continue;
+      }
 
-        const instanceDef = {
-          tagName: comp.tagName,
-          $props: comp.props
-            ? Object.fromEntries(
-                comp.props.map(
-                  (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
-                    p.name,
-                    p.default !== undefined ? p.default : "",
-                  ],
-                ),
-              )
-            : {},
-        };
-        const cleanup = draggable({
-          element: row,
-          getInitialData() {
-            return { type: "block", fragment: structuredClone(instanceDef) };
-          },
+      // Fill preview with live rendered component
+      const preview = row.querySelector(".element-card-preview");
+      if (preview && !preview.querySelector(tagName)) {
+        renderComponentPreview(comp).then((el: HTMLElement) => {
+          preview.textContent = "";
+          preview.append(el);
         });
-        view.dndCleanups.push(cleanup);
-      },
-    );
+      }
+
+      const instanceDef = {
+        $props: comp.props
+          ? Object.fromEntries(
+              comp.props.map(
+                (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
+                  p.name,
+                  p.default !== undefined ? p.default : "",
+                ],
+              ),
+            )
+          : {},
+        tagName: comp.tagName,
+      };
+      const cleanup = draggable({
+        element: row,
+        getInitialData() {
+          return { fragment: structuredClone(instanceDef), type: "block" };
+        },
+      });
+      view.dndCleanups.push(cleanup);
+    }
   });
 }
 
@@ -215,24 +239,26 @@ export function registerComponentsDnD() {
 export function registerElementsDnD() {
   requestAnimationFrame(() => {
     const container = leftPanel?.querySelector(".panel-body") as HTMLElement | null;
-    if (!container) return;
-    (container.querySelectorAll("[data-block-tag]") as NodeListOf<HTMLElement>).forEach((row) => {
+    if (!container) {
+      return;
+    }
+    for (const row of container.querySelectorAll("[data-block-tag]") as NodeListOf<HTMLElement>) {
       const tag = row.dataset.blockTag as string;
       const preview = row.querySelector(".element-card-preview");
       if (preview && !preview.firstChild) {
         const el = document.createElement(unsafeTags.has(tag) ? "span" : tag);
         el.textContent = tag;
-        preview.appendChild(el);
+        preview.append(el);
       }
       const def = defaultDef(tag);
       const cleanup = draggable({
         element: row,
         getInitialData() {
-          return { type: "block", fragment: structuredClone(def) };
+          return { fragment: structuredClone(def), type: "block" };
         },
       });
       view.dndCleanups.push(cleanup);
-    });
+    }
   });
 }
 
@@ -243,7 +269,7 @@ export function registerElementsDnD() {
  * @param {HTMLElement} container
  */
 function hideDescendantRows(parentRow: HTMLElement, container: HTMLElement) {
-  const prefix = parentRow.dataset.path + "/";
+  const prefix = `${parentRow.dataset.path}/`;
   const rows = container.querySelectorAll(".layers-tree .layer-row");
   for (const r of rows) {
     if ((r as HTMLElement).dataset.path?.startsWith(prefix)) {
@@ -285,12 +311,14 @@ export function showLayerDropGap(
   view._currentDropTargetRow = rowEl;
 
   // Shift rows to create gap
-  const rows = Array.from(container.querySelectorAll(".layers-tree .layer-row"));
+  const rows = [...container.querySelectorAll(".layers-tree .layer-row")];
   const targetIdx = rows.indexOf(rowEl);
   const gap = view.layerDragSourceHeight;
 
   for (let i = 0; i < rows.length; i++) {
-    if ((rows[i] as HTMLElement).classList.contains("dragging")) continue;
+    if ((rows[i] as HTMLElement).classList.contains("dragging")) {
+      continue;
+    }
     if (instruction.type === "reorder-above") {
       (rows[i] as HTMLElement).style.transform = i >= targetIdx ? `translateY(${gap}px)` : "";
     } else {
@@ -306,7 +334,9 @@ export function clearLayerDropGap(container: HTMLElement) {
     view._currentDropTargetRow = null;
   }
   const rows = container.querySelectorAll(".layers-tree .layer-row");
-  for (const r of rows) (r as HTMLElement).style.transform = "";
+  for (const r of rows) {
+    (r as HTMLElement).style.transform = "";
+  }
 }
 
 /**
@@ -327,34 +357,41 @@ export function applyDropInstruction(
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
     // Reordering requires a parent and a numeric index; root-level paths can't be
-    // reordered around.
-    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+    // Reordered around.
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number")) {
       return;
+    }
 
     switch (instruction.type) {
-      case "reorder-above":
+      case "reorder-above": {
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetParent, targetIdx));
         break;
-      case "reorder-below":
+      }
+      case "reorder-below": {
         transactDoc(activeTab.value, (t) =>
           mutateMoveNode(t, fromPath, targetParent, targetIdx + 1),
         );
         break;
+      }
       case "make-child": {
         const target = getNodeAtPath(doc, targetPath);
-        const len = target?.children?.length || 0;
+        const len = childList(target).length;
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
         break;
       }
+      default: {
+        break;
+      }
     }
   } else if (srcData.type === "block") {
     const targetParent = parentElementPath(targetPath) as JxPath;
     const targetIdx = childIndex(targetPath) as number;
-    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number"))
+    if (instruction.type !== "make-child" && (!targetParent || typeof targetIdx !== "number")) {
       return;
+    }
 
     switch (instruction.type) {
-      case "reorder-above":
+      case "reorder-above": {
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(
             t,
@@ -364,7 +401,8 @@ export function applyDropInstruction(
           ),
         );
         break;
-      case "reorder-below":
+      }
+      case "reorder-below": {
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(
             t,
@@ -374,51 +412,61 @@ export function applyDropInstruction(
           ),
         );
         break;
+      }
       case "make-child": {
         const target = getNodeAtPath(doc, targetPath);
-        const len = target?.children?.length || 0;
+        const len = childList(target).length;
         transactDoc(activeTab.value, (t) =>
           mutateInsertNode(t, targetPath, len, structuredClone(srcData.fragment as JxMutableNode)),
         );
         break;
       }
+      default: {
+        break;
+      }
     }
 
     // Auto-import to $elements if the dropped block is a custom component
     const fragment = srcData.fragment as JxMutableNode | undefined;
     const tag = fragment?.tagName;
     if (tag && tag.includes("-")) {
-      const comp = componentRegistry.find(
-        (c: import("../files/components.js").ComponentEntry) => c.tagName === tag,
-      );
+      const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tag);
       if (comp) {
         const tab = activeTab.value;
         const elements = tab?.doc.document?.$elements || [];
         if (comp.source === "npm") {
           const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
-          if (!specifier) return;
+          if (!specifier) {
+            return;
+          }
           const alreadyImported = elements.some(
             (e: JxMutableNode | string | { $ref: string }) => e === specifier || e === comp.package,
           );
           if (!alreadyImported) {
-            transact(activeTab.value, (doc: JxMutableNode) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push(specifier);
+            transact(activeTab.value, (d: JxMutableNode) => {
+              if (!d.$elements) {
+                d.$elements = [];
+              }
+              d.$elements.push(specifier);
             });
           }
         } else {
           const alreadyImported = elements.some((e: JxMutableNode | string | { $ref: string }) => {
             const ref = typeof e === "object" && e !== null ? e.$ref : undefined;
+            const compPath = comp.path;
             return (
               ref &&
-              (ref === `./${comp.path}` || ref.endsWith(comp.path.split("/").pop() as string))
+              compPath &&
+              (ref === `./${compPath}` || ref.endsWith(compPath.split("/").pop() as string))
             );
           });
-          if (!alreadyImported) {
+          if (!alreadyImported && comp.path) {
             const relPath = computeRelativePath(tab?.documentPath ?? null, comp.path);
-            transact(activeTab.value, (doc: JxMutableNode) => {
-              if (!doc.$elements) doc.$elements = [];
-              doc.$elements.push({ $ref: relPath });
+            transact(activeTab.value, (d: JxMutableNode) => {
+              if (!d.$elements) {
+                d.$elements = [];
+              }
+              d.$elements.push({ $ref: relPath });
             });
           }
         }

package/src/panels/editors.ts

@@ -5,17 +5,18 @@
  */
 
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import { isJsonObject } from "@jxsuite/schema/guards";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 
-import { renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store";
+import { canvasPanels, canvasWrap, getNodeAtPath, renderOnly } from "../store";
 import { activeTab } from "../workspace/workspace";
-import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/transact";
+import { mutateUpdateDef, mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
-import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services";
+import { codeService, getFunctionArgs, setLintMarkers } from "../services/code-services";
 
 import type { OxLintDiagnostic } from "../services/code-services";
-import type { JxPrototypeDef, JxMutableNode } from "@jxsuite/schema/types";
+import type { JxMutableNode, JxPrototypeDef } from "@jxsuite/schema/types";
 import type { JxPath } from "../state";
 
 type EditingTarget =
@@ -25,11 +26,14 @@ type EditingTarget =
 /** @param {EditingTarget | null | undefined} editing */
 function getFunctionBody(editing: EditingTarget | null | undefined) {
   const document = activeTab.value?.doc.document;
+  // Read body off any object-shaped def (covers legacy entries without $prototype).
+  const bodyOf = (def: unknown) =>
+    isJsonObject(def) && typeof def.body === "string" ? def.body : "";
   if (editing?.type === "def") {
-    return document?.state?.[editing.defName]?.body || "";
+    return bodyOf(document?.state?.[editing.defName]);
   } else if (editing?.type === "event") {
     const node = getNodeAtPath(document!, editing.path);
-    return node?.[editing.eventKey]?.body || "";
+    return node ? bodyOf(node[editing.eventKey]) : "";
   }
   return "";
 }
@@ -60,9 +64,13 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   }
 
   // Clean up canvas DnD and event handlers
-  for (const fn of view.canvasDndCleanups) fn();
+  for (const fn of view.canvasDndCleanups) {
+    fn();
+  }
   view.canvasDndCleanups = [];
-  for (const fn of view.canvasEventCleanups) fn();
+  for (const fn of view.canvasEventCleanups) {
+    fn();
+  }
   view.canvasEventCleanups = [];
   canvasPanels.length = 0;
 
@@ -95,7 +103,9 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
       <div
         class="source-editor"
         ${ref((el) => {
-          if (el) editorContainer = el as HTMLDivElement;
+          if (el) {
+            editorContainer = el as HTMLDivElement;
+          }
         })}
       ></div>
     </div>`,
@@ -109,31 +119,32 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   );
 
   view.functionEditor = monaco.editor.create(editorContainer as unknown as HTMLElement, {
-    value: body,
-    language: "javascript",
-    theme: "vs-dark",
     automaticLayout: true,
-    minimap: { enabled: false },
-    fontSize: 12,
     fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+    fontSize: 12,
+    language: "javascript",
     lineNumbers: "on",
+    minimap: { enabled: false },
     scrollBeyondLastLine: false,
-    wordWrap: "on",
     tabSize: 2,
+    theme: "vs-dark",
+    value: body,
+    wordWrap: "on",
   });
   view.functionEditor._editingTarget = JSON.stringify(editing);
   const editor = view.functionEditor;
 
   // Format on open — show pretty-printed code, then run initial lint
-  codeService("format", { code: body, args }).then((result) => {
+  codeService("format", { args, code: body }).then((result) => {
     if (result?.code != null && view.functionEditor) {
       view.functionEditor._ignoreNextChange = true;
       view.functionEditor.setValue(result.code);
     }
   });
-  codeService("lint", { code: body, args }).then((result) => {
-    if (result?.diagnostics && view.functionEditor)
+  codeService("lint", { args, code: body }).then((result) => {
+    if (result?.diagnostics && view.functionEditor) {
       setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
+    }
   });
 
   // Debounced sync back to state + lint on edit
@@ -151,14 +162,14 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
       const newBody = editor.getValue();
-      const ed = editing as EditingTarget;
-      if (ed.type === "def") {
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
-      } else if (ed.type === "event") {
-        const node = getNodeAtPath(activeTab.value?.doc.document as JxMutableNode, ed.path);
-        const current = node?.[ed.eventKey] || {};
+      const target = editing as EditingTarget;
+      if (target.type === "def") {
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, target.defName, { body: newBody }));
+      } else if (target.type === "event") {
+        const node = getNodeAtPath(activeTab.value?.doc.document as JxMutableNode, target.path);
+        const current = node?.[target.eventKey] || {};
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateProperty(t, ed.path, ed.eventKey, {
+          mutateUpdateProperty(t, target.path, target.eventKey, {
             ...current,
             $prototype: "Function",
             body: newBody,
@@ -170,12 +181,15 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
 
     clearTimeout(lintDebounce);
     lintDebounce = setTimeout(() => {
-      const gen = ++lintGen;
+      const gen = (lintGen += 1);
       const currentCode = editor.getValue();
-      codeService("lint", { code: currentCode, args }).then((result) => {
-        if (gen !== lintGen) return;
-        if (result?.diagnostics && view.functionEditor)
+      codeService("lint", { args, code: currentCode }).then((result) => {
+        if (gen !== lintGen) {
+          return;
+        }
+        if (result?.diagnostics && view.functionEditor) {
           setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
+        }
       });
     }, 750);
   });
@@ -183,18 +197,19 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
 
 // Register Monaco JS completion provider for state scope variables (once)
 export function registerFunctionCompletions() {
-  if (view._completionRegistered) return;
+  if (view._completionRegistered) {
+    return;
+  }
   view._completionRegistered = true;
   monaco.languages.registerCompletionItemProvider("javascript", {
-    triggerCharacters: ["."],
     provideCompletionItems(model, position) {
       const defs = activeTab.value?.doc.document?.state || {};
       const word = model.getWordUntilPosition(position);
       const range = {
-        startLineNumber: position.lineNumber,
+        endColumn: word.endColumn,
         endLineNumber: position.lineNumber,
         startColumn: word.startColumn,
-        endColumn: word.endColumn,
+        startLineNumber: position.lineNumber,
       };
 
       const suggestions = Object.entries(defs).map(([key, def]) => {
@@ -202,18 +217,20 @@ export function registerFunctionCompletions() {
         if (
           (def as JxPrototypeDef)?.$prototype === "Function" ||
           (def as Record<string, unknown>)?.$handler
-        )
+        ) {
           kind = monaco.languages.CompletionItemKind.Function;
-        else if ((def as JxPrototypeDef)?.$prototype)
+        } else if ((def as JxPrototypeDef)?.$prototype) {
           kind = monaco.languages.CompletionItemKind.Property;
+        }
         return {
-          label: `state.${key}`,
-          kind,
           insertText: `state.${key}`,
+          kind,
+          label: `state.${key}`,
           range,
         };
       });
       return { suggestions };
     },
+    triggerCharacters: ["."],
   });
 }