@jxsuite/studio 0.23.2 → 0.24.0

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

@@ -1,3 +1,5 @@
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
 /**
  * File tree management — project loading, file tree rendering, and file CRUD.
  *
@@ -10,14 +12,14 @@ import { classMap } from "lit-html/directives/class-map.js";
 import { ref } from "lit-html/directives/ref.js";
 import { unified } from "unified";
 import remarkStringify from "remark-stringify";
-import { renderPopover, showDialog, showConfirmDialog } from "../ui/layers.js";
+import { renderPopover, showDialog, showConfirmDialog } from "../ui/layers";
 import remarkDirective from "remark-directive";
 import { stringify as stringifyYaml } from "yaml";
-import { jxToMd } from "../markdown/md-convert.js";
-import { createState, projectState, setProjectState, requireProjectState } from "../store.js";
-import { getPlatform } from "../platform.js";
-import { statusMessage } from "../panels/statusbar.js";
-import { loadComponentRegistry } from "./components.js";
+import { jxToMd } from "../markdown/md-convert";
+import { createState, projectState, setProjectState, requireProjectState } from "../store";
+import { getPlatform } from "../platform";
+import { statusMessage } from "../panels/statusbar";
+import { loadComponentRegistry } from "./components";
 import {
   draggable,
   dropTargetForElements,
@@ -31,25 +33,27 @@ import {
   renameTab,
   replaceAllTabs,
   activeTab,
-} from "../workspace/workspace.js";
-import { loadMarkdown } from "./file-ops.js";
-import { view } from "../view.js";
-import { addRecentProject, trackRecentFile } from "../recent-projects.js";
+} from "../workspace/workspace";
+import { loadMarkdown } from "./file-ops";
+import { view } from "../view";
+import { addRecentProject, trackRecentFile } from "../recent-projects";
+
+import type { JxElement } from "@jxsuite/schema/types";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
-const fileIconMap = /** @type {Record<string, import("lit-html").TemplateResult>} */ ({
+const fileIconMap = {
   "sp-icon-folder-open": html`<sp-icon-folder-open></sp-icon-folder-open>`,
   "sp-icon-folder": html`<sp-icon-folder></sp-icon-folder>`,
   "sp-icon-file-code": html`<sp-icon-file-code></sp-icon-file-code>`,
   "sp-icon-file-txt": html`<sp-icon-file-txt></sp-icon-file-txt>`,
   "sp-icon-image": html`<sp-icon-image></sp-icon-image>`,
   "sp-icon-document": html`<sp-icon-document></sp-icon-document>`,
-});
+} as Record<string, import("lit-html").TemplateResult>;
 
 // ─── File management ──────────────────────────────────────────────────────────
 
