meno-core 1.0.39 → 1.0.40

package/dist/lib/shared/index.js

@@ -23,7 +23,7 @@ import {
   isValidIdentifier,
   resolvePaletteColor,
   resolveSafePath
-} from "../../chunks/chunk-P3FX5HJM.js";
+} from "../../chunks/chunk-LOJLO2EY.js";
 import {
   CSS_PROPERTIES,
   CSS_PROPERTIES_DEFINITION,
@@ -201,7 +201,7 @@ import {
   validatePath,
   validatePropDefinition,
   validateStructuredComponentDefinition
-} from "../../chunks/chunk-NV25WXCA.js";
+} from "../../chunks/chunk-OJ5SROQN.js";
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_I18N_CONFIG,
@@ -255,7 +255,7 @@ import {
   TREE_SCROLL_DELAY_MS,
   WEBSOCKET_STATES,
   init_constants
-} from "../../chunks/chunk-KULPBDC7.js";
+} from "../../chunks/chunk-Z7SAOCDG.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/shared/index.ts

package/dist/lib/test-utils/index.js

@@ -1,7 +1,7 @@
 import {
   NODE_TYPE,
   init_constants
-} from "../../chunks/chunk-KULPBDC7.js";
+} from "../../chunks/chunk-Z7SAOCDG.js";
 import "../../chunks/chunk-KSBZ2L7C.js";
 
 // lib/test-utils/mocks.ts

package/lib/client/core/builders/embedBuilder.ts

@@ -38,8 +38,8 @@ export interface EmbedBuilderDeps {
  * Script tags and event handlers are still removed for security
  */
 const SANITIZE_CONFIG = {
-  ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-  ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title'],
+  ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'style', 'animate', 'animateTransform', 'animateMotion', 'set'],
+  ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title', 'attributeName', 'values', 'dur', 'begin', 'end', 'repeatCount', 'repeatDur', 'keyTimes', 'keySplines', 'calcMode', 'from', 'to', 'by', 'additive', 'accumulate', 'type', 'rotate', 'keyPoints', 'path'],
   KEEP_CONTENT: true
 };
 

package/lib/server/astro/cmsPageEmitter.ts

