meno-core 1.1.4 → 1.1.5

package/dist/lib/shared/index.js

@@ -51,7 +51,7 @@ import {
   setLogSink,
   slugify,
   translatePath
-} from "../../chunks/chunk-FQBIC2OB.js";
+} from "../../chunks/chunk-YMBUSHII.js";
 import {
   NETLIFY_LOCALE_404_BEGIN,
   NETLIFY_LOCALE_404_END,
@@ -294,7 +294,7 @@ import {
   validatePath,
   validatePropDefinition,
   validateStructuredComponentDefinition
-} from "../../chunks/chunk-UOF4MCAD.js";
+} from "../../chunks/chunk-RLBV2R6J.js";
 import {
   DEFAULT_I18N_CONFIG,
   buildLocalizedPath,

package/lib/server/fileWatcher.test.ts

@@ -243,6 +243,96 @@ describe('FileWatcher astro CMS template pages', () => {
   });
 });
 
+describe('FileWatcher theme.css', () => {
+  let projectRoot: string;
+  let stylesDir: string;
+
+  beforeEach(() => {
+    projectRoot = join(tmpdir(), `meno-fw-theme-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    stylesDir = join(projectRoot, 'src', 'styles');
+    mkdirSync(join(projectRoot, 'src'), { recursive: true });
+  });
+
+  afterEach(() => {
+    try {
+      rmSync(projectRoot, { recursive: true, force: true });
+    } catch {
+      /* ignore */
+    }
+  });
+
+  // theme.css holds BOTH token halves (colors + variables), so one edit must
+  // invalidate both service caches — an external write (e.g. an AI tool adding
+  // a token) previously stayed invisible until a dev-server restart.
+  test('fires onColorsChange AND onVariablesChange when theme.css is written', async () => {
+    let colorChanges = 0;
+    let variableChanges = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        colorChanges++;
+      },
+      onVariablesChange: async () => {
+        variableChanges++;
+      },
+    });
+
+    mkdirSync(stylesDir, { recursive: true });
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; }');
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; --accent: #f00; }');
+    await waitFor(() => colorChanges >= 1 && variableChanges >= 1);
+
+    watcher.stopAll();
+    expect(colorChanges).toBeGreaterThanOrEqual(1);
+    expect(variableChanges).toBeGreaterThanOrEqual(1);
+  });
+
+  // src/styles may not exist at startup (blank project — theme.css lands later
+  // via the JSON migration or an external tool), so the watcher must defer-attach.
+  test('fires after src/styles is created post-startup', async () => {
+    let colorChanges = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        colorChanges++;
+      },
+    });
+
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+    mkdirSync(stylesDir, { recursive: true });
+    await settle(100);
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; }');
+    await waitFor(() => colorChanges >= 1);
+
+    watcher.stopAll();
+    expect(colorChanges).toBeGreaterThanOrEqual(1);
+  });
+
+  test('ignores writes to other files in src/styles', async () => {
+    let fired = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        fired++;
+      },
+      onVariablesChange: async () => {
+        fired++;
+      },
+    });
+
+    mkdirSync(stylesDir, { recursive: true });
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+
+    writeFileSync(join(stylesDir, 'global.css'), 'body { margin: 0; }');
+    await settle(200);
+
+    watcher.stopAll();
+    expect(fired).toBe(0);
+  });
+});
+
 describe('FileWatcher project.config.json', () => {
   let projectRoot: string;
   let prevRoot: string;

package/lib/server/fileWatcher.ts

@@ -152,6 +152,7 @@ export class FileWatcher {
   private templatesWatcher: FSWatcher | null = null;
   private colorsWatcher: FSWatcher | null = null;
   private variablesWatcher: FSWatcher | null = null;
+  private themeCssWatcher: FSWatcher | null = null;
   private enumsWatcher: FSWatcher | null = null;
   private cmsWatcher: FSWatcher | null = null;
   private imagesWatcher: FSWatcher | null = null;
@@ -261,6 +262,35 @@ export class FileWatcher {
     });
   }
 
+  /**
+   * Start watching `src/styles/theme.css` — the token source of truth for
+   * astro-format projects, where colors AND variables share the one file
+   * (colors.json / variables.json were migrated away, so the two watchers
+   * above never fire there). An external edit (e.g. an AI tool adding tokens)
+   * must invalidate both service caches and refresh connected clients, or the
+   * new tokens only appear after a dev-server restart. Deferred attach:
+   * `src/styles` may not exist yet (theme.css lands later via migration or an
+   * external tool). No-op in legacy JSON projects (no `src/`).
+   */
+  watchThemeCss(dirPath: string = join(getProjectRoot(), 'src', 'styles')): void {
+    attachWhenDirExists(
+      dirPath,
+      () =>
+        watch(dirPath, { recursive: false }, async (_event, filename) => {
+          if (filename !== 'theme.css') return;
+          if (this.callbacks.onColorsChange) {
+            await this.callbacks.onColorsChange();
+          }
+          if (this.callbacks.onVariablesChange) {
+            await this.callbacks.onVariablesChange();
+          }
+        }),
+      (w) => {
+        this.themeCssWatcher = w;
+      },
+    );
+  }
+
   /**
    * Start watching enums.json file
    */
@@ -425,6 +455,7 @@ export class FileWatcher {
     this.watchTemplates();
     this.watchColors();
     this.watchVariables();
+    this.watchThemeCss();
     this.watchEnums();
     this.watchCMS();
     this.watchImages();
@@ -465,6 +496,11 @@ export class FileWatcher {
       this.variablesWatcher = null;
     }
 
+    if (this.themeCssWatcher) {
+      this.themeCssWatcher.close();
+      this.themeCssWatcher = null;
+    }
+
     if (this.enumsWatcher) {
       this.enumsWatcher.close();
       this.enumsWatcher = null;

package/lib/server/services/configService.ts

@@ -66,7 +66,6 @@ interface RawProjectConfig {
   imageFormat?: ImageFormat;
   remConversion?: Partial<RemConversionConfig>;
   customCode?: CustomCodeConfig;
-  showMenoBadge?: boolean;
 }
 
 /**
@@ -343,10 +342,6 @@ export class ConfigService {
     return this.config.customCode;
   }
 
-  getShowMenoBadge(): boolean {
-    return this.config?.showMenoBadge === true;
-  }
-
   getImageFormat(): ImageFormat {
     if (this.config?.imageFormat === 'avif') return 'avif';
     return 'webp';

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 })),
 };
 

package/lib/server/ssr/htmlGenerator.ts

@@ -394,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)
@@ -735,12 +727,12 @@ 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

package/lib/shared/cssGeneration.test.ts

@@ -384,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);');
+    });
   });
 });
 

package/lib/shared/cssGeneration.ts

@@ -4,7 +4,7 @@
  * Used by both client and server to ensure consistent CSS output
  */
 
-import { propertyOrder, staticUtilityReverse, presetClassReverse } from './utilityClassConfig';
+import { propertyOrder, staticUtilityReverse, presetClassReverse, ROUNDED_SIDE_CORNERS } from './utilityClassConfig';
 import {
   parseUtilityClass,
   splitVariantPrefix,
@@ -217,6 +217,11 @@ export function generateRuleForClass(className: string, knownTokens?: ReadonlySe
   if (root === 'size') {
     return `width: ${value}; height: ${value};`;
   }
+  // Side border-radius: no CSS per-side shorthand — emit both corner longhands.
+  const sideCorners = root ? ROUNDED_SIDE_CORNERS[root] : undefined;
+  if (sideCorners) {
+    return `${sideCorners[0]}: ${value}; ${sideCorners[1]}: ${value};`;
+  }
   if (root === 'px') {
     return `padding-left: ${value}; padding-right: ${value};`;
   }

package/lib/shared/tailwindThemeScale.ts

@@ -137,6 +137,7 @@ const SPECS: ScaleSpec[] = [
       ['lg', '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)'],
       ['xl', '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)'],
       ['2xl', '0 25px 50px -12px rgb(0 0 0 / 0.25)'],
+      ['inner', 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)'],
     ],
   },
   {

package/lib/shared/types/comment.ts

@@ -3,8 +3,8 @@
  *
  * Comments are Figma-style pins placed on components in the studio canvas.
  * One file per pin (thread embedded). Storage layout (status as top folder):
- *   {projectRoot}/comments/<status>/<pageSlug>--<seq>--<titleSlug>.json
- *   e.g. comments/open/blog__post--3--hero-is-too-dark.json
+ *   {projectRoot}/comments/<status>/<pageSlug>--<seq>--<titleSlug>--<idFrag>.json
+ *   e.g. comments/open/blog__post--3--hero-is-too-dark--550e8400.json
  *
  * Pins are an authoring-time concept — they live in studio only.
  */
@@ -119,7 +119,13 @@ export interface Comment {
   _filename: string;
   /** Page path the pin lives on (e.g. `"blog/post"`). */
   _pagePath: string;
-  /** Stable per-page badge number. Server assigns at create time. */
+  /**
+   * Best-effort creation counter (server stamps `max+1` at create time), used
+   * as the human-scannable middle segment of the filename. NOT collision-proof
+   * under concurrent/offline creation and NOT the badge shown to users — the pin
+   * badge is derived client-side from the full set (see `assignDisplaySeq`), so a
+   * repeated `_seq` here is harmless.
+   */
   _seq: number;
   /** ISO timestamps. */
   _createdAt: string;