@jxsuite/runtime 0.23.2 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Jx — JSON-native reactive web component runtime
  * @version 3.0.0
@@ -13,7 +14,8 @@
  */
 
 import { reactive, ref, computed, effect, isRef, onEffectCleanup } from "@vue/reactivity";
-import { evaluateExpression, isMutating } from "./expression.js";
+import { evaluateExpression, isMutating } from "./expression.ts";
+import type { JxRenderOptions, DynamicClass, JxPath } from "./types.ts";
 
 // ─── Public API ───────────────────────────────────────────────────────────────
 
@@ -30,7 +32,11 @@ import { evaluateExpression, isMutating } from "./expression.js";
  * @returns {Promise<Record<string, any>>} Resolves with the live component scope (state reactive
  *   proxy)
  */
-export async function Jx(source, target = document.body, options) {
+export async function Jx(
+  source: string | Record<string, any>,
+  target: HTMLElement = document.body,
+  options?: JxRenderOptions,
+) {
   const base = typeof source === "string" ? new URL(source, location.href).href : location.href;
   const doc = await resolve(source);
 
@@ -56,17 +62,17 @@ export async function Jx(source, target = document.body, options) {
 
 // ─── Step 1: Resolve ──────────────────────────────────────────────────────────
 
-/**
- * Fetch and parse a Jx JSON source. Accepts a URL string, absolute URL, or a pre-parsed object.
- *
- * @param {string | Record<string, any>} source
- * @returns {Promise<any>}
- */
-export async function resolve(source) {
+const _resolveCache = new Map<string, Promise<any>>();
+
+export async function resolve(source: string | Record<string, any>) {
   if (typeof source !== "string") return source;
-  const res = await fetch(source);
-  if (!res.ok) throw new Error(`Jx: failed to fetch ${source} (${res.status})`);
-  return res.json();
+  if (_resolveCache.has(source)) return _resolveCache.get(source)!;
+  const p = fetch(source).then((res) => {
+    if (!res.ok) throw new Error(`Jx: failed to fetch ${source} (${res.status})`);
+    return res.json();
+  });
+  _resolveCache.set(source, p);
+  return p;
 }
 
 // ─── Step 2: Build scope ──────────────────────────────────────────────────────
@@ -89,12 +95,12 @@ const SCHEMA_KEYWORDS = new Set([
 /** /** @type {{ skip: boolean }} */
 const _serverFnConfig = { skip: false };
 /** Set to true to suppress timing: "server" resolution (used by Studio edit mode). */
-export function setSkipServerFunctions(/** @type {boolean} */ v) {
+export function setSkipServerFunctions(v: boolean) {
   _serverFnConfig.skip = v;
 }
 
 /** @deprecated No longer needed — ContentCollection/ContentEntry resolve via generic class path */
-export function setSkipContentResolution(/** @type {boolean} */ _v) {}
+export function setSkipContentResolution(_v: boolean) {}
 
 /**
  * Build the reactive scope (state) from the document using the five-shape detection algorithm.
@@ -104,9 +110,12 @@ export function setSkipContentResolution(/** @type {boolean} */ _v) {}
  * @param {string} [base] Base URL for resolving $src imports. Default is `location.href`
  * @returns {Promise<Record<string, any>>} Reactive proxy (state)
  */
-export async function buildScope(doc, parentScope = {}, base = location.href) {
-  /** @type {Record<string, any>} */
-  const raw = {};
+export async function buildScope(
+  doc: Record<string, any>,
+  parentScope: Record<string, any> = {},
+  base: string = location.href,
+) {
+  const raw: Record<string, any> = {};
 
   // Merge parent scope properties
   for (const [key, val] of Object.entries(parentScope)) {
@@ -122,19 +131,19 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
       def &&
       typeof def === "object" &&
       !Array.isArray(def) &&
-      def.$prototype &&
-      def.$prototype !== "Function" &&
-      !def.$src
+      (def as Record<string, unknown>).$prototype &&
+      (def as Record<string, unknown>).$prototype !== "Function" &&
+      !(def as Record<string, unknown>).$src
     ) {
-      const mapped = imports[def.$prototype];
+      const mapped = imports[(def as Record<string, unknown>).$prototype as string];
       if (mapped) {
         if (typeof mapped !== "string" || !mapped.endsWith(".class.json")) {
           console.warn(
-            `Jx: import "${def.$prototype}" must map to a .class.json path, got "${mapped}"`,
+            `Jx: import "${(def as Record<string, unknown>).$prototype}" must map to a .class.json path, got "${mapped}"`,
           );
           continue;
         }
-        def.$src = mapped;
+        (def as Record<string, unknown>).$src = mapped;
       }
     }
   }
@@ -161,14 +170,15 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
 
     // 4. Object
     if (typeof def === "object") {
-      if (def.$prototype) continue; // handled in later passes
-      if ("$expression" in def) continue; // handled in pass 2.5
-      if (def.timing === "server" && def.$src && def.$export) continue; // handled in fifth pass
-      if ("default" in def) {
-        raw[key] = def.default;
+      const d = def as Record<string, unknown>;
+      if (d.$prototype) continue; // handled in later passes
+      if ("$expression" in d) continue; // handled in pass 2.5
+      if (d.timing === "server" && d.$src && d.$export) continue; // handled in fifth pass
+      if ("default" in d) {
+        raw[key] = d.default;
         continue;
       } // Shape 2: expanded signal
-      if (hasSchemaKeywords(def)) continue; // Shape 2b: pure type def
+      if (hasSchemaKeywords(d as Record<string, any>)) continue; // Shape 2b: pure type def
       raw[key] = def; // Shape 1: plain object
     }
   }
@@ -186,10 +196,13 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
   // Pass 2.5: $expression entries (Shape 5)
   for (const [key, def] of Object.entries(defs)) {
     if (def && typeof def === "object" && !Array.isArray(def) && "$expression" in def) {
-      const node = /** @type {any} */ (def).$expression;
+      const node = (def as Record<string, unknown>).$expression as {
+        operator: string;
+        target: unknown;
+        value?: unknown;
+      };
       if (isMutating(node.operator)) {
-        state[key] = (/** @type {any} */ s, /** @type {any} */ event) =>
-          evaluateExpression(node, s, event);
+        state[key] = (s: Record<string, any>, event: Event) => evaluateExpression(node, s, event);
       } else {
         state[key] = computed(() => evaluateExpression(node, state, null));
       }
@@ -198,15 +211,19 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
 
   // Third pass: $prototype: "Function" entries
   for (const [key, def] of Object.entries(defs)) {
-    if (typeof def === "object" && def?.$prototype === "Function") {
-      state[key] = await resolveFunction(def, state, key, base);
+    if (typeof def === "object" && (def as Record<string, unknown>)?.$prototype === "Function") {
+      state[key] = await resolveFunction(def as Record<string, any>, state, key, base);
     }
   }
 
   // Fourth pass: other $prototype entries (Request, Set, Map, etc.)
   for (const [key, def] of Object.entries(defs)) {
-    if (typeof def === "object" && def?.$prototype && def.$prototype !== "Function") {
-      state[key] = await resolvePrototype(def, state, key, base);
+    if (
+      typeof def === "object" &&
+      (def as Record<string, unknown>)?.$prototype &&
+      (def as Record<string, unknown>).$prototype !== "Function"
+    ) {
+      state[key] = await resolvePrototype(def as Record<string, any>, state, key, base);
     }
   }
 
@@ -216,12 +233,12 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
       if (
         def != null &&
         typeof def === "object" &&
-        def.timing === "server" &&
-        def.$src &&
-        def.$export &&
-        !def.$prototype
+        (def as Record<string, unknown>).timing === "server" &&
+        (def as Record<string, unknown>).$src &&
+        (def as Record<string, unknown>).$export &&
+        !(def as Record<string, unknown>).$prototype
       ) {
-        state[key] = await resolveServerFunction(def, state, key, base);
+        state[key] = await resolveServerFunction(def as Record<string, any>, state, key, base);
       }
     }
   }
@@ -242,7 +259,7 @@ export async function buildScope(doc, parentScope = {}, base = location.href) {
  * @param {Record<string, any>} obj
  * @returns {boolean}
  */
-function hasSchemaKeywords(obj) {
+function hasSchemaKeywords(obj: Record<string, any>) {
   for (const k of Object.keys(obj)) {
     if (SCHEMA_KEYWORDS.has(k)) return true;
   }
@@ -258,7 +275,7 @@ export { hasSchemaKeywords };
  * @param {Record<string, any>} state
  * @returns {string}
  */
-function evaluateTemplate(str, state) {
+function evaluateTemplate(str: string, state: Record<string, any>) {
   const $map = state?.$map;
   const fn = new Function("state", "$map", "item", "index", `return \`${str}\``);
   return fn(state, $map, $map?.item, $map?.index);
@@ -281,7 +298,12 @@ const _moduleCache = new Map();
  * @param {string} [base] - Base URL for resolving $src imports
  * @returns {Promise<unknown>}
  */
-async function resolveFunction(def, state, key, base) {
+async function resolveFunction(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   if (def.body && def.$src) {
     throw new Error(`Jx: '${key}' declares both body and $src — these are mutually exclusive`);
   }
@@ -352,7 +374,7 @@ async function resolveFunction(def, state, key, base) {
  * @param {Record<string, any>} def
  * @returns {string[]}
  */
-function resolveParamNames(def) {
+function resolveParamNames(def: Record<string, any>) {
   const raw = def.parameters ?? def.arguments ?? [];
   let names;
   if (Array.isArray(raw) && raw.length > 0 && typeof raw[0] === "object") {
@@ -413,7 +435,11 @@ export const RESERVED_KEYS = new Set([
  * @param {JxRenderOptions} [options]
  * @returns {HTMLElement | Text}
  */
-export function renderNode(def, state, options) {
+export function renderNode(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  options?: JxRenderOptions,
+) {
   const path = options?._path ?? [];
 
   // Text node children: bare strings/numbers/booleans produce DOM Text nodes
@@ -476,7 +502,7 @@ export function renderNode(def, state, options) {
  * @param {unknown} val
  * @returns {boolean}
  */
-function isTemplateString(val) {
+function isTemplateString(val: unknown) {
   return typeof val === "string" && val.includes("${");
 }
 
@@ -487,7 +513,7 @@ function isTemplateString(val) {
  * @param {Record<string, any>} def
  * @param {Record<string, any>} state
  */
-function applyProperties(el, def, state) {
+function applyProperties(el: HTMLElement, def: Record<string, any>, state: Record<string, any>) {
   for (const [key, val] of Object.entries(def)) {
     if (RESERVED_KEYS.has(key)) continue;
     if (key.startsWith("$")) continue; // scope bindings — handled in renderNode
@@ -512,7 +538,11 @@ function applyProperties(el, def, state) {
       }
       // Event handler: inline $expression
       if (val && typeof val === "object" && "$expression" in val) {
-        const node = /** @type {any} */ (val).$expression;
+        const node = (val as Record<string, unknown>).$expression as {
+          operator: string;
+          target: unknown;
+          value?: unknown;
+        };
         const scope = state;
         el.addEventListener(key.slice(2), (e) => evaluateExpression(node, scope, e));
         continue;
@@ -529,17 +559,16 @@ function applyProperties(el, def, state) {
  * @param {unknown} val
  * @param {Record<string, any>} state
  */
-function bindProperty(el, key, val, state) {
-  const target = /** @type {Record<string, unknown>} */ (/** @type {unknown} */ (el));
+function bindProperty(el: HTMLElement, key: string, val: unknown, state: Record<string, any>) {
+  const target = el as unknown as Record<string, unknown>;
   if (isRefObj(val)) {
+    const refVal = val as { $ref: string };
     if (key === "id") {
-      target[key] = /** @type {string} */ (
-        resolveRef(/** @type {{ $ref: string }} */ (val).$ref, state)
-      );
+      target[key] = resolveRef(refVal.$ref, state) as string;
       return;
     }
     effect(() => {
-      target[key] = resolveRef(/** @type {{ $ref: string }} */ (val).$ref, state);
+      target[key] = resolveRef(refVal.$ref, state);
     });
     return;
   }
@@ -547,7 +576,7 @@ function bindProperty(el, key, val, state) {
   // Universal ${} reactivity — template strings in element properties
   if (isTemplateString(val)) {
     effect(() => {
-      target[key] = evaluateTemplate(/** @type {string} */ (val), state);
+      target[key] = evaluateTemplate(val as string, state);
     });
     return;
   }
@@ -565,17 +594,18 @@ function bindProperty(el, key, val, state) {
  * @param {Record<string, any>} [state] Component scope for template string evaluation. Default is
  *   `{}`
  */
-export function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
-  /** @type {Record<string, any>} */
-  const nested = {};
-  /** @type {Record<string, any>} */
-  const media = {};
-  /** @type {Record<string, string>} */
-  const baseDecls = {};
+export function applyStyle(
+  el: HTMLElement,
+  styleDef: Record<string, any>,
+  mediaQueries: Record<string, any> = {},
+  state: Record<string, any> = {},
+) {
+  const nested: Record<string, any> = {};
+  const media: Record<string, any> = {};
+  const baseDecls: Record<string, string> = {};
 
   // Collect properties overridden by media queries so we can avoid inline styles for them
-  /** @type {Set<string>} */
-  const mediaOverriddenProps = new Set();
+  const mediaOverriddenProps: Set<string> = new Set();
   for (const [prop, val] of Object.entries(styleDef)) {
     if (prop.startsWith("@") && val && typeof val === "object") {
       for (const k of Object.keys(val)) {
@@ -604,11 +634,10 @@ export function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
       else el.style.setProperty(prop, val);
     } else if (isTemplateString(val))
       effect(() => {
-        /** @type {Record<string, string>} */ (/** @type {unknown} */ (el.style))[prop] =
-          evaluateTemplate(val, state);
+        (el.style as unknown as Record<string, string>)[prop] = evaluateTemplate(val, state);
       });
     else if (mediaOverriddenProps.has(prop)) baseDecls[prop] = val;
-    else /** @type {Record<string, string>} */ (/** @type {unknown} */ (el.style))[prop] = val;
+    else (el.style as unknown as Record<string, string>)[prop] = val;
   }
 
   const hasNested = Object.keys(nested).length > 0;
@@ -623,7 +652,7 @@ export function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
   const baseCSS = toCSSText(baseDecls);
   if (baseCSS) css += `[data-jx="${uid}"] { ${baseCSS} }\n`;
 
-  function emitNested(/** @type {string} */ scope, /** @type {Record<string, any>} */ rules) {
+  function emitNested(scope: string, rules: Record<string, any>) {
     const props = toCSSText(rules);
     if (props) css += `${scope} { ${props} }\n`;
     for (const [sel, sub] of Object.entries(rules)) {
@@ -661,10 +690,7 @@ export function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
     const scope = `[data-jx="${uid}"]`;
     css += `${atRule} { ${scope} { ${toCSSText(rules)} } }\n`;
 
-    function emitMediaNested(
-      /** @type {string} */ parentSel,
-      /** @type {Record<string, any>} */ obj,
-    ) {
+    function emitMediaNested(parentSel: string, obj: Record<string, any>) {
       for (const [sel, sub] of Object.entries(obj)) {
         if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
         if (sel.startsWith("@")) continue;
@@ -693,7 +719,7 @@ export function applyStyle(el, styleDef, mediaQueries = {}, state = {}) {
  * @param {Record<string, any>} attrs
  * @param {Record<string, any>} state
  */
-function applyAttributes(el, attrs, state) {
+function applyAttributes(el: HTMLElement, attrs: Record<string, any>, state: Record<string, any>) {
   for (const [k, v] of Object.entries(attrs)) {
     if (isRefObj(v)) {
       effect(() => el.setAttribute(k, String(resolveRef(v.$ref, state) ?? "")));
@@ -713,7 +739,11 @@ function applyAttributes(el, attrs, state) {
  * @param {JxRenderOptions} [options]
  * @returns {HTMLElement}
  */
-function renderMappedArray(def, state, options) {
+function renderMappedArray(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  options?: JxRenderOptions,
+) {
   const path = options?._path ?? [];
   const container = document.createElement(def.tagName ?? "div");
 
@@ -767,7 +797,11 @@ function renderMappedArray(def, state, options) {
  * @param {JxRenderOptions} [options]
  * @returns {HTMLElement}
  */
-function renderSwitch(def, state, options) {
+function renderSwitch(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  options?: JxRenderOptions,
+) {
   const path = options?._path ?? [];
   const container = document.createElement(def.tagName ?? "div");
 
@@ -780,7 +814,7 @@ function renderSwitch(def, state, options) {
 
   effect(() => {
     container.innerHTML = "";
-    const key = /** @type {string} */ (resolveRef(def.$switch.$ref, state));
+    const key = resolveRef(def.$switch.$ref, state) as string;
     const caseDef = def.cases?.[key];
     if (!caseDef) return;
 
@@ -797,7 +831,7 @@ function renderSwitch(def, state, options) {
           const childOpts = options ? { ...options, _path: [...path, "cases", key] } : undefined;
           container.appendChild(renderNode(doc, childScope, childOpts));
         })
-        .catch((/** @type {unknown} */ e) =>
+        .catch((e: unknown) =>
           console.error("Jx $switch: failed to load external case", caseDef.$ref, e),
         );
       return;
@@ -824,7 +858,12 @@ function renderSwitch(def, state, options) {
  * @param {string} [base] - Base URL for resolving $src imports
  * @returns {Promise<unknown>}
  */
-export async function resolvePrototype(def, state, key, base) {
+export async function resolvePrototype(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   // ── External class via $src ─────────────────────────────────────────────────
   if (def.$src) {
     return resolveExternalPrototype(def, state, key, base);
@@ -832,11 +871,9 @@ export async function resolvePrototype(def, state, key, base) {
 
   switch (def.$prototype) {
     case "Request": {
-      /** @type {import("@vue/reactivity").Ref<unknown>} */
-      const s = ref(null);
+      const s: import("@vue/reactivity").Ref<unknown> = ref(null);
       const debounceMs = def.debounce ?? 0;
-      /** @type {ReturnType<typeof setTimeout> | null} */
-      let debounceTimer = null;
+      let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
       if (!def.manual) {
         effect(() => {
@@ -867,8 +904,8 @@ export async function resolvePrototype(def, state, key, base) {
               .then((d) => {
                 s.value = d;
               })
-              .catch((/** @type {unknown} */ e) => {
-                if (/** @type {Error} */ (e).name !== "AbortError") s.value = { error: String(e) };
+              .catch((e: unknown) => {
+                if ((e as Error).name !== "AbortError") s.value = { error: String(e) };
               });
 
           if (debounceMs > 0) {
@@ -884,8 +921,7 @@ export async function resolvePrototype(def, state, key, base) {
 
     case "URLSearchParams":
       return computed(() => {
-        /** @type {Record<string, string>} */
-        const p = {};
+        const p: Record<string, string> = {};
         for (const [k, v] of Object.entries(def)) {
           if (k !== "$prototype") {
             p[k] = isRefObj(v)
@@ -909,8 +945,7 @@ export async function resolvePrototype(def, state, key, base) {
       } catch {
         init = def.default ?? null;
       }
-      /** @type {import("@vue/reactivity").Ref<any>} */
-      const storageState = ref(init);
+      const storageState: import("@vue/reactivity").Ref<any> = ref(init);
       // Persist on change
       effect(() => {
         const v = storageState.value;
@@ -938,8 +973,7 @@ export async function resolvePrototype(def, state, key, base) {
           return m[1];
         }
       };
-      /** @type {import("@vue/reactivity").Ref<any>} */
-      const cookieState = ref(read() ?? def.default ?? null);
+      const cookieState: import("@vue/reactivity").Ref<any> = ref(read() ?? def.default ?? null);
       // Persist on change
       effect(() => {
         const v = cookieState.value;
@@ -955,8 +989,7 @@ export async function resolvePrototype(def, state, key, base) {
     }
 
     case "IndexedDB": {
-      /** @type {import("@vue/reactivity").Ref<any>} */
-      const idbState = ref(null);
+      const idbState: import("@vue/reactivity").Ref<any> = ref(null);
       const {
         database,
         store,
@@ -967,22 +1000,20 @@ export async function resolvePrototype(def, state, key, base) {
       } = def;
       const req = indexedDB.open(database, version);
       req.onupgradeneeded = (e) => {
-        /** @type {IDBDatabase} */
-        const db = /** @type {IDBOpenDBRequest} */ (e.target).result;
+        const db: IDBDatabase = (e.target as IDBOpenDBRequest).result;
         if (!db.objectStoreNames.contains(store)) {
           const os = db.createObjectStore(store, { keyPath, autoIncrement });
           for (const i of indexes) os.createIndex(i.name, i.keyPath, { unique: i.unique ?? false });
         }
       };
       req.onsuccess = (e) => {
-        /** @type {IDBDatabase} */
-        const db = /** @type {IDBOpenDBRequest} */ (e.target).result;
+        const db: IDBDatabase = (e.target as IDBOpenDBRequest).result;
         idbState.value = {
           database,
           store,
           version,
           isReady: true,
-          getStore: (/** @type {IDBTransactionMode} */ mode = "readwrite") =>
+          getStore: (mode: IDBTransactionMode = "readwrite") =>
             Promise.resolve(db.transaction(store, mode).objectStore(store)),
         };
       };
@@ -1000,7 +1031,7 @@ export async function resolvePrototype(def, state, key, base) {
 
     case "FormData": {
       const fd = new FormData();
-      for (const [k, v] of Object.entries(def.fields ?? {})) fd.append(k, v);
+      for (const [k, v] of Object.entries(def.fields ?? {})) fd.append(k, v as string);
       return fd;
     }
 
@@ -1043,7 +1074,12 @@ const EXTERNAL_RESERVED = new Set([
  * @param {string} [base]
  * @returns {Promise<unknown>}
  */
-async function resolveExternalPrototype(def, state, key, base) {
+async function resolveExternalPrototype(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   const src = def.$src;
 
   // Non-Function $prototype must use .class.json as entrypoint
@@ -1067,7 +1103,12 @@ async function resolveExternalPrototype(def, state, key, base) {
  * @param {string} [base] - Base URL for resolution
  * @returns {Promise<unknown>}
  */
-async function importAndInstantiate(def, src, exportName, base) {
+async function importAndInstantiate(
+  def: Record<string, any>,
+  src: string,
+  exportName: string,
+  base?: string,
+) {
   let mod;
   if (_moduleCache.has(src)) {
     mod = _moduleCache.get(src);
@@ -1093,8 +1134,7 @@ async function importAndInstantiate(def, src, exportName, base) {
     throw new Error(`Jx: "${exportName}" from "${src}" is not a class`);
   }
 
-  /** @type {Record<string, any>} */
-  const config = {};
+  const config: Record<string, any> = {};
   for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) config[k] = v;
   }
@@ -1111,10 +1151,9 @@ async function importAndInstantiate(def, src, exportName, base) {
   }
 
   // Always wrap in ref for reactivity with external classes
-  /** @type {import("@vue/reactivity").Ref<any>} */
-  const s = ref(value);
+  const s: import("@vue/reactivity").Ref<any> = ref(value);
   if (typeof instance.subscribe === "function") {
-    instance.subscribe((/** @type {unknown} */ newVal) => {
+    instance.subscribe((newVal: unknown) => {
       s.value = newVal;
     });
   }
@@ -1131,10 +1170,26 @@ async function importAndInstantiate(def, src, exportName, base) {
  * @param {string} [base]
  * @returns {Promise<unknown>}
  */
-async function resolveClassJson(def, state, key, base) {
+async function resolveClassJson(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   const src = def.$src;
   let classDef;
 
+  // Bare specifiers (package references like @scope/pkg/file) can't be fetched directly —
+  // go straight to dev proxy which can resolve them via node_modules.
+  const isBareSpecifier =
+    !src.startsWith(".") &&
+    !src.startsWith("/") &&
+    !src.startsWith("http") &&
+    !src.startsWith("file:");
+  if (isBareSpecifier) {
+    return resolveViaDevProxy(def, state, key, base);
+  }
+
   // Try fetching the .class.json file directly
   try {
     const url = base ? new URL(src, base).href : src;
@@ -1166,8 +1221,7 @@ async function resolveClassJson(def, state, key, base) {
 
   // Self-contained: construct class dynamically from schema
   const DynClass = classFromSchema(classDef);
-  /** @type {Record<string, any>} */
-  const config = {};
+  const config: Record<string, any> = {};
   for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) config[k] = v;
   }
@@ -1183,10 +1237,9 @@ async function resolveClassJson(def, state, key, base) {
   }
 
   // Always wrap in ref for reactivity
-  /** @type {import("@vue/reactivity").Ref<any>} */
-  const s = ref(value);
+  const s: import("@vue/reactivity").Ref<any> = ref(value);
   if (typeof instance.subscribe === "function") {
-    instance.subscribe((/** @type {unknown} */ newVal) => {
+    instance.subscribe((newVal: unknown) => {
       s.value = newVal;
     });
   }
@@ -1200,42 +1253,40 @@ async function resolveClassJson(def, state, key, base) {
  * @param {Record<string, any>} classDef
  * @returns {DynamicClass}
  */
-function classFromSchema(classDef) {
+function classFromSchema(classDef: Record<string, any>) {
   const fields = classDef.$defs?.fields ?? {};
   const ctor = classDef.$defs?.constructor;
   const methods = classDef.$defs?.methods ?? {};
 
+  interface FieldDef {
+    identifier?: string;
+    access?: string;
+    initializer?: unknown;
+    default?: unknown;
+  }
+
+  interface MethodDef {
+    identifier?: string;
+    parameters?: Record<string, unknown>[];
+    body?: string | string[];
+    role?: string;
+    scope?: string;
+    getter?: { body: string };
+    setter?: { body: string; parameters?: Record<string, unknown>[] };
+  }
+
   class DynClass {
-    constructor(/** @type {Record<string, any>} */ config = {}) {
+    constructor(config: Record<string, unknown> = {}) {
       for (const [key, field] of Object.entries(fields)) {
-        /**
-         * @type {{
-         *   identifier?: string;
-         *   access?: string;
-         *   initializer?: unknown;
-         *   default?: unknown;
-         * }}
-         */
-        const typedField =
-          /**
-           * @type {{
-           *   identifier?: string;
-           *   access?: string;
-           *   initializer?: unknown;
-           *   default?: unknown;
-           * }}
-           */ (field);
+        const typedField = field as FieldDef;
         const id = typedField.identifier ?? key;
         const propName = typedField.access === "private" ? `_${id}` : id;
-        if (config[id] !== undefined)
-          /** @type {Record<string, unknown>} */ (this)[propName] = config[id];
+        if (config[id] !== undefined) (this as Record<string, unknown>)[propName] = config[id];
         else if (typedField.initializer !== undefined)
-          /** @type {Record<string, unknown>} */ (this)[propName] = typedField.initializer;
+          (this as Record<string, unknown>)[propName] = typedField.initializer;
         else if (typedField.default !== undefined)
-          /** @type {Record<string, unknown>} */ (this)[propName] = structuredClone(
-            typedField.default,
-          );
-        else /** @type {Record<string, unknown>} */ (this)[propName] = null;
+          (this as Record<string, unknown>)[propName] = structuredClone(typedField.default);
+        else (this as Record<string, unknown>)[propName] = null;
       }
       if (ctor?.body) {
         const bodyStr = Array.isArray(ctor.body) ? ctor.body.join("\n") : ctor.body;
@@ -1245,63 +1296,36 @@ function classFromSchema(classDef) {
   }
 
   for (const [key, method] of Object.entries(methods)) {
-    /**
-     * @type {{
-     *   identifier?: string;
-     *   parameters?: Record<string, unknown>[];
-     *   body?: string | string[];
-     *   role?: string;
-     *   scope?: string;
-     *   getter?: { body: string };
-     *   setter?: { body: string; parameters?: Record<string, unknown>[] };
-     * }}
-     */
-    const typedMethod = /**
-     * @type {{
-     *   identifier?: string;
-     *   parameters?: Record<string, unknown>[];
-     *   body?: string | string[];
-     *   role?: string;
-     *   scope?: string;
-     *   getter?: { body: string };
-     *   setter?: { body: string; parameters?: Record<string, unknown>[] };
-     * }}
-     */ (method);
+    const typedMethod = method as MethodDef;
     const name = typedMethod.identifier ?? key;
-    const params = /** @type {string[]} */ (
-      (typedMethod.parameters ?? []).map((/** @type {Record<string, unknown>} */ p) => {
-        if (p.$ref) return /** @type {string} */ (/** @type {string} */ (p.$ref).split("/").pop());
-        return /** @type {string} */ (p.identifier ?? p.name ?? "arg");
-      })
-    );
+    const params = (typedMethod.parameters ?? []).map((p: Record<string, unknown>) => {
+      if (p.$ref) return (p.$ref as string).split("/").pop() as string;
+      return (p.identifier ?? p.name ?? "arg") as string;
+    }) as string[];
     const bodyStr = Array.isArray(typedMethod.body)
       ? typedMethod.body.join("\n")
       : (typedMethod.body ?? "");
 
     if (typedMethod.role === "accessor") {
-      /** @type {PropertyDescriptor} */
-      const descriptor = {};
+      const descriptor: PropertyDescriptor = {};
       if (typedMethod.getter)
-        descriptor.get = /** @type {() => unknown} */ (new Function(typedMethod.getter.body));
+        descriptor.get = new Function(typedMethod.getter.body) as () => unknown;
       if (typedMethod.setter) {
         const sp = (typedMethod.setter.parameters ?? []).map(
-          (/** @type {Record<string, unknown>} */ p) =>
-            /** @type {string} */ (p.$ref)?.split("/").pop() ?? "v",
-        );
-        descriptor.set = /** @type {(v: unknown) => void} */ (
-          new Function(...sp, typedMethod.setter.body)
+          (p: Record<string, unknown>) => (p.$ref as string)?.split("/").pop() ?? "v",
         );
+        descriptor.set = new Function(...sp, typedMethod.setter.body) as (v: unknown) => void;
       }
       Object.defineProperty(DynClass.prototype, name, { ...descriptor, configurable: true });
     } else if (typedMethod.scope === "static") {
-      /** @type {DynamicClass} */ (DynClass)[name] = new Function(...params, bodyStr);
+      (DynClass as unknown as DynamicClass)[name] = new Function(...params, bodyStr);
     } else {
-      /** @type {DynamicClass} */ (DynClass).prototype[name] = new Function(...params, bodyStr);
+      (DynClass as unknown as DynamicClass).prototype[name] = new Function(...params, bodyStr);
     }
   }
 
   Object.defineProperty(DynClass, "name", { value: classDef.title, configurable: true });
-  const dynCtor = /** @type {DynamicClass} */ (/** @type {unknown} */ (DynClass));
+  const dynCtor = DynClass as unknown as DynamicClass;
   return dynCtor;
 }
 
@@ -1316,19 +1340,21 @@ function classFromSchema(classDef) {
  * @param {string} [base]
  * @returns {Promise<unknown>}
  */
-async function resolveViaDevProxy(def, state, key, base) {
-  /** @type {Record<string, any>} */
-  const config = {};
+async function resolveViaDevProxy(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
+  const config: Record<string, any> = {};
   for (const [k, v] of Object.entries(def)) {
     if (!EXTERNAL_RESERVED.has(k)) config[k] = v;
   }
 
-  const hasTemplates = Object.values(config).some((/** @type {unknown} */ v) =>
-    isTemplateString(v),
-  );
+  const hasTemplates = Object.values(config).some((v: unknown) => isTemplateString(v));
 
   /** @param {Record<string, any>} resolvedConfig */
-  const doResolve = (resolvedConfig) =>
+  const doResolve = (resolvedConfig: Record<string, any>) =>
     fetch("/__jx_resolve__", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -1345,27 +1371,25 @@ async function resolveViaDevProxy(def, state, key, base) {
     });
 
   // Always wrap in ref for reactivity
-  /** @type {import("@vue/reactivity").Ref<any>} */
-  const s = ref(null);
+  const s: import("@vue/reactivity").Ref<any> = ref(null);
   if (hasTemplates) {
     effect(() => {
-      /** @type {Record<string, any>} */
-      const resolvedConfig = {};
+      const resolvedConfig: Record<string, any> = {};
       for (const [k, v] of Object.entries(config)) {
         resolvedConfig[k] = isTemplateString(v) ? evaluateTemplate(v, state) : v;
       }
       doResolve(resolvedConfig)
-        .then((/** @type {unknown} */ value) => {
+        .then((value: unknown) => {
           s.value = value;
         })
-        .catch((/** @type {unknown} */ e) => console.error("Jx dev proxy:", e));
+        .catch((e: unknown) => console.error("Jx dev proxy:", e));
     });
   } else {
     doResolve(config)
-      .then((/** @type {unknown} */ value) => {
+      .then((value: unknown) => {
         s.value = value;
       })
-      .catch((/** @type {unknown} */ e) => console.error("Jx dev proxy:", e));
+      .catch((e: unknown) => console.error("Jx dev proxy:", e));
   }
   return s;
 }
@@ -1382,7 +1406,12 @@ async function resolveViaDevProxy(def, state, key, base) {
  * @param {string} [base]
  * @returns {Promise<unknown>}
  */
-async function resolveServerFunction(def, state, key, base) {
+async function resolveServerFunction(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   const src = def.$src;
   const exportName = def.$export;
 
@@ -1414,25 +1443,23 @@ async function resolveServerFunction(def, state, key, base) {
     throw new Error(`Jx: "${exportName}" from "${src}" is not a function`);
 
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((/** @type {unknown} */ v) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v: unknown) => isRefObj(v));
   const resolveArgs = () => {
-    /** @type {Record<string, any>} */
-    const args = {};
+    const args: Record<string, any> = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef(/** @type {{ $ref: string }} */ (v).$ref, state) : v;
+      args[k] = isRefObj(v) ? resolveRef((v as { $ref: string }).$ref, state) : v;
     }
     return args;
   };
 
   // Always wrap in ref for reactivity
-  /** @type {import("@vue/reactivity").Ref<any>} */
-  const s = ref(null);
+  const s: import("@vue/reactivity").Ref<any> = ref(null);
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
       fn(args)
-        .then((/** @type {unknown} */ result) => {
+        .then((result: unknown) => {
           s.value = result;
         })
         .catch(() => {});
@@ -1454,21 +1481,25 @@ async function resolveServerFunction(def, state, key, base) {
  * @param {string} [base]
  * @returns {Promise<unknown>}
  */
-async function resolveServerFunctionViaProxy(def, state, key, base) {
+async function resolveServerFunctionViaProxy(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  key: string,
+  base?: string,
+) {
   const rawArgs = def.arguments ?? {};
-  const hasReactiveArg = Object.values(rawArgs).some((/** @type {unknown} */ v) => isRefObj(v));
+  const hasReactiveArg = Object.values(rawArgs).some((v: unknown) => isRefObj(v));
 
   const resolveArgs = () => {
-    /** @type {Record<string, any>} */
-    const args = {};
+    const args: Record<string, any> = {};
     for (const [k, v] of Object.entries(rawArgs)) {
-      args[k] = isRefObj(v) ? resolveRef(/** @type {{ $ref: string }} */ (v).$ref, state) : v;
+      args[k] = isRefObj(v) ? resolveRef((v as { $ref: string }).$ref, state) : v;
     }
     return args;
   };
 
   /** @param {Record<string, any>} args */
-  const doResolve = (args) =>
+  const doResolve = (args: Record<string, any>) =>
     fetch("/__jx_server__", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -1484,24 +1515,23 @@ async function resolveServerFunctionViaProxy(def, state, key, base) {
     });
 
   // Always wrap in ref for reactivity
-  /** @type {import("@vue/reactivity").Ref<any>} */
-  const s = ref(null);
+  const s: import("@vue/reactivity").Ref<any> = ref(null);
   if (hasReactiveArg) {
     effect(() => {
       const args = resolveArgs();
       onEffectCleanup(() => {});
       doResolve(args)
-        .then((/** @type {unknown} */ result) => {
+        .then((result: unknown) => {
           s.value = result;
         })
-        .catch((/** @type {unknown} */ e) => console.error("Jx server proxy:", e));
+        .catch((e: unknown) => console.error("Jx server proxy:", e));
     });
   } else {
     doResolve(resolveArgs())
-      .then((/** @type {unknown} */ result) => {
+      .then((result: unknown) => {
         s.value = result;
       })
-      .catch((/** @type {unknown} */ e) => console.error("Jx server proxy:", e));
+      .catch((e: unknown) => console.error("Jx server proxy:", e));
   }
   return s;
 }
@@ -1516,7 +1546,7 @@ async function resolveServerFunctionViaProxy(def, state, key, base) {
  * @param {Record<string, any>} state - Reactive scope proxy (or child scope)
  * @returns {unknown}
  */
-export function resolveRef(ref, state) {
+export function resolveRef(ref: string, state: Record<string, any>) {
   if (typeof ref !== "string") return ref;
   if (ref.startsWith("$map/")) {
     const parts = ref.split("/");
@@ -1545,7 +1575,7 @@ export function resolveRef(ref, state) {
  * @param {unknown} v
  * @returns {boolean}
  */
-export function isSignal(v) {
+export function isSignal(v: unknown) {
   return isRef(v);
 }
 
@@ -1553,11 +1583,9 @@ export function isSignal(v) {
  * @param {unknown} v
  * @returns {boolean}
  */
-function isRefObj(v) {
+function isRefObj(v: unknown) {
   return (
-    v !== null &&
-    typeof v === "object" &&
-    typeof (/** @type {Record<string, unknown>} */ (v).$ref) === "string"
+    v !== null && typeof v === "object" && typeof (v as Record<string, unknown>).$ref === "string"
   );
 }
 
@@ -1565,7 +1593,7 @@ function isRefObj(v) {
  * @param {string} k
  * @returns {boolean}
  */
-function isNestedSelector(k) {
+function isNestedSelector(k: string) {
   return k.startsWith(":") || k.startsWith(".") || k.startsWith("&") || k.startsWith("[");
 }
 
@@ -1574,8 +1602,8 @@ function isNestedSelector(k) {
  * @param {string} path
  * @returns {unknown}
  */
-function getPath(obj, path) {
-  return path.split(/[./]/).reduce((o, k) => /** @type {Record<string, unknown>} */ (o)?.[k], obj);
+function getPath(obj: unknown, path: string) {
+  return path.split(/[./]/).reduce((o, k) => (o as Record<string, unknown>)?.[k], obj);
 }
 
 /**
@@ -1583,10 +1611,10 @@ function getPath(obj, path) {
  * @param {Record<string, any>} parentState
  * @returns {Record<string, any>}
  */
-function mergeProps(def, parentState) {
+function mergeProps(def: Record<string, any>, parentState: Record<string, any>) {
   const child = Object.create(parentState);
   for (const [k, v] of Object.entries(def.$props ?? {})) {
-    child[k] = isRefObj(v) ? resolveRef(v.$ref, parentState) : v;
+    child[k] = isRefObj(v) ? resolveRef((v as { $ref: string }).$ref, parentState) : v;
   }
   return child;
 }
@@ -1597,7 +1625,7 @@ function mergeProps(def, parentState) {
  * @param {string} s
  * @returns {string}
  */
-export function camelToKebab(s) {
+export function camelToKebab(s: string) {
   return s.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 }
 
@@ -1607,7 +1635,7 @@ export function camelToKebab(s) {
  * @param {Record<string, unknown> | object} rules
  * @returns {string}
  */
-export function toCSSText(rules) {
+export function toCSSText(rules: Record<string, unknown> | object) {
   return Object.entries(rules)
     .filter(([k, v]) => !isNestedSelector(k) && (v === null || typeof v !== "object"))
     .map(([p, v]) => `${camelToKebab(p)}: ${v}`)
@@ -1626,7 +1654,7 @@ const _elementDefs = new Map();
  * @param {string} base
  * @returns {Promise<void>}
  */
-async function registerElements(elements, base) {
+async function registerElements(elements: any[], base: string) {
   for (const entry of elements) {
     // Bare string: npm package side-effect import (registers custom elements)
     if (typeof entry === "string") {
@@ -1663,7 +1691,7 @@ async function registerElements(elements, base) {
  * @param {any[]} entries
  * @param {string} _base - Document base URL for resolving relative paths
  */
-function injectHead(entries, _base) {
+function injectHead(entries: any[], _base: string) {
   for (const entry of entries) {
     if (!entry || !entry.tagName) continue;
     const tag = entry.tagName.toLowerCase();
@@ -1700,15 +1728,18 @@ function injectHead(entries, _base) {
  * @param {string} [base] - Base URL for resolving $src imports
  * @returns {Promise<void>}
  */
-export async function defineElement(source, base) {
+const _definedSources = new Set<string>();
+
+export async function defineElement(source: string | Record<string, any>, base?: string) {
   if (typeof source === "string") {
     base = new URL(source, base ?? location.href).href;
+    if (_definedSources.has(base)) return;
+    _definedSources.add(base);
     source = await resolve(source);
   }
   base = base ?? location.href;
 
-  /** @type {Record<string, any>} */
-  const source_ = /** @type {Record<string, any>} */ (source);
+  const source_: Record<string, any> = source as Record<string, any>;
 
   const tagName = source_.tagName;
   if (!tagName || !tagName.includes("-")) {
@@ -1727,6 +1758,9 @@ export async function defineElement(source, base) {
   const observedAttrs = def.observedAttributes ?? [];
 
   const ElementClass = class extends HTMLElement {
+    _jxInitialized = false;
+    _state: Record<string, any> | null = null;
+
     static get observedAttributes() {
       return observedAttrs;
     }
@@ -1751,8 +1785,8 @@ export async function defineElement(source, base) {
 
       // Merge $props set as JS properties by parent before connection
       for (const key of Object.keys(def.state ?? {})) {
-        if (key in this && /** @type {Record<string, unknown>} */ (this)[key] !== undefined) {
-          state[key] = /** @type {Record<string, unknown>} */ (this)[key];
+        if (key in this && (this as Record<string, unknown>)[key] !== undefined) {
+          state[key] = (this as Record<string, unknown>)[key];
         }
       }
       // Set up property getters/setters that forward into reactive state
@@ -1760,7 +1794,7 @@ export async function defineElement(source, base) {
         if (!(key in HTMLElement.prototype)) {
           Object.defineProperty(this, key, {
             get: () => state[key],
-            set: (/** @type {unknown} */ v) => {
+            set: (v: unknown) => {
               state[key] = v;
             },
             configurable: true,
@@ -1768,7 +1802,7 @@ export async function defineElement(source, base) {
         }
       }
 
-      /** @type {Record<string, unknown>} */ (this)._state = state;
+      this._state = state;
 
       // Capture light DOM children (for slot distribution) before rendering
       const slottedChildren = Array.from(this.childNodes);
@@ -1798,38 +1832,25 @@ export async function defineElement(source, base) {
     }
 
     disconnectedCallback() {
-      /** @type {{ _state?: Record<string, any> }} */
-      const self = /** @type {{ _state?: Record<string, any> }} */ (/** @type {unknown} */ (this));
-      if (typeof self._state?.onUnmount === "function") {
-        self._state.onUnmount(self._state);
+      if (typeof this._state?.onUnmount === "function") {
+        this._state.onUnmount(this._state);
       }
     }
 
     adoptedCallback() {
-      /** @type {{ _state?: Record<string, any> }} */
-      const self = /** @type {{ _state?: Record<string, any> }} */ (/** @type {unknown} */ (this));
-      if (typeof self._state?.onAdopted === "function") {
-        self._state.onAdopted(self._state);
+      if (typeof this._state?.onAdopted === "function") {
+        this._state.onAdopted(this._state);
       }
     }
 
-    attributeChangedCallback(
-      /** @type {string} */ name,
-      /** @type {string | null} */ oldVal,
-      /** @type {string | null} */ newVal,
-    ) {
-      /** @type {{ _state?: Record<string, any> }} */
-      const self = /** @type {{ _state?: Record<string, any> }} */ (/** @type {unknown} */ (this));
-      if (!self._state || oldVal === newVal) return;
-      const camelKey = name.replace(
-        /-([a-z])/g,
-        (/** @type {string} */ _, /** @type {string} */ c) => c.toUpperCase(),
-      );
-      const current = self._state[camelKey];
-      if (typeof current === "number") self._state[camelKey] = Number(newVal);
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {
+      if (!this._state || oldVal === newVal) return;
+      const camelKey = name.replace(/-([a-z])/g, (_: string, c: string) => c.toUpperCase());
+      const current = this._state[camelKey];
+      if (typeof current === "number") this._state[camelKey] = Number(newVal);
       else if (typeof current === "boolean")
-        self._state[camelKey] = newVal !== null && newVal !== "false";
-      else self._state[camelKey] = newVal;
+        this._state[camelKey] = newVal !== null && newVal !== "false";
+      else this._state[camelKey] = newVal;
     }
   };
 
@@ -1845,7 +1866,12 @@ export async function defineElement(source, base) {
  * @param {JxPath} [path]
  * @returns {HTMLElement}
  */
-function renderCustomElementWithProps(def, state, options, path) {
+function renderCustomElementWithProps(
+  def: Record<string, any>,
+  state: Record<string, any>,
+  options?: JxRenderOptions,
+  path?: JxPath,
+) {
   const el = document.createElement(def.tagName);
 
   if (options?.onNodeCreated) options.onNodeCreated(el, path ?? [], def);
@@ -1853,18 +1879,19 @@ function renderCustomElementWithProps(def, state, options, path) {
   // Set JS properties from $props (before connection)
   for (const [key, val] of Object.entries(def.$props ?? {})) {
     if (isRefObj(val)) {
-      const resolved = resolveRef(val.$ref, state);
-      /** @type {Record<string, unknown>} */ (el)[key] = resolved;
+      const refVal = val as { $ref: string };
+      const resolved = resolveRef(refVal.$ref, state);
+      (el as Record<string, unknown>)[key] = resolved;
       // Reactive forwarding: re-set the property when the source changes
       effect(() => {
-        /** @type {Record<string, unknown>} */ (el)[key] = resolveRef(val.$ref, state);
+        (el as Record<string, unknown>)[key] = resolveRef(refVal.$ref, state);
       });
     } else if (isTemplateString(val)) {
       effect(() => {
-        /** @type {Record<string, unknown>} */ (el)[key] = evaluateTemplate(val, state);
+        (el as Record<string, unknown>)[key] = evaluateTemplate(val as string, state);
       });
     } else {
-      /** @type {Record<string, unknown>} */ (el)[key] = val;
+      (el as Record<string, unknown>)[key] = val;
     }
   }
 
@@ -1888,25 +1915,20 @@ function renderCustomElementWithProps(def, state, options, path) {
  * @param {HTMLElement} host
  * @param {ChildNode[]} slottedChildren
  */
-function distributeSlots(host, slottedChildren) {
+function distributeSlots(host: HTMLElement, slottedChildren: ChildNode[]) {
   if (slottedChildren.length === 0) return;
 
   const slots = host.querySelectorAll("slot");
   if (slots.length === 0) return;
 
-  /** @type {Map<string | null, ChildNode[]>} */
-  const named = new Map();
-  /** @type {ChildNode[]} */
-  const unnamed = [];
+  const named: Map<string | null, ChildNode[]> = new Map();
+  const unnamed: ChildNode[] = [];
 
   for (const child of slottedChildren) {
-    if (
-      child.nodeType === Node.ELEMENT_NODE &&
-      /** @type {Element} */ (child).getAttribute("slot")
-    ) {
-      const name = /** @type {Element} */ (child).getAttribute("slot");
+    if (child.nodeType === Node.ELEMENT_NODE && (child as Element).getAttribute("slot")) {
+      const name = (child as Element).getAttribute("slot");
       if (!named.has(name)) named.set(name, []);
-      /** @type {ChildNode[]} */ (named.get(name)).push(child);
+      (named.get(name) as ChildNode[]).push(child);
     } else {
       unnamed.push(child);
     }