meno-core 1.0.53 → 1.0.54

package/lib/server/webflow/nodeToWebflow.ts

@@ -53,7 +53,12 @@ import {
   MENO_BIND_SENTINEL_EXACT_RE,
 } from './types';
 import { mapStylesToWebflow, buildInstanceStyleCombo } from './styleMapper';
-import { processCodeTemplates, hasTemplates as hasCodeTemplates, resolveHtmlMapping, isHtmlMapping } from '../../client/templateEngine';
+import {
+  processCodeTemplates,
+  hasTemplates as hasCodeTemplates,
+  resolveHtmlMapping,
+  isHtmlMapping,
+} from '../../client/templateEngine';
 import { resolvePropsFromDefinition } from '../../shared/propResolver';
 import { readFile } from 'fs/promises';
 import { join, basename, extname } from 'path';
@@ -253,7 +258,11 @@ function themedClassSuffix(ctx: WebflowEmitContext): string {
   const t = ctx.currentTheme;
   if (!t) return '';
   if (ctx.defaultTheme && t === ctx.defaultTheme) return '';
-  const safe = t.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+  const safe = t
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
   if (!safe) return '';
   return `-theme-${safe}`;
 }
@@ -295,7 +304,7 @@ function mintInstanceComboName(ctx: WebflowEmitContext, identity: string): strin
  * skip default-baking entirely).
  */
 function extractInterfaceDefaults(
-  iface: Record<string, { default?: unknown }> | undefined
+  iface: Record<string, { default?: unknown }> | undefined,
 ): Record<string, unknown> | undefined {
   if (!iface) return undefined;
   const out: Record<string, unknown> = {};
@@ -316,10 +325,7 @@ function extractInterfaceDefaults(
  * Page-level walks (no enclosing component) still get a usable context — we
  * just won't have `instanceProps` to layer on top.
  */
-function buildTemplateProps(
-  ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
-): Record<string, unknown> {
+function buildTemplateProps(ctx: WebflowEmitContext, instanceProps?: Record<string, unknown>): Record<string, unknown> {
   return {
     ...(ctx.templateContext ?? {}),
     ...(ctx.cmsContext ?? {}),
@@ -336,16 +342,10 @@ function buildTemplateProps(
  * `RAW_HTML_PREFIX`-marked rich-text values get flattened to visible text after
  * substitution so the sentinel + inline HTML can't leak into a tag/attribute.
  */
-function resolveStringTemplate(
-  text: string,
-  ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
-): string {
+function resolveStringTemplate(text: string, ctx: WebflowEmitContext, instanceProps?: Record<string, unknown>): string {
   if (!hasCodeTemplates(text)) return text;
   const out = processCodeTemplates(text, buildTemplateProps(ctx, instanceProps));
-  return out.startsWith(RAW_HTML_PREFIX)
-    ? flattenInlineHtmlToText(out.slice(RAW_HTML_PREFIX.length))
-    : out;
+  return out.startsWith(RAW_HTML_PREFIX) ? flattenInlineHtmlToText(out.slice(RAW_HTML_PREFIX.length)) : out;
 }
 
 const HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
@@ -428,11 +428,7 @@ function applyLinkTextDecorationDefault(cls: WebflowStyleClass): void {
  * across re-imports and is unique to this exact body root (the outer combo
  * name is keyed by the instance's outer location).
  */
-function mergeComboClasses(
-  inner: WebflowStyleClass,
-  outer: WebflowStyleClass,
-  parentName: string,
-): WebflowStyleClass {
+function mergeComboClasses(inner: WebflowStyleClass, outer: WebflowStyleClass, parentName: string): WebflowStyleClass {
   const innerSuffix = inner.name.startsWith('is-') ? inner.name.slice(3) : inner.name;
   const merged: WebflowStyleClass = {
     name: `${outer.name}_${innerSuffix}`,
@@ -528,9 +524,14 @@ async function maybeInlineLocalImage(element: WebflowElement, src: string): Prom
  * are decoded; comments are stripped.
  */
 function flattenInlineHtmlToText(raw: string): string {
-  const decode = (s: string) => s
-    .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
-    .replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&nbsp;/g, ' ');
+  const decode = (s: string) =>
+    s
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/g, "'")
+      .replace(/&nbsp;/g, ' ');
 
   let out = '';
   const tagRe = /<!--[\s\S]*?-->|<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*>/g;
@@ -562,11 +563,7 @@ function flattenInlineHtmlToText(raw: string): string {
  * breakpoint parameter lets us materialize the same `var(--h1-fs)` reference
  * to its scaled value at every Meno breakpoint.
  */
-function resolveVarsInValue(
-  value: string,
-  ctx: WebflowEmitContext,
-  breakpoint: string = 'base'
-): string {
+function resolveVarsInValue(value: string, ctx: WebflowEmitContext, breakpoint: string = 'base'): string {
   if (!value || (!ctx.themeVars && !ctx.projectVars)) return value;
   // If `currentTheme` names a theme that doesn't exist in this project's
   // colors.json, fall back to the project default — that mirrors runtime
@@ -575,14 +572,10 @@ function resolveVarsInValue(
   // would survive the substitution pass and ship as literal `var(--…)` to
   // Webflow.
   const themeMap = ctx.themeVars
-    ? (
-        (ctx.currentTheme && ctx.themeVars[ctx.currentTheme])
-        ?? (ctx.defaultTheme ? ctx.themeVars[ctx.defaultTheme] : undefined)
-      )
-    : undefined;
-  const projectMap = ctx.projectVars
-    ? (ctx.projectVars[breakpoint] || ctx.projectVars.base)
+    ? ((ctx.currentTheme && ctx.themeVars[ctx.currentTheme]) ??
+      (ctx.defaultTheme ? ctx.themeVars[ctx.defaultTheme] : undefined))
     : undefined;
+  const projectMap = ctx.projectVars ? ctx.projectVars[breakpoint] || ctx.projectVars.base : undefined;
   const pattern = /var\(\s*(--[\w-]+)\s*(?:,\s*([^)]+))?\)/g;
 
   let current = value;
@@ -608,7 +601,7 @@ function resolveVarsInValue(
 function substituteVarsInStyleObject(
   style: StyleObject,
   ctx: WebflowEmitContext,
-  breakpoint: string = 'base'
+  breakpoint: string = 'base',
 ): StyleObject {
   const out: StyleObject = {};
   for (const [k, v] of Object.entries(style)) {
@@ -637,7 +630,7 @@ function projectBreakpointNames(ctx: WebflowEmitContext): string[] {
 function expandResponsiveVarsInto(
   baseStyle: StyleObject,
   responsive: ResponsiveStyleObject,
-  ctx: WebflowEmitContext
+  ctx: WebflowEmitContext,
 ): void {
   if (!ctx.projectVars) return;
   const bps = projectBreakpointNames(ctx);
@@ -673,7 +666,7 @@ function expandResponsiveVarsInto(
  */
 function substituteVarsInStyle(
   style: StyleObject | ResponsiveStyleObject | undefined,
-  ctx: WebflowEmitContext
+  ctx: WebflowEmitContext,
 ): StyleObject | ResponsiveStyleObject | undefined {
   if (!style) return style;
   if (isResponsiveStyleObject(style)) {
@@ -700,13 +693,16 @@ function substituteVarsInStyle(
 
 function substituteVarsInInteractive(
   rules: InteractiveStyles | undefined,
-  ctx: WebflowEmitContext
+  ctx: WebflowEmitContext,
 ): InteractiveStyles | undefined {
   if (!rules) return rules;
-  return rules.map((rule): InteractiveStyleRule => ({
-    ...rule,
-    style: (substituteVarsInStyle(rule.style as StyleObject | ResponsiveStyleObject, ctx) ?? rule.style) as StyleValue,
-  }));
+  return rules.map(
+    (rule): InteractiveStyleRule => ({
+      ...rule,
+      style: (substituteVarsInStyle(rule.style as StyleObject | ResponsiveStyleObject, ctx) ??
+        rule.style) as StyleValue,
+    }),
+  );
 }
 
 /**
@@ -769,10 +765,7 @@ function substituteVarsInStyleClass(cls: WebflowStyleClass, ctx: WebflowEmitCont
  * Kept private so we don't widen styleMapper's public surface just for the
  * combo-class expansion above.
  */
-function menoBreakpointToWebflowTier(
-  bpName: string,
-  breakpoints: BreakpointConfig
-): string {
+function menoBreakpointToWebflowTier(bpName: string, breakpoints: BreakpointConfig): string {
   if (bpName === 'tablet') return 'medium';
   if (bpName === 'mobile') return 'small';
   const entry = breakpoints[bpName];
@@ -810,7 +803,7 @@ function isResponsiveStyleObject(style: StyleObject | ResponsiveStyleObject): st
 function extractBaseColor(
   style: StyleObject | ResponsiveStyleObject | undefined,
   ctx?: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): string | undefined {
   if (!style) return undefined;
   const flat: StyleObject | undefined = isResponsiveStyleObject(style)
@@ -860,10 +853,7 @@ function inlineCurrentColorInSvg(svg: string, color: string): string {
  * styleMapper can still emit them as Webflow combo classes. Values without
  * templates pass through unchanged.
  */
-function resolveTemplatesInStyleObject(
-  style: StyleObject,
-  props: Record<string, unknown>
-): StyleObject {
+function resolveTemplatesInStyleObject(style: StyleObject, props: Record<string, unknown>): StyleObject {
   const result: StyleObject = {};
   for (const [key, value] of Object.entries(style)) {
     if (typeof value === 'string' && hasCodeTemplates(value)) {
@@ -882,7 +872,7 @@ function resolveTemplatesInStyleObject(
  */
 function resolveStyleTemplates(
   style: StyleObject | ResponsiveStyleObject | undefined,
-  props: Record<string, unknown> | undefined
+  props: Record<string, unknown> | undefined,
 ): StyleObject | ResponsiveStyleObject | undefined {
   if (!style || !props) return style;
   if (isResponsiveStyleObject(style)) {
@@ -927,7 +917,7 @@ function extractSingleTemplateProp(value: string): { prop: string; prefix: strin
 function templatesToSyntheticMappings(
   style: StyleObject,
   componentDefaults: Record<string, unknown>,
-  instanceProps: Record<string, unknown>
+  instanceProps: Record<string, unknown>,
 ): StyleObject {
   const out: StyleObject = {};
   for (const [key, value] of Object.entries(style)) {
@@ -973,7 +963,7 @@ function templatesToSyntheticMappings(
 function convertStyleTemplatesToMappings(
   style: StyleObject | ResponsiveStyleObject | undefined,
   componentDefaults: Record<string, unknown> | undefined,
-  instanceProps: Record<string, unknown> | undefined
+  instanceProps: Record<string, unknown> | undefined,
 ): StyleObject | ResponsiveStyleObject | undefined {
   if (!style || !componentDefaults || !instanceProps) return style;
   if (isResponsiveStyleObject(style)) {
@@ -995,10 +985,7 @@ function convertStyleTemplatesToMappings(
  * context is available to decide, default to rendering (true) so we don't drop
  * nodes that would otherwise be shown.
  */
-function shouldRenderNode(
-  node: ComponentNode,
-  instanceProps?: Record<string, unknown>
-): boolean {
+function shouldRenderNode(node: ComponentNode, instanceProps?: Record<string, unknown>): boolean {
   if (!hasIf(node)) return true;
   const ifValue = node.if;
 
@@ -1014,12 +1001,7 @@ function shouldRenderNode(
   if (typeof ifValue === 'string') {
     if (!instanceProps) return true;
     const resolved = processCodeTemplates(ifValue, instanceProps);
-    return (
-      Boolean(resolved) &&
-      resolved !== 'false' &&
-      resolved !== '0' &&
-      resolved !== ''
-    );
+    return Boolean(resolved) && resolved !== 'false' && resolved !== '0' && resolved !== '';
   }
 
   return true;
@@ -1030,13 +1012,16 @@ function shouldRenderNode(
  */
 function resolveInteractiveStyleTemplates(
   rules: InteractiveStyles | undefined,
-  props: Record<string, unknown> | undefined
+  props: Record<string, unknown> | undefined,
 ): InteractiveStyles | undefined {
   if (!rules || !props) return rules;
-  return rules.map((rule): InteractiveStyleRule => ({
-    ...rule,
-    style: (resolveStyleTemplates(rule.style as StyleObject | ResponsiveStyleObject, props) ?? rule.style) as StyleValue,
-  }));
+  return rules.map(
+    (rule): InteractiveStyleRule => ({
+      ...rule,
+      style: (resolveStyleTemplates(rule.style as StyleObject | ResponsiveStyleObject, props) ??
+        rule.style) as StyleValue,
+    }),
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -1053,7 +1038,7 @@ function resolveInteractiveStyleTemplates(
 export async function nodeToWebflow(
   node: ComponentNode | ComponentNode[] | string | number | null | undefined,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   if (node === null || node === undefined) return [];
 
@@ -1115,7 +1100,7 @@ export async function nodeToWebflow(
 async function emitHtmlNode(
   node: HtmlNode,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement> {
   // Resolve `{{...}}` in the tag against the same layered context meno-core
   // walks at runtime — page-level / slot-injected nodes don't have
@@ -1128,15 +1113,14 @@ async function emitHtmlNode(
   const attributes: Record<string, string | number | boolean> = {};
   if (node.attributes) {
     for (const [key, value] of Object.entries(node.attributes)) {
-      attributes[key] = (typeof value === 'string')
-        ? resolveStringTemplate(value, ctx, instanceProps)
-        : value;
+      attributes[key] = typeof value === 'string' ? resolveStringTemplate(value, ctx, instanceProps) : value;
     }
   }
 
-  const themedCtx: WebflowEmitContext = typeof attributes.theme === 'string' && attributes.theme
-    ? { ...ctx, currentTheme: attributes.theme as string }
-    : ctx;
+  const themedCtx: WebflowEmitContext =
+    typeof attributes.theme === 'string' && attributes.theme
+      ? { ...ctx, currentTheme: attributes.theme as string }
+      : ctx;
 
   const rawStyle = node.style as StyleObject | ResponsiveStyleObject | undefined;
   const rawInteractiveStyles = node.interactiveStyles as InteractiveStyles | undefined;
@@ -1144,18 +1128,11 @@ async function emitHtmlNode(
   // StyleMappings before resolution, so values driven by an interface prop
   // emit per-instance combo classes (`is-maxwidth-640px`) instead of
   // collapsing into a single primary class shared by every instance.
-  const styleWithMappings = convertStyleTemplatesToMappings(
-    rawStyle,
-    ctx.componentDefaults,
-    instanceProps,
-  );
-  const style = substituteVarsInStyle(
-    resolveStyleTemplates(styleWithMappings, instanceProps),
-    themedCtx
-  );
+  const styleWithMappings = convertStyleTemplatesToMappings(rawStyle, ctx.componentDefaults, instanceProps);
+  const style = substituteVarsInStyle(resolveStyleTemplates(styleWithMappings, instanceProps), themedCtx);
   const interactiveStyles = substituteVarsInInteractive(
     resolveInteractiveStyleTemplates(rawInteractiveStyles, instanceProps),
-    themedCtx
+    themedCtx,
   );
 
   // Generate element class and map styles.
@@ -1170,15 +1147,26 @@ async function emitHtmlNode(
   const isLinkLike = LINK_LIKE_TAGS.has(tagLower);
   const isParagraph = tagLower === 'p';
   const isList = LIST_TAGS.has(tagLower);
-  const needsClass = style || (interactiveStyles && interactiveStyles.length > 0) || node.generateElementClass || isHeading || isLinkLike || isParagraph || isList;
+  const needsClass =
+    style ||
+    (interactiveStyles && interactiveStyles.length > 0) ||
+    node.generateElementClass ||
+    isHeading ||
+    isLinkLike ||
+    isParagraph ||
+    isList;
   let className: string | undefined;
   let comboClassNames: string[] | undefined;
 
   if (needsClass) {
     const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), themedCtx);
     const { primaryClass, comboClasses } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints, ctx.responsiveScales,
-      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(themedCtx) }
+      elementClass,
+      style,
+      interactiveStyles,
+      ctx.breakpoints,
+      ctx.responsiveScales,
+      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(themedCtx) },
     );
 
     substituteVarsInStyleClass(primaryClass, themedCtx);
@@ -1203,11 +1191,7 @@ async function emitHtmlNode(
     // can later run them through `generateInteractiveCSS` for any rules
     // Webflow's class system can't represent (descendant selectors via
     // `prefix`, class-style postfixes, breakpoint-divided pseudos).
-    if (
-      ctx.interactiveStylesMap
-      && Array.isArray(interactiveStyles)
-      && interactiveStyles.length > 0
-    ) {
+    if (ctx.interactiveStylesMap && Array.isArray(interactiveStyles) && interactiveStyles.length > 0) {
       ctx.interactiveStylesMap.set(primaryClass.name, interactiveStyles);
     }
   }
@@ -1220,11 +1204,7 @@ async function emitHtmlNode(
     // Optimize: single string child becomes textContent instead of child element
     if (typeof node.children === 'string') {
       textContent = resolveStringTemplate(node.children, ctx, instanceProps);
-    } else if (
-      Array.isArray(node.children) &&
-      node.children.length === 1 &&
-      typeof node.children[0] === 'string'
-    ) {
+    } else if (Array.isArray(node.children) && node.children.length === 1 && typeof node.children[0] === 'string') {
       const text = node.children[0] as string;
       textContent = resolveStringTemplate(text, ctx, instanceProps);
     } else {
@@ -1270,7 +1250,7 @@ async function emitHtmlNode(
 async function emitComponentInstance(
   node: ComponentInstanceNode,
   ctx: WebflowEmitContext,
-  parentProps?: Record<string, unknown>
+  parentProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   const compDef = ctx.globalComponents[node.component];
   if (!compDef) {
@@ -1293,9 +1273,8 @@ async function emitComponentInstance(
     const parentTemplateProps = parentProps ?? buildTemplateProps(ctx);
     for (const [key, value] of Object.entries(node.props)) {
       if (key === 'children') continue;
-      passedProps[key] = (typeof value === 'string' && hasCodeTemplates(value))
-        ? processCodeTemplates(value, parentTemplateProps)
-        : value;
+      passedProps[key] =
+        typeof value === 'string' && hasCodeTemplates(value) ? processCodeTemplates(value, parentTemplateProps) : value;
     }
   }
 
@@ -1331,17 +1310,11 @@ async function emitComponentInstance(
   // promotion for that instance and fall through to inline expansion so
   // `emitInlineComponentBody` attaches the per-property combos directly.
   const hasInstanceStyleOverrides =
-    Boolean(structured?.acceptsStyles)
-    && (
-      (node.style && Object.keys(node.style as object).length > 0)
-      || (Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0)
-    );
+    Boolean(structured?.acceptsStyles) &&
+    ((node.style && Object.keys(node.style as object).length > 0) ||
+      (Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0));
   const promotedNames = ctx.promotedComponentNames || PROMOTED_TO_WEBFLOW_COMPONENT;
-  if (
-    promotedNames.has(node.component)
-    && ctx.promotedComponents
-    && !hasInstanceStyleOverrides
-  ) {
+  if (promotedNames.has(node.component) && ctx.promotedComponents && !hasInstanceStyleOverrides) {
     const promoted = ctx.promotedComponents;
     if (!promoted.has(node.component)) {
       const defaultProps: Record<string, unknown> = {};
@@ -1408,8 +1381,8 @@ async function emitInlineComponentBody(
   // Container's body fires its own slot, the marker is the only thing
   // available, has no slot context left, and renders nothing.
   let effectiveChildren = node.children;
-  let inheritedSlotEmitContext = ctx.slotEmitContext;
-  let inheritedSlotInstanceProps: Record<string, unknown> | undefined = undefined;
+  const inheritedSlotEmitContext = ctx.slotEmitContext;
+  let inheritedSlotInstanceProps: Record<string, unknown> | undefined;
   let didForwardSlot = false;
   if (node.children != null && typeof node.children !== 'string') {
     const childArr = Array.isArray(node.children) ? node.children : [node.children];
@@ -1450,13 +1423,14 @@ async function emitInlineComponentBody(
     fileName: node.component,
     elementPath: [0],
     slotChildren: effectiveChildren,
-    slotEmitContext: didForwardSlot && inheritedSlotEmitContext
-      ? inheritedSlotEmitContext
-      : {
-          fileType: ctx.fileType,
-          fileName: ctx.fileName,
-          elementPath: [...ctx.elementPath],
-        },
+    slotEmitContext:
+      didForwardSlot && inheritedSlotEmitContext
+        ? inheritedSlotEmitContext
+        : {
+            fileType: ctx.fileType,
+            fileName: ctx.fileName,
+            elementPath: [...ctx.elementPath],
+          },
     // Slot children authored alongside this instance refer to the OUTER
     // component's interface (the one whose body contains `<Component …>{slot
     // children}</Component>`). When the body hits its `<slot/>`, those
@@ -1475,9 +1449,7 @@ async function emitInlineComponentBody(
   // alongside resolved props. resolvedProps wins on key conflicts so
   // explicit instance props still override.
   const ctxTemplate = ctx.templateContext as Record<string, unknown> | undefined;
-  const bodyProps = ctxTemplate
-    ? { ...ctxTemplate, ...resolvedProps }
-    : resolvedProps;
+  const bodyProps = ctxTemplate ? { ...ctxTemplate, ...resolvedProps } : resolvedProps;
   const emitted = await nodeToWebflow(body, compCtx, bodyProps);
 
   // `acceptsStyles`: forward instance-level style / interactiveStyles
@@ -1487,12 +1459,10 @@ async function emitInlineComponentBody(
   // named after the instance's outer location so two instances of the same
   // component on the same page don't share a single class.
   if (
-    structured?.acceptsStyles
-    && emitted.length > 0
-    && (
-      (node.style && Object.keys(node.style as object).length > 0)
-      || (Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0)
-    )
+    structured?.acceptsStyles &&
+    emitted.length > 0 &&
+    ((node.style && Object.keys(node.style as object).length > 0) ||
+      (Array.isArray(node.interactiveStyles) && node.interactiveStyles.length > 0))
   ) {
     const root = emitted[0];
     if (root && typeof root === 'object') {
@@ -1508,10 +1478,7 @@ async function emitInlineComponentBody(
 
       const rawStyle = node.style as StyleObject | ResponsiveStyleObject | undefined;
       const rawInteractive = node.interactiveStyles as InteractiveStyles | undefined;
-      const resolvedStyle = substituteVarsInStyle(
-        resolveStyleTemplates(rawStyle, parentProps),
-        ctx,
-      );
+      const resolvedStyle = substituteVarsInStyle(resolveStyleTemplates(rawStyle, parentProps), ctx);
       const resolvedInteractive = substituteVarsInInteractive(
         resolveInteractiveStyleTemplates(rawInteractive, parentProps),
         ctx,
@@ -1542,9 +1509,8 @@ async function emitInlineComponentBody(
         // override into a fresh merged class instead of stacking. Outer
         // instance overrides land last so they win on key conflicts,
         // mirroring SSR's merge order in `ssrRenderer.ts:1244`.
-        const existingComboName = Array.isArray(root.comboClasses) && root.comboClasses.length > 0
-          ? root.comboClasses[0]
-          : undefined;
+        const existingComboName =
+          Array.isArray(root.comboClasses) && root.comboClasses.length > 0 ? root.comboClasses[0] : undefined;
         const inner = existingComboName ? ctx.styleClasses.get(existingComboName) : undefined;
         if (inner) {
           const merged = mergeComboClasses(inner, combo, root.className);
@@ -1570,17 +1536,13 @@ async function emitInlineComponentBody(
     if (root && typeof root === 'object') {
       root.attributes = root.attributes || {};
       const existing = root.attributes['data-component'];
-      root.attributes['data-component'] = existing
-        ? `${existing} ${node.component}`
-        : node.component;
+      root.attributes['data-component'] = existing ? `${existing} ${node.component}` : node.component;
 
       // Serialize defineVars-exposed props into data-props, keyed by component
       // name so nested components don't clobber each other on a shared root.
       const defineVars = structured.defineVars;
       if (defineVars) {
-        const varsToExpose = defineVars === true
-          ? Object.keys(structured.interface || {})
-          : defineVars;
+        const varsToExpose = defineVars === true ? Object.keys(structured.interface || {}) : defineVars;
         const propsForJS: Record<string, unknown> = {};
         for (const varName of varsToExpose) {
           if (resolvedProps[varName] !== undefined) {
@@ -1597,7 +1559,9 @@ async function emitInlineComponentBody(
             if (parsed && typeof parsed === 'object') {
               existingPropsMap = parsed as Record<string, unknown>;
             }
-          } catch { /* ignore malformed */ }
+          } catch {
+            /* ignore malformed */
+          }
         }
         existingPropsMap[node.component] = propsForJS;
         // URL-encode the serialized JSON. Webflow's `<DOM>`-type element
@@ -1616,7 +1580,7 @@ async function emitInlineComponentBody(
 async function emitSlotMarker(
   node: SlotMarker,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   // Use instance children passed via context to fill the slot
   if (ctx.slotChildren) {
@@ -1655,28 +1619,26 @@ async function emitSlotMarker(
 async function emitEmbedNode(
   node: EmbedNode,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement> {
   const style = substituteVarsInStyle(
-    resolveStyleTemplates(
-      node.style as StyleObject | ResponsiveStyleObject | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveStyleTemplates(node.style as StyleObject | ResponsiveStyleObject | undefined, instanceProps),
+    ctx,
   );
   const interactiveStyles = substituteVarsInInteractive(
-    resolveInteractiveStyleTemplates(
-      node.interactiveStyles as InteractiveStyles | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveInteractiveStyleTemplates(node.interactiveStyles as InteractiveStyles | undefined, instanceProps),
+    ctx,
   );
 
   let className: string | undefined;
   if (style || (interactiveStyles && interactiveStyles.length > 0)) {
     const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), ctx);
     const { primaryClass } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints, ctx.responsiveScales
+      elementClass,
+      style,
+      interactiveStyles,
+      ctx.breakpoints,
+      ctx.responsiveScales,
     );
     substituteVarsInStyleClass(primaryClass, ctx);
     className = primaryClass.name;
@@ -1777,7 +1739,7 @@ function resolveLinkHref(rawHref: string, ctx: WebflowEmitContext): string {
     ctx.locale,
     ctx.i18nConfig.defaultLocale,
     ctx.i18nConfig.defaultLocale,
-    ctx.slugIndex
+    ctx.slugIndex,
   );
 
   return translated + suffix;
@@ -1786,21 +1748,15 @@ function resolveLinkHref(rawHref: string, ctx: WebflowEmitContext): string {
 async function emitLinkNode(
   node: LinkNode,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement> {
   const style = substituteVarsInStyle(
-    resolveStyleTemplates(
-      node.style as StyleObject | ResponsiveStyleObject | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveStyleTemplates(node.style as StyleObject | ResponsiveStyleObject | undefined, instanceProps),
+    ctx,
   );
   const interactiveStyles = substituteVarsInInteractive(
-    resolveInteractiveStyleTemplates(
-      node.interactiveStyles as InteractiveStyles | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveInteractiveStyleTemplates(node.interactiveStyles as InteractiveStyles | undefined, instanceProps),
+    ctx,
   );
 
   // Always assign a class so we can default `text-decoration: none` —
@@ -1811,8 +1767,12 @@ async function emitLinkNode(
   {
     const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), ctx);
     const { primaryClass, comboClasses } = mapStylesToWebflow(
-      elementClass, style, interactiveStyles, ctx.breakpoints, ctx.responsiveScales,
-      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(ctx) }
+      elementClass,
+      style,
+      interactiveStyles,
+      ctx.breakpoints,
+      ctx.responsiveScales,
+      { instanceProps, componentDefaults: ctx.componentDefaults, themeSuffix: themedClassSuffix(ctx) },
     );
     substituteVarsInStyleClass(primaryClass, ctx);
     applyLinkTextDecorationDefault(primaryClass);
@@ -1829,11 +1789,7 @@ async function emitLinkNode(
       }
     }
 
-    if (
-      ctx.interactiveStylesMap
-      && Array.isArray(interactiveStyles)
-      && interactiveStyles.length > 0
-    ) {
+    if (ctx.interactiveStylesMap && Array.isArray(interactiveStyles) && interactiveStyles.length > 0) {
       ctx.interactiveStylesMap.set(primaryClass.name, interactiveStyles);
     }
   }
@@ -1851,9 +1807,7 @@ async function emitLinkNode(
   const attributes: Record<string, string | number | boolean> = { href };
   if (node.attributes) {
     for (const [key, value] of Object.entries(node.attributes)) {
-      attributes[key] = (typeof value === 'string')
-        ? resolveStringTemplate(value, ctx, instanceProps)
-        : value;
+      attributes[key] = typeof value === 'string' ? resolveStringTemplate(value, ctx, instanceProps) : value;
     }
   }
 
@@ -1905,7 +1859,7 @@ function resolveItemI18n(item: CMSItem, ctx: WebflowEmitContext): CMSItem {
 async function getCollectionItemsForExport(
   node: ListNode,
   source: string,
-  ctx: WebflowEmitContext
+  ctx: WebflowEmitContext,
 ): Promise<CMSItem[]> {
   if (!ctx.cmsService) return [];
 
@@ -1923,16 +1877,16 @@ async function getCollectionItemsForExport(
         for (const part of fieldPath.split('.')) {
           if (value && typeof value === 'object' && part in (value as object)) {
             value = (value as Record<string, unknown>)[part];
-          } else { value = undefined; break; }
+          } else {
+            value = undefined;
+            break;
+          }
         }
         if (value !== null && value !== undefined) {
-          resolvedIds = Array.isArray(value) ? value.map(v => String(v)) : String(value);
+          resolvedIds = Array.isArray(value) ? value.map((v) => String(v)) : String(value);
         }
       } else {
-        resolvedIds = resolveItemsTemplate(
-          itemsField,
-          (ctx.templateContext || { _type: 'template' }) as any
-        );
+        resolvedIds = resolveItemsTemplate(itemsField, (ctx.templateContext || { _type: 'template' }) as any);
       }
       if (!resolvedIds) return [];
       const ids = Array.isArray(resolvedIds) ? resolvedIds : [resolvedIds];
@@ -1942,7 +1896,7 @@ async function getCollectionItemsForExport(
       items = await ctx.cmsService.getItemsByIds(source, ids);
     }
     if (ctx.locale) {
-      items = items.filter(it => !isItemDraftForLocale(it, ctx.locale!));
+      items = items.filter((it) => !isItemDraftForLocale(it, ctx.locale!));
     }
   } else {
     items = await ctx.cmsService.queryItems({
@@ -1957,13 +1911,17 @@ async function getCollectionItemsForExport(
 
   if ((node as any).excludeCurrentItem && ctx.cmsContext?.cms?._id) {
     const currentId = ctx.cmsContext.cms._id as string;
-    items = items.filter(it => it._id !== currentId);
+    items = items.filter((it) => it._id !== currentId);
   }
 
   return items;
 }
 
-function getPropItemsForExport(source: string, ctx: WebflowEmitContext, instanceProps?: Record<string, unknown>): unknown[] {
+function getPropItemsForExport(
+  source: string,
+  ctx: WebflowEmitContext,
+  instanceProps?: Record<string, unknown>,
+): unknown[] {
   // Template expression like "{{items}}" or "{{category.items}}". SSR pre-
   // substitutes these against the merged prop scope via `processStructure`
   // before the list node is reached, so its `getPropItems` only needs to look
@@ -2086,10 +2044,7 @@ function applyBindingMarkers(el: WebflowElement): void {
 
   // Image inlining produced bytes for a sentinel src — drop them; user will
   // re-bind the image to a real CMS field after insertion.
-  if (
-    el.menoBind?.attrFields?.src
-    && (el.imageDataBase64 || el.imageSrc)
-  ) {
+  if (el.menoBind?.attrFields?.src && (el.imageDataBase64 || el.imageSrc)) {
     delete el.imageDataBase64;
     delete el.imageDataMime;
     delete el.imageDataFileName;
@@ -2119,9 +2074,7 @@ function applyBindingMarkers(el: WebflowElement): void {
  * Walks recursively, in-place. Idempotent: existing `<li>` children pass
  * through untouched.
  */
-export function normalizeListChildren(
-  elements: Array<WebflowElement | string> | undefined
-): void {
+export function normalizeListChildren(elements: Array<WebflowElement | string> | undefined): void {
   if (!Array.isArray(elements)) return;
   for (const el of elements) {
     if (typeof el === 'string') continue;
@@ -2147,11 +2100,11 @@ export function normalizeListChildren(
 async function emitListNode(
   node: ListNode,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   const nodeType = node.type as string;
   const isLegacyCMSList = nodeType === 'cms-list';
-  const sourceType = isLegacyCMSList ? 'collection' : (node.sourceType || 'prop');
+  const sourceType = isLegacyCMSList ? 'collection' : node.sourceType || 'prop';
 
   if (sourceType === 'collection' && !ctx.cmsService) return [];
 
@@ -2171,13 +2124,7 @@ async function emitListNode(
   if (sourceType === 'collection' && ctx.bindCollectionLists && ctx.cmsService && source) {
     const schema = ctx.cmsService.getSchema(source) || undefined;
     const placeholder = buildBindingPlaceholderItem(schema);
-    const templateContext = buildTemplateContext(
-      variableName,
-      placeholder,
-      0,
-      1,
-      ctx.templateContext as any
-    );
+    const templateContext = buildTemplateContext(variableName, placeholder, 0, 1, ctx.templateContext as any);
     const childCtx: WebflowEmitContext = {
       ...ctx,
       templateContext: templateContext as Record<string, unknown>,
@@ -2186,17 +2133,17 @@ async function emitListNode(
       ...(instanceProps || {}),
       ...templateContext,
     };
-    const renderedChildren = node.children
-      ? await convertChildren(node.children as any, childCtx, mergedProps)
-      : [];
+    const renderedChildren = node.children ? await convertChildren(node.children as any, childCtx, mergedProps) : [];
     for (const child of renderedChildren) {
       if (typeof child !== 'string') applyBindingMarkers(child);
     }
-    return [{
-      tag: COLLECTION_LIST_TAG,
-      menoCollectionRef: source,
-      children: renderedChildren,
-    }];
+    return [
+      {
+        tag: COLLECTION_LIST_TAG,
+        menoCollectionRef: source,
+        children: renderedChildren,
+      },
+    ];
   }
 
   let items: unknown[];
@@ -2221,29 +2168,22 @@ async function expandListItems(
   instanceProps: Record<string, unknown> | undefined,
   items: unknown[],
   variableName: string,
-  source: string
+  source: string,
 ): Promise<WebflowElement[]> {
   if (items.length === 0) return [];
 
-  const schema: CMSSchema | undefined = ctx.cmsService
-    ? (ctx.cmsService.getSchema(source) || undefined)
-    : undefined;
+  const schema: CMSSchema | undefined = ctx.cmsService ? ctx.cmsService.getSchema(source) || undefined : undefined;
 
   const out: WebflowElement[] = [];
   for (let i = 0; i < items.length; i++) {
     const rawItem = items[i] as Record<string, unknown>;
-    const enriched = schema && ctx.locale && ctx.i18nConfig
-      ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig)
-      : (rawItem as CMSItem);
+    const enriched =
+      schema && ctx.locale && ctx.i18nConfig
+        ? addItemUrl(rawItem as CMSItem, schema, ctx.locale, ctx.i18nConfig)
+        : (rawItem as CMSItem);
     const item = resolveItemI18n(enriched, ctx);
 
-    const templateContext = buildTemplateContext(
-      variableName,
-      item,
-      i,
-      items.length,
-      (ctx.templateContext as any)
-    );
+    const templateContext = buildTemplateContext(variableName, item, i, items.length, ctx.templateContext as any);
 
     const childCtx: WebflowEmitContext = {
       ...ctx,
@@ -2275,7 +2215,7 @@ async function expandListItems(
 async function emitLocaleListNode(
   node: LocaleListNode,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   if (!ctx.slugMappings || !ctx.pagePath || !ctx.i18nConfig || !ctx.locale) {
     return [{ tag: 'div', attributes: { 'data-locale-list': 'true' } }];
@@ -2298,49 +2238,40 @@ async function emitLocaleListNode(
 
   // Build container style class
   const containerStyle = substituteVarsInStyle(
-    resolveStyleTemplates(
-      node.style as StyleObject | ResponsiveStyleObject | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveStyleTemplates(node.style as StyleObject | ResponsiveStyleObject | undefined, instanceProps),
+    ctx,
   );
   const containerInteractive = substituteVarsInInteractive(
-    resolveInteractiveStyleTemplates(
-      node.interactiveStyles as InteractiveStyles | undefined,
-      instanceProps
-    ),
-    ctx
+    resolveInteractiveStyleTemplates(node.interactiveStyles as InteractiveStyles | undefined, instanceProps),
+    ctx,
   );
 
   let containerClass: string | undefined;
   if (containerStyle || (containerInteractive && containerInteractive.length > 0)) {
     const elementClass = withThemeSuffix(buildElementClass(ctx, node.label), ctx);
     const { primaryClass } = mapStylesToWebflow(
-      elementClass, containerStyle, containerInteractive, ctx.breakpoints, ctx.responsiveScales
+      elementClass,
+      containerStyle,
+      containerInteractive,
+      ctx.breakpoints,
+      ctx.responsiveScales,
     );
     substituteVarsInStyleClass(primaryClass, ctx);
     containerClass = primaryClass.name;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
   }
 
-  const buildSubClass = (
-    style: unknown,
-    suffix: string
-  ): string | undefined => {
+  const buildSubClass = (style: unknown, suffix: string): string | undefined => {
     const resolved = substituteVarsInStyle(
-      resolveStyleTemplates(
-        style as StyleObject | ResponsiveStyleObject | undefined,
-        instanceProps
-      ),
-      ctx
+      resolveStyleTemplates(style as StyleObject | ResponsiveStyleObject | undefined, instanceProps),
+      ctx,
     );
     if (!resolved) return undefined;
     const className = withThemeSuffix(`${buildElementClass(ctx, node.label)}-${suffix}`, ctx);
     const { primaryClass } = mapStylesToWebflow(className, resolved, undefined, ctx.breakpoints, ctx.responsiveScales);
     substituteVarsInStyleClass(primaryClass, ctx);
-    if (Object.keys(primaryClass.base).length === 0
-      && !primaryClass.breakpoints
-      && !primaryClass.pseudoStates) return undefined;
+    if (Object.keys(primaryClass.base).length === 0 && !primaryClass.breakpoints && !primaryClass.pseudoStates)
+      return undefined;
     ctx.styleClasses.set(primaryClass.name, primaryClass);
     return primaryClass.name;
   };
@@ -2390,10 +2321,16 @@ async function emitLocaleListNode(
 
     let displayText: string;
     switch (displayType) {
-      case 'code': displayText = link.locale.toUpperCase(); break;
-      case 'name': displayText = link.name; break;
+      case 'code':
+        displayText = link.locale.toUpperCase();
+        break;
+      case 'name':
+        displayText = link.name;
+        break;
       case 'nativeName':
-      default: displayText = link.nativeName; break;
+      default:
+        displayText = link.nativeName;
+        break;
     }
     innerChildren.push({ tag: 'div', textContent: displayText });
     anchor.children = innerChildren;
@@ -2418,7 +2355,7 @@ async function emitLocaleListNode(
 async function convertChildren(
   children: (ComponentNode | string)[] | string | ComponentNode | null | undefined,
   ctx: WebflowEmitContext,
-  instanceProps?: Record<string, unknown>
+  instanceProps?: Record<string, unknown>,
 ): Promise<WebflowElement[]> {
   if (!children) return [];