meno-core 1.1.3 → 1.1.5

package/lib/server/services/pageService.ts

@@ -7,11 +7,11 @@
  */
 
 import { existsSync, readdirSync, mkdirSync, rmdirSync } from 'node:fs';
-import { join } from 'node:path';
+import { join, relative, sep } from 'node:path';
 import type { PageCache } from '../pageCache';
 import { parseJSON } from '../jsonLoader';
 import { buildLineMap } from '../utils/jsonLineMapper';
-import { projectPaths } from '../projectContext';
+import { projectPaths, getProjectRoot } from '../projectContext';
 import { logRuntimeError } from '../../shared/errorLogger';
 import { isPathWithinRoot } from '../../shared/pathSecurity';
 import type { JSONPage } from '../../shared/types';
@@ -64,6 +64,13 @@ export class PageService {
       const lineMap = buildLineMap(content);
       this.pageCache.set(path, content, lineMap);
     }
+    // Reconcile: drop cached paths the provider no longer reports. Without this, a page whose
+    // path CHANGES on disk (a rename, or a folder-index file `blog/index.astro` that now maps
+    // to `/blog` instead of `/blog/index`) leaves its old key behind as a ghost entry — it
+    // keeps showing up in the page picker until the process restarts.
+    for (const path of this.pageCache.keys()) {
+      if (!pages.has(path)) this.pageCache.delete(path);
+    }
   }
 
   /**
@@ -241,30 +248,45 @@ export class PageService {
    *
    * @example
    * ```typescript
-   * const pages = pageService.getAllPagesWithInfo();
+   * const pages = await pageService.getAllPagesWithInfo();
    * // [{ path: "/", isDraft: false }, { path: "/about", isDraft: true }]
    * ```
    */
