@jxsuite/compiler 0.28.0 → 0.28.3

package/src/site/content-loader.ts

@@ -13,15 +13,16 @@
  * @module content-loader
  */
 
-import { readFileSync, readdirSync, existsSync } from "node:fs";
-import { resolve, basename, extname } from "node:path";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { basename, extname, resolve } from "node:path";
 import { buildProjectFormatRegistry, unknownFormatError } from "./format-host.ts";
-import type { FormatRegistry, FormatEntry } from "@jxsuite/schema/format-registry";
+import type { FormatEntry, FormatRegistry } from "@jxsuite/schema/format-registry";
 import type {
-  ProjectConfig,
   ContentTypeDef,
   ContentTypeSchema,
   JxMutableNode,
+  ProjectConfig,
 } from "@jxsuite/schema/types";
 import type { ContentLoaderEntry } from "@jxsuite/parser/types";
 
@@ -35,21 +36,21 @@ import type { ContentLoaderEntry } from "@jxsuite/parser/types";
  * @returns {ContentLoaderEntry[]} Array of ContentEntry shapes
  */
 function loadJSONEntries(filePath: string) {
-  const raw = JSON.parse(readFileSync(filePath, "utf-8"));
+  const raw = JSON.parse(readFileSync(filePath, "utf8"));
   if (Array.isArray(raw)) {
     return raw.map((item: Record<string, unknown>, i: number) => ({
-      id: (item.id as string) ?? basename(filePath, ".json") + "-" + i,
-      data: item,
       body: null,
+      data: item,
+      id: (item.id as string) ?? `${basename(filePath, ".json")}-${i}`,
     }));
   }
   // Single object file — filename is the id
   const rawObj: Record<string, unknown> = raw;
   return [
     {
-      id: (rawObj.id as string) ?? basename(filePath, ".json"),
-      data: rawObj,
       body: null,
+      data: rawObj,
+      id: (rawObj.id as string) ?? basename(filePath, ".json"),
     },
   ];
 }