@@ -0,0 +1,417 @@
+/**
+ * CMS Page File Generator
+ * Generates .astro page files for CMS template pages with getStaticPaths()
+ */
+
+import type { JSONPage, ComponentDefinition, CMSSchema, I18nConfig } from '../../shared/types';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+import { transformCMSTemplate } from './templateTransformer';
+import type { ImageMetadataMap } from '../ssr/imageMetadata';
+import type { SlugMap } from '../../shared/slugTranslator';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CMSPageEmitOptions {
+  /** Page data */
+  pageData: JSONPage;
+  /** All global components */
+  globalComponents: Record<string, ComponentDefinition>;
+  /** CMS collection schema */
+  cmsSchema: CMSSchema;
+  /** Page title (may contain {{cms.field}}) */
+  title: string;
+  /** Page meta HTML */
+  meta: string;
+  /** Locale */
+  locale: string;
+  /** Default theme */
+  theme: string;
+  /** Font preloads HTML */
+  fontPreloads: string;
+  /** Library tags */
+  libraryTags: { headCSS?: string; headJS?: string; bodyEndJS?: string };
+  /** Script paths */
+  scriptPaths: string[];
+  /** Import path to BaseLayout */
+  layoutImportPath: string;
+  /** File depth relative to src/pages */
+  fileDepth: number;
+  /** SSR HTML fallbacks: node path -> rendered HTML (for ListNode, LocaleListNode) */
+  ssrFallbacks: Map<string, string>;
+  /** Page name (without extension) */
+  pageName: string;
+  /** Breakpoint config for responsive Tailwind classes */
+  breakpoints?: BreakpointConfig;
+  /** Image metadata map for responsive image generation */
+  imageMetadataMap?: ImageMetadataMap;
+  /** Internationalization config */
+  i18nConfig: I18nConfig;
+  /** Whether site has multiple locales */
+  isMultiLocale: boolean;
+  /** Slug mappings for translating internal link hrefs */
+  slugMappings?: SlugMap[];
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function escapeTemplateLiteral(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+
+function escapeJSX(s: string): string {
+  return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+}
+
+function componentImportPath(fileDepth: number, componentName: string): string {
+  const ups = '../'.repeat(fileDepth + 1);
+  return `${ups}components/${componentName}.astro`;
+}
+
+/**
+ * Collect rich-text field names from CMS schema
+ */
+function collectRichTextFields(schema: CMSSchema): Set<string> {
+  const richTextFields = new Set<string>();
+  for (const [fieldName, fieldDef] of Object.entries(schema.fields)) {
+    if (fieldDef.type === 'rich-text') {
+      richTextFields.add(fieldName);
+    }
+  }
+  return richTextFields;
+}
+
+/**
+ * Transform a title string that may contain {{cms.field}} to an Astro expression.
+ * Returns the transformed title suitable for use in a JSX attribute.
+ */
+function transformTitleExpression(
+  title: string,
+  binding: string,
+  richTextFields: Set<string>,
+  wrapFn?: string
+): string {
+  if (!/\{\{cms\./.test(title)) {
+    return `"${escapeJSX(title)}"`;
+  }
+
+  const w = (expr: string) => wrapFn ? `${wrapFn}(${expr})` : expr;
+
+  // Full match: entire title is a single {{cms.field}}
+  const fullMatch = title.match(/^\{\{cms\.([^}]+)\}\}$/);
+  if (fullMatch) {
+    return `{${w(`${binding}.data.${fullMatch[1].trim()}`)}}`;
+  }
+
+  // Mixed content: "Page - {{cms.title}}" -> {`Page - ${entry.data.title}`}
+  const replaced = title.replace(/\{\{cms\.([^}]+)\}\}/g, (_, fieldPath) => {
+    return `\${${w(`${binding}.data.${fieldPath.trim()}`)}}`;
+  });
+  return `{\`${replaced}\`}`;
+}
+
+/**
+ * Extract the path prefix from a URL pattern.
+ * E.g., "/blog/{{slug}}" -> "blog/"
+ * E.g., "/posts/{{slug}}" -> "posts/"
+ */
+function extractPathPrefix(urlPattern: string): string {
+  // Remove leading slash, then remove the slug placeholder and everything after
+  const withoutLeading = urlPattern.replace(/^\//, '');
+  const idx = withoutLeading.indexOf('{{');
+  if (idx <= 0) return '';
+  return withoutLeading.substring(0, idx);
+}
+
+// ---------------------------------------------------------------------------
+// getStaticPaths generator
+// ---------------------------------------------------------------------------
+
+function buildGetStaticPaths(
+  schema: CMSSchema,
+  isMultiLocale: boolean,
+  i18nConfig: I18nConfig,
+  locale?: string
+): string {
+  const collectionId = schema.id;
+  const slugField = schema.slugField || 'slug';
+  const pathPrefix = extractPathPrefix(schema.urlPattern);
+  const targetLocale = locale || i18nConfig.defaultLocale;
+
+  if (!isMultiLocale) {
+    // Single-locale version: resolve slug for this specific locale
+    // Route file is at blog/[slug].astro (or pl/blog/[slug].astro for non-default)
+    // If i18n values exist, resolve for the target locale
+    const slugExpr = i18nConfig.locales.length > 1
+      ? `entry.data.${slugField}?.${targetLocale} || entry.data.${slugField} || entry.id`
+      : `entry.data.${slugField} || entry.id`;
+
+    return [
+      `export async function getStaticPaths() {`,
+      `  const entries = await getCollection('${collectionId}');`,
+      `  return entries.map(entry => ({`,
+      `    params: { slug: ${slugExpr} },`,
+      `    props: { entry },`,
+      `  }));`,
+      `}`,
+      ``,
+      `const { entry } = Astro.props;`,
+    ].join('\n');
+  }
+
+  // Multi-locale version: enumerate items x locales
+  // Route file is at [...slug].astro (top level), so slug includes full path
+  const defaultLocale = i18nConfig.defaultLocale;
+  const locales = i18nConfig.locales;
+
+  const lines: string[] = [
+    `export async function getStaticPaths() {`,
+    `  const entries = await getCollection('${collectionId}');`,
+    `  const paths = [];`,
+    `  for (const entry of entries) {`,
+  ];
+
+  for (const locale of locales) {
+    const code = locale.code;
+    const slugExpr = `entry.data.${slugField}?.${code} || entry.data.${slugField} || entry.id`;
+
+    if (code === defaultLocale) {
+      // Default locale: include path prefix but no locale prefix
+      // e.g., /blog/{{slug}} → slug = "blog/hello"
+      if (pathPrefix) {
+        lines.push(
+          `    paths.push({`,
+          `      params: { slug: \`${pathPrefix}\${${slugExpr}}\` },`,
+          `      props: { entry, locale: '${code}' },`,
+          `    });`
+        );
+      } else {
+        lines.push(
+          `    paths.push({`,
+          `      params: { slug: ${slugExpr} },`,
+          `      props: { entry, locale: '${code}' },`,
+          `    });`
+        );
+      }
+    } else {
+      // Non-default locale: locale prefix + path prefix + slug
+      // e.g., slug = "pl/blog/witaj"
+      lines.push(
+        `    paths.push({`,
+        `      params: { slug: \`${code}/${pathPrefix}\${${slugExpr}}\` },`,
+        `      props: { entry, locale: '${code}' },`,
+        `    });`
+      );
+    }
+  }
+
+  lines.push(
+    `  }`,
+    `  return paths;`,
+    `}`,
+    ``,
+    `const { entry, locale = '${defaultLocale}' } = Astro.props;`
+  );
+
+  return lines.join('\n');
+}
+
+// ---------------------------------------------------------------------------
+// Main emitter
+// ---------------------------------------------------------------------------
+
+/**
+ * Generate a CMS template .astro page file with getStaticPaths()
+ */
+export function emitCMSPage(options: CMSPageEmitOptions): string {
+  const {
+    pageData,
+    globalComponents,
+    cmsSchema,
+    title,
+    meta,
+    locale,
+    theme,
+    fontPreloads,
+    libraryTags,
+    scriptPaths,
+    layoutImportPath,
+    fileDepth,
+    ssrFallbacks,
+    pageName,
+    breakpoints: breakpointsOpt,
+    imageMetadataMap,
+    i18nConfig,
+    isMultiLocale,
+    slugMappings,
+  } = options;
+
+  const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
+  const binding = 'entry';
+  const richTextFields = collectRichTextFields(cmsSchema);
+  const wrapFn = 'r';
+
+  const root = pageData.root;
+  if (!root) {
+    return buildEmptyCMSPage(
+      layoutImportPath,
+      title,
+      meta,
+      locale,
+      theme,
+      fontPreloads,
+      libraryTags,
+      scriptPaths,
+      cmsSchema,
+      isMultiLocale,
+      i18nConfig,
+      binding,
+      richTextFields
+    );
+  }
+
+  // Build the Astro emit context with CMS mode enabled
+  const ctx: AstroEmitContext = {
+    imports: new Set<string>(),
+    isComponentDef: false,
+    componentProps: {},
+    globalComponents,
+    indent: 1, // inside BaseLayout
+    ssrFallbacks,
+    elementPath: [0],
+    fileType: 'page',
+    fileName: pageName,
+    breakpoints,
+    imageMetadataMap,
+    locale,
+    cmsMode: true,
+    cmsEntryBinding: binding,
+    cmsRichTextFields: richTextFields,
+    cmsWrapFn: wrapFn,
+    slugMappings,
+    i18nDefaultLocale: i18nConfig.defaultLocale,
+  };
+
+  // Emit the template body
+  const templateBody = nodeToAstro(root, ctx);
+
+  // Build frontmatter with imports
+  const importLines: string[] = [];
+  importLines.push(`import { getCollection } from 'astro:content';`);
+  importLines.push(`import BaseLayout from '${layoutImportPath}';`);
+
+  // Sort component imports alphabetically
+  const componentImports = Array.from(ctx.imports).sort();
+  for (const comp of componentImports) {
+    const path = componentImportPath(fileDepth, comp);
+    importLines.push(`import ${comp} from '${path}';`);
+  }
+
+  // Build getStaticPaths
+  const staticPaths = buildGetStaticPaths(cmsSchema, isMultiLocale, i18nConfig, locale);
+
+  // Build script paths array
+  const scriptsArrayLiteral = scriptPaths.length > 0
+    ? `[${scriptPaths.map((s) => `"${s}"`).join(', ')}]`
+    : '[]';
+
+  // Build library tags literal
+  const libraryTagsLiteral = `{ headCSS: \`${escapeTemplateLiteral(libraryTags.headCSS || '')}\`, headJS: \`${escapeTemplateLiteral(libraryTags.headJS || '')}\`, bodyEndJS: \`${escapeTemplateLiteral(libraryTags.bodyEndJS || '')}\` }`;
+
+  // Escape meta first, then transform CMS templates ({{cms.X}} survives escaping intact)
+  const escapedMeta = escapeTemplateLiteral(meta).replace(
+    /\{\{cms\.([^}]+)\}\}/g,
+    (_, fieldPath) => `\${${wrapFn}(${binding}.data.${fieldPath.trim()})}`
+  );
+  const escapedFontPreloads = escapeTemplateLiteral(fontPreloads);
+
+  // Transform title for CMS entry data
+  const titleExpr = transformTitleExpression(title, binding, richTextFields, wrapFn);
+
+  // i18n resolver helper — resolves {_i18n: true, en: "...", pl: "..."} to the correct locale string
+  const resolverHelper = `function r(v) {
+  if (v && typeof v === 'object' && v._i18n) return v['${locale}'] ?? v['${i18nConfig.defaultLocale}'] ?? Object.values(v).find(x => x !== true && x !== undefined) ?? '';
+  return v ?? '';
+}`;
+
+  return `---
+${importLines.join('\n')}
+
+${staticPaths}
+
+${resolverHelper}
+---
+<BaseLayout
+  title=${titleExpr}
+  meta={\`${escapedMeta}\`}
+  scripts={${scriptsArrayLiteral}}
+  locale="${locale}"
+  theme="${theme}"
+  fontPreloads={\`${escapedFontPreloads}\`}
+  libraryTags={${libraryTagsLiteral}}
+>
+  <div id="root">
+${templateBody}  </div>
+</BaseLayout>
+`;
+}
+
+/**
+ * Build an empty CMS page with just the layout wrapper and getStaticPaths
+ */
+function buildEmptyCMSPage(
+  layoutImport: string,
+  title: string,
+  meta: string,
+  locale: string,
+  theme: string,
+  fontPreloads: string,
+  libraryTags: { headCSS?: string; headJS?: string; bodyEndJS?: string },
+  scriptPaths: string[],
+  cmsSchema: CMSSchema,
+  isMultiLocale: boolean,
+  i18nConfig: I18nConfig,
+  binding: string,
+  richTextFields: Set<string>
+): string {
+  const escapedMeta = escapeTemplateLiteral(meta);
+  const escapedFontPreloads = escapeTemplateLiteral(fontPreloads);
+  const scriptsArrayLiteral = scriptPaths.length > 0
+    ? `[${scriptPaths.map((s) => `"${s}"`).join(', ')}]`
+    : '[]';
+  const libraryTagsLiteral = `{ headCSS: \`${escapeTemplateLiteral(libraryTags.headCSS || '')}\`, headJS: \`${escapeTemplateLiteral(libraryTags.headJS || '')}\`, bodyEndJS: \`${escapeTemplateLiteral(libraryTags.bodyEndJS || '')}\` }`;
+
+  const wrapFn = 'r';
+  const staticPaths = buildGetStaticPaths(cmsSchema, isMultiLocale, i18nConfig, locale);
+  const titleExpr = transformTitleExpression(title, binding, richTextFields, wrapFn);
+
+  const resolverHelper = `function r(v) {
+  if (v && typeof v === 'object' && v._i18n) return v['${locale}'] ?? v['${i18nConfig.defaultLocale}'] ?? Object.values(v).find(x => x !== true && x !== undefined) ?? '';
+  return v ?? '';
+}`;
+
+  return `---
+import { getCollection } from 'astro:content';
+import BaseLayout from '${layoutImport}';
+
+${staticPaths}
+
+${resolverHelper}
+---
+<BaseLayout
+  title=${titleExpr}
+  meta={\`${escapedMeta}\`}
+  scripts={${scriptsArrayLiteral}}
+  locale="${locale}"
+  theme="${theme}"
+  fontPreloads={\`${escapedFontPreloads}\`}
+  libraryTags={${libraryTagsLiteral}}
+>
+</BaseLayout>
+`;
+}

package/lib/server/astro/componentEmitter.ts

@@ -87,7 +87,8 @@ export function emitAstroComponent(
   name: string,
   def: ComponentDefinition,
   allComponents: Record<string, ComponentDefinition>,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
+  defaultLocale: string = 'en'
 ): string {
   const comp = def.component;
   const propDefs = comp.interface || {};
@@ -110,17 +111,20 @@ export function emitAstroComponent(
     fileType: 'component',
     fileName: name,
     breakpoints,
+    defaultLocale,
   };
 
   // Emit the template body
   const templateBody = nodeToAstro(structure, ctx);
 
   // Build frontmatter
-  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags);
+  const frontmatter = buildFrontmatter(name, propDefs, ctx.imports, ctx.dynamicTags, ctx.needsI18nResolver ? defaultLocale : undefined);
 
   // Build style/script sections
   const styleSection = comp.css ? `\n<style>\n${comp.css}\n</style>\n` : '';
-  const scriptSection = comp.javascript ? `\n<script>\n${comp.javascript}\n</script>\n` : '';
+  const scriptSection = comp.javascript
+    ? buildScriptSection(comp.javascript, comp, propDefs)
+    : '';
 
   return `---\n${frontmatter}---\n${templateBody}${styleSection}${scriptSection}`;
 }
@@ -132,7 +136,8 @@ function buildFrontmatter(
   componentName: string,
   propDefs: Record<string, PropDefinition>,
   imports: Set<string>,
-  dynamicTags?: Map<string, string>
+  dynamicTags?: Map<string, string>,
+  i18nDefaultLocale?: string
 ): string {
   const lines: string[] = [];
 
@@ -164,6 +169,8 @@ function buildFrontmatter(
       const defaultVal = formatDefault(propDef);
       if (defaultVal !== null) {
         destructParts.push(`${propName} = ${defaultVal}`);
+      } else if (propDef.type === 'link') {
+        destructParts.push(`${propName} = { href: "#" }`);
       } else {
         destructParts.push(propName);
       }
@@ -190,6 +197,18 @@ function buildFrontmatter(
     }
   }
 
+  // i18n resolver helper — resolves { _i18n: true, en: "...", pl: "..." } at runtime
+  if (i18nDefaultLocale) {
+    lines.push('');
+    lines.push(`const r = (v: any) => {`);
+    lines.push(`  if (v && typeof v === 'object' && v._i18n) {`);
+    lines.push(`    const locale = Astro.currentLocale ?? '${i18nDefaultLocale}';`);
+    lines.push(`    return v[locale] ?? v['${i18nDefaultLocale}'] ?? Object.values(v).find((s: any) => typeof s === 'string' && s !== '') ?? '';`);
+    lines.push(`  }`);
+    lines.push(`  return v ?? '';`);
+    lines.push(`};`);
+  }
+
   if (lines.length > 0) lines.push('');
   return lines.join('\n');
 }
@@ -203,6 +222,72 @@ function buildNoStructureComponent(
 ): string {
   let content = '---\n---\n<slot />\n';
   if (comp.css) content += `\n<style>\n${comp.css}\n</style>\n`;
-  if (comp.javascript) content += `\n<script>\n${comp.javascript}\n</script>\n`;
+  if (comp.javascript) content += `\n<script is:inline>\n${comp.javascript}\n</script>\n`;
   return content;
 }
+
+/**
+ * Transform JS for define:vars compatibility.
+ * Astro's define:vars injects each prop as a script-scope variable, not a `props` object.
+ * This function:
+ * 1. Removes `const/let/var { x, y } = props;` destructuring lines
+ * 2. Replaces `props.X` references with direct `X` variable access
+ * 3. Drops `var/let/const` from redeclarations of define:vars variables
+ */
+function transformDefineVarsJS(js: string, varNames: string[]): string {
+  let result = js;
+
+  // 1. Remove destructuring from props: `const { x, y } = props;`
+  result = result.replace(
+    /^\s*(const|let|var)\s+\{([^}]+)\}\s*=\s*props\s*;?\s*$/gm,
+    (match, _keyword, inner) => {
+      const names = inner.split(',').map((s: string) => s.trim()).filter(Boolean);
+      if (names.every((n: string) => varNames.includes(n))) return '';
+      return match;
+    }
+  );
+
+  // 2. Replace `props.X` with `X` (longest names first to avoid substring conflicts)
+  const sorted = [...varNames].sort((a, b) => b.length - a.length);
+  for (const name of sorted) {
+    result = result.replace(new RegExp(`props\\.${name}\\b`, 'g'), name);
+  }
+
+  // 3. Remove redeclarations of define:vars variables (already injected as const by Astro)
+  for (const name of varNames) {
+    result = result.replace(
+      new RegExp(`^\\s*(var|let|const)\\s+${name}\\s*=[^;]*;?\\s*$`, 'gm'),
+      ''
+    );
+  }
+
+  return result;
+}
+
+/**
+ * Build the script section with proper el/props initialization.
+ * - defineVars components: use Astro's define:vars to pass props into inline script
+ * - other components: use is:inline to avoid module bundling
+ * Both cases use document.currentScript.previousElementSibling to get el.
+ */
+function buildScriptSection(
+  js: string,
+  comp: StructuredComponentDefinition,
+  propDefs: Record<string, PropDefinition>
+): string {
+  const elInit = 'const el = document.currentScript.previousElementSibling;';
+
+  if (comp.defineVars) {
+    const vars = comp.defineVars === true
+      ? Object.keys(propDefs).filter(k => k !== 'children')
+      : comp.defineVars;
+
+    if (vars.length > 0) {
+      const transformedJS = transformDefineVarsJS(js, vars);
+      const defineVarsObj = `{ ${vars.join(', ')} }`;
+      return `\n<script define:vars={${defineVarsObj}}>\n${elInit}\n${transformedJS}\n</script>\n`;
+    }
+  }
+
+  return `\n<script is:inline>\n${elInit}\n${js}\n</script>\n`;
+}