-export async function loadDirectory(/** @type {string} */ dirPath) {
+export async function loadDirectory(dirPath: string) {
   if (!projectState) return;
   try {
     const platform = getPlatform();
@@ -102,7 +106,13 @@ export async function loadProject() {
  *   renderLeftPanel: () => void;
  * }} ctx
  */
-export async function openProject({ renderActivityBar, renderLeftPanel }) {
+export async function openProject({
+  renderActivityBar,
+  renderLeftPanel,
+}: {
+  renderActivityBar: () => void;
+  renderLeftPanel: () => void;
+}) {
   try {
     const platform = getPlatform();
     const result = await platform.openProject();
@@ -155,8 +165,8 @@ export async function openProject({ renderActivityBar, renderLeftPanel }) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -174,7 +184,7 @@ export async function openHomePage() {
 
 // ─── File tree templates ──────────────────────────────────────────────────────
 
-function fileTypeIconTpl(/** @type {string} */ name, /** @type {string} */ type) {
+function fileTypeIconTpl(name: string, type: string) {
   let tag;
   if (type === "directory") {
     tag = projectState?.expanded?.has(name) ? "sp-icon-folder-open" : "sp-icon-folder";
@@ -223,6 +233,10 @@ export function renderFilesTemplate({
   openProject: openProjectFn,
   openFileFromTree: openFileFn,
   renderLeftPanel,
+}: {
+  openProject: () => void;
+  openFileFromTree: (path: string) => void;
+  renderLeftPanel: () => void;
 }) {
   if (!projectState) {
     return html`<div class="file-tree-empty">No project loaded</div>`;
@@ -273,11 +287,11 @@ export function renderFilesTemplate({
         quiet
         placeholder="Filter files…"
         value=${requireProjectState().searchQuery}
-        @input=${(/** @type {Event} */ e) => {
-          requireProjectState().searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
+        @input=${(e: Event) => {
+          requireProjectState().searchQuery = (e.target as HTMLInputElement).value;
           renderLeftPanel();
         }}
-        @submit=${(/** @type {Event} */ e) => e.preventDefault()}
+        @submit=${(e: Event) => e.preventDefault()}
       ></sp-search>
     </div>
     <div class="file-tree" role="tree" aria-label="Project files">
@@ -288,10 +302,10 @@ export function renderFilesTemplate({
 
 /** @returns {import("lit-html").TemplateResult | import("lit-html").TemplateResult[]} */
 function renderTreeLevelTemplate(
-  /** @type {string} */ dirPath,
-  /** @type {number} */ depth,
-  /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
-) {
+  dirPath: string,
+  depth: number,
+  ctx: { openFileFn: (path: string) => void; renderLeftPanel: () => void },
+): import("lit-html").TemplateResult | import("lit-html").TemplateResult[] {
   const entries = requireProjectState().dirs.get(dirPath);
   if (!entries) {
     loadDirectory(dirPath).then(() => ctx.renderLeftPanel());
@@ -329,7 +343,7 @@ function renderTreeLevelTemplate(
         data-path=${entry.path}
         data-type=${entry.type}
         aria-expanded=${isDir ? String(isExpanded) : nothing}
-        @click=${async (/** @type {MouseEvent} */ e) => {
+        @click=${async (e: MouseEvent) => {
           e.stopPropagation();
           if (isDir) {
             if (isExpanded) requireProjectState().expanded.delete(entry.path);
@@ -342,7 +356,7 @@ function renderTreeLevelTemplate(
             ctx.openFileFn(entry.path);
           }
         }}
-        @contextmenu=${(/** @type {MouseEvent} */ e) => {
+        @contextmenu=${(e: MouseEvent) => {
           e.preventDefault();
           e.stopPropagation();
           showFileContextMenu(e, entry, ctx);
@@ -361,10 +375,10 @@ function renderTreeLevelTemplate(
   });
 }
 
-export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
-  tree.addEventListener("keydown", (/** @type {KeyboardEvent} */ e) => {
-    const items = /** @type {HTMLElement[]} */ ([...tree.querySelectorAll(".file-tree-item")]);
-    const focused = /** @type {HTMLElement | null} */ (tree.querySelector(".file-tree-item:focus"));
+export function setupTreeKeyboard(tree: HTMLElement) {
+  tree.addEventListener("keydown", (e: KeyboardEvent) => {
+    const items = [...tree.querySelectorAll(".file-tree-item")] as HTMLElement[];
+    const focused = tree.querySelector(".file-tree-item:focus") as HTMLElement | null;
     if (!focused || items.length === 0) return;
 
     const idx = items.indexOf(focused);
@@ -379,22 +393,20 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
         break;
       case "ArrowRight":
         if (focused.dataset.type === "directory") {
-          const path = /** @type {string} */ (focused.dataset.path);
+          const path = focused.dataset.path as string;
           if (!requireProjectState().expanded.has(path)) {
             requireProjectState().expanded.add(path);
             loadDirectory(path).then(() => {
               const panel = tree.closest(".panel-body");
               if (panel)
-                /** @type {HTMLElement | null} */ (
-                  panel.querySelector(".file-tree-item:focus")
-                )?.click();
+                (panel.querySelector(".file-tree-item:focus") as HTMLElement | null)?.click();
             });
           }
         }
         break;
       case "ArrowLeft":
         if (focused.dataset.type === "directory") {
-          const path = /** @type {string} */ (focused.dataset.path);
+          const path = focused.dataset.path as string;
           if (requireProjectState().expanded.has(path)) {
             requireProjectState().expanded.delete(path);
             // renderLeftPanel will be called by the caller who sets up keyboard
@@ -415,24 +427,23 @@ export function setupTreeKeyboard(/** @type {HTMLElement} */ tree) {
   if (first) first.setAttribute("tabindex", "0");
 }
 
-/** @type {(() => void)[]} */
-let _fileTreeDndCleanups = [];
+let _fileTreeDndCleanups: (() => void)[] = [];
 
 /**
  * Register drag-and-drop on file tree items. Called after each file tree render.
  *
  * @param {{ renderLeftPanel: () => void }} ctx
  */
-export function registerFileTreeDnD({ renderLeftPanel }) {
+export function registerFileTreeDnD({ renderLeftPanel }: { renderLeftPanel: () => void }) {
   // Clean up previous registrations
   for (const fn of _fileTreeDndCleanups) fn();
   _fileTreeDndCleanups = [];
 
   requestAnimationFrame(() => {
-    const tree = /** @type {HTMLElement | null} */ (document.querySelector(".file-tree"));
+    const tree = document.querySelector(".file-tree") as HTMLElement | null;
     if (!tree) return;
 
-    const items = /** @type {NodeListOf<HTMLElement>} */ (tree.querySelectorAll(".file-tree-item"));
+    const items = tree.querySelectorAll(".file-tree-item") as NodeListOf<HTMLElement>;
 
     items.forEach((row) => {
       const path = row.dataset.path;
@@ -460,7 +471,7 @@ export function registerFileTreeDnD({ renderLeftPanel }) {
             element: row,
             canDrop({ source }) {
               if (source.data.type !== "file-tree") return false;
-              const srcPath = /** @type {string} */ (source.data.path);
+              const srcPath = source.data.path as string;
               if (srcPath === path) return false;
               if (srcPath.startsWith(path + "/")) return false;
               const srcParent = parentDir(srcPath);
@@ -494,7 +505,7 @@ export function registerFileTreeDnD({ renderLeftPanel }) {
       element: tree,
       canDrop({ source }) {
         if (source.data.type !== "file-tree") return false;
-        const srcPath = /** @type {string} */ (source.data.path);
+        const srcPath = source.data.path as string;
         return parentDir(srcPath) !== ".";
       },
       onDragEnter() {
@@ -520,14 +531,14 @@ export function registerFileTreeDnD({ renderLeftPanel }) {
         if (source.data.type !== "file-tree") return;
         if (target.data.type !== "file-tree-target") return;
 
-        const srcPath = /** @type {string} */ (source.data.path);
-        const targetDirPath = /** @type {string} */ (target.data.targetDir);
+        const srcPath = source.data.path as string;
+        const targetDirPath = target.data.targetDir as string;
         const fileName = srcPath.split("/").pop();
         const newPath = targetDirPath === "." ? fileName : `${targetDirPath}/${fileName}`;
 
         if (newPath === srcPath) return;
 
-        moveFileEntry(srcPath, /** @type {string} */ (newPath), renderLeftPanel);
+        moveFileEntry(srcPath, newPath!, renderLeftPanel);
       },
     });
     _fileTreeDndCleanups.push(monitorCleanup);
@@ -541,7 +552,7 @@ export function registerFileTreeDnD({ renderLeftPanel }) {
  * @param {string} newPath
  * @param {() => void} renderLeftPanel
  */
-async function moveFileEntry(oldPath, newPath, renderLeftPanel) {
+async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel: () => void) {
   const platform = getPlatform();
   try {
     await platform.renameFile(oldPath, newPath);
@@ -567,13 +578,13 @@ async function moveFileEntry(oldPath, newPath, renderLeftPanel) {
 
     renderLeftPanel();
     statusMessage(`Moved to ${newPath}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
 /** @param {string} path @returns {string} */
-function parentDir(path) {
+function parentDir(path: string) {
   const normalized = path.replaceAll("\\", "/");
   const lastSlash = normalized.lastIndexOf("/");
   return lastSlash === -1 ? "." : normalized.substring(0, lastSlash);
@@ -581,8 +592,7 @@ function parentDir(path) {
 
 // ─── Context menu ─────────────────────────────────────────────────────────────
 
-/** @type {ReturnType<typeof renderPopover> | null} */
-let _fileCtxHandle = null;
+let _fileCtxHandle: ReturnType<typeof renderPopover> | null = null;
 
 function dismissFileContextMenu() {
   if (_fileCtxHandle) {
@@ -592,9 +602,9 @@ function dismissFileContextMenu() {
 }
 
 function showFileContextMenu(
-  /** @type {MouseEvent} */ e,
-  /** @type {{ name: string; path: string; type: string }} */ entry,
-  /** @type {{ openFileFn: (path: string) => void; renderLeftPanel: () => void }} */ ctx,
+  e: MouseEvent,
+  entry: { name: string; path: string; type: string },
+  ctx: { openFileFn: (path: string) => void; renderLeftPanel: () => void },
 ) {
   e.preventDefault();
   dismissFileContextMenu();
@@ -630,7 +640,7 @@ function showFileContextMenu(
       ${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)
@@ -666,7 +676,7 @@ function showFileContextMenu(
 
 // ─── File CRUD ────────────────────────────────────────────────────────────────
 
-async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeftPanel) {
+async function createNewFile(dirPath = ".", renderLeftPanel: () => void) {
   const name = prompt("File name:", "untitled.json");
   if (!name) return;
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
@@ -679,15 +689,15 @@ async function createNewFile(dirPath = ".", /** @type {() => void} */ renderLeft
     await loadDirectory(dirPath);
     renderLeftPanel();
     statusMessage(`Created ${path}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
 /** @param {string} currentName @returns {Promise<string | null>} */
-function showRenameFileDialog(currentName) {
+function showRenameFileDialog(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;
@@ -708,10 +718,10 @@ function showRenameFileDialog(currentName) {
         <sp-textfield
           style="width:100%"
           value=${currentName}
-          @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>
@@ -719,7 +729,7 @@ function showRenameFileDialog(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");
@@ -731,8 +741,8 @@ function showRenameFileDialog(currentName) {
 }
 
 async function renameFile(
-  /** @type {{ name: string; path: string; type: string }} */ entry,
-  /** @type {() => void} */ renderLeftPanel,
+  entry: { name: string; path: string; type: string },
+  renderLeftPanel: () => void,
 ) {
   const newName = await showRenameFileDialog(entry.name);
   if (!newName || newName === entry.name) return;
@@ -753,14 +763,14 @@ async function renameFile(
     }
     renderLeftPanel();
     statusMessage(`Renamed to ${newName}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
 async function deleteFile(
-  /** @type {{ name: string; path: string; type: string }} */ entry,
-  /** @type {() => void} */ renderLeftPanel,
+  entry: { name: string; path: string; type: string },
+  renderLeftPanel: () => void,
 ) {
   const confirmed = await showConfirmDialog("Delete File", `Delete "${entry.name}"?`, {
     confirmLabel: "Delete",
@@ -778,8 +788,8 @@ async function deleteFile(
     }
     renderLeftPanel();
     statusMessage(`Deleted ${entry.name}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -796,7 +806,15 @@ async function deleteFile(
  * }} ctx
  * @param {string} path
  */
-export async function openFileFromTree(ctx, path) {
+export async function openFileFromTree(
+  ctx: {
+    S: import("../state.js").StudioState;
+    commit: (s: import("../state.js").StudioState) => void;
+    render: () => void;
+    loadMarkdown: (source: string, handle: unknown) => void;
+  },
+  path: string,
+) {
   const platform = getPlatform();
   // Auto-save current dirty document
   if (ctx.S.dirty && ctx.S.documentPath) {
@@ -804,11 +822,11 @@ export async function openFileFromTree(ctx, path) {
       const isContent = ctx.S.mode === "content";
       let output;
       if (isContent) {
-        const mdast = jxToMd(/** @type {JxElement} */ (ctx.S.document));
+        const mdast = jxToMd(ctx.S.document as JxElement);
         const md = unified()
           .use(remarkDirective)
           .use(remarkStringify, { bullet: "-", emphasis: "*", strong: "*" })
-          .stringify(/** @type {import("mdast").Root} */ (/** @type {unknown} */ (mdast)));
+          .stringify(mdast as unknown as import("mdast").Root);
         const fm = ctx.S.content?.frontmatter;
         const hasFrontmatter = fm && Object.keys(fm).length > 0;
         output = hasFrontmatter ? `---\n${stringifyYaml(fm).trim()}\n---\n\n${md}` : md;
@@ -816,8 +834,8 @@ export async function openFileFromTree(ctx, path) {
         output = JSON.stringify(ctx.S.document, null, 2);
       }
       await platform.writeFile(ctx.S.documentPath, output);
-    } catch (/** @type {unknown} */ e) {
-      statusMessage(`Save error: ${/** @type {Error} */ (e).message}`);
+    } catch (e) {
+      statusMessage(`Save error: ${(e as Error).message}`);
     }
   }
 
@@ -844,8 +862,8 @@ export async function openFileFromTree(ctx, path) {
 
     ctx.render();
     statusMessage(`Opened ${path}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -854,7 +872,7 @@ export async function openFileFromTree(ctx, path) {
  *
  * @param {string} path
  */
-export async function openFileInTab(path) {
+export async function openFileInTab(path: string) {
   for (const [id, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {
       activateTab(id);
@@ -882,7 +900,7 @@ export async function openFileInTab(path) {
       id,
       documentPath: path,
       document,
-      frontmatter,
+      ...(frontmatter != null && { frontmatter }),
       sourceFormat: path.endsWith(".md") ? "md" : null,
     });
     requireProjectState().selectedPath = path;
@@ -894,8 +912,8 @@ export async function openFileInTab(path) {
     }
 
     statusMessage(`Opened ${path.split("/").pop()}`);
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Error: ${(e as Error).message}`);
   }
 }
 
@@ -905,7 +923,7 @@ export async function openFileInTab(path) {
  *
  * @param {string} path
  */
-export async function reloadFileInTab(path) {
+export async function reloadFileInTab(path: string) {
   for (const [, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {
       const platform = getPlatform();

package/src/github/{github-auth.js → github-auth.ts}

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * GitHub OAuth Device Flow authentication for Jx Studio.
  *
@@ -6,7 +7,7 @@
  */
 
 import { html } from "lit-html";
-import { showDialog } from "../ui/layers.js";
+import { showDialog } from "../ui/layers";
 
 const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
 const STORAGE_KEY = "jx_github_token";
@@ -45,8 +46,7 @@ export async function authenticateGithub() {
 
   return showDialog((done) => {
     let cancelled = false;
-    /** @type {ReturnType<typeof setTimeout> | null} */
-    let pollTimer = null;
+    let pollTimer: ReturnType<typeof setTimeout> | null = null;
 
     const poll = async () => {
       if (cancelled) return;

package/src/github/{github-publish.js → github-publish.ts}

@@ -1,12 +1,13 @@
+/// <reference lib="dom" />
 /** Publish a local project to GitHub — creates a new repo and pushes. */
 
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
-import { showDialog } from "../ui/layers.js";
-import { authenticateGithub } from "./github-auth.js";
-import { getPlatform } from "../platform.js";
-import { refreshGitStatus } from "../panels/git-panel.js";
-import { statusMessage } from "../panels/statusbar.js";
+import { showDialog } from "../ui/layers";
+import { authenticateGithub } from "./github-auth";
+import { getPlatform } from "../platform";
+import { refreshGitStatus } from "../panels/git-panel";
+import { statusMessage } from "../panels/statusbar";
 
 /**
  * Full "Publish to GitHub" flow: 1. Authenticate (or reuse stored token) 2. Prompt for repo name /
@@ -15,17 +16,18 @@ import { statusMessage } from "../panels/statusbar.js";
  * @param {{ projectName: string }} opts
  * @returns {Promise<boolean>} True if published successfully
  */
-export async function publishToGithub({ projectName }) {
+export async function publishToGithub({ projectName }: { projectName: string }) {
   const token = await authenticateGithub();
   if (!token) return false;
 
-  const repoOpts = await showDialog((done) => {
-    /** @type {HTMLInputElement | null} */
-    let _nameInput = null;
-    /** @type {HTMLInputElement | null} */
-    let _descInput = null;
-    /** @type {HTMLInputElement | null} */
-    let _privateToggle = null;
+  const repoOpts = await showDialog<{
+    name: string;
+    description: string;
+    isPrivate: boolean;
+  } | null>((done) => {
+    let _nameInput: HTMLInputElement | null = null;
+    let _descInput: HTMLInputElement | null = null;
+    let _privateToggle: HTMLInputElement | null = null;
 
     return html`
       <sp-dialog-wrapper
@@ -51,7 +53,7 @@ export async function publishToGithub({ projectName }) {
             value="${projectName}"
             placeholder="my-project"
             ${ref((el) => {
-              _nameInput = /** @type {HTMLInputElement | null} */ (el || null);
+              _nameInput = (el as HTMLInputElement | null) || null;
             })}
           ></sp-textfield>
 
@@ -61,7 +63,7 @@ export async function publishToGithub({ projectName }) {
             name="repo-desc"
             placeholder="A brief description"
             ${ref((el) => {
-              _descInput = /** @type {HTMLInputElement | null} */ (el || null);
+              _descInput = (el as HTMLInputElement | null) || null;
             })}
           ></sp-textfield>
 
@@ -70,7 +72,7 @@ export async function publishToGithub({ projectName }) {
             name="repo-private"
             checked
             ${ref((el) => {
-              _privateToggle = /** @type {HTMLInputElement | null} */ (el || null);
+              _privateToggle = (el as HTMLInputElement | null) || null;
             })}
             >Private repository</sp-switch
           >
@@ -115,8 +117,8 @@ export async function publishToGithub({ projectName }) {
   statusMessage("Pushing to GitHub…");
   try {
     await platform.gitPush({ setUpstream: true });
-  } catch (/** @type {unknown} */ e) {
-    statusMessage(`Push failed: ${/** @type {Error} */ (e).message}`);
+  } catch (e) {
+    statusMessage(`Push failed: ${(e as Error).message}`);
     return false;
   }
 

package/src/markdown/{md-allowlist.js → md-allowlist.ts}

@@ -49,7 +49,10 @@ export const MD_TEXT_ONLY = new Set(["code"]);
  *   { block: boolean; inline: boolean; directive: boolean; only: Set<string> | null }
  * >}
  */
-export const MD_NESTING = {
+export const MD_NESTING: Record<
+  string,
+  { block: boolean; inline: boolean; directive: boolean; only: Set<string> | null }
+> = {
   _root: { block: true, inline: false, directive: true, only: null },
   h1: { block: false, inline: true, directive: false, only: null },
   h2: { block: false, inline: true, directive: false, only: null },
@@ -82,7 +85,7 @@ export const MD_NESTING = {
  * @param {string} childTag - Proposed child element tag
  * @returns {boolean}
  */
-export function isValidChild(parentTag, childTag) {
+export function isValidChild(parentTag: string, childTag: string) {
   const rule = MD_NESTING[parentTag];
   if (!rule) return true; // directive components allow anything