@jxsuite/compiler 0.23.2 → 0.24.0

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

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 /**
  * Shared.js — Shared compiler utilities
  *
@@ -7,6 +8,16 @@
 
 import { camelToKebab, toCSSText, RESERVED_KEYS } from "@jxsuite/runtime";
 import { compileExpression, isMutating, evaluateExpression } from "@jxsuite/runtime/expression";
+import type { ExpressionNode } from "@jxsuite/runtime/expression";
+import type {
+  JxElement,
+  JxMutableNode,
+  JxStyle,
+  JxStateDefinition,
+  JxPrototypeDef,
+  JxStateObject,
+  JxMappedArray,
+} from "@jxsuite/schema/types";
 
 // Re-export runtime utilities used by submodules
 export {
@@ -17,6 +28,7 @@ export {
   isMutating,
   evaluateExpression,
 };
+export type { ExpressionNode };
 
 // CDN defaults
 export const DEFAULT_REACTIVITY_SRC = "https://esm.sh/@vue/reactivity@3.5.32";
@@ -53,7 +65,7 @@ export const SCHEMA_KEYWORDS = new Set([
  * @param {unknown} src
  * @returns {boolean}
  */
-export function isClassJsonSrc(src) {
+export function isClassJsonSrc(src: unknown) {
   return typeof src === "string" && src.endsWith(".class.json");
 }
 
@@ -63,7 +75,7 @@ export function isClassJsonSrc(src) {
  * @param {Record<string, unknown>} obj
  * @returns {boolean}
  */
-export function isSchemaOnly(obj) {
+export function isSchemaOnly(obj: Record<string, unknown>) {
   for (const k of Object.keys(obj)) {
     if (!SCHEMA_KEYWORDS.has(k)) return false;
   }
@@ -76,7 +88,7 @@ export function isSchemaOnly(obj) {
  * @param {unknown} val
  * @returns {boolean}
  */
-export function isTemplateString(val) {
+export function isTemplateString(val: unknown) {
   return typeof val === "string" && val.includes("${");
 }
 
@@ -86,7 +98,7 @@ export function isTemplateString(val) {
  * @param {JxElement | JxMutableNode | string} def
  * @returns {boolean}
  */
-export function isDynamic(def) {
+export function isDynamic(def: JxElement | JxMutableNode | string) {
   if (!def || typeof def !== "object") return false;
 
   if (def.state) {
@@ -98,11 +110,11 @@ export function isDynamic(def) {
         d &&
         typeof d === "object" &&
         !Array.isArray(d) &&
-        /** @type {JxPrototypeDef} */ (d).timing === "compiler"
+        (d as JxPrototypeDef).timing === "compiler"
       )
         continue;
       if (typeof d !== "object" || d === null || Array.isArray(d)) return true;
-      if (/** @type {JxPrototypeDef} */ (d).$prototype) return true;
+      if ((d as JxPrototypeDef).$prototype) return true;
       if ("default" in /** @type {object} */ (d)) return true;
       if (isSchemaOnly(d)) continue;
       return true;
@@ -112,7 +124,7 @@ export function isDynamic(def) {
   if (def.$switch) return true;
   if (
     !Array.isArray(def.children) &&
-    /** @type {JxMappedArray | undefined} */ (def.children)?.$prototype === "Array"
+    (def.children as JxMappedArray | undefined)?.$prototype === "Array"
   )
     return true;
 
@@ -122,11 +134,7 @@ export function isDynamic(def) {
 
   for (const [key, val] of Object.entries(def)) {
     if (RESERVED_KEYS.has(key)) continue;
-    if (
-      val !== null &&
-      typeof val === "object" &&
-      typeof (/** @type {JxMutableNode} */ (val).$ref) === "string"
-    )
+    if (val !== null && typeof val === "object" && typeof (val as JxMutableNode).$ref === "string")
       return true;
     if (isTemplateString(val)) return true;
   }
@@ -152,23 +160,19 @@ export function isDynamic(def) {
  * @param {JxElement | JxMutableNode | string} def
  * @returns {boolean}
  */
-export function isNodeDynamic(def) {
+export function isNodeDynamic(def: JxElement | JxMutableNode | string) {
   if (!def || typeof def !== "object") return false;
 
   if (def.$switch) return true;
   if (
     !Array.isArray(def.children) &&
-    /** @type {JxMappedArray | undefined} */ (def.children)?.$prototype === "Array"
+    (def.children as JxMappedArray | undefined)?.$prototype === "Array"
   )
     return true;
 
   for (const [key, val] of Object.entries(def)) {
     if (RESERVED_KEYS.has(key)) continue;
-    if (
-      val !== null &&
-      typeof val === "object" &&
-      typeof (/** @type {JxMutableNode} */ (val).$ref) === "string"
-    )
+    if (val !== null && typeof val === "object" && typeof (val as JxMutableNode).$ref === "string")
       return true;
     if (isTemplateString(val)) return true;
   }
@@ -194,10 +198,10 @@ export function isNodeDynamic(def) {
  * @param {JxElement | JxMutableNode | string} def
  * @returns {boolean}
  */
-export function hasAnyIsland(def) {
+export function hasAnyIsland(def: JxElement | JxMutableNode | string): boolean {
   if (!def || typeof def !== "object") return false;
   if (isDynamic(def)) return true;
-  if (Array.isArray(def.children)) return def.children.some((c) => hasAnyIsland(c));
+  if (Array.isArray(def.children)) return def.children.some((c): boolean => hasAnyIsland(c));
   return false;
 }
 
@@ -214,7 +218,12 @@ export function hasAnyIsland(def) {
  *   media: Record<string, string>;
  * }}
  */
-export function createCompileContext(raw, parentScope = null, scopeDefs = {}, media = {}) {
+export function createCompileContext(
+  raw: JxElement | JxMutableNode | null,
+  parentScope: Record<string, unknown> | null = null,
+  scopeDefs: Record<string, unknown> = {},
+  media: Record<string, string> = {},
+) {
   const scope = raw?.state
     ? buildInitialScope(raw.state, parentScope)
     : (parentScope ?? Object.create(null));
@@ -226,7 +235,10 @@ export function createCompileContext(raw, parentScope = null, scopeDefs = {}, me
  * @param {Record<string, unknown> | null} [parentScope]
  * @returns {Record<string, unknown>}
  */
-export function buildInitialScope(defs = {}, parentScope = null) {
+export function buildInitialScope(
+  defs: Record<string, JxStateDefinition> = {},
+  parentScope: Record<string, unknown> | null = null,
+) {
   const scope = Object.create(parentScope ?? null);
 
   for (const [key, def] of Object.entries(defs)) {
@@ -234,7 +246,7 @@ export function buildInitialScope(defs = {}, parentScope = null) {
       setOwnScopeValue(scope, key, cloneValue(def));
       continue;
     }
-    const d = /** @type {JxStateObject & JxPrototypeDef} */ (def);
+    const d = def as JxStateObject & JxPrototypeDef;
     if ("default" in d) {
       setOwnScopeValue(scope, key, cloneValue(d.default));
       continue;
@@ -250,11 +262,11 @@ export function buildInitialScope(defs = {}, parentScope = null) {
       continue;
     }
     if (!def || typeof def !== "object") continue;
-    const d = /** @type {JxStateObject & JxPrototypeDef} */ (def);
+    const d = def as JxStateObject & JxPrototypeDef;
     if ("$expression" in d) {
-      const node = /** @type {any} */ (d).$expression;
+      const node = (d as Record<string, unknown>).$expression as ExpressionNode;
       if (isMutating(node.operator)) {
-        setOwnScopeValue(scope, key, (/** @type {any} */ s, /** @type {any} */ event) =>
+        setOwnScopeValue(scope, key, (s: Record<string, any>, event: Event) =>
           evaluateExpression(node, s, event),
         );
       } else {
@@ -288,7 +300,7 @@ export function buildInitialScope(defs = {}, parentScope = null) {
  * @param {string} key
  * @param {unknown} value
  */
-export function setOwnScopeValue(scope, key, value) {
+export function setOwnScopeValue(scope: Record<string, unknown>, key: string, value: unknown) {
   Object.defineProperty(scope, key, {
     value,
     enumerable: true,
@@ -302,7 +314,11 @@ export function setOwnScopeValue(scope, key, value) {
  * @param {string} key
  * @param {() => unknown} getter
  */
-export function defineLazyScopeValue(scope, key, getter) {
+export function defineLazyScopeValue(
+  scope: Record<string, unknown>,
+  key: string,
+  getter: () => unknown,
+) {
   Object.defineProperty(scope, key, {
     enumerable: true,
     configurable: true,
@@ -315,9 +331,9 @@ export function defineLazyScopeValue(scope, key, getter) {
  * @param {Record<string, unknown>} scope
  * @returns {unknown}
  */
-export function resolveStaticValue(value, scope) {
-  if (isRefObject(value)) return resolveRefValue(/** @type {JxMutableNode} */ (value).$ref, scope);
-  if (isTemplateString(value)) return evaluateStaticTemplate(/** @type {string} */ (value), scope);
+export function resolveStaticValue(value: unknown, scope: Record<string, unknown> | null) {
+  if (isRefObject(value)) return resolveRefValue((value as JxMutableNode).$ref, scope!);
+  if (isTemplateString(value)) return evaluateStaticTemplate(value as string, scope!);
   return value;
 }
 
@@ -325,11 +341,9 @@ export function resolveStaticValue(value, scope) {
  * @param {unknown} value
  * @returns {boolean}
  */
-export function isRefObject(value) {
+export function isRefObject(value: unknown) {
   return (
-    value !== null &&
-    typeof value === "object" &&
-    typeof (/** @type {JxMutableNode} */ (value).$ref) === "string"
+    value !== null && typeof value === "object" && typeof (value as JxMutableNode).$ref === "string"
   );
 }
 
@@ -338,13 +352,12 @@ export function isRefObject(value) {
  * @param {Record<string, unknown>} scope
  * @returns {unknown}
  */
-export function resolveRefValue(refValue, scope) {
+export function resolveRefValue(refValue: unknown, scope: Record<string, unknown>) {
   if (typeof refValue !== "string") return refValue;
   if (refValue.startsWith("$map/")) {
     const parts = refValue.split("/");
     const key = parts[1];
-    const base = /** @type {Record<string, unknown> | undefined} */ (scope.$map)?.[key] ??
-    scope["$map/" + key];
+    const base = (scope.$map as Record<string, unknown> | undefined)?.[key] ?? scope["$map/" + key];
     return parts.length > 2 ? getPathValue(base, parts.slice(2).join("/")) : base;
   }
   if (refValue.startsWith("#/state/")) {
@@ -361,7 +374,7 @@ export function resolveRefValue(refValue, scope) {
  * @param {Record<string, unknown>} scope
  * @returns {unknown}
  */
-export function evaluateStaticTemplate(str, scope) {
+export function evaluateStaticTemplate(str: string, scope: Record<string, unknown>) {
   try {
     const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
     if (singleExprMatch) {
@@ -380,24 +393,21 @@ export function evaluateStaticTemplate(str, scope) {
  * @param {string} path
  * @returns {unknown}
  */
-export function getPathValue(base, path) {
+export function getPathValue(base: unknown, path: string) {
   if (!path) return base;
-  return path.split("/").reduce(
-    /**
-     * @param {Record<string, unknown>} acc
-     * @param {string} key
-     * @returns {Record<string, unknown>}
-     */
-    (acc, key) => (/** @type {Record<string, unknown>} */ (acc == null ? undefined : acc[key])),
-    /** @type {Record<string, unknown>} */ (base),
-  );
+  return path
+    .split("/")
+    .reduce<unknown>(
+      (acc, key: string) => (acc == null ? undefined : (acc as Record<string, unknown>)[key]),
+      base,
+    );
 }
 
 /**
  * @param {unknown} value
  * @returns {unknown}
  */
-export function cloneValue(value) {
+export function cloneValue(value: unknown) {
   if (value === null || typeof value !== "object") return value;
   return JSON.parse(JSON.stringify(value));
 }
@@ -410,7 +420,7 @@ export function cloneValue(value) {
  * @param {JxElement | JxMutableNode} def
  * @param {Record<string, unknown>} scope @returns {string}
  */
-export function buildAttrs(def, scope) {
+export function buildAttrs(def: JxElement | JxMutableNode, scope: Record<string, unknown> | null) {
   let out = "";
 
   const id = resolveStaticValue(def.id, scope);
@@ -492,7 +502,16 @@ export function buildAttrs(def, scope) {
  * @param {(def: any, raw: any, context: any) => string} childCompiler
  * @returns {string}
  */
-export function buildInner(def, raw, context, childCompiler) {
+export function buildInner(
+  def: JxElement,
+  raw: JxElement | null,
+  context: {
+    scope: Record<string, unknown> | null;
+    scopeDefs: Record<string, unknown>;
+    media: Record<string, string>;
+  },
+  childCompiler: (def: unknown, raw: unknown, context: unknown) => string,
+) {
   const source = raw ?? def;
 
   if (source.textContent !== undefined) {
@@ -500,12 +519,12 @@ export function buildInner(def, raw, context, childCompiler) {
     return value == null ? "" : escapeHtml(String(value));
   }
   if (source.innerHTML)
-    return /** @type {string} */ (resolveStaticValue(source.innerHTML, context.scope)) ?? "";
+    return (resolveStaticValue(source.innerHTML, context.scope) as string) ?? "";
   if (Array.isArray(source.children)) {
     const rawChildren = raw?.children;
     return source.children
-      .map((/** @type {JxElement | JxMutableNode | string} */ c, /** @type {number} */ i) => {
-        const childRaw = /** @type {(JxElement | string)[] | undefined} */ (rawChildren)?.[i] ?? c;
+      .map((c: JxElement | JxMutableNode | string, i: number) => {
+        const childRaw = (rawChildren as (JxElement | string)[] | undefined)?.[i] ?? c;
         return childCompiler(c, childRaw, context);
       })
       .join("\n  ");
@@ -523,15 +542,18 @@ export function buildInner(def, raw, context, childCompiler) {
  * @param {JxStyle | null} [projectStyle]
  * @returns {string}
  */
-export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
-  /** @type {string[]} */
-  const rules = [];
+export function compileStyles(
+  doc: JxElement | JxMutableNode,
+  mediaQueries: Record<string, string> = {},
+  projectStyle: JxStyle | null = null,
+) {
+  const rules: string[] = [];
 
   // Emit project-level (site-wide) styles — CSS custom properties go on :root,
   // everything else on body.  Project-level style is implicitly :root, so a
   // flat object like { "--bg": "#000", "margin": "0" } is the expected format.
   if (projectStyle && typeof projectStyle === "object") {
-    function emitProjectRules(/** @type {string} */ selector, /** @type {JxMutableNode} */ obj) {
+    function emitProjectRules(selector: string, obj: Record<string, unknown>) {
       const props = toCSSText(obj);
       if (props) rules.push(`${selector} { ${props} }`);
       for (const [key, val] of Object.entries(obj)) {
@@ -560,13 +582,13 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
           : key.startsWith(":") || key.startsWith(".") || key.startsWith("[")
             ? `${selector}${key}`
             : `${selector} ${key}`;
-        emitProjectRules(resolved, /** @type {Record<string, unknown>} */ (val));
+        emitProjectRules(resolved, val as Record<string, unknown>);
       }
     }
 
     for (const [key, val] of Object.entries(projectStyle)) {
       if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[")) {
-        emitProjectRules(key, /** @type {Record<string, unknown>} */ (val));
+        emitProjectRules(key, val as Record<string, unknown>);
       } else if (
         val !== null &&
         typeof val === "object" &&
@@ -574,7 +596,7 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
         !key.startsWith("@") &&
         !key.startsWith("--")
       ) {
-        emitProjectRules(key, val);
+        emitProjectRules(key, val as Record<string, unknown>);
       } else if (key.startsWith("@")) {
         // @media block at top level
         const atRule = key.startsWith("@--")
@@ -582,15 +604,13 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
           : key.startsWith("@(")
             ? `@media ${key.slice(1)}`
             : key;
-        rules.push(`${atRule} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
+        rules.push(`${atRule} { body { ${toCSSText(val as Record<string, unknown>)} } }`);
       }
     }
     // Collect CSS custom properties into :root {}
-    /** @type {Record<string, unknown>} */
-    const rootProps = {};
+    const rootProps: Record<string, unknown> = {};
     // Collect direct CSS properties into body {}
-    /** @type {Record<string, unknown>} */
-    const bodyProps = {};
+    const bodyProps: Record<string, unknown> = {};
     for (const [key, val] of Object.entries(projectStyle)) {
       if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[") || key.startsWith("@"))
         continue;
@@ -625,7 +645,12 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
  * @param {string[]} rules
  * @param {Record<string, string>} mediaQueries
  */
-function emitNestedElement(selector, obj, rules, mediaQueries) {
+function emitNestedElement(
+  selector: string,
+  obj: Record<string, unknown>,
+  rules: string[],
+  mediaQueries: Record<string, string>,
+) {
   const props = toCSSText(obj);
   if (props) rules.push(`${selector} { ${props} }`);
   for (const [key, val] of Object.entries(obj)) {
@@ -656,7 +681,7 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
       : key.startsWith(":") || key.startsWith(".") || key.startsWith("[")
         ? `${selector}${key}`
         : `${selector} ${key}`;
-    emitNestedElement(resolved, /** @type {Record<string, unknown>} */ (val), rules, mediaQueries);
+    emitNestedElement(resolved, val as Record<string, unknown>, rules, mediaQueries);
   }
 }
 
@@ -668,11 +693,11 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
  * @param {{ n: number }} [counter]
  */
 export function collectStyles(
-  def,
-  rules,
-  mediaQueries,
-  _parentSel = "",
-  counter = { n: 0 },
+  def: JxElement | JxMutableNode | string,
+  rules: string[],
+  mediaQueries: Record<string, string>,
+  _parentSel: string = "",
+  counter: { n: number } = { n: 0 },
   prefix = "jx",
 ) {
   if (!def || typeof def !== "object") return;
@@ -748,7 +773,7 @@ export function collectStyles(
   }
 
   if (Array.isArray(def.children)) {
-    def.children.forEach((/** @type {JxElement | JxMutableNode | string} */ c) => {
+    def.children.forEach((c: JxElement | JxMutableNode | string) => {
       collectStyles(c, rules, mediaQueries, selector, counter, prefix);
     });
   }
@@ -762,7 +787,7 @@ export function collectStyles(
  * @param {string} str
  * @returns {string}
  */
-export function escapeHtml(str) {
+export function escapeHtml(str: string) {
   return String(str)
     .replace(/&/g, "&amp;")
     .replace(/</g, "&lt;")
@@ -777,7 +802,7 @@ export function escapeHtml(str) {
  * @param {string} title
  * @returns {string}
  */
-export function titleToTagName(title) {
+export function titleToTagName(title: string) {
   const slug = title
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, "-")
@@ -789,10 +814,10 @@ export function titleToTagName(title) {
  * @param {string} tagName
  * @returns {string}
  */
-export function tagNameToClassName(tagName) {
+export function tagNameToClassName(tagName: string) {
   return tagName
     .split("-")
-    .map((/** @type {string} */ s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .map((s: string) => s.charAt(0).toUpperCase() + s.slice(1))
     .join("");
 }
 
@@ -802,9 +827,8 @@ export function tagNameToClassName(tagName) {
  * @param {JxElement} doc
  * @returns {string[]}
  */
-export function collectSrcImports(doc) {
-  /** @type {Set<string>} */
-  const srcs = new Set();
+export function collectSrcImports(doc: JxElement) {
+  const srcs: Set<string> = new Set();
   _walkSrc(doc, srcs);
   return [...srcs];
 }
@@ -813,24 +837,22 @@ export function collectSrcImports(doc) {
  * @param {JxElement | JxMutableNode | string} def
  * @param {Set<string>} srcs
  */
-function _walkSrc(def, srcs) {
+function _walkSrc(def: JxElement | JxMutableNode | string, srcs: Set<string>) {
   if (!def || typeof def !== "object") return;
   if (def.state) {
     for (const d of Object.values(def.state)) {
       if (
         d &&
         typeof d === "object" &&
-        /** @type {JxMutableNode} */ (d).$prototype === "Function" &&
-        /** @type {JxMutableNode} */ (d).$src
+        (d as JxMutableNode).$prototype === "Function" &&
+        (d as JxMutableNode).$src
       ) {
-        srcs.add(/** @type {string} */ (/** @type {JxMutableNode} */ (d).$src));
+        srcs.add((d as JxMutableNode).$src as string);
       }
     }
   }
   if (Array.isArray(def.children)) {
-    def.children.forEach((/** @type {JxElement | JxMutableNode | string} */ c) =>
-      _walkSrc(c, srcs),
-    );
+    def.children.forEach((c: JxElement | JxMutableNode | string) => _walkSrc(c, srcs));
   }
 }
 
@@ -840,7 +862,7 @@ function _walkSrc(def, srcs) {
  * @param {JxElement} doc
  * @returns {{ key: string; exportName: string; src: string }[]}
  */
-export function collectServerEntries(doc) {
+export function collectServerEntries(doc: JxElement) {
   /** @type {Map<string, { key: string; exportName: string; src: string }>} */
   const entries = new Map();
   _walkServerEntries(doc, entries);
@@ -851,11 +873,14 @@ export function collectServerEntries(doc) {
  * @param {JxElement | JxMutableNode | string} def
  * @param {Map<string, { key: string; exportName: string; src: string }>} entries
  */
-function _walkServerEntries(def, entries) {
+function _walkServerEntries(
+  def: JxElement | JxMutableNode | string,
+  entries: Map<string, { key: string; exportName: string; src: string }>,
+) {
   if (!def || typeof def !== "object") return;
   if (def.state) {
     for (const [key, d] of Object.entries(def.state)) {
-      const entry = /** @type {JxMutableNode} */ (d);
+      const entry = d as JxMutableNode;
       if (
         entry &&
         typeof entry === "object" &&
@@ -869,16 +894,23 @@ function _walkServerEntries(def, entries) {
     }
   }
   if (Array.isArray(def.children)) {
-    def.children.forEach((/** @type {JxElement | JxMutableNode | string} */ c) =>
-      _walkServerEntries(c, entries),
-    );
+    def.children.forEach((c: JxElement | JxMutableNode | string) => _walkServerEntries(c, entries));
   }
 }
 
 // ─── Component pre-rendering ─────────────────────────────────────────────────
 
-/** @type {Set<string>} */
-const SELF_CLOSING = new Set(["input", "br", "hr", "img", "meta", "link", "area", "col", "source"]);
+const SELF_CLOSING: Set<string> = new Set([
+  "input",
+  "br",
+  "hr",
+  "img",
+  "meta",
+  "link",
+  "area",
+  "col",
+  "source",
+]);
 
 /**
  * Recursively render a Jx node tree to static HTML for pre-rendering.
@@ -888,7 +920,11 @@ const SELF_CLOSING = new Set(["input", "br", "hr", "img", "meta", "link", "area"
  * @param {string | null} [slotContent] - HTML to substitute for `<slot>` elements
  * @returns {string}
  */
-export function renderStaticNode(node, scope, slotContent = null) {
+export function renderStaticNode(
+  node: JxElement | JxMutableNode | string,
+  scope: Record<string, unknown> | null,
+  slotContent: string | null = null,
+): string {
   if (typeof node === "string") {
     if (isTemplateString(node) && scope) {
       const val = evaluateStaticTemplate(node, scope);
@@ -898,8 +934,8 @@ export function renderStaticNode(node, scope, slotContent = null) {
   }
   if (typeof node === "number" || typeof node === "boolean") return escapeHtml(String(node));
   if (Array.isArray(node))
-    return node
-      .map((/** @type {JxElement | JxMutableNode | string} */ c) =>
+    return (node as (JxElement | JxMutableNode | string)[])
+      .map((c: JxElement | JxMutableNode | string): string =>
         renderStaticNode(c, scope, slotContent),
       )
       .join("\n");
@@ -923,12 +959,10 @@ export function renderStaticNode(node, scope, slotContent = null) {
     inner = val != null ? escapeHtml(String(val)) : "";
   } else if (node.innerHTML) {
     const val = resolveStaticValue(node.innerHTML, scope);
-    inner = val != null ? String(val) : /** @type {string} */ (node.innerHTML);
+    inner = val != null ? String(val) : (node.innerHTML as string);
   } else if (Array.isArray(node.children)) {
     inner = node.children
-      .map((/** @type {JxElement | JxMutableNode | string} */ c) =>
-        renderStaticNode(c, scope, slotContent),
-      )
+      .map((c: JxElement | JxMutableNode | string) => renderStaticNode(c, scope, slotContent))
       .join("\n");
   }
 
@@ -944,9 +978,12 @@ export function renderStaticNode(node, scope, slotContent = null) {
  * @param {string | null} [slotContent] - HTML to substitute for `<slot>` elements
  * @returns {string} The pre-rendered innerHTML
  */
-export function preRenderComponentHtml(doc, propsOverride = null, slotContent = null) {
-  /** @type {Record<string, JxStateDefinition>} */
-  let stateDefs = doc.state ?? {};
+export function preRenderComponentHtml(
+  doc: JxElement,
+  propsOverride: Record<string, unknown> | null = null,
+  slotContent: string | null = null,
+) {
+  let stateDefs: Record<string, JxStateDefinition> = doc.state ?? {};
   if (propsOverride) {
     stateDefs = { ...stateDefs };
     for (const [key, value] of Object.entries(propsOverride)) {
@@ -960,19 +997,17 @@ export function preRenderComponentHtml(doc, propsOverride = null, slotContent =
         ) {
           stateDefs[key] = { .../** @type {JxStateObject} */ (existing), default: value };
         } else {
-          stateDefs[key] = /** @type {JxStateDefinition} */ (value);
+          stateDefs[key] = value as JxStateDefinition;
         }
       } else {
-        stateDefs[key] = /** @type {JxStateDefinition} */ (value);
+        stateDefs[key] = value as JxStateDefinition;
       }
     }
   }
   const scope = buildInitialScope(stateDefs, null);
   if (!Array.isArray(doc.children)) return "";
   return doc.children
-    .map((/** @type {JxElement | JxMutableNode | string} */ c) =>
-      renderStaticNode(c, scope, slotContent),
-    )
+    .map((c: JxElement | JxMutableNode | string) => renderStaticNode(c, scope, slotContent))
     .join("\n");
 }
 
@@ -985,7 +1020,7 @@ export function preRenderComponentHtml(doc, propsOverride = null, slotContent =
  * @param {JxElement} doc - Component JSON definition
  * @returns {boolean}
  */
-export function isComponentFullyStatic(doc) {
+export function isComponentFullyStatic(doc: JxElement) {
   return _isStaticNode(doc);
 }
 
@@ -993,7 +1028,7 @@ export function isComponentFullyStatic(doc) {
  * @param {JxElement | string | (JxElement | string)[]} node
  * @returns {boolean}
  */
-function _isStaticNode(node) {
+function _isStaticNode(node: JxElement | string | (JxElement | string)[]) {
   if (!node || typeof node !== "object") return true;
   if (Array.isArray(node)) return node.every(_isStaticNode);
 
@@ -1006,7 +1041,7 @@ function _isStaticNode(node) {
   if (node.state) {
     for (const def of Object.values(node.state)) {
       if (!def || typeof def !== "object") continue;
-      const d = /** @type {JxMutableNode} */ (def);
+      const d = def as JxMutableNode;
       if (d.$prototype) return false;
       if (d.$ref) return false;
     }
@@ -1038,13 +1073,16 @@ function _isStaticNode(node) {
  * @param {Record<string, string>} [mediaQueries] - Project media query definitions
  * @returns {string} CSS text, or empty string if no styles
  */
-export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries = {}) {
-  /** @type {string[]} */
-  const rules = [];
+export function buildComponentCSS(
+  tagName: string,
+  styleDef: JxStyle | null | undefined,
+  doc: JxElement | null = null,
+  mediaQueries: Record<string, string> = {},
+) {
+  const rules: string[] = [];
 
   if (styleDef && typeof styleDef === "object") {
-    /** @type {string[]} */
-    const decls = [];
+    const decls: string[] = [];
     for (const [prop, value] of Object.entries(styleDef)) {
       if (
         prop.startsWith(":") ||
@@ -1069,7 +1107,7 @@ export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries =
           : prop.startsWith("@(")
             ? `@media ${prop.slice(1)}`
             : prop;
-        rules.push(`${atRule} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
+        rules.push(`${atRule} { ${tagName} { ${toCSSText(val as Record<string, unknown>)} } }`);
       } else if (
         prop.startsWith(":") ||
         prop.startsWith(".") ||
@@ -1077,7 +1115,7 @@ export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries =
         prop.startsWith("[")
       ) {
         const resolved = prop.startsWith("&") ? prop.replace("&", tagName) : `${tagName}${prop}`;
-        rules.push(`${resolved} { ${toCSSText(/** @type {object} */ (val))} }`);
+        rules.push(`${resolved} { ${toCSSText(val as Record<string, unknown>)} }`);
       }
     }
   }