@jxsuite/studio 0.23.2 → 0.25.0

package/src/panels/{editors.js → editors.ts}

@@ -1,39 +1,42 @@
+/// <reference lib="dom" />
 /**
  * Editor panels — extracted from studio.js (Phase 4g). Monaco-based function editor (JS mode) and
  * completion provider for state scope variables.
  */
 
-/** @typedef {import("../services/code-services.js").OxLintDiagnostic} OxLintDiagnostic */
-
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 
-import { renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/transact.js";
-import { view } from "../view.js";
-import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
+import { renderOnly, canvasWrap, canvasPanels, getNodeAtPath } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/transact";
+import { view } from "../view";
+import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services";
+
+import type { OxLintDiagnostic } from "../services/code-services";
+import type { JxPrototypeDef, JxMutableNode } from "@jxsuite/schema/types";
+import type { JxPath } from "../state";
 
-/** @typedef {{ type: "def"; defName: string } | { type: "event"; path: JxPath; eventKey: string }} EditingTarget */
+type EditingTarget =
+  | { type: "def"; defName: string }
+  | { type: "event"; path: JxPath; eventKey: string };
 
 /** @param {EditingTarget | null | undefined} editing */
-function getFunctionBody(editing) {
+function getFunctionBody(editing: EditingTarget | null | undefined) {
   const document = activeTab.value?.doc.document;
   if (editing?.type === "def") {
     return document?.state?.[editing.defName]?.body || "";
   } else if (editing?.type === "event") {
-    const node = getNodeAtPath(/** @type {JxMutableNode} */ (document), editing.path);
+    const node = getNodeAtPath(document!, editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
 }
 
 /** @param {() => void} closeFunctionEditor */
-export function renderFunctionEditor(closeFunctionEditor) {
-  const editing = /** @type {EditingTarget | null | undefined} */ (
-    activeTab.value?.session.ui.editingFunction
-  );
+export function renderFunctionEditor(closeFunctionEditor: () => void) {
+  const editing = activeTab.value?.session.ui.editingFunction as EditingTarget | null | undefined;
 
   // If editor already exists and matches current target, just sync value
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
@@ -73,12 +76,11 @@ export function renderFunctionEditor(closeFunctionEditor) {
 
   const tab = activeTab.value;
   const docName = tab?.documentPath?.split("/").pop() || tab?.doc.document?.tagName || "document";
-  const ed = /** @type {EditingTarget} */ (editing);
+  const ed = editing as EditingTarget;
   const funcLabel = ed.type === "def" ? `ƒ ${ed.defName}` : `ƒ ${ed.eventKey}`;
 
   // Editor container
-  /** @type {HTMLDivElement | null} */
-  let editorContainer = null;
+  let editorContainer: HTMLDivElement | null = null;
   litRender(
     html`<div class="source-wrap">
       <div class="source-toolbar">
@@ -93,7 +95,7 @@ export function renderFunctionEditor(closeFunctionEditor) {
       <div
         class="source-editor"
         ${ref((el) => {
-          if (el) editorContainer = /** @type {HTMLDivElement} */ (el);
+          if (el) editorContainer = el as HTMLDivElement;
         })}
       ></div>
     </div>`,
@@ -102,26 +104,23 @@ export function renderFunctionEditor(closeFunctionEditor) {
 
   const body = getFunctionBody(editing);
   const args = getFunctionArgs(
-    /** @type {EditingTarget} */ (editing),
+    /** @type {EditingTarget} */ (editing as EditingTarget),
     activeTab.value?.doc.document,
   );
 
-  view.functionEditor = monaco.editor.create(
-    /** @type {HTMLElement} */ (/** @type {unknown} */ (editorContainer)),
-    {
-      value: body,
-      language: "javascript",
-      theme: "vs-dark",
-      automaticLayout: true,
-      minimap: { enabled: false },
-      fontSize: 12,
-      fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
-      lineNumbers: "on",
-      scrollBeyondLastLine: false,
-      wordWrap: "on",
-      tabSize: 2,
-    },
-  );
+  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",
+    lineNumbers: "on",
+    scrollBeyondLastLine: false,
+    wordWrap: "on",
+    tabSize: 2,
+  });
   view.functionEditor._editingTarget = JSON.stringify(editing);
   const editor = view.functionEditor;
 
@@ -134,14 +133,14 @@ export function renderFunctionEditor(closeFunctionEditor) {
   });
   codeService("lint", { code: body, args }).then((result) => {
     if (result?.diagnostics && view.functionEditor)
-      setLintMarkers(view.functionEditor, /** @type {OxLintDiagnostic[]} */ (result.diagnostics));
+      setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
   });
 
   // Debounced sync back to state + lint on edit
   /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let syncDebounce;
+  let syncDebounce: ReturnType<typeof setTimeout> | undefined;
   /** @type {ReturnType<typeof setTimeout> | undefined} */
-  let lintDebounce;
+  let lintDebounce: ReturnType<typeof setTimeout> | undefined;
   let lintGen = 0;
   editor.onDidChangeModelContent(() => {
     if (editor._ignoreNextChange) {
@@ -152,14 +151,11 @@ export function renderFunctionEditor(closeFunctionEditor) {
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
       const newBody = editor.getValue();
-      const ed = /** @type {EditingTarget} */ (editing);
+      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(
-          /** @type {JxMutableNode} */ (activeTab.value?.doc.document),
-          ed.path,
-        );
+        const node = getNodeAtPath(activeTab.value?.doc.document as JxMutableNode, ed.path);
         const current = node?.[ed.eventKey] || {};
         transactDoc(activeTab.value, (t) =>
           mutateUpdateProperty(t, ed.path, ed.eventKey, {
@@ -179,10 +175,7 @@ export function renderFunctionEditor(closeFunctionEditor) {
       codeService("lint", { code: currentCode, args }).then((result) => {
         if (gen !== lintGen) return;
         if (result?.diagnostics && view.functionEditor)
-          setLintMarkers(
-            view.functionEditor,
-            /** @type {OxLintDiagnostic[]} */ (result.diagnostics),
-          );
+          setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
       });
     }, 750);
   });
@@ -207,11 +200,11 @@ export function registerFunctionCompletions() {
       const suggestions = Object.entries(defs).map(([key, def]) => {
         let kind = monaco.languages.CompletionItemKind.Variable;
         if (
-          /** @type {JxPrototypeDef} */ (def)?.$prototype === "Function" ||
-          /** @type {{ $handler?: unknown }} */ (def)?.$handler
+          (def as JxPrototypeDef)?.$prototype === "Function" ||
+          (def as Record<string, unknown>)?.$handler
         )
           kind = monaco.languages.CompletionItemKind.Function;
-        else if (/** @type {JxPrototypeDef} */ (def)?.$prototype)
+        else if ((def as JxPrototypeDef)?.$prototype)
           kind = monaco.languages.CompletionItemKind.Property;
         return {
           label: `state.${key}`,

package/src/panels/{elements-panel.js → elements-panel.ts}

@@ -1,14 +1,16 @@
+/// <reference lib="dom" />
 /** Elements panel — block/component palette with categorized accordion and search filter. */
 
 import { html, nothing } from "lit-html";
-import { getNodeAtPath } from "../store.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateInsertNode } from "../tabs/transact.js";
-import { view } from "../view.js";
-import { getEffectiveElements } from "../site-context.js";
-import { componentRegistry } from "../files/components.js";
+import { getNodeAtPath } from "../store";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateInsertNode } from "../tabs/transact";
+import { view } from "../view";
+import { getEffectiveElements } from "../site-context";
+import { componentRegistry } from "../files/components";
 
-/** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
+import type { ComponentEntry } from "../files/components";
+import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
 
 /**
  * @param {{
@@ -18,7 +20,11 @@ import { componentRegistry } from "../files/components.js";
  * }} ctx
  * @returns {import("lit-html").TemplateResult}
  */
-export function renderElementsTemplate(ctx) {
+export function renderElementsTemplate(ctx: {
+  webdata: { elements: Record<string, { tag: string }[]> };
+  defaultDef: (tag: string) => JxMutableNode;
+  rerender: () => void;
+}) {
   const tab = activeTab.value;
 
   const categories = Object.entries(ctx.webdata.elements).map(
@@ -32,8 +38,8 @@ export function renderElementsTemplate(ctx) {
         <sp-accordion-item
           label=${category}
           ?open=${!view.elementsCollapsed.has(category)}
-          @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-            if (/** @type {HTMLElement & { open: boolean }} */ (e.target).open)
+          @sp-accordion-item-toggle=${(e: Event) => {
+            if ((e.target as HTMLElement & { open: boolean }).open)
               view.elementsCollapsed.delete(category);
             else view.elementsCollapsed.add(category);
           }}
@@ -47,9 +53,9 @@ export function renderElementsTemplate(ctx) {
                 @click=${() => {
                   const t = activeTab.value;
                   const parentPath = t?.session.selection || [];
-                  const parent = getNodeAtPath(t?.doc.document, parentPath);
+                  const parent = getNodeAtPath(t!.doc.document, parentPath);
                   const idx = parent?.children ? parent.children.length : 0;
-                  transactDoc(t, (tr) =>
+                  transactDoc(t!, (tr) =>
                     mutateInsertNode(tr, parentPath, idx, structuredClone(def)),
                   );
                 }}
@@ -65,14 +71,13 @@ export function renderElementsTemplate(ctx) {
   );
 
   const effectiveEls = getEffectiveElements(
-    /** @type {(string | JxElement)[] | undefined} */ (tab?.doc.document?.$elements),
+    tab?.doc.document?.$elements as (string | JxElement)[] | undefined,
   );
-  /** @type {Set<string>} */
-  const enabledTags = new Set();
+  const enabledTags: Set<string> = new Set();
   for (const entry of effectiveEls) {
     if (typeof entry !== "string") continue;
     const comp = componentRegistry.find(
-      (/** @type {ComponentEntry} */ c) =>
+      (c: ComponentEntry) =>
         c.source === "npm" && c.modulePath && entry === `${c.package}/${c.modulePath}`,
     );
     if (comp) {
@@ -86,11 +91,9 @@ export function renderElementsTemplate(ctx) {
   const compsFiltered =
     componentRegistry.length > 0
       ? componentRegistry
+          .filter((c: ComponentEntry) => c.source !== "npm" || enabledTags.has(c.tagName))
           .filter(
-            (/** @type {ComponentEntry} */ c) => c.source !== "npm" || enabledTags.has(c.tagName),
-          )
-          .filter(
-            (/** @type {ComponentEntry} */ c) =>
+            (c: ComponentEntry) =>
               !view.elementsFilter || c.tagName.toLowerCase().includes(view.elementsFilter),
           )
       : [];
@@ -101,15 +104,15 @@ export function renderElementsTemplate(ctx) {
           <sp-accordion-item
             label="Components"
             ?open=${!view.elementsCollapsed.has("Components")}
-            @sp-accordion-item-toggle=${(/** @type {Event} */ e) => {
-              if (/** @type {HTMLElement & { open: boolean }} */ (e.target).open)
+            @sp-accordion-item-toggle=${(e: Event) => {
+              if ((e.target as HTMLElement & { open: boolean }).open)
                 view.elementsCollapsed.delete("Components");
               else view.elementsCollapsed.add("Components");
             }}
           >
             <div class="components-section">
               ${compsFiltered.map(
-                (/** @type {ComponentEntry} */ comp) => html`
+                (comp: ComponentEntry) => html`
                   <div
                     class="element-card"
                     data-component-tag=${comp.tagName}
@@ -119,7 +122,7 @@ export function renderElementsTemplate(ctx) {
                     @click=${() => {
                       const t = activeTab.value;
                       const parentPath = t?.session.selection || [];
-                      const parent = getNodeAtPath(t?.doc.document, parentPath);
+                      const parent = getNodeAtPath(t!.doc.document, parentPath);
                       const idx = parent?.children ? parent.children.length : 0;
                       const instanceDef = {
                         tagName: comp.tagName,
@@ -132,7 +135,7 @@ export function renderElementsTemplate(ctx) {
                           ),
                         ),
                       };
-                      transactDoc(t, (tr) =>
+                      transactDoc(t!, (tr) =>
                         mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)),
                       );
                     }}
@@ -156,8 +159,8 @@ export function renderElementsTemplate(ctx) {
       size="s"
       placeholder="Filter elements…"
       value=${view.elementsFilter}
-      @input=${(/** @type {Event} */ e) => {
-        view.elementsFilter = /** @type {HTMLInputElement} */ (e.target).value.toLowerCase();
+      @input=${(e: Event) => {
+        view.elementsFilter = (e.target as HTMLInputElement).value.toLowerCase();
         ctx.rerender();
       }}
     ></sp-search>

package/src/panels/{events-panel.js → events-panel.ts}

@@ -1,9 +1,12 @@
-import { getNodeAtPath } from "../store.js";
+/// <reference lib="dom" />
+import { getNodeAtPath } from "../store";
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
-import { activeTab } from "../workspace/workspace.js";
-import { transactDoc, mutateUpdateProperty } from "../tabs/transact.js";
-import { renderExpressionEditor } from "../ui/expression-editor.js";
+import { activeTab } from "../workspace/workspace";
+import { transactDoc, mutateUpdateProperty } from "../tabs/transact";
+import { renderExpressionEditor } from "../ui/expression-editor";
+
+import type { JxPrototypeDef } from "@jxsuite/schema/types";
 
 export const EVENT_NAMES = [
   "onclick",
@@ -19,28 +22,29 @@ export const EVENT_NAMES = [
 ];
 
 /** @param {{ isCustomElementDoc: () => boolean }} helpers */
-export function eventsSidebarTemplate(helpers) {
+export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boolean }) {
   const { isCustomElementDoc } = helpers;
   const tab = activeTab.value;
   const selection = tab?.session.selection;
   const document = tab?.doc.document;
   if (!selection) return html`<div class="empty-state">Select an element to edit events</div>`;
-  const node = getNodeAtPath(document, selection);
+  const node = getNodeAtPath(document!, selection);
   if (!node) return html`<div class="empty-state">Node not found</div>`;
 
-  const defs = document.state || {};
+  const defs = document!.state || {};
   const functionDefs = Object.entries(defs).filter(
-    ([, d]) => d.$prototype === "Function" || d.$handler,
+    ([, d]) =>
+      (d as JxPrototypeDef)?.$prototype === "Function" || (d as Record<string, unknown>)?.$handler,
   );
 
   // Declared CEM events (custom element docs)
-  /** @type {unknown} */
-  let declaredEventsT = nothing;
+  let declaredEventsT: unknown = nothing;
   if (isCustomElementDoc()) {
-    const allEmits = [];
+    const allEmits: Record<string, unknown>[] = [];
     for (const [fnName, d] of Object.entries(defs)) {
-      if (Array.isArray(d.emits)) {
-        for (const ev of d.emits) allEmits.push({ ...ev, _fn: fnName });
+      if (Array.isArray((d as Record<string, unknown>).emits)) {
+        for (const ev of (d as Record<string, unknown>).emits as Record<string, unknown>[])
+          allEmits.push({ ...ev, _fn: fnName });
       }
     }
     if (allEmits.length > 0) {
@@ -52,7 +56,11 @@ export function eventsSidebarTemplate(helpers) {
               <div class="declared-event-row" title=${ev.description || ""}>
                 <code class="event-code">${ev.name || "(unnamed)"}</code>
                 <span class="event-source">← ${ev._fn}</span>
-                ${ev.type?.text ? html`<span class="event-type">${ev.type.text}</span>` : nothing}
+                ${(ev.type as Record<string, unknown>)?.text
+                  ? html`<span class="event-type"
+                      >${(ev.type as Record<string, unknown>).text}</span
+                    >`
+                  : nothing}
               </div>
             `,
           )}
@@ -89,8 +97,8 @@ export function eventsSidebarTemplate(helpers) {
                   size="s"
                   class="event-name"
                   .value=${live(evKey)}
-                  @change=${(/** @type {Event} */ e) => {
-                    const newKey = /** @type {HTMLInputElement} */ (e.target).value;
+                  @change=${(e: Event) => {
+                    const newKey = (e.target as HTMLInputElement).value;
                     if (newKey && newKey !== evKey) {
                       transactDoc(activeTab.value, (t) => {
                         mutateUpdateProperty(t, selection, evKey, undefined);
@@ -107,8 +115,8 @@ export function eventsSidebarTemplate(helpers) {
                   size="s"
                   class="event-mode"
                   .value=${live(currentMode)}
-                  @change=${(/** @type {Event} */ e) => {
-                    const newMode = /** @type {HTMLInputElement} */ (e.target).value;
+                  @change=${(e: Event) => {
+                    const newMode = (e.target as HTMLInputElement).value;
                     if (newMode === "inline") {
                       transactDoc(activeTab.value, (t) =>
                         mutateUpdateProperty(t, selection, evKey, {
@@ -160,11 +168,11 @@ export function eventsSidebarTemplate(helpers) {
                         grows
                         placeholder="// handler body"
                         .value=${live(evVal.body || "")}
-                        @input=${(/** @type {Event} */ e) => {
+                        @input=${(e: Event) => {
                           transactDoc(activeTab.value, (t) =>
                             mutateUpdateProperty(t, selection, evKey, {
                               $prototype: "Function",
-                              body: /** @type {HTMLInputElement} */ (e.target).value,
+                              body: (e.target as HTMLInputElement).value,
                               parameters: evVal.parameters || [],
                             }),
                           );
@@ -192,7 +200,7 @@ export function eventsSidebarTemplate(helpers) {
                       <div class="event-body-row">
                         ${renderExpressionEditor(
                           evVal.$expression,
-                          (/** @type {any} */ newNode) =>
+                          (newNode: any) =>
                             transactDoc(activeTab.value, (t) =>
                               mutateUpdateProperty(t, selection, evKey, {
                                 $expression: newNode,
@@ -207,14 +215,14 @@ export function eventsSidebarTemplate(helpers) {
                         size="s"
                         class="event-handler"
                         .value=${live(evVal.$ref || "__none__")}
-                        @change=${(/** @type {Event} */ e) => {
+                        @change=${(e: Event) => {
                           if (
-                            /** @type {HTMLInputElement} */ (e.target).value &&
-                            /** @type {HTMLInputElement} */ (e.target).value !== "__none__"
+                            (e.target as HTMLInputElement).value &&
+                            (e.target as HTMLInputElement).value !== "__none__"
                           ) {
                             transactDoc(activeTab.value, (t) =>
                               mutateUpdateProperty(t, selection, evKey, {
-                                $ref: /** @type {HTMLInputElement} */ (e.target).value,
+                                $ref: (e.target as HTMLInputElement).value,
                               }),
                             );
                           } else {