@@ -106,11 +107,15 @@ export async function loadContentTypes(
   registry?: FormatRegistry,
 ) {
   const result = loadContentConfig(projectRoot, projectConfig);
-  if (!result) return new Map();
+  if (!result) {
+    return new Map();
+  }
 
   const { config } = result;
-  const contentTypes: Map<string, ContentLoaderEntry[]> = new Map();
-  if (Object.keys(config.contentTypes).length === 0) return contentTypes;
+  const contentTypes = new Map<string, ContentLoaderEntry[]>();
+  if (Object.keys(config.contentTypes).length === 0) {
+    return contentTypes;
+  }
 
   const formats = registry ?? (await buildProjectFormatRegistry(projectRoot, projectConfig));
 
@@ -136,7 +141,9 @@ export function getContentTypeElements(
   projectConfig?: ProjectConfig,
 ) {
   const result = loadContentConfig(projectRoot, projectConfig);
-  if (!result) return undefined;
+  if (!result) {
+    return;
+  }
   const def = result.config.contentTypes?.[contentTypeName];
   return def?.$elements;
 }
@@ -156,9 +163,11 @@ async function loadContentType(
   projectRoot: string,
   registry: FormatRegistry,
 ) {
-  const source = contentTypeDef.source;
-  if (!source) return [];
-  const schema = contentTypeDef.schema;
+  const { source } = contentTypeDef;
+  if (!source) {
+    return [];
+  }
+  const { schema } = contentTypeDef;
 
   // Derive directive allowedNames from content type $elements (tag names from npm packages)
   const directiveOptions = contentTypeDef.$elements?.length
@@ -200,13 +209,15 @@ async function loadContentType(
     }
     try {
       const entries = (await entry.call("load", source, {
-        schema,
         directiveOptions,
+        schema,
       })) as ContentLoaderEntry[];
-      if (schema) validateEntries(entries, schema, name);
+      if (schema) {
+        validateEntries(entries, schema, name);
+      }
       return entries;
-    } catch (e) {
-      console.warn(`Content type "${name}": ${(e as Error).message}`);
+    } catch (error) {
+      console.warn(`Content type "${name}": ${errorMessage(error)}`);
       return [];
     }
   }
@@ -218,8 +229,12 @@ async function loadContentType(
   if (formatName === "json" || (!entry && ext === ".json")) {
     const files = discoverJSONFiles(resolvedSource);
     const entries: ContentLoaderEntry[] = [];
-    for (const filePath of files) entries.push(...loadJSONEntries(filePath));
-    if (schema) validateEntries(entries, schema, name);
+    for (const filePath of files) {
+      entries.push(...loadJSONEntries(filePath));
+    }
+    if (schema) {
+      validateEntries(entries, schema, name);
+    }
     return entries;
   }
 
@@ -245,8 +260,8 @@ async function loadContentType(
   for (const filePath of files) {
     entries.push(
       ...((await entry.call("load", filePath, {
-        schema,
         directiveOptions,
+        schema,
       })) as ContentLoaderEntry[]),
     );
   }
@@ -290,7 +305,9 @@ function validateEntries(
     // Check types
     for (const [field, def] of Object.entries(properties)) {
       const value = entry.data[field];
-      if (value == null) continue;
+      if (value == null) {
+        continue;
+      }
 
       if (def.type === "string" && typeof value !== "string") {
         console.warn(
@@ -332,17 +349,25 @@ export function resolveContentTypeRefs(
   config: { contentTypes: Record<string, ContentTypeDef> },
 ) {
   for (const [name, contentTypeDef] of Object.entries(config.contentTypes)) {
-    const schema = contentTypeDef.schema;
-    if (!schema?.properties) continue;
+    const { schema } = contentTypeDef;
+    if (!schema?.properties) {
+      continue;
+    }
 
     const entries = contentTypes.get(name);
-    if (!entries) continue;
+    if (!entries) {
+      continue;
+    }
 
     for (const [field, def] of Object.entries(schema.properties)) {
-      if (!def.$ref?.startsWith("#/contentTypes/")) continue;
+      if (!def.$ref?.startsWith("#/contentTypes/")) {
+        continue;
+      }
       const refContentType = def.$ref.replace("#/contentTypes/", "");
       const refEntries = contentTypes.get(refContentType);
-      if (!refEntries) continue;
+      if (!refEntries) {
+        continue;
+      }
 
       for (const entry of entries) {
         const refId = entry.data[field];

package/src/site/context-injection.ts

@@ -12,10 +12,10 @@
  * title $page.params — dynamic route parameters (if any)
  */
 
-import { resolve, dirname, relative } from "node:path";
+import { dirname, relative, resolve } from "node:path";
 import type {
-  JxElement,
   JxDocument,
+  JxElement,
   JxStateDefinition,
   ProjectConfig,
 } from "@jxsuite/schema/types";
@@ -36,10 +36,12 @@ export function injectContext(
   doc: JxDocument,
   projectConfig: ProjectConfig,
   route: SiteRoute,
-  contentTypes: Map<string, ContentLoaderEntry[]> = new Map(),
+  contentTypes = new Map<string, ContentLoaderEntry[]>(),
   projectRoot: string | null = null,
 ) {
-  if (!doc.state) doc.state = {};
+  if (!doc.state) {
+    doc.state = {};
+  }
 
   // $site context — read-only project-level data
   doc.state.$site = {
@@ -50,9 +52,9 @@ export function injectContext(
 
   // $page context — read-only page-level data
   doc.state.$page = {
-    url: route.urlPattern,
-    title: doc.title ?? doc._pageTitle ?? projectConfig.name ?? "",
     params: route._pathParams ?? {},
+    title: doc.title ?? doc._pageTitle ?? projectConfig.name ?? "",
+    url: route.urlPattern,
   };
 
   // Merge project-level state into page state (page wins on conflicts)
@@ -71,14 +73,16 @@ export function injectContext(
 
   // Merge project-level imports into page imports (page wins on collision)
   if (projectConfig.imports && Object.keys(projectConfig.imports).length > 0) {
-    if (!doc.imports) doc.imports = {};
+    if (!doc.imports) {
+      doc.imports = {};
+    }
     for (const [name, srcPath] of Object.entries(projectConfig.imports)) {
       if (!(name in doc.imports)) {
         const src = srcPath as string;
         // Only rebase relative paths — bare/npm specifiers pass through unmodified
         if (projectRoot && route.sourcePath && (src.startsWith("./") || src.startsWith("../"))) {
           const abs = resolve(projectRoot, src);
-          doc.imports[name] = "./" + relative(dirname(route.sourcePath), abs);
+          doc.imports[name] = `./${relative(dirname(route.sourcePath), abs)}`;
         } else {
           doc.imports[name] = src;
         }
@@ -91,7 +95,7 @@ export function injectContext(
     if (!doc.$elements?.length) {
       doc.$elements = [...projectConfig.$elements];
     } else {
-      const seen: Set<string> = new Set();
+      const seen = new Set<string>();
       const merged: (string | JxElement)[] = [];
       for (const entry of [
         ...projectConfig.$elements,

package/src/site/format-host.ts

@@ -7,14 +7,11 @@
  */
 
 import { readFileSync } from "node:fs";
-import { dirname, resolve, isAbsolute, sep } from "node:path";
+import { dirname, isAbsolute, resolve, sep } from "node:path";
 import { pathToFileURL } from "node:url";
 import { createRequire } from "node:module";
-import {
-  buildFormatRegistry,
-  type FormatRegistry,
-  type FormatHostIO,
-} from "@jxsuite/schema/format-registry";
+import { buildFormatRegistry } from "@jxsuite/schema/format-registry";
+import type { FormatHostIO, FormatRegistry } from "@jxsuite/schema/format-registry";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 
 export type { FormatRegistry, FormatEntry } from "@jxsuite/schema/format-registry";
@@ -32,32 +29,46 @@ export async function importImplementation(path: string): Promise<Record<string,
   const candidates = [path];
   const srcSeg = `${sep}src${sep}`;
   const distSeg = `${sep}dist${sep}`;
-  if (path.includes(srcSeg)) candidates.push(path.replace(srcSeg, distSeg));
-  if (path.endsWith(".js")) candidates.push(path.slice(0, -3) + ".ts");
+  if (path.includes(srcSeg)) {
+    candidates.push(path.replace(srcSeg, distSeg));
+  }
+  if (path.endsWith(".js")) {
+    candidates.push(`${path.slice(0, -3)}.ts`);
+  }
 
   let lastError: unknown;
   for (const candidate of candidates) {
     try {
       return await import(pathToFileURL(candidate).href);
-    } catch (e) {
-      lastError = e;
+    } catch (error) {
+      lastError = error;
     }
   }
-  throw lastError;
+  throw lastError instanceof Error ? lastError : new Error(String(lastError));
 }
 
 /** Create a node FormatHostIO rooted at a project (bare specifiers resolve via node_modules). */
 export function createNodeFormatIO(projectRoot: string): FormatHostIO {
   return {
-    loadJson: async (path) => JSON.parse(readFileSync(path, "utf-8")),
     importModule: (path) => importImplementation(path),
+    loadJson: async (path) => JSON.parse(readFileSync(path, "utf8")),
     resolvePath: (base, ref) => {
       if (ref.startsWith("./") || ref.startsWith("../")) {
         return resolve(dirname(base), ref);
       }
-      if (isAbsolute(ref)) return ref;
-      const require = createRequire(resolve(projectRoot, "package.json"));
-      return require.resolve(ref);
+      if (isAbsolute(ref)) {
+        return ref;
+      }
+      // Bare specifier — prefer the project's own node_modules, then fall back to the host's
+      // Resolution (the desktop app and dev server ship @jxsuite/parser, so format classes work
+      // Even when the project's dependencies are not installed).
+      const projRequire = createRequire(resolve(projectRoot, "package.json"));
+      try {
+        return projRequire.resolve(ref);
+      } catch {
+        const selfRequire = createRequire(import.meta.url);
+        return selfRequire.resolve(ref);
+      }
     },
   };
 }

package/src/site/head-merger.ts

@@ -34,18 +34,18 @@ export function mergeHead(
 ) {
   // Start with auto-injected defaults
   const defaults: JxHeadEntry[] = [
-    { tagName: "meta", attributes: { charset: context.charset ?? "utf-8" } },
+    { attributes: { charset: context.charset ?? "utf8" }, tagName: "meta" },
     {
-      tagName: "meta",
       attributes: {
-        name: "viewport",
         content: "width=device-width, initial-scale=1",
+        name: "viewport",
       },
+      tagName: "meta",
     },
   ];
 
   // Merge layers: site → layout → page (later wins)
-  const merged: Map<string, JxHeadEntry> = new Map();
+  const merged = new Map<string, JxHeadEntry>();
 
   for (const entry of [...defaults, ...siteHead, ...layoutHead, ...pageHead]) {
     const key = headEntryKey(entry);
@@ -54,18 +54,18 @@ export function mergeHead(
 
   // Insert <title> if present
   const title = context.title ?? context.siteName ?? "Jx Site";
-  merged.set("title", { tagName: "title", children: [title] });
+  merged.set("title", { children: [title], tagName: "title" });
 
   // Add canonical URL if provided
   if (context.pageUrl && context.siteUrl) {
     const canonical = new URL(context.pageUrl, context.siteUrl).href;
     merged.set("link:canonical", {
+      attributes: { href: canonical, rel: "canonical" },
       tagName: "link",
-      attributes: { rel: "canonical", href: canonical },
     });
   }
 
-  return Array.from(merged.values());
+  return [...merged.values()];
 }
 
 /**
@@ -76,22 +76,32 @@ export function mergeHead(
  * @returns {string}
  */
 function headEntryKey(entry: JxHeadEntry) {
-  if (!entry || typeof entry !== "object") return String(entry);
+  if (!entry || typeof entry !== "object") {
+    return String(entry);
+  }
 
   const tag = entry.tagName ?? "unknown";
   const attrs = entry.attributes ?? {};
 
   // <title> — singleton
-  if (tag === "title") return "title";
+  if (tag === "title") {
+    return "title";
+  }
 
   // <meta charset> — singleton
-  if (attrs.charset) return "meta:charset";
+  if (attrs.charset) {
+    return "meta:charset";
+  }
 
   // <meta name="...""> — keyed by name
-  if (tag === "meta" && attrs.name) return `meta:${attrs.name}`;
+  if (tag === "meta" && attrs.name) {
+    return `meta:${attrs.name}`;
+  }
 
   // <meta property="..."> — keyed by property (Open Graph)
-  if (tag === "meta" && attrs.property) return `meta:${attrs.property}`;
+  if (tag === "meta" && attrs.property) {
+    return `meta:${attrs.property}`;
+  }
 
   // <link rel="..." href="..."> — keyed by rel+href
   if (tag === "link" && attrs.rel) {
@@ -99,7 +109,9 @@ function headEntryKey(entry: JxHeadEntry) {
   }
 
   // <script src="..."> — keyed by src
-  if (tag === "script" && attrs.src) return `script:${attrs.src}`;
+  if (tag === "script" && attrs.src) {
+    return `script:${attrs.src}`;
+  }
 
   // <style> — unique per content hash
   if (tag === "style") {
@@ -122,7 +134,8 @@ function headEntryKey(entry: JxHeadEntry) {
 function simpleHash(str: string) {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
-    hash = ((hash << 5) - hash + str.charCodeAt(i)) | 0;
+    // oxlint-disable-next-line no-bitwise -- classic 31x string hash; the shift is the algorithm
+    hash = Math.trunc((hash << 5) - hash + (str.codePointAt(i) ?? 0));
   }
   return hash.toString(36);
 }
@@ -144,8 +157,12 @@ export function renderHead(headEntries: JxHeadEntry[]) {
  * @returns {string}
  */
 function renderHeadEntry(entry: JxHeadEntry) {
-  if (typeof entry === "string") return entry;
-  if (!entry || typeof entry !== "object") return "";
+  if (typeof entry === "string") {
+    return entry;
+  }
+  if (!entry || typeof entry !== "object") {
+    return "";
+  }
 
   const tag = entry.tagName;
   const attrs = entry.attributes ?? {};
@@ -157,7 +174,9 @@ function renderHeadEntry(entry: JxHeadEntry) {
 
   // Void elements (no closing tag)
   const VOID = new Set(["meta", "link", "base", "br", "hr", "img", "input"]);
-  if (VOID.has(tag)) return open;
+  if (VOID.has(tag)) {
+    return open;
+  }
 
   // Elements with content
   const content = Array.isArray(entry.children)
@@ -171,5 +190,5 @@ function renderHeadEntry(entry: JxHeadEntry) {
  * @returns {string}
  */
 function escapeAttr(val: unknown) {
-  return String(val).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  return String(val).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
 }

package/src/site/image-cache.ts

@@ -6,14 +6,13 @@
  * CI environments (e.g. Cloudflare Pages) can persist it via their npm cache layer.
  */
 
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
-import { resolve, basename } from "node:path";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { basename, resolve } from "node:path";
 import { execSync } from "node:child_process";
 import { tmpdir } from "node:os";
-import { contentHash, configHash } from "./image-optimizer.ts";
+import { configHash, contentHash } from "./image-optimizer.ts";
 
-import type { ImageManifest } from "./image-optimizer.ts";
-import type { ImageConfig } from "./image-optimizer.ts";
+import type { ImageConfig, ImageManifest } from "./image-optimizer.ts";
 
 interface CacheEntry {
   source: string; // Relative path to source image
@@ -28,7 +27,7 @@ export interface CacheManifest {
 
 // ─── Cache directory resolution ──────────────────────────────────────────────
 
-let _npmCacheBase: string | null | undefined = undefined; // undefined = not yet resolved
+let _npmCacheBase: string | null | undefined; // Undefined = not yet resolved
 
 /** Reset the memoized npm cache base so the next call re-evaluates. Tests only. */
 export function _testResetNpmCacheBase() {
@@ -59,9 +58,9 @@ export function getImageCacheDir(projectRoot: string): string {
   if (_npmCacheBase === undefined) {
     try {
       const result = execSync("npm config get cache", {
-        encoding: "utf-8",
+        cwd: tmpdir(), // Avoid ENOWORKSPACES when cwd is inside an npm workspace
+        encoding: "utf8",
         stdio: ["ignore", "pipe", "ignore"],
-        cwd: tmpdir(), // avoid ENOWORKSPACES when cwd is inside an npm workspace
       }).trim();
       _npmCacheBase = result && result !== "undefined" ? result : null;
     } catch {
@@ -98,12 +97,12 @@ export function cacheKey(srcPath: string, config: ImageConfig) {
 export function loadCache(projectRoot: string) {
   const manifestPath = resolve(getImageCacheDir(projectRoot), "manifest.json");
   if (!existsSync(manifestPath)) {
-    return { version: 1, entries: {} };
+    return { entries: {}, version: 1 };
   }
   try {
     return JSON.parse(readFileSync(manifestPath, "utf8"));
   } catch {
-    return { version: 1, entries: {} };
+    return { entries: {}, version: 1 };
   }
 }
 
@@ -130,7 +129,9 @@ export function saveCache(projectRoot: string, cache: CacheManifest) {
  */
 export function getCached(cache: CacheManifest, key: string) {
   const entry = cache.entries[key];
-  if (!entry) return null;
+  if (!entry) {
+    return null;
+  }
   return entry.manifest;
 }
 
@@ -149,8 +150,8 @@ export function setCached(
   manifest: ImageManifest,
 ) {
   cache.entries[key] = {
-    source: sourcePath,
     manifest,
+    source: sourcePath,
     timestamp: Date.now(),
   };
 }

package/src/site/image-optimizer.ts

@@ -6,9 +6,11 @@
  */
 
 import { createHash } from "node:crypto";
-import { readFileSync, mkdirSync, existsSync } from "node:fs";
-import { resolve, basename, extname } from "node:path";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
+import { basename, extname, resolve } from "node:path";
 import { createRequire } from "node:module";
+import type { FormatEnum } from "sharp";
 
 export interface ImageVariant {
   width: number; // Pixel width of the variant
@@ -31,39 +33,44 @@ export interface ImageConfig {
   sizes: string;
   lazyLoad: boolean;
   service?: "build" | "cloudflare";
-  binding?: string;
   /**
    * Hostnames whose remote (https) images are routed through the optimization pipeline. Cloudflare
-   * service only — the generated /_jx/image endpoint fetches and transforms allowlisted remote
-   * sources; everything else is rejected to prevent open-proxy use.
+   * service only — allowlisted remote sources get /cdn-cgi/image transform srcsets (the zone must
+   * permit resizing from the remote origin); everything else is left untouched.
    */
   remoteDomains?: string[];
 }
 
-let _sharp: typeof import("sharp") | null = null;
+// oxlint-disable-next-line typescript/consistent-type-imports -- sharp is an optional native dep loaded lazily; its `export =` module type is only nameable via import()
+type SharpModule = typeof import("sharp");
+
+let _sharp: SharpModule | null = null;
 
 async function getSharp() {
-  if (_sharp) return _sharp;
+  if (_sharp) {
+    return _sharp;
+  }
   // Primary: dynamic import — works in tests (mock.module intercepts it) and in
-  // production installs where @img/sharp-* native packages are adjacent to cli.js.
+  // Production installs where @img/sharp-* native packages are adjacent to cli.js.
   try {
     const sharpMod = await import("sharp");
-    _sharp = sharpMod.default as typeof import("sharp");
+    _sharp = sharpMod.default as SharpModule;
     return _sharp;
   } catch {
     // Fall through to CJS fallback below.
   }
   // Fallback: resolve from the project being compiled. This covers symlinked
-  // monorepo dev environments (e.g. NixOS) where Node.js resolves import.meta.url
-  // to the compiler package's real path, making the @img/sharp-* packages
-  // unreachable via the primary import path.
+  // Monorepo dev environments (e.g. NixOS) where Node.js resolves import.meta.url
+  // To the compiler package's real path, making the @img/sharp-* packages
+  // Unreachable via the primary import path.
   try {
     const req = createRequire(resolve(process.cwd(), "package.json"));
-    _sharp = req("sharp") as typeof import("sharp");
+    _sharp = req("sharp") as SharpModule;
     return _sharp;
-  } catch (e) {
+  } catch (error) {
     throw new Error(
-      `Sharp is required for image optimization but failed to load: ${(e as Error).message}`,
+      `Sharp is required for image optimization but failed to load: ${errorMessage(error)}`,
+      { cause: error },
     );
   }
 }
@@ -80,9 +87,9 @@ export async function getImageMetadata(srcPath: string) {
   const sharp = await getSharp();
   const meta = await sharp(srcPath).metadata();
   return {
-    width: meta.width ?? 0,
-    height: meta.height ?? 0,
     format: (meta.format ?? "unknown") as string,
+    height: meta.height ?? 0,
+    width: meta.width ?? 0,
   };
 }
 
@@ -105,9 +112,9 @@ export function contentHash(srcPath: string) {
  */
 export function configHash(config: ImageConfig) {
   const key = JSON.stringify({
-    widths: config.widths,
     formats: config.formats,
     quality: config.quality,
+    widths: config.widths,
   });
   return createHash("md5").update(key).digest("hex").slice(0, 8);
 }
@@ -159,14 +166,16 @@ export async function processImage(srcPath: string, cacheImgDir: string, config:
       const outputPath = `/${OPTIMIZED_DIR}/${filename}`;
       const absolutePath = resolve(optimizedDir, filename);
 
-      variants.push({ width, format, outputPath, absolutePath });
+      variants.push({ absolutePath, format, outputPath, width });
 
-      if (existsSync(absolutePath)) continue;
+      if (existsSync(absolutePath)) {
+        continue;
+      }
 
       const quality = config.quality[format as keyof ImageConfig["quality"]] ?? 80;
       const task = sharp(srcPath)
         .resize(width)
-        .toFormat(format as keyof import("sharp").FormatEnum, { quality })
+        .toFormat(format as keyof FormatEnum, { quality })
         .toFile(absolutePath)
         .then(() => {});
 
@@ -180,9 +189,9 @@ export async function processImage(srcPath: string, cacheImgDir: string, config:
   }
 
   return {
-    original: { width: meta.width, height: meta.height, format: meta.format },
-    variants,
     contentHash: hash8,
+    original: { format: meta.format, height: meta.height, width: meta.width },
+    variants,
   };
 }