-  getAllPagesWithInfo(): Array<{ path: string; isDraft: boolean; folder?: string; source?: 'cms' | 'ssr' }> {
+  async getAllPagesWithInfo(): Promise<
+    Array<{ path: string; isDraft: boolean; folder?: string; source?: 'cms' | 'ssr'; sourcePath?: string }>
+  > {
     const paths = this.pageCache.keys().filter((p) => !p.startsWith('/_sketch/'));
-    return paths.map((path) => {
-      const pageData = this.getPageData(path);
-      // Extract folder from path: /blog/post -> blog, /templates/blog-post -> templates
-      // Root-level pages (e.g., /, /about) have no folder
-      const pathWithoutSlash = path === '/' ? 'index' : path.substring(1);
-      const slashIndex = pathWithoutSlash.lastIndexOf('/');
-      const folder = slashIndex > 0 ? pathWithoutSlash.substring(0, slashIndex) : undefined;
-      // Surface a non-static page source (`cms` template / `ssr` live page) so the editor's
-      // page picker can group them apart from plain static pages. Static/undefined omitted.
-      const metaSource = pageData?.meta?.source;
-      const source = metaSource === 'cms' || metaSource === 'ssr' ? metaSource : undefined;
-      return {
-        path,
-        isDraft: pageData?.meta?.draft === true,
-        ...(folder ? { folder } : {}),
-        ...(source ? { source } : {}),
-      };
-    });
+    return Promise.all(
+      paths.map(async (path) => {
+        const pageData = this.getPageData(path);
+        // Extract folder from path: /blog/post -> blog, /templates/blog-post -> templates
+        // Root-level pages (e.g., /, /about) have no folder
+        const pathWithoutSlash = path === '/' ? 'index' : path.substring(1);
+        const slashIndex = pathWithoutSlash.lastIndexOf('/');
+        const folder = slashIndex > 0 ? pathWithoutSlash.substring(0, slashIndex) : undefined;
+        // Surface a non-static page source (`cms` template / `ssr` live page) so the editor's
+        // page picker can group them apart from plain static pages. Static/undefined omitted.
+        const metaSource = pageData?.meta?.source;
+        const source = metaSource === 'cms' || metaSource === 'ssr' ? metaSource : undefined;
+        // For template pages the logical editor path (`/templates/<col>`) diverges from the
+        // on-disk file (`src/pages/<routeDir>/[slug].astro`), so a naive `<pagesDir>/<path>`
+        // mapping opens the wrong (nonexistent) file. Ask the provider to resolve the real
+        // source file and surface it project-root-relative so "Open source file" targets it.
+        // Only resolved for templates — normal pages' paths map directly.
+        let sourcePath: string | undefined;
+        if (source === 'cms' && this.provider?.resolveSourcePath) {
+          const abs = await this.provider.resolveSourcePath(path);
+          if (abs) sourcePath = relative(getProjectRoot(), abs).split(sep).join('/');
+        }
+        return {
+          path,
+          isDraft: pageData?.meta?.draft === true,
+          ...(folder ? { folder } : {}),
+          ...(source ? { source } : {}),
+          ...(sourcePath ? { sourcePath } : {}),
+        };
+      }),
+    );
   }
 
   /**

package/lib/server/ssr/htmlGenerator.test.ts

@@ -93,7 +93,6 @@ const mockConfigService = {
   getLibraries: mock(() => undefined),
   getResponsiveScales: mock(() => ({ enabled: false, baseReference: 16 })),
   getCustomCode: mock(() => ({})),
-  getShowMenoBadge: mock(() => false),
   getRemConversion: mock(() => ({ enabled: false, baseFontSize: 16 })),
 };
 
@@ -314,6 +313,35 @@ describe('generateSSRHTML', () => {
       expect(result).toContain('.my-component { color: red; }');
     });
 
+    // A page can `import '../styles/extra.css'` in its .astro frontmatter — foreign
+    // passthrough the real Astro build bundles. These assert the meno-core SSR canvas
+    // (Meno Select) surfaces the same imports so styling doesn't vanish in select mode.
+    test('links a remote CSS import captured in frontmatter passthrough', async () => {
+      const page = { ...minimalPage, _frontmatter: "import 'https://cdn.example.com/extra.css';" };
+      const result = (await generateSSRHTML(page)) as string;
+      expect(result).toContain('<link rel="stylesheet" href="https://cdn.example.com/extra.css">');
+      // In the head, after the generated stylesheet (so it can override utilities).
+      expect(result.indexOf('id="meno-styles"')).toBeLessThan(result.indexOf('cdn.example.com/extra.css'));
+    });
+
+    test('ignores the regenerated theme.css import', async () => {
+      const page = { ...minimalPage, _frontmatter: "import '../styles/theme.css';" };
+      const result = (await generateSSRHTML(page)) as string;
+      expect(result).not.toContain('data-meno-page-css');
+    });
+
+    test('gracefully skips an unresolvable local CSS import (no crash, no tag)', async () => {
+      const page = { ...minimalPage, _frontmatter: "import '../styles/definitely-missing.css';" };
+      const result = (await generateSSRHTML(page)) as string;
+      expect(result).toStartWith('<!DOCTYPE html>');
+      expect(result).not.toContain('definitely-missing.css');
+    });
+
+    test('injects no page-CSS tags when the page has no frontmatter passthrough', async () => {
+      const result = (await generateSSRHTML(minimalPage)) as string;
+      expect(result).not.toContain('data-meno-page-css');
+    });
+
     test('should minify CSS in production mode (useBuiltBundle=true)', async () => {
       mockRenderPageSSR.mockImplementation(async () => ({
         html: '<div>Content</div>',

package/lib/server/ssr/htmlGenerator.ts

@@ -18,7 +18,7 @@ import {
   extractUtilityClassesFromHTML,
   generateAllInteractiveCSS,
 } from '../../shared/cssGeneration';
-import { rewriteViewportUnits } from '../../shared/viewportUnits';
+import { rewriteViewportUnitsInStylesheet } from '../../shared/viewportUnits';
 import { printMissingStyleWarnings } from '../validateStyleCoverage';
 import { formHandlerScript, needsFormHandler } from '../../client/scripts/formHandler';
 import { menoFilterScript, needsMenoFilter } from '../../client/meno-filter/script.generated';
@@ -34,6 +34,7 @@ import { renderPageSSR, type PreloadImage } from './ssrRenderer';
 import type { CMSContext } from './cmsSSRProcessor';
 import { resolveProjectPath } from '../projectContext';
 import { readTextFile } from '../runtime/fs';
+import { posix } from 'node:path';
 
 /**
  * Generate image preload link tags for high-priority images
@@ -84,6 +85,79 @@ function minifyCSS(code: string): string {
   );
 }
 
+/**
+ * Inline a page's hand-authored CSS imports into the head.
+ *
+ * A page can `import '../styles/extra.css'` in its `.astro` frontmatter. The codec
+ * can't model such an import, so it's captured verbatim as `_frontmatter`
+ * passthrough — the real `astro build` bundles + injects it, but the meno-core SSR
+ * canvas (Meno Select) never learned about it, so hand-imported stylesheets rendered
+ * in Astro mode yet vanished in select mode. Here we extract those side-effect CSS
+ * imports, read each file, and inline it into a `<style>` so the select canvas
+ * matches the build. Best-effort: an unresolvable/remote-only import is skipped, not
+ * fatal. theme.css / local libraries are regenerated elsewhere and are never captured
+ * as passthrough, so they don't appear here.
+ */
+async function collectPageCssImports(
+  frontmatter: string | undefined,
+  pagePath: string | undefined,
+  nonceAttr: string,
+): Promise<string> {
+  if (!frontmatter?.includes('.css')) return '';
+
+  const seen = new Set<string>();
+  const specs: string[] = [];
+  const re = /import\b[^'"]*['"]([^'"]+\.css)(?:\?[^'"]*)?['"]/g;
+  let m: RegExpExecArray | null;
+  // biome-ignore lint/suspicious/noAssignInExpressions: standard regex exec loop
+  while ((m = re.exec(frontmatter)) !== null) {
+    const spec = m[1];
+    if (!spec || seen.has(spec)) continue;
+    seen.add(spec);
+    if (spec.endsWith('styles/theme.css')) continue; // regenerated by the color/variable services
+    specs.push(spec);
+  }
+  if (specs.length === 0) return '';
+
+  // The page's source directory, reconstructed from its URL path
+  // (src/pages/<dir>). dirname('/') and dirname('/about') both yield the pages root.
+  const pageDir = posix.join('src/pages', posix.dirname(pagePath || '/'));
+
+  const tags: string[] = [];
+  for (const spec of specs) {
+    // Remote stylesheet — link it directly (can't inline what we can't read).
+    if (/^(?:https?:)?\/\//.test(spec)) {
+      tags.push(`<link rel="stylesheet" href="${escapeHtml(spec)}">`);
+      continue;
+    }
+    // Candidate project-relative paths, tried in order:
+    //   1. resolved against the page's own directory — correct for `./sibling.css`
+    //      and correctly-depthed `../` on un-prefixed routes;
+    //   2. leading traversal stripped, anchored at src/ — robust for the dominant
+    //      `../styles/*.css` pattern even on localized `[locale]` routes where
+    //      pagePath doesn't map 1:1 to the source file's depth.
+    const candidates = spec.startsWith('/')
+      ? [spec.slice(1)]
+      : [posix.normalize(posix.join(pageDir, spec)), `src/${spec.replace(/^(?:\.\.?\/)+/, '')}`];
+    let css: string | null = null;
+    for (const rel of candidates) {
+      if (rel.startsWith('..')) continue; // never read outside the project root
+      try {
+        css = await readTextFile(resolveProjectPath(rel));
+        break;
+      } catch {
+        /* try the next candidate */
+      }
+    }
+    if (css == null) continue;
+    // Stabilize viewport units for the design canvas (same as the generated sheet)
+    // and neutralize any literal `</style>` so it can't break out of the tag.
+    const content = rewriteViewportUnitsInStylesheet(css).replace(/<\/style/gi, '<\\/style');
+    tags.push(`<style${nonceAttr} data-meno-page-css="${escapeHtml(spec)}">${content}</style>`);
+  }
+  return tags.join('\n  ');
+}
+
 /**
  * Result of SSR HTML generation with separate JS for CSP compliance
  */
@@ -320,18 +394,10 @@ export async function generateSSRHTML(
   await configService.load();
   const globalLibraries = configService.getLibraries() || { js: [], css: [] };
   const globalCustomCode = configService.getCustomCode();
-  // The Meno badge previously used inline event handlers (onmouseenter /
-  // onmouseleave) to drive its opacity hover, which CSP with `'nonce-…'` and
-  // no `'unsafe-inline'` rejects. Move the hover to a stylesheet rule using a
-  // dedicated class so nonces aren't needed for this purely-presentational
-  // effect.
-  const menoBadgeHtml = configService.getShowMenoBadge()
-    ? `<style${nonceAttr}>.meno-badge{position:fixed;bottom:12px;left:12px;z-index:9999;background:#000;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;font-family:system-ui,sans-serif;text-decoration:none;opacity:0.8;transition:opacity 0.2s}.meno-badge:hover,.meno-badge:focus{opacity:1}</style><a class="meno-badge" href="https://meno.so" target="_blank" rel="noopener">Made in Meno</a>`
-    : '';
   const mergedCustomCode = {
     head: [globalCustomCode.head, pageCustomCode?.head].filter(Boolean).join('\n'),
     bodyStart: [globalCustomCode.bodyStart, pageCustomCode?.bodyStart].filter(Boolean).join('\n'),
-    bodyEnd: [globalCustomCode.bodyEnd, pageCustomCode?.bodyEnd, menoBadgeHtml].filter(Boolean).join('\n'),
+    bodyEnd: [globalCustomCode.bodyEnd, pageCustomCode?.bodyEnd].filter(Boolean).join('\n'),
   };
   const componentLibraries = collectComponentLibraries(components, pageData.components || {});
   // Merge global + component first (component libraries always extend)
@@ -540,7 +606,7 @@ picture {
   // canvas can pin viewport units to a stable height (avoids the
   // iframe.height ↔ 100vh feedback loop). var() fallback to 1vh means this
   // is a no-op in production / page mode where --design-vh is unset.
-  const cssWithStableViewport = rewriteViewportUnits(combinedCSS);
+  const cssWithStableViewport = rewriteViewportUnitsInStylesheet(combinedCSS);
 
   // Minify CSS in production mode
   const finalCSS = useBundled ? minifyCSS(cssWithStableViewport) : cssWithStableViewport;
@@ -661,24 +727,30 @@ picture {
   // HTML. Without it, nonce-only `script-src` would drop the recreated script
   // and CMS hot-reload (updated `window.__MENO_CMS__` data) would silently fail.
   const liveReloadScript = injectLiveReload
-    ? `<script${nonceAttr}>(function(){var ws,timer,gen=0,lastSrvRoot=null,dn=document.querySelector('meta[name="csp-nonce"]'),docNonce=dn?dn.getAttribute('content'):'';function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;var ov=old?old.getAttribute(a.name):null;if(a.value!==ov){if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function ek(el){var p=el.getAttribute('data-element-path'),ci=el.getAttribute('data-cms-item-index');return ci?p+'|'+ci:p}function structKey(root){var e=root.querySelectorAll('[data-element-path]'),k=[];for(var i=0;i<e.length;i++)k.push(ek(e[i]));return k.sort().join('~')}function softSync(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]');var sbp={},se=srvR.querySelectorAll('[data-element-path]');for(var i=0;i<se.length;i++)sbp[ek(se[i])]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[ek(oe[i])]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=ek(c),s=sbp[p];if(!s)continue;syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';var hardReset=(oss!==nss)||!lastSrvRoot||!or||!nr||structKey(lastSrvRoot)!==structKey(nr);if(or&&nr){if(hardReset){if(or.innerHTML!==nr.innerHTML)or.innerHTML=nr.innerHTML}else{softSync(or,nr,lastSrvRoot)}}if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.textContent=ns.textContent;var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;if(docNonce)c.nonce=docNonce;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}if(!hardReset){window.scrollTo(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)};s.onerror=function(){window.scrollTo(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));window.scrollTo(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
+    ? `<script${nonceAttr}>(function(){var ws,timer,gen=0,lastSrvRoot=null,dn=document.querySelector('meta[name="csp-nonce"]'),docNonce=dn?dn.getAttribute('content'):'';function strip(s){return s?s.replace(/[?&]_r=\\d+/,''):''}function iScroll(x,y){var de=document.documentElement,b=document.body,pd=de.style.scrollBehavior,pb=b?b.style.scrollBehavior:'';de.style.scrollBehavior='auto';if(b)b.style.scrollBehavior='auto';try{window.scrollTo(x,y)}catch(e){}de.style.scrollBehavior=pd;if(b)b.style.scrollBehavior=pb}function classList(el){return (el.getAttribute('class')||'').split(/\\s+/).filter(Boolean)}function syncEl(cur,srv,old){var cc=classList(cur),sc=classList(srv),oc=old?new Set(classList(old)):new Set();var rt=cc.filter(function(c){return !oc.has(c)});var seen=new Set(),fin=[];sc.concat(rt).forEach(function(c){if(!seen.has(c)){seen.add(c);fin.push(c)}});var fs=fin.join(' ');if((cur.getAttribute('class')||'')!==fs){if(fs)cur.setAttribute('class',fs);else cur.removeAttribute('class')}for(var i=0;i<srv.attributes.length;i++){var a=srv.attributes[i];if(a.name==='class')continue;var ov=old?old.getAttribute(a.name):null;if(a.value!==ov){if(cur.getAttribute(a.name)!==a.value)cur.setAttribute(a.name,a.value)}}if(old){for(var i=0;i<old.attributes.length;i++){var a=old.attributes[i];if(a.name==='class')continue;if(!srv.hasAttribute(a.name)&&cur.hasAttribute(a.name))cur.removeAttribute(a.name)}}}function syncText(cur,srv){var cc=cur.childNodes,sc=srv.childNodes;for(var i=0;i<sc.length;i++){var s=sc[i],c=cc[i];if(s.nodeType===3&&c&&c.nodeType===3){if(c.textContent!==s.textContent)c.textContent=s.textContent}}}function ek(el){var p=el.getAttribute('data-element-path'),ci=el.getAttribute('data-cms-item-index');return ci?p+'|'+ci:p}function structKey(root){var e=root.querySelectorAll('[data-element-path]'),k=[];for(var i=0;i<e.length;i++)k.push(ek(e[i]));return k.sort().join('~')}function softSync(curR,srvR,oldR){var ce=curR.querySelectorAll('[data-element-path]');var sbp={},se=srvR.querySelectorAll('[data-element-path]');for(var i=0;i<se.length;i++)sbp[ek(se[i])]=se[i];var obp={};if(oldR){var oe=oldR.querySelectorAll('[data-element-path]');for(var i=0;i<oe.length;i++)obp[ek(oe[i])]=oe[i]}for(var i=0;i<ce.length;i++){var c=ce[i],p=ek(c),s=sbp[p];if(!s)continue;syncEl(c,s,obp[p]);syncText(c,s)}syncText(curR,srvR)}function connect(){ws=new WebSocket(${wsUrl});ws.onmessage=function(e){var d=JSON.parse(e.data);if(d.type==='hmr:libraries-update'){location.reload()}else if(d.type==='hmr:update'||d.type==='hmr:cms-update'||d.type==='hmr:colors-update'||d.type==='hmr:variables-update')hotReload()};ws.onclose=function(){clearTimeout(timer);timer=setTimeout(connect,1000)}}function hotReload(){var g=++gen;var sx=window.scrollX,sy=window.scrollY;fetch(location.href,{cache:'no-store'}).then(function(r){return r.text()}).then(function(html){if(g!==gen)return;var p=new DOMParser();var d=p.parseFromString(html,'text/html');var or=document.getElementById('root'),nr=d.getElementById('root');var oscr=document.querySelector('script[src^="/_scripts/"]'),nscr=d.querySelector('script[src^="/_scripts/"]');var oss=oscr?strip(oscr.getAttribute('src')):'',nss=nscr?strip(nscr.getAttribute('src')):'';var hardReset=(oss!==nss)||!lastSrvRoot||!or||!nr||structKey(lastSrvRoot)!==structKey(nr);if(or&&nr){if(hardReset){if(or.innerHTML!==nr.innerHTML)or.innerHTML=nr.innerHTML}else{softSync(or,nr,lastSrvRoot)}}if(nr)lastSrvRoot=nr.cloneNode(true);var os=document.getElementById('meno-styles'),ns=d.getElementById('meno-styles');if(os&&ns&&os.textContent!==ns.textContent)os.textContent=ns.textContent;var nh=d.documentElement;if(nh){var nl=nh.getAttribute('lang')||'en',nt=nh.getAttribute('theme')||'light';if(document.documentElement.getAttribute('lang')!==nl)document.documentElement.setAttribute('lang',nl);if(document.documentElement.getAttribute('theme')!==nt)document.documentElement.setAttribute('theme',nt)}var ocms=document.querySelectorAll('script[id^="meno-cms-"]'),ncms=d.querySelectorAll('script[id^="meno-cms-"]');var ock=JSON.stringify(Array.prototype.map.call(ocms,function(s){return [s.id,s.textContent]}));var nck=JSON.stringify(Array.prototype.map.call(ncms,function(s){return [s.id,s.textContent]}));if(ock!==nck){ocms.forEach(function(s){s.remove()});ncms.forEach(function(s){var c=document.createElement('script');c.type=s.type;c.id=s.id;if(docNonce)c.nonce=docNonce;c.textContent=s.textContent;document.head.appendChild(c)})}window.__menoHotReload=true;var olib=document.querySelectorAll('body > script[src^="/libraries/"]'),nlib=d.querySelectorAll('body > script[src^="/libraries/"]');var olk=JSON.stringify(Array.prototype.map.call(olib,function(s){return strip(s.getAttribute('src'))}).sort());var nlk=JSON.stringify(Array.prototype.map.call(nlib,function(s){return strip(s.getAttribute('src'))}).sort());if(olk!==nlk){olib.forEach(function(o){o.remove()});nlib.forEach(function(n){var src=n.getAttribute('src');var ls=document.createElement('script');ls.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();document.body.appendChild(ls)})}if(!hardReset){iScroll(sx,sy)}else{if(oscr)oscr.remove();if(nscr){var src=nscr.getAttribute('src');var s=document.createElement('script');s.src=src+(src.indexOf('?')>-1?'&':'?')+'_r='+Date.now();s.onload=function(){document.dispatchEvent(new Event('DOMContentLoaded'));iScroll(sx,sy)};s.onerror=function(){iScroll(sx,sy)};document.body.appendChild(s)}else{document.dispatchEvent(new Event('DOMContentLoaded'));iScroll(sx,sy)}}}).catch(function(){location.reload()})}var iR=document.getElementById('root');if(iR)lastSrvRoot=iR.cloneNode(true);connect()})()</script>`
     : '';
 
   // Scroll position handlers for preview mode iframe switching
   const scrollHandlerScript = injectLiveReload
-    ? `<script${nonceAttr}>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){window.scrollTo(e.data.scrollX,e.data.scrollY)}})})()</script>`
+    ? `<script${nonceAttr}>(function(){window.addEventListener('message',function(e){if(e.data.type==='GET_SCROLL_POSITION'){window.parent.postMessage({type:'SCROLL_POSITION_RESPONSE',scrollX:window.scrollX,scrollY:window.scrollY},'*')}else if(e.data.type==='SET_SCROLL_POSITION'){var de=document.documentElement,b=document.body,pd=de.style.scrollBehavior,pb=b?b.style.scrollBehavior:'';de.style.scrollBehavior='auto';if(b)b.style.scrollBehavior='auto';window.scrollTo(e.data.scrollX,e.data.scrollY);de.style.scrollBehavior=pd;if(b)b.style.scrollBehavior=pb}})})()</script>`
     : '';
 
   // In production, output minified CSS on single line; in dev, preserve formatting
   const styleContent = useBundled ? finalCSS : `\n    ${combinedCSS.split('\n').join('\n    ')}\n  `;
 
+  // Inline any hand-authored CSS the page imports in its frontmatter (foreign
+  // passthrough the Astro build bundles but the select canvas otherwise misses).
+  // Placed after #meno-styles so it can override generated utilities, matching the
+  // intent of a page pulling in its own stylesheet.
+  const pageCssTags = await collectPageCssImports(pageData._frontmatter, pagePath, nonceAttr);
+
   const htmlDocument = `<!DOCTYPE html>
 <html lang="${rendered.locale}" theme="${themeConfig.default}">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${cspNonce ? `<meta name="csp-nonce" content="${cspNonce}">\n  ` : ''}${iconTags ? `${iconTags}\n  ` : ''}${scriptPreloadTag ? `${scriptPreloadTag}\n  ` : ''}${imagePreloadTags ? `${imagePreloadTags}\n  ` : ''}${fontPreloadTags ? `${fontPreloadTags}\n  ` : ''}${libraryTags.headCSS ? `${libraryTags.headCSS}\n  ` : ''}${libraryTags.headJS ? `${libraryTags.headJS}\n  ` : ''}${rendered.meta}
