@jxsuite/studio 0.23.2 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.23.2",
+  "version": "0.25.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -15,14 +15,15 @@
   ],
   "type": "module",
   "exports": {
-    ".": "./src/studio.js",
-    "./platform.js": "./src/platform.js"
+    ".": "./src/studio.ts",
+    "./platform": "./src/platform.ts",
+    "./types": "./src/types.ts"
   },
   "publishConfig": {
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.js --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
+    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
     "gen:webdata": "bun run scripts/gen-webdata.js",
     "test": "bun test --isolate",
     "test:coverage": "bun test --isolate --coverage",
@@ -31,9 +32,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.23.2",
-    "@jxsuite/runtime": "^0.23.2",
-    "@jxsuite/schema": "^0.23.2",
+    "@jxsuite/parser": "^0.25.0",
+    "@jxsuite/runtime": "^0.25.0",
+    "@jxsuite/schema": "^0.25.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

package/src/browse/{browse-modal.js → browse-modal.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Browse modal — fullscreen overlay for the project file browser (Manage view). Opens via toolbar
  * button; selecting a file closes the modal and opens it in the editor.
@@ -5,20 +6,18 @@
 
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { renderBrowse } from "./browse.js";
-import { openFileInTab } from "../files/files.js";
-import { openModal } from "../ui/layers.js";
+import { renderBrowse } from "./browse";
+import { openFileInTab } from "../files/files";
+import { openModal } from "../ui/layers";
 
-/** @type {ReturnType<typeof openModal> | null} */
-let _handle = null;
+let _handle: ReturnType<typeof openModal> | null = null;
 
-/** @type {((e: KeyboardEvent) => void) | null} */
-let _escHandler = null;
+let _escHandler: ((e: KeyboardEvent) => void) | null = null;
 
 export function openBrowseModal() {
   if (_handle) return;
 
-  _escHandler = (/** @type {KeyboardEvent} */ e) => {
+  _escHandler = (e: KeyboardEvent) => {
     if (e.key === "Escape") closeBrowseModal();
   };
   document.addEventListener("keydown", _escHandler, true);
@@ -37,8 +36,8 @@ export function openBrowseModal() {
         ${ref((el) => {
           if (el) {
             requestAnimationFrame(() => {
-              renderBrowse(/** @type {HTMLElement} */ (el), {
-                openFile: (/** @type {string} */ path) => {
+              renderBrowse(el as HTMLElement, {
+                openFile: (path: string) => {
                   closeBrowseModal();
                   openFileInTab(path);
                 },

package/src/browse/{browse.js → browse.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Manage view — project-level file browser with grid and table views.
  *
@@ -9,18 +10,20 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { repeat } from "lit-html/directives/repeat.js";
-import { getPlatform } from "../platform.js";
-import { projectState } from "../store.js";
-import { yamlDefault } from "../settings/schema-field-ui.js";
-import { invalidateMediaCache } from "../ui/media-picker.js";
-import { statusMessage } from "../panels/statusbar.js";
-import { componentRegistry } from "../files/components.js";
-
-/** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
-import { showDialog, renderPopover } from "../ui/layers.js";
-import { renderComponentPreview } from "../panels/stylebook-panel.js";
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import { yamlDefault } from "../settings/schema-field-ui";
+import { invalidateMediaCache } from "../ui/media-picker";
+import { statusMessage } from "../panels/statusbar";
+import { componentRegistry } from "../files/components";
+
+import { showDialog, renderPopover } from "../ui/layers";
+import { renderComponentPreview } from "../panels/stylebook-panel";
 import { renderNode, buildScope, setSkipServerFunctions } from "@jxsuite/runtime";
-import { loadMarkdown } from "../files/file-ops.js";
+import { loadMarkdown } from "../files/file-ops";
+
+import type { ComponentEntry } from "../files/components";
+import type { ContentTypeDef } from "@jxsuite/schema/types";
 
 // ─── Category definitions ────────────────────────────────────────────────────
 
@@ -58,10 +61,8 @@ const MEDIA_EXTENSIONS = new Set([
 
 let activeCategory = "all";
 let searchQuery = "";
-/** @type {"grid" | "table"} */
-let viewMode = "grid";
-/** @type {{ name: string; path: string; type: string; category: string; ext: string }[]} */
-let fileCache = [];
+let viewMode: "grid" | "table" = "grid";
+let fileCache: { name: string; path: string; type: string; category: string; ext: string }[] = [];
 let loading = false;
 /** Track which projectDirs were used for the last load, so we re-scan when they change. */
 let lastProjectDirsKey = "";
@@ -69,7 +70,7 @@ let lastProjectDirsKey = "";
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
 /** @param {string} name */
-function extOf(name) {
+function extOf(name: string) {
   const dot = name.lastIndexOf(".");
   return dot > 0 ? name.slice(dot).toLowerCase() : "";
 }
@@ -86,12 +87,12 @@ const IMAGE_EXTENSIONS = new Set([
 ]);
 
 /** @param {string} ext */
-function isImage(ext) {
+function isImage(ext: string) {
   return IMAGE_EXTENSIONS.has(ext);
 }
 
 /** Map a file path to a display category. Media files override by extension. */
-function categoryFor(/** @type {string} */ dir, /** @type {string} */ ext) {
+function categoryFor(dir: string, ext: string) {
   if (ext && MEDIA_EXTENSIONS.has(ext)) return "Media";
   if (dir.startsWith("pages")) return "Pages";
   if (dir.startsWith("layouts")) return "Layouts";
@@ -112,9 +113,11 @@ function categoryFor(/** @type {string} */ dir, /** @type {string} */ ext) {
  *   { name: string; path: string; type: string; category: string; ext: string }[]
  * >}
  */
-async function collectFiles(dir, platform) {
-  /** @type {{ name: string; path: string; type: string; category: string; ext: string }[]} */
-  const results = [];
+async function collectFiles(
+  dir: string,
+  platform: ReturnType<typeof getPlatform>,
+): Promise<{ name: string; path: string; type: string; category: string; ext: string }[]> {
+  const results: { name: string; path: string; type: string; category: string; ext: string }[] = [];
   try {
     const entries = await platform.listDirectory(dir);
     for (const entry of entries) {
@@ -148,11 +151,11 @@ async function collectFiles(dir, platform) {
  * @param {string} filePath
  * @returns {string | null}
  */
-function contentTypeFor(filePath) {
+function contentTypeFor(filePath: string) {
   const config = projectState?.projectConfig;
   if (!config?.contentTypes) return null;
   for (const [name, def] of Object.entries(config.contentTypes)) {
-    const d = /** @type {ContentTypeDef} */ (def);
+    const d = def as ContentTypeDef;
     if (!d.source) continue;
     const prefix = d.source.replace(/^\.\//, "").replace(/\/$/, "");
     if (filePath.startsWith(prefix + "/") || filePath === prefix) {
@@ -170,7 +173,7 @@ async function loadFiles() {
   const platform = getPlatform();
   const dirs = projectState.projectDirs || [];
   lastProjectDirsKey = dirs.join(",");
-  const all = await Promise.all(dirs.map((/** @type {string} */ d) => collectFiles(d, platform)));
+  const all = await Promise.all(dirs.map((d: string) => collectFiles(d, platform)));
   fileCache = all.flat();
   fileCache.sort((a, b) => a.path.localeCompare(b.path));
   loading = false;
@@ -210,7 +213,7 @@ const ENTITY_TYPES = [
  * @param {string} contentTypeName
  * @returns {string}
  */
-function buildFrontmatterYaml(contentTypeName) {
+function buildFrontmatterYaml(contentTypeName: string) {
   const config = projectState?.projectConfig;
   const col = config?.contentTypes?.[contentTypeName];
   if (!col?.schema?.properties) return "title: Untitled\n";
@@ -232,7 +235,7 @@ function getContentTypeTypes() {
   const config = projectState?.projectConfig;
   if (!config?.contentTypes) return [];
   return Object.entries(config.contentTypes).map(([name, def]) => {
-    const d = /** @type {ContentTypeDef} */ (def);
+    const d = def as ContentTypeDef;
     const dir = d.source ? d.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       key: `contentType:${name}`,
@@ -251,7 +254,11 @@ function getContentTypeTypes() {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-async function handleNewEntity(typeKey, container, ctx) {
+async function handleNewEntity(
+  typeKey: string,
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const isContentType = typeKey.startsWith("contentType:");
   const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
   const allTypes = [...ENTITY_TYPES, ...getContentTypeTypes()];
@@ -304,7 +311,11 @@ const UPLOAD_ACCEPT = [
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-async function handleUpload(files, container, ctx) {
+async function handleUpload(
+  files: FileList | File[],
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const platform = getPlatform();
   for (const file of files) {
     const destPath = `public/${file.name}`;
@@ -317,8 +328,7 @@ async function handleUpload(files, container, ctx) {
 
 // ─── Context menu ───────────────────────────────────────────────────────────
 
-/** @type {ReturnType<typeof renderPopover> | null} */
-let _browseCtxHandle = null;
+let _browseCtxHandle: ReturnType<typeof renderPopover> | null = null;
 
 function dismissBrowseContextMenu() {
   if (_browseCtxHandle) {
@@ -333,7 +343,12 @@ function dismissBrowseContextMenu() {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-function showBrowseContextMenu(e, file, container, ctx) {
+function showBrowseContextMenu(
+  e: MouseEvent,
+  file: { name: string; path: string; ext: string },
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   e.preventDefault();
   e.stopPropagation();
   dismissBrowseContextMenu();
@@ -368,7 +383,7 @@ function showBrowseContextMenu(e, file, container, ctx) {
       ${ref((el) => {
         if (!el) return;
         requestAnimationFrame(() => {
-          const popover = /** @type {HTMLElement} */ (el);
+          const popover = el as HTMLElement;
           const menuRect = popover.getBoundingClientRect();
           if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
           if (y + menuRect.height > window.innerHeight)
@@ -408,7 +423,11 @@ function showBrowseContextMenu(e, file, container, ctx) {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-async function browseRenameFile(file, container, ctx) {
+async function browseRenameFile(
+  file: { name: string; path: string; ext: string },
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const newName = await showRenameDialog(file.name);
   if (!newName || newName === file.name) return;
   const filePath = file.path.replaceAll("\\", "/");
@@ -420,8 +439,8 @@ async function browseRenameFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Renamed to ${newName}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -430,7 +449,11 @@ async function browseRenameFile(file, container, ctx) {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-async function browseDuplicateFile(file, container, ctx) {
+async function browseDuplicateFile(
+  file: { name: string; path: string; ext: string },
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const filePath = file.path.replaceAll("\\", "/");
   const parentDir = filePath.includes("/") ? filePath.substring(0, filePath.lastIndexOf("/")) : ".";
   const baseName = file.name.replace(/(\.[^.]+)$/, "");
@@ -444,8 +467,8 @@ async function browseDuplicateFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Duplicated as ${copyName}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -454,7 +477,11 @@ async function browseDuplicateFile(file, container, ctx) {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-async function browseDeleteFile(file, container, ctx) {
+async function browseDeleteFile(
+  file: { name: string; path: string; ext: string },
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const confirmed = await showDeleteDialog(file.name);
   if (!confirmed) return;
   try {
@@ -463,8 +490,8 @@ async function browseDeleteFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Deleted ${file.name}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -474,10 +501,10 @@ async function browseDeleteFile(file, container, ctx) {
  * @param {string} currentName
  * @returns {Promise<string | null>}
  */
-function showRenameDialog(currentName) {
+function showRenameDialog(currentName: string): Promise<string | null> {
   let value = currentName;
 
-  return showDialog((done) => {
+  return showDialog<string | null>((done) => {
     function confirm() {
       const trimmed = value.trim();
       if (!trimmed) return;
@@ -499,10 +526,10 @@ function showRenameDialog(currentName) {
         <sp-textfield
           style="width:100%"
           value=${value}
-          @input=${(/** @type {Event} */ e) => {
-            value = /** @type {HTMLInputElement} */ (e.target).value || "";
+          @input=${(e: Event) => {
+            value = (e.target as HTMLInputElement).value || "";
           }}
-          @keydown=${(/** @type {KeyboardEvent} */ e) => {
+          @keydown=${(e: KeyboardEvent) => {
             if (e.key === "Enter") confirm();
           }}
         ></sp-textfield>
@@ -511,7 +538,7 @@ function showRenameDialog(currentName) {
 
     requestAnimationFrame(() => {
       const layer = document.getElementById("layer-dialog");
-      const tf = /** @type {HTMLElement | null} */ (layer?.querySelector("sp-textfield"));
+      const tf = layer?.querySelector("sp-textfield") as HTMLElement | null;
       if (tf) {
         tf.focus();
         const input = tf.shadowRoot?.querySelector("input");
@@ -527,7 +554,7 @@ function showRenameDialog(currentName) {
  * @param {string} fileName
  * @returns {Promise<boolean>}
  */
-function showDeleteDialog(fileName) {
+function showDeleteDialog(fileName: string) {
   return showDialog(
     (done) => html`
       <sp-dialog-wrapper
@@ -549,8 +576,7 @@ function showDeleteDialog(fileName) {
 
 // ─── Grid view helpers ──────────────────────────────────────────────────────
 
-/** @type {Map<string, HTMLElement>} */
-const _previewCache = new Map();
+const _previewCache: Map<string, HTMLElement> = new Map();
 
 /**
  * Render a live preview for a page or layout file (JSON or Markdown).
@@ -558,7 +584,7 @@ const _previewCache = new Map();
  * @param {string} filePath
  * @returns {Promise<HTMLElement | null>}
  */
-async function renderDocPreview(filePath) {
+async function renderDocPreview(filePath: string) {
   try {
     const platform = getPlatform();
     const content = await platform.readFile(filePath);
@@ -572,7 +598,7 @@ async function renderDocPreview(filePath) {
     }
     const scope = buildScope(doc.state || {});
     const el = renderNode(doc, scope);
-    return /** @type {HTMLElement | null} */ (el);
+    return el as HTMLElement | null;
   } catch {
     return null;
   }
@@ -584,22 +610,18 @@ async function renderDocPreview(filePath) {
  * @param {Element} el — the .element-card-preview div
  * @param {{ path: string; category: string }} file
  */
-async function loadPreview(el, file) {
+async function loadPreview(el: Element, file: { path: string; category: string }) {
   // Already populated
   if (el.firstElementChild) return;
 
-  /** @type {HTMLElement | undefined} */
-  let preview = _previewCache.get(file.path);
+  let preview: HTMLElement | undefined = _previewCache.get(file.path);
   if (!preview) {
     try {
-      const comp = componentRegistry.find(
-        (/** @type {ComponentEntry} */ c) => c.path === file.path,
-      );
+      const comp = componentRegistry.find((c: ComponentEntry) => c.path === file.path);
       if (comp) {
-        preview = /** @type {HTMLElement | undefined} */ (await renderComponentPreview(comp));
+        preview = (await renderComponentPreview(comp)) as HTMLElement | undefined;
       } else {
-        preview = /** @type {HTMLElement | undefined} */ (await renderDocPreview(file.path)) ||
-        undefined;
+        preview = ((await renderDocPreview(file.path)) as HTMLElement | undefined) || undefined;
       }
       if (preview) _previewCache.set(file.path, /** @type {HTMLElement} */ (preview));
     } catch {
@@ -616,7 +638,11 @@ async function loadPreview(el, file) {
  * @param {HTMLElement} container
  * @param {{ openFile: (path: string) => void }} ctx
  */
-function renderCard(file, container, ctx) {
+function renderCard(
+  file: { name: string; path: string; type: string; category: string; ext: string },
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   const isImg = isImage(file.ext);
   const needsPreview =
     file.category === "Components" ||
@@ -628,13 +654,12 @@ function renderCard(file, container, ctx) {
     <div
       class="element-card"
       @click=${() => ctx.openFile(file.path)}
-      @contextmenu=${(/** @type {MouseEvent} */ e) =>
-        showBrowseContextMenu(e, file, container, ctx)}
+      @contextmenu=${(e: MouseEvent) => showBrowseContextMenu(e, file, container, ctx)}
     >
       <div
         class="element-card-preview"
         ${needsPreview
-          ? ref((/** @type {Element | undefined} */ el) => {
+          ? ref((el: Element | undefined) => {
               if (el) loadPreview(el, file);
             })
           : nothing}
@@ -661,7 +686,10 @@ function renderCard(file, container, ctx) {
  * @param {HTMLElement} container — the #canvas-wrap element
  * @param {{ openFile: (path: string) => void }} ctx — callbacks from studio.js
  */
-export async function renderBrowse(container, ctx) {
+export async function renderBrowse(
+  container: HTMLElement,
+  ctx: { openFile: (path: string) => void },
+) {
   // Re-load when projectDirs changed (e.g. project opened after initial render)
   const currentKey = (projectState?.projectDirs || []).join(",");
   if ((!fileCache.length && !loading) || currentKey !== lastProjectDirsKey) {
@@ -693,11 +721,11 @@ export async function renderBrowse(container, ctx) {
       size="s"
       placeholder="Filter files..."
       .value=${searchQuery}
-      @input=${(/** @type {Event} */ e) => {
-        searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
+      @input=${(e: Event) => {
+        searchQuery = (e.target as HTMLInputElement).value;
         renderBrowse(container, ctx);
       }}
-      @submit=${(/** @type {Event} */ e) => e.preventDefault()}
+      @submit=${(e: Event) => e.preventDefault()}
     ></sp-search>
     <overlay-trigger placement="bottom-start" triggered-by="click">
       <sp-action-button size="s" slot="trigger">
@@ -705,8 +733,8 @@ export async function renderBrowse(container, ctx) {
       </sp-action-button>
       <sp-popover slot="click-content" tip>
         <sp-menu
-          @change=${(/** @type {Event} */ e) =>
-            handleNewEntity(/** @type {HTMLSelectElement} */ (e.target).value, container, ctx)}
+          @change=${(e: Event) =>
+            handleNewEntity((e.target as HTMLSelectElement).value, container, ctx)}
         >
           ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
           ${contentTypeTypes.length
@@ -720,9 +748,7 @@ export async function renderBrowse(container, ctx) {
     <sp-action-button
       size="s"
       @click=${() => {
-        const input = /** @type {HTMLInputElement} */ (
-          container.querySelector(".browse-upload-input")
-        );
+        const input = container.querySelector(".browse-upload-input") as HTMLInputElement;
         if (input) input.click();
       }}
     >
@@ -734,8 +760,8 @@ export async function renderBrowse(container, ctx) {
       accept=${UPLOAD_ACCEPT}
       class="browse-upload-input"
       style="display:none"
-      @change=${(/** @type {Event} */ e) => {
-        const input = /** @type {HTMLInputElement} */ (e.target);
+      @change=${(e: Event) => {
+        const input = e.target as HTMLInputElement;
         if (input.files?.length) handleUpload(input.files, container, ctx);
         input.value = "";
       }}
@@ -790,8 +816,7 @@ export async function renderBrowse(container, ctx) {
                   class="browse-row"
                   style=${isImage(f.ext) ? "cursor:default" : ""}
                   @click=${isImage(f.ext) ? nothing : () => ctx.openFile(f.path)}
-                  @contextmenu=${(/** @type {MouseEvent} */ e) =>
-                    showBrowseContextMenu(e, f, container, ctx)}
+                  @contextmenu=${(e: MouseEvent) => showBrowseContextMenu(e, f, container, ctx)}
                 >
                   <sp-table-cell class="browse-name-cell"
                     >${isImage(f.ext)
@@ -824,16 +849,16 @@ export async function renderBrowse(container, ctx) {
   const tpl = html`
     <div
       class="browse-view"
-      @dragover=${(/** @type {DragEvent} */ e) => {
+      @dragover=${(e: DragEvent) => {
         e.preventDefault();
-        /** @type {HTMLElement} */ (e.currentTarget).classList.add("browse-drop-active");
+        (e.currentTarget as HTMLElement).classList.add("browse-drop-active");
       }}
-      @dragleave=${(/** @type {DragEvent} */ e) => {
-        /** @type {HTMLElement} */ (e.currentTarget).classList.remove("browse-drop-active");
+      @dragleave=${(e: DragEvent) => {
+        (e.currentTarget as HTMLElement).classList.remove("browse-drop-active");
       }}
-      @drop=${(/** @type {DragEvent} */ e) => {
+      @drop=${(e: DragEvent) => {
         e.preventDefault();
-        /** @type {HTMLElement} */ (e.currentTarget).classList.remove("browse-drop-active");
+        (e.currentTarget as HTMLElement).classList.remove("browse-drop-active");
         const droppedFiles = e.dataTransfer?.files;
         if (droppedFiles?.length) handleUpload(droppedFiles, container, ctx);
       }}