-  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles"${nonceAttr}>${styleContent}</style>${mergedCustomCode.head ? `\n  ${mergedCustomCode.head}` : ''}
+  ${configInlineScript}${cmsInlineScript}${clientDataScripts}<style id="meno-styles"${nonceAttr}>${styleContent}</style>${pageCssTags ? `\n  ${pageCssTags}` : ''}${mergedCustomCode.head ? `\n  ${mergedCustomCode.head}` : ''}
 </head>
 <body>${mergedCustomCode.bodyStart ? `\n  ${mergedCustomCode.bodyStart}` : ''}
   <div id="root">

package/lib/server/themeCssCodec.test.ts

@@ -47,6 +47,73 @@ describe('parseThemeCss', () => {
     expect(pad).toMatchObject({ value: '64px', group: 'padding', type: 'padding' });
   });
 
+  test('an unrecognized section header does not cascade into colors', () => {
+    // Hand-written / AI-authored theme.css using non-vocabulary headers ("Brand",
+    // "Typography", "Radius"). Regression: these used to inherit the preceding
+    // `Colors` section, so font/size/radius tokens were misfiled as colors.
+    const css = `:root {
+  /* Colors: light */
+  --text: #262626;
+  --primary: #ff5e1f;
+
+  /* Brand */
+  --accent: #f6821f;
+
+  /* Typography */
+  --font-sans: "Inter", sans-serif;
+  --leading-tight: 1.05;
+
+  /* Radius */
+  --rounded-full: 9999px;
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    // Color-valued tokens (incl. those under "Brand") still land as colors via the heuristic.
+    expect(model.themes.themes.light?.colors).toEqual({
+      text: '#262626',
+      primary: '#ff5e1f',
+      accent: '#f6821f',
+    });
+    // Non-color tokens under unrecognized headers must NOT be colors.
+    const colorNames = Object.keys(model.themes.themes.light?.colors ?? {});
+    expect(colorNames).not.toContain('font-sans');
+    expect(colorNames).not.toContain('leading-tight');
+    expect(colorNames).not.toContain('rounded-full');
+    // They become variables instead (group is inferred; exact group is best-effort).
+    const varNames = model.variables.map((v) => v.cssVar);
+    expect(varNames).toContain('--font-sans');
+    expect(varNames).toContain('--leading-tight');
+    expect(varNames).toContain('--rounded-full');
+  });
+
+  test('decorated section header resolves to its canonical group', () => {
+    // AI-authored theme.css: the header carries a descriptive note after the
+    // canonical label. Regression: strict equality dropped these into 'other',
+    // so `--tracking-*` never appeared in the letter-spacing variable picker.
+    const css = `:root {
+  /* Letter-spacing — negative on display type is the Stripe signature */
+  --tracking-tighter: -0.03em;
+  --tracking-tight: -0.02em;
+
+  /* Font Size (display scale) */
+  --h1-size: 48px;
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    const tighter = model.variables.find((v) => v.cssVar === '--tracking-tighter');
+    expect(tighter).toMatchObject({ value: '-0.03em', group: 'letter-spacing' });
+    const h1 = model.variables.find((v) => v.cssVar === '--h1-size');
+    expect(h1).toMatchObject({ value: '48px', group: 'font-size' });
+  });
+
+  test('tracking-named token infers letter-spacing group without a section header', () => {
+    // No comment section: the name idiom (`tracking`) drives the group.
+    const css = `:root {
+  --tracking-wide: 0.08em;
+}`;
+    const model = parseThemeCss(css, BREAKPOINTS);
+    const wide = model.variables.find((v) => v.cssVar === '--tracking-wide');
+    expect(wide).toMatchObject({ value: '0.08em', group: 'letter-spacing' });
+  });
+
   test('override @media maps to per-variable scales; auto region is discarded', () => {
     const css = `:root {
   /* Font Size */

package/lib/server/themeCssCodec.ts

@@ -67,11 +67,52 @@ function sectionLabelForGroup(group?: VariableGroup): string {
   return VARIABLE_GROUPS.find((g) => g.value === group)?.label ?? OTHER_LABEL;
 }
 
-const LABEL_TO_GROUP = new Map<string, VariableGroup>(VARIABLE_GROUPS.map((g) => [g.label.toLowerCase(), g.value]));
+/**
+ * Normalize a section header for matching: lowercase, hyphens/dashes → spaces
+ * (so `Letter-spacing` ≡ `Letter Spacing`), whitespace collapsed. This is what
+ * lets a hand-/AI-written header like `Letter-spacing — negative on display type`
+ * still resolve to the canonical `letter-spacing` group.
+ */
+function normalizeSectionLabel(s: string): string {
+  return s
+    .trim()
+    .toLowerCase()
+    .replace(/[-–—]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+}
+
+const NORMALIZED_LABEL_TO_GROUP = new Map<string, VariableGroup>(
+  VARIABLE_GROUPS.map((g) => [normalizeSectionLabel(g.label), g.value]),
+);
 
-/** Reverse of {@link sectionLabelForGroup}: a section header back to its group, or null. */
+/**
+ * Non-`other` canonical labels, longest first — so a decorated header is matched
+ * against the most specific label as a prefix (`Border Radius …` beats a shorter
+ * hypothetical `Border …`).
+ */
+const PREFIX_LABELS: { norm: string; group: VariableGroup }[] = VARIABLE_GROUPS.filter((g) => g.value !== 'other')
+  .map((g) => ({ norm: normalizeSectionLabel(g.label), group: g.value }))
+  .sort((a, b) => b.norm.length - a.norm.length);
+
+/**
+ * Reverse of {@link sectionLabelForGroup}: a section header back to its group, or null.
+ * Tolerant of decorated headers — an exact canonical label wins, otherwise a header
+ * that *begins* with a canonical label followed by a word boundary (`Letter Spacing —
+ * negative on display type`, `Font Size (display)`) still resolves. A label embedded
+ * mid-header does NOT match (avoids false positives like `Sizes & Spacing`).
+ */
 export function groupForSectionLabel(label: string): VariableGroup | null {
-  return LABEL_TO_GROUP.get(label.trim().toLowerCase()) ?? null;
+  const norm = normalizeSectionLabel(label);
+  const exact = NORMALIZED_LABEL_TO_GROUP.get(norm);
+  if (exact) return exact;
+  for (const { norm: labelNorm, group } of PREFIX_LABELS) {
+    if (norm.startsWith(labelNorm)) {
+      const next = norm.charAt(labelNorm.length);
+      if (next === '' || !/[a-z0-9]/.test(next)) return group;
+    }
+  }
+  return null;
 }
 
 /** True if a CSS value reads as a color (used to classify un-sectioned `:root` decls). */
@@ -83,6 +124,18 @@ export function isColorValue(value: string): boolean {
   return false;
 }
 
+/**
+ * Variable-name idioms that map to a group but don't contain the group string —
+ * mostly Tailwind's own token names, which AI-generated theme.css files lean on.
+ * Matched on hyphen/underscore-delimited word boundaries so `--tracking-tight`
+ * hits but an unrelated `--x-radiusy` does not.
+ */
+const NAME_HINT_GROUPS: { needle: RegExp; group: VariableGroup }[] = [
+  { needle: /(^|[-_])tracking([-_]|$)/, group: 'letter-spacing' },
+  { needle: /(^|[-_])leading([-_]|$)/, group: 'line-height' },
+  { needle: /(^|[-_])(radius|rounded)([-_]|$)/, group: 'border-radius' },
+];
+
 /**
  * Best-effort group for a variable that carries no comment section (hand-written or
  * legacy theme.css). px/rem tokens are inherently ambiguous (font-size vs padding vs
@@ -99,6 +152,11 @@ export function inferGroup(cssVar: string, value: string): VariableGroup {
   if (/^\d*\.\d+$/.test(v) || /^[1-9](\.\d+)?$/.test(v)) return 'line-height';
   // Last-ditch: a hint embedded in the variable name.
   const name = cssVar.replace(/^--/, '').toLowerCase();
+  // Common Tailwind / AI naming that doesn't literally contain the group string
+  // (`--tracking-tight` is letter-spacing, `--leading-none` is line-height, …).
+  for (const { needle, group } of NAME_HINT_GROUPS) {
+    if (needle.test(name)) return group;
+  }
   for (const g of VARIABLE_GROUPS) {
     if (g.value !== 'other' && name.includes(g.value)) return g.value;
   }
@@ -429,8 +487,12 @@ export function parseThemeCss(css: string, breakpoints?: BreakpointConfig): Them
             const dn = inner.match(/^colors\s*:\s*([\w-]+)/i);
             if (dn) defaultName = dn[1]!;
           } else {
-            const g = groupForSectionLabel(inner);
-            if (g) section = g;
+            // Unrecognized header (e.g. a hand-written "Brand" / "Typography" label, or an
+            // inline note) resets the section to null rather than inheriting the previous
+            // one — otherwise everything after a `/* Colors */` block would silently cascade
+            // into colors. With section=null the per-decl value heuristic decides: color
+            // values stay colors, everything else becomes a variable (group via inferGroup).
+            section = groupForSectionLabel(inner);
           }
           continue;
         }

package/lib/server/webflow/templateWrapper.ts

@@ -0,0 +1,54 @@
+/**
+ * Webflow Designer Extension template wrapper.
+ *
+ * The Webflow Designer injects the `webflow` API global only when extension
+ * HTML is wrapped in a template fetched from `webflow-ext.com`. This module
+ * fetches the template once per process, caches it, then splices the
+ * extension's <head>/<body> content into the `{{ui}}` placeholder.
+ *
+ * Used by both the studio's mounted `/webflow-extension/*` route and the
+ * standalone serve.ts on port 1337, so they stay in sync automatically.
+ *
+ * NOTE: this is the ONLY survivor of the retired `core/lib/server/webflow/`
+ * tree (the Meno→Webflow exporter, removed in 0d11d0d5). It is direction-neutral
+ * — it only wraps extension HTML so the Designer injects the `webflow` global —
+ * so it is reused as-is by the Webflow→Meno import extension.
+ */
+
+import { readFile } from 'node:fs/promises';
+
+let cachedTemplate: string | null = null;
+
+async function getWebflowTemplate(appName: string): Promise<string> {
+  if (cachedTemplate) return cachedTemplate;
+  const url = `https://webflow-ext.com/template/v2?name=${encodeURIComponent(appName)}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch Webflow template: ${res.status}`);
+  cachedTemplate = await res.text();
+  return cachedTemplate;
+}
+
+/**
+ * Wrap extension HTML in the Webflow Designer template.
+ * `manifestPath` points to the extension's `webflow.json` — its `name` field
+ * is forwarded as the `?name=` query param to webflow-ext.com.
+ *
+ * On any failure (manifest read, template fetch) we log a warning and return
+ * the raw HTML, matching the prior behavior of the two duplicate copies.
+ */
+export async function wrapInWebflowTemplate(html: string, manifestPath: string): Promise<string> {
+  try {
+    const manifest = JSON.parse(await readFile(manifestPath, 'utf-8'));
+    const template = await getWebflowTemplate(manifest.name || 'Export to Meno');
+
+    const headMatch = html.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const headContent = headMatch?.[1] ?? '';
+    const bodyContent = bodyMatch?.[1] ?? '';
+
+    return template.replace('{{ui}}', headContent + bodyContent);
+  } catch (err: any) {
+    console.warn('Could not fetch Webflow wrapper template:', err.message);
+    return html;
+  }
+}

package/lib/shared/cssGeneration.test.ts

@@ -150,6 +150,34 @@ describe('cssGeneration', () => {
       expect(rule).toBe('border: 1px solid var(--primary);');
     });
 
+    test('bare / numeric border widths render a visible shorthand (no Preflight)', () => {
+      // `border` alone would be invisible without a border-style, so it expands to `<width> solid`
+      // (color omitted → defaults to currentColor).
+      expect(generateRuleForClass('border')).toBe('border: 1px solid;');
+      expect(generateRuleForClass('border-2')).toBe('border: 2px solid;');
+      expect(generateRuleForClass('border-0')).toBe('border: 0px solid;');
+    });
+
+    test('bare / numeric per-side widths split into longhands, no color (a border-color class wins)', () => {
+      expect(generateRuleForClass('border-b')).toBe('border-bottom-width: 1px; border-bottom-style: solid;');
+      expect(generateRuleForClass('border-t-4')).toBe('border-top-width: 4px; border-top-style: solid;');
+    });
+
+    test('logical-axis border widths use border-inline / border-block', () => {
+      expect(generateRuleForClass('border-x')).toBe('border-inline: 1px solid;');
+      expect(generateRuleForClass('border-y-2')).toBe('border-block: 2px solid;');
+    });
+
+    test('border style keyword on its own', () => {
+      expect(generateRuleForClass('border-solid')).toBe('border-style: solid;');
+      expect(generateRuleForClass('border-dashed')).toBe('border-style: dashed;');
+    });
+
+    test('unsupported border forms stay unrecognized (foreign-safe)', () => {
+      expect(generateRuleForClass('border-gray-200')).toBeNull();
+      expect(generateRuleForClass('border-wrapper')).toBeNull();
+    });
+
     test('border-color with named CSS color outputs directly', () => {
       const rule = generateRuleForClass('border-[red]');
       expect(rule).toBe('border-color: red;');
@@ -356,6 +384,42 @@ describe('cssGeneration', () => {
       expect(generateRuleForClass('[text-overflow:ellipsis]')).toBe('text-overflow: ellipsis;');
       expect(generateRuleForClass('[clip-path:circle(50%)]')).toBe('clip-path: circle(50%);');
     });
+
+    test('filter functions wrap the value in their function', () => {
+      expect(generateRuleForClass('blur-[70px]')).toBe('filter: blur(70px);');
+      expect(generateRuleForClass('backdrop-blur-[8px]')).toBe('backdrop-filter: blur(8px);');
+      expect(generateRuleForClass('blur-(--glow)')).toBe('filter: blur(var(--glow));');
+      expect(generateRuleForClass('brightness-50')).toBe('filter: brightness(0.5);');
+      expect(generateRuleForClass('grayscale')).toBe('filter: grayscale(100%);');
+      expect(generateRuleForClass('hue-rotate-90')).toBe('filter: hue-rotate(90deg);');
+      expect(generateRuleForClass('drop-shadow-[0_4px_6px_#0003]')).toBe('filter: drop-shadow(0 4px 6px #0003);');
+      expect(generateRuleForClass('backdrop-opacity-50')).toBe('backdrop-filter: opacity(0.5);');
+      // Length named scale is deliberately not absorbed (no blur theme tokens).
+      expect(generateRuleForClass('blur-sm')).toBeNull();
+    });
+
+    test('per-axis transforms and side radius expand correctly', () => {
+      expect(generateRuleForClass('skew-x-[10deg]')).toBe('transform: skewX(10deg);');
+      expect(generateRuleForClass('scale-y-95')).toBe('scale: 1 0.95;');
+      expect(generateRuleForClass('rounded-t-lg')).toBe(
+        'border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg);',
+      );
+      expect(generateRuleForClass('rounded-l-[8px]')).toBe(
+        'border-top-left-radius: 8px; border-bottom-left-radius: 8px;',
+      );
+    });
+
+    test('new statics and viewport keywords', () => {
+      expect(generateRuleForClass('italic')).toBe('font-style: italic;');
+      expect(generateRuleForClass('text-nowrap')).toBe('white-space: nowrap;');
+      expect(generateRuleForClass('break-words')).toBe('overflow-wrap: break-word;');
+      expect(generateRuleForClass('isolate')).toBe('isolation: isolate;');
+      expect(generateRuleForClass('snap-x')).toBe('scroll-snap-type: x mandatory;');
+      expect(generateRuleForClass('mix-blend-multiply')).toBe('mix-blend-mode: multiply;');
+      expect(generateRuleForClass('columns-3')).toBe('columns: 3;');
+      expect(generateRuleForClass('h-dvh')).toBe('height: 100dvh;');
+      expect(generateRuleForClass('shadow-inner')).toBe('box-shadow: var(--shadow-inner);');
+    });
   });
 });