meno-core 1.0.15 → 1.0.18

package/bin/cli.ts

@@ -27,9 +27,13 @@ Commands:
   serve     Serve built files from ./dist on port 8080
   init      Initialize a new project
 
+Options:
+  build --dev    Include draft pages in build (for local preview)
+
 Examples:
   meno dev                    Start dev server in current directory
-  meno build                  Build static files to ./dist
+  meno build                  Build static files to ./dist (excludes drafts)
+  meno build --dev            Build including draft pages
   meno serve                  Serve built files on port 8080
   meno init my-project        Create new project in ./my-project
 `);
@@ -167,7 +171,7 @@ async function runDev() {
   await import('../entries/server-router');
 }
 
-async function runBuild() {
+async function runBuild(isDev: boolean = false) {
   const projectRoot = process.cwd();
 
   // Validate project structure
@@ -179,7 +183,12 @@ async function runBuild() {
   // Set project root for path resolution
   setProjectRoot(projectRoot);
 
-  console.log(`📁 Building project: ${projectRoot}`);
+  // Set dev mode environment variable (drafts are built in dev mode)
+  if (isDev) {
+    process.env.MENO_DEV_BUILD = 'true';
+  }
+
+  console.log(`📁 Building project: ${projectRoot}${isDev ? ' (dev mode - including drafts)' : ''}`);
 
   // Import and run build
   await import('../build-static.ts');
@@ -397,7 +406,7 @@ switch (command) {
     runDev();
     break;
   case 'build':
-    runBuild();
+    runBuild(args.includes('--dev'));
     break;
   case 'serve':
     runServe();

package/build-static.ts

@@ -319,6 +319,13 @@ async function buildCMSTemplates(
     try {
       const pageData = parseJSON<JSONPage>(templateContent);
 
+      // Skip draft templates in production (not in dev mode)
+      const isDevBuild = process.env.MENO_DEV_BUILD === 'true';
+      if (pageData.meta?.draft === true && !isDevBuild) {
+        console.log(`⏭️  Skipping draft template: ${file}`);
+        continue;
+      }
+
       if (!isCMSPage(pageData)) {
         console.warn(`⚠️  ${file} is in templates/ but missing meta.source: "cms"`);
         continue;
@@ -423,18 +430,33 @@ async function buildStaticPages(): Promise<void> {
     copyDirectory(functionsDir, join(distDir, "functions"));
   }
 
-  // Copy _headers and _redirects files for static hosting (Netlify, Cloudflare Pages)
+  // Copy user-created root files for static hosting
   const hostingFiles: string[] = [];
-  const headersFile = join(projectPaths.project, '_headers');
-  const redirectsFile = join(projectPaths.project, '_redirects');
-
-  if (existsSync(headersFile)) {
-    copyFileSync(headersFile, join(distDir, '_headers'));
-    hostingFiles.push('_headers');
+  const rootFilesToCopy = [
+    '_headers',         // Netlify/Cloudflare headers
+    '_redirects',       // Netlify/Cloudflare redirects
+    'llms.txt',         // LLM context
+    'humans.txt',       // Team credits
+    'ads.txt',          // Ad verification
+    'security.txt',     // Security contact
+    'CNAME',            // GitHub Pages domain
+    'manifest.json',    // PWA manifest
+    'site.webmanifest', // PWA manifest (alt)
+  ];
+
+  for (const file of rootFilesToCopy) {
+    const filePath = join(projectPaths.project, file);
+    if (existsSync(filePath)) {
+      copyFileSync(filePath, join(distDir, file));
+      hostingFiles.push(file);
+    }
   }
-  if (existsSync(redirectsFile)) {
-    copyFileSync(redirectsFile, join(distDir, '_redirects'));
-    hostingFiles.push('_redirects');
+
+  // Copy .well-known directory if exists
+  const wellKnownDir = join(projectPaths.project, '.well-known');
+  if (existsSync(wellKnownDir)) {
+    copyDirectory(wellKnownDir, join(distDir, '.well-known'));
+    hostingFiles.push('.well-known/');
   }
 
   const parts = ['Assets'];
@@ -508,6 +530,13 @@ async function buildStaticPages(): Promise<void> {
     try {
       const pageData = parseJSON<JSONPage>(pageContent);
 
+      // Skip draft pages in production (not in dev mode)
+      const isDevBuild = process.env.MENO_DEV_BUILD === 'true';
+      if (pageData.meta?.draft === true && !isDevBuild) {
+        console.log(`⏭️  Skipping draft: ${basePath}`);
+        continue;
+      }
+
       // Get translated slugs from page meta (if available)
       const slugs = pageData.meta?.slugs;
 
@@ -607,7 +636,7 @@ async function buildStaticPages(): Promise<void> {
 }
 
 // Run build
-buildStaticPages().catch((error) => {
+await buildStaticPages().catch((error) => {
   console.error("❌ Build failed:", error);
   process.exit(1);
 });

package/lib/client/core/ComponentBuilder.ts

@@ -387,7 +387,7 @@ export class ComponentBuilder {
    * Filter internal props from node props
    */
   private filterInternalProps(nodeProps: Record<string, unknown>, tag: string | undefined): Record<string, unknown> {
-    const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
+    const imageOnlyProps = ['src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority'];
     const internalProps = ['type', 'tag', 'component', 'props', 'children', 'html', 'style', ...imageOnlyProps];
     const props: Record<string, unknown> = {};
 

package/lib/client/templateEngine.ts

@@ -339,6 +339,11 @@ export function processStructure(
         if (result === undefined || result === null) {
           return '';
         }
+        // Return objects as-is (e.g., link objects { href, target })
+        // The caller (e.g., href handling) will process them appropriately
+        if (typeof result === 'object') {
+          return result as any;
+        }
         return String(result);
       }
 
@@ -640,7 +645,19 @@ export function processStructure(
               // Regular href value - process as template
               const processedValue = processStructure(value as ComponentNode | ComponentNode[] | string | number | null | undefined, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
               if (processedValue !== null && processedValue !== undefined) {
-                (processed as any).href = processedValue;
+                // Check if result is a link object (from link-type prop like {{link}})
+                if (typeof processedValue === 'object' && processedValue !== null && 'href' in processedValue) {
+                  const linkObj = processedValue as { href: string; target?: string };
+                  (processed as any).href = linkObj.href;
+                  if (linkObj.target) {
+                    (processed as any).attributes = {
+                      ...((processed as any).attributes || {}),
+                      target: linkObj.target
+                    };
+                  }
+                } else {
+                  (processed as any).href = processedValue;
+                }
               }
             }
           } else if (key === 'attributes' && typeof value === 'object' && value !== null) {

package/lib/server/routes/api/pages.ts

@@ -11,9 +11,10 @@ import { jsonResponse } from './shared';
 
 /**
  * Handle pages API endpoint - GET /api/pages
+ * Returns pages with draft status info
  */
 export function handlePagesRoute(pageService: PageService): Response {
-  const pages = pageService.getAllPagePaths();
+  const pages = pageService.getAllPagesWithInfo();
   return jsonResponse({ pages });
 }
 

package/lib/server/services/pageService.ts

@@ -185,6 +185,30 @@ export class PageService {
     return this.pageCache.keys();
   }
 
+  /**
+   * Get all pages with their info (including draft status)
+   *
+   * Returns an array of page info objects including path and draft status.
+   *
+   * @returns Array of page info objects
+   *
+   * @example
+   * ```typescript
+   * const pages = pageService.getAllPagesWithInfo();
+   * // [{ path: "/", isDraft: false }, { path: "/about", isDraft: true }]
+   * ```
+   */
+  getAllPagesWithInfo(): Array<{ path: string; isDraft: boolean }> {
+    const paths = this.pageCache.keys();
+    return paths.map(path => {
+      const pageData = this.getPageData(path);
+      return {
+        path,
+        isDraft: pageData?.meta?.draft === true
+      };
+    });
+  }
+
   /**
    * Get line map for a page
    *

package/lib/server/ssr/attributeBuilder.ts

@@ -21,7 +21,7 @@ export function escapeHtml(unsafe: string): string {
 export function buildAttributes(props: Record<string, unknown>, exclude: string[] = []): string {
   const attrs: string[] = [];
   // Internal props that should never be rendered as HTML attributes
-  const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority', 'priority'];
+  const internalProps = ['tag', 'component', 'props', 'children', 'src', 'alt', 'loading', 'width', 'height', 'sizes', 'srcset', 'fetchpriority'];
   const defaultExclude = [...internalProps, ...exclude];
 
   // Regex to detect unresolved template strings like {{link.target}}

package/lib/server/ssr/htmlGenerator.ts

@@ -15,9 +15,21 @@ import { generateUtilityCSS, extractUtilityClassesFromHTML, generateAllInteracti
 import { printMissingStyleWarnings } from '../validateStyleCoverage';
 import { formHandlerScript, needsFormHandler } from '../../client/scripts/formHandler';
 import { escapeHtml } from './attributeBuilder';
-import { renderPageSSR } from './ssrRenderer';
+import { renderPageSSR, type PreloadImage } from './ssrRenderer';
 import type { CMSContext } from './cmsSSRProcessor';
 
+/**
+ * Generate image preload link tags for high-priority images
+ * Uses imagesrcset and imagesizes for responsive image preloading
+ */
+function generateImagePreloadTags(preloadImages: PreloadImage[]): string {
+  if (preloadImages.length === 0) return '';
+
+  return preloadImages
+    .map(img => `<link rel="preload" as="image" type="${img.type}" imagesrcset="${escapeHtml(img.srcset)}" imagesizes="${escapeHtml(img.sizes)}" fetchpriority="high">`)
+    .join('\n  ');
+}
+
 /**
  * Minify CSS code using regex-based minification
  * Removes comments, unnecessary whitespace, and optimizes values
@@ -302,6 +314,9 @@ img {
     ? `<link rel="preload" href="${extScriptPath}" as="script">`
     : '';
 
+  // Image preload tags for high-priority images (LCP optimization)
+  const imagePreloadTags = generateImagePreloadTags(rendered.preloadImages);
+
   // In production, output minified CSS on single line; in dev, preserve formatting
   const styleContent = useBundled
     ? finalCSS
@@ -312,7 +327,7 @@ img {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${rendered.meta}
+  ${iconTags ? iconTags + '\n  ' : ''}${scriptPreloadTag ? scriptPreloadTag + '\n  ' : ''}${imagePreloadTags ? imagePreloadTags + '\n  ' : ''}${fontPreloadTags ? fontPreloadTags + '\n  ' : ''}${rendered.meta}
   ${configInlineScript}${cmsInlineScript}<style>${styleContent}</style>
 </head>
 <body>

package/lib/server/ssr/imageMetadata.ts

@@ -35,7 +35,7 @@ export const RESPONSIVE_WIDTHS = [500, 800, 1080, 1600, 2400] as const;
 /**
  * Default sizes attribute for responsive images
  */
-export const DEFAULT_SIZES = '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw';
+export const DEFAULT_SIZES = '100vw';
 
 /**
  * Build image metadata map from manifest

package/lib/server/ssr/ssrRenderer.ts

@@ -5,7 +5,7 @@
 
 import type { ComponentNode, ComponentDefinition, JSONPage, CMSListNode, CMSItem } from '../../shared/types';
 import type { TemplateContext } from '../../shared/types/cms';
-import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, buildTemplateContext, resolveItemsTemplate, type ValueResolver } from '../../shared/itemTemplateUtils';
+import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, buildTemplateContext, resolveItemsTemplate, resolveTemplateRawValue, type ValueResolver } from '../../shared/itemTemplateUtils';
 import { singularize } from '../../shared/types/cms';
 import type { ResponsiveStyleObject, StyleObject } from '../../shared/types';
 import type { BreakpointConfig } from '../../shared/breakpoints';
@@ -37,6 +37,18 @@ import { collectComponentJavaScript } from './jsCollector';
 import { CMSContext, processCMSTemplate, processCMSPropsTemplate, createI18nResolver, RAW_HTML_PREFIX } from './cmsSSRProcessor';
 import { ImageMetadataMap, DEFAULT_SIZES, buildImageMetadataMap } from './imageMetadata';
 
+/**
+ * Image preload info for generating <link rel="preload"> tags in head
+ */
+export interface PreloadImage {
+  /** Best available srcset (AVIF preferred, then WebP) */
+  srcset: string;
+  /** Image type (image/avif or image/webp) */
+  type: 'image/avif' | 'image/webp';
+  /** Sizes attribute */
+  sizes: string;
+}
+
 // Re-export types for external consumers
 export type { CMSContext } from './cmsSSRProcessor';
 export type { PageMeta } from './metaTagGenerator';
@@ -65,6 +77,8 @@ interface SSRContext {
   componentContext?: string;
   /** Resolved component props for interactive style mapping resolution */
   componentResolvedProps?: Record<string, unknown>;
+  /** Array to collect high-priority images for preloading */
+  preloadImages?: PreloadImage[];
 }
 
 /**
@@ -101,11 +115,13 @@ async function buildComponentHTML(
   pagePath?: string,
   cmsContext?: CMSContext,
   cmsService?: CMSService
-): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles> }> {
+): Promise<{ html: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[] }> {
   // Create map to collect interactive styles during render
   const interactiveStylesMap = new Map<string, InteractiveStyles>();
+  // Create array to collect high-priority images for preloading
+  const preloadImages: PreloadImage[] = [];
 
-  if (!node) return { html: '', interactiveStylesMap };
+  if (!node) return { html: '', interactiveStylesMap, preloadImages };
 
   // Register components for this render
   ssrComponentRegistry.merge(globalComponents);
@@ -133,11 +149,12 @@ async function buildComponentHTML(
     cmsService,
     elementPath: [0], // Initialize path tracking for interactive styles
     interactiveStylesMap, // Collect interactive styles during render
+    preloadImages, // Collect high-priority images for preloading
   };
 
   const html = await renderNode(node, ctx);
 
-  return { html, interactiveStylesMap };
+  return { html, interactiveStylesMap, preloadImages };
 }
 
 /**
@@ -460,11 +477,22 @@ async function renderNode(
   // Handle object link nodes (render as <a> tag in SSR)
   if (isObjectLinkNode(node)) {
     let href: string = typeof node.href === 'string' ? node.href : '#';
+    let targetFromLink: string | undefined;
 
     // Process item templates in href (for CMSList context)
     const templateCtx = getTemplateContext(ctx);
     if (templateCtx && hasItemTemplates(href)) {
-      href = processItemTemplate(href, templateCtx, getI18nResolver(ctx));
+      // Get raw value first to check if it's a link object (like { href: "/path", target: "_blank" })
+      const rawValue = resolveTemplateRawValue(href, templateCtx);
+      if (rawValue && typeof rawValue === 'object' && 'href' in rawValue) {
+        // Link object - extract href and target
+        const linkObj = rawValue as { href: string; target?: string };
+        href = String(linkObj.href);
+        targetFromLink = linkObj.target;
+      } else {
+        // Regular value - use string processing
+        href = processItemTemplate(href, templateCtx, getI18nResolver(ctx));
+      }
     }
 
     // Localize internal page links to current locale
@@ -542,6 +570,11 @@ async function renderNode(
     delete nodeAttributes.className;
     delete nodeAttributes.class;
 
+    // Add target from link object if present (and not already set in attributes)
+    if (targetFromLink && !nodeAttributes.target) {
+      nodeAttributes.target = targetFromLink;
+    }
+
     const attrs = buildAttributes(nodeAttributes, ['href']);
     const classAttr = ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"`;
 
@@ -898,7 +931,6 @@ function renderImageElement(
   const loading = imgProps.loading as string | undefined;
   const sizes = imgProps.sizes as string | undefined;
   const fetchpriority = imgProps.fetchpriority as string | undefined;
-  const priority = imgProps.priority as boolean | undefined;
   let width = imgProps.width as string | number | undefined;
   let height = imgProps.height as string | number | undefined;
 
@@ -914,18 +946,31 @@ function renderImageElement(
   // Determine sizes attribute (prop > default)
   const sizesAttr = sizes || DEFAULT_SIZES;
 
+  // Collect high-priority images for preloading in head
+  if (fetchpriority === 'high' && metadata && ctx.preloadImages) {
+    // Prefer AVIF, fallback to WebP
+    if (metadata.avifSrcset) {
+      ctx.preloadImages.push({
+        srcset: metadata.avifSrcset,
+        type: 'image/avif',
+        sizes: sizesAttr,
+      });
+    } else if (metadata.srcset) {
+      ctx.preloadImages.push({
+        srcset: metadata.srcset,
+        type: 'image/webp',
+        sizes: sizesAttr,
+      });
+    }
+  }
+
   // Build img attributes
   let imgAttrs = '';
   if (src) imgAttrs += ` src="${escapeHtml(String(src))}"`;
   if (alt !== undefined) imgAttrs += ` alt="${escapeHtml(String(alt))}"`;
-  // Handle priority: if true, set fetchpriority="high" and loading="eager" for LCP optimization
-  if (priority) {
-    imgAttrs += ' fetchpriority="high"';
-    imgAttrs += ' loading="eager"';
-  } else {
-    if (fetchpriority) imgAttrs += ` fetchpriority="${escapeHtml(String(fetchpriority))}"`;
-    if (loading) imgAttrs += ` loading="${escapeHtml(String(loading))}"`;
-  }
+  if (fetchpriority) imgAttrs += ` fetchpriority="${escapeHtml(String(fetchpriority))}"`;
+  if (loading) imgAttrs += ` loading="${escapeHtml(String(loading))}"`;
+
   if (width !== undefined) imgAttrs += ` width="${escapeHtml(String(width))}"`;
   if (height !== undefined) imgAttrs += ` height="${escapeHtml(String(height))}"`;
 
@@ -1164,7 +1209,7 @@ export async function renderPageSSR(
   slugMappings?: SlugMap[],
   cmsContext?: CMSContext,
   cmsService?: CMSService
-): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles> }> {
+): Promise<{ html: string; meta: string; title: string; javascript: string; componentCSS?: string; locale: string; interactiveStylesMap: Map<string, InteractiveStyles>; preloadImages: PreloadImage[] }> {
   // Extract page content
   const rootNode = pageData?.root || undefined;
   if (!rootNode) {
@@ -1199,10 +1244,10 @@ export async function renderPageSSR(
   const pageComponents = pageData?.components || {};
 
   // Render the component tree to HTML with i18n and CMS support
-  // Also collect interactive styles during render
-  const { html: contentHTML, interactiveStylesMap } = rootNode
+  // Also collect interactive styles and preload images during render
+  const { html: contentHTML, interactiveStylesMap, preloadImages } = rootNode
     ? await buildComponentHTML(rootNode, globalComponents, pageComponents, effectiveLocale, config, slugMappings, pagePath, cmsContext, cmsService)
-    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>() };
+    : { html: '', interactiveStylesMap: new Map<string, InteractiveStyles>(), preloadImages: [] };
 
   // Collect JavaScript and CSS from all components
   const javascript = collectComponentJavaScript(globalComponents, pageComponents);
@@ -1231,5 +1276,6 @@ export async function renderPageSSR(
     componentCSS,
     locale: effectiveLocale,
     interactiveStylesMap,
+    preloadImages,
   };
 }

package/lib/server/ssrRenderer.test.ts

@@ -986,45 +986,6 @@ describe("SSR Renderer - Security (XSS Prevention)", () => {
       expect(result.html).toContain('fetchpriority="high"');
     });
 
-    test("should render priority prop as fetchpriority=high and loading=eager", async () => {
-      const pageData: JSONPage = {
-        root: {
-          type: "node",
-          tag: "img",
-          attributes: {
-            src: "/test.jpg",
-            alt: "test",
-            priority: true
-          }
-        } as any
-      };
-
-      const result = await renderPageSSR(pageData);
-
-      expect(result.html).toContain('fetchpriority="high"');
-      expect(result.html).toContain('loading="eager"');
-    });
-
-    test("priority should override explicit loading=lazy", async () => {
-      const pageData: JSONPage = {
-        root: {
-          type: "node",
-          tag: "img",
-          attributes: {
-            src: "/test.jpg",
-            alt: "test",
-            priority: true,
-            loading: "lazy"
-          }
-        } as any
-      };
-
-      const result = await renderPageSSR(pageData);
-
-      // priority=true should set loading="eager", ignoring the lazy value
-      expect(result.html).toContain('loading="eager"');
-      expect(result.html).not.toContain('loading="lazy"');
-    });
   });
 
   describe("Embed content sanitization", () => {

package/lib/shared/cssProperties.ts

@@ -24,6 +24,7 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   right: { type: 'string' },
   bottom: { type: 'string' },
   left: { type: 'string' },
+  inset: { type: 'string' },
   zIndex: { type: 'number' },
 
   // Dimensions
@@ -33,6 +34,7 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   maxWidth: { type: 'string' },
   minHeight: { type: 'string' },
   maxHeight: { type: 'string' },
+  aspectRatio: { type: 'string' },
 
   // Spacing
   margin: { type: 'string' },
@@ -109,6 +111,10 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'],
     type: 'select',
   },
+  alignSelf: {
+    values: ['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline'],
+    type: 'select',
+  },
   flexGrow: { type: 'number' },
   flexShrink: { type: 'number' },
   flexBasis: { type: 'string' },
@@ -118,13 +124,28 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   grid: { type: 'string' },
   gridTemplateColumns: { type: 'string' },
   gridTemplateRows: { type: 'string' },
+  gridTemplateAreas: { type: 'string' },
   gridGap: { type: 'string' },
   gridColumn: { type: 'string' },
   gridRow: { type: 'string' },
+  gridArea: { type: 'string' },
   gridAutoFlow: {
     values: ['row', 'column', 'row dense', 'column dense'],
     type: 'select',
   },
+  gridAutoColumns: { type: 'string' },
+  gridAutoRows: { type: 'string' },
+  justifyItems: {
+    values: ['start', 'end', 'center', 'stretch'],
+    type: 'select',
+  },
+  justifySelf: {
+    values: ['auto', 'start', 'end', 'center', 'stretch'],
+    type: 'select',
+  },
+  placeContent: { type: 'string' },
+  placeItems: { type: 'string' },
+  placeSelf: { type: 'string' },
 
   // Text & Font
   fontSize: { type: 'string' },
@@ -152,14 +173,38 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   },
   letterSpacing: { type: 'string' },
   wordSpacing: { type: 'string' },
+  wordBreak: {
+    values: ['normal', 'break-all', 'keep-all', 'break-word'],
+    type: 'select',
+  },
+  overflowWrap: {
+    values: ['normal', 'break-word', 'anywhere'],
+    type: 'select',
+  },
+  textIndent: { type: 'string' },
+  verticalAlign: {
+    values: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'],
+    type: 'select',
+  },
 
   // Box Shadow & Effects
   boxShadow: { type: 'string' },
   textShadow: { type: 'string' },
   filter: { type: 'string' },
+  backdropFilter: { type: 'string' },
   transform: { type: 'string' },
+  transformOrigin: { type: 'string' },
   transition: { type: 'string' },
   animation: { type: 'string' },
+  backfaceVisibility: {
+    values: ['visible', 'hidden'],
+    type: 'select',
+  },
+  mixBlendMode: {
+    values: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
+    type: 'select',
+  },
+  clipPath: { type: 'string' },
 
   // Overflow & Content
   overflow: {
@@ -202,6 +247,27 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     type: 'select',
   },
 
+  // Outline
+  outline: { type: 'string' },
+  outlineWidth: { type: 'string' },
+  outlineStyle: {
+    values: ['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'],
+    type: 'select',
+  },
+  outlineColor: { type: 'string' },
+  outlineOffset: { type: 'string' },
+
+  // Lists
+  listStyle: { type: 'string' },
+  listStyleType: {
+    values: ['none', 'disc', 'circle', 'square', 'decimal', 'decimal-leading-zero', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha'],
+    type: 'select',
+  },
+  listStylePosition: {
+    values: ['inside', 'outside'],
+    type: 'select',
+  },
+
   // Miscellaneous
   float: {
     values: ['left', 'right', 'none'],
@@ -223,6 +289,15 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['top', 'bottom', 'left', 'right', 'center'],
     type: 'select',
   },
+  resize: {
+    values: ['none', 'both', 'horizontal', 'vertical'],
+    type: 'select',
+  },
+  scrollBehavior: {
+    values: ['auto', 'smooth'],
+    type: 'select',
+  },
+  accentColor: { type: 'string' },
 };
 
 /**
@@ -236,18 +311,20 @@ export const CSS_PROPERTIES = Object.keys(CSS_PROPERTIES_DEFINITION);
  * Order determines display order in the UI
  */
 export const CSS_PROPERTY_GROUPS: Record<string, string[]> = {
-  'Layout': ['display', 'position', 'top', 'right', 'bottom', 'left', 'zIndex'],
-  'Dimensions': ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight'],
+  'Layout': ['display', 'position', 'top', 'right', 'bottom', 'left', 'inset', 'zIndex'],
+  'Dimensions': ['width', 'height', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'aspectRatio'],
   'Spacing': ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'gap', 'rowGap', 'columnGap'],
-  'Flexbox': ['flex', 'flexDirection', 'flexWrap', 'flexFlow', 'justifyContent', 'alignItems', 'alignContent', 'flexGrow', 'flexShrink', 'flexBasis', 'order'],
-  'Grid': ['grid', 'gridTemplateColumns', 'gridTemplateRows', 'gridGap', 'gridColumn', 'gridRow', 'gridAutoFlow'],
-  'Typography': ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'letterSpacing', 'wordSpacing', 'color'],
+  'Flexbox': ['flex', 'flexDirection', 'flexWrap', 'flexFlow', 'justifyContent', 'alignItems', 'alignContent', 'alignSelf', 'flexGrow', 'flexShrink', 'flexBasis', 'order'],
+  'Grid': ['grid', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridGap', 'gridColumn', 'gridRow', 'gridArea', 'gridAutoFlow', 'gridAutoColumns', 'gridAutoRows', 'justifyItems', 'justifySelf', 'placeContent', 'placeItems', 'placeSelf'],
+  'Typography': ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'lineHeight', 'textAlign', 'textDecoration', 'textTransform', 'letterSpacing', 'wordSpacing', 'wordBreak', 'overflowWrap', 'textIndent', 'verticalAlign', 'color'],
   'Background': ['background', 'backgroundColor', 'backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'opacity'],
   'Borders': ['border', 'borderWidth', 'borderStyle', 'borderColor', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'],
-  'Effects': ['boxShadow', 'textShadow', 'filter', 'transform', 'transition', 'animation'],
+  'Outline': ['outline', 'outlineWidth', 'outlineStyle', 'outlineColor', 'outlineOffset'],
+  'Effects': ['boxShadow', 'textShadow', 'filter', 'backdropFilter', 'transform', 'transformOrigin', 'transition', 'animation', 'backfaceVisibility', 'mixBlendMode', 'clipPath'],
   'Overflow': ['overflow', 'overflowX', 'overflowY', 'whiteSpace', 'textOverflow', 'visibility', 'content'],
   'Interaction': ['cursor', 'pointerEvents', 'userSelect'],
-  'Other': ['float', 'clear', 'boxSizing', 'objectFit', 'objectPosition'],
+  'Lists': ['listStyle', 'listStyleType', 'listStylePosition'],
+  'Other': ['float', 'clear', 'boxSizing', 'objectFit', 'objectPosition', 'resize', 'scrollBehavior', 'accentColor'],
 };
 
 /**

package/lib/shared/itemTemplateUtils.ts

@@ -267,6 +267,30 @@ export function resolveItemsTemplate(
   return String(value);
 }
 
+/**
+ * Resolve a template expression to its raw value (without stringification).
+ * Returns undefined if template cannot be resolved.
+ * Useful for checking if a value is an object (like link-type fields).
+ *
+ * @example
+ * resolveTemplateRawValue("{{article.link}}", { article: { link: { href: "/about", target: "_blank" } } })
+ * // Returns: { href: "/about", target: "_blank" }
+ */
+export function resolveTemplateRawValue(
+  template: string,
+  ctx: TemplateContext
+): unknown {
+  // Match single template expression: {{varName.field}}
+  const match = template.match(/^\{\{(\w+)\.([^}]+)\}\}$/);
+  if (!match) return undefined;
+
+  const [, varName, fieldPath] = match;
+  const item = ctx[varName];
+  if (!item || typeof item !== 'object') return undefined;
+
+  return getNestedValue(item as Record<string, unknown>, fieldPath.trim());
+}
+
 /**
  * Build a template context for a CMS item with the given variable name.
  * Includes both named context and legacy context for backward compatibility.

package/lib/shared/types/api.ts

@@ -55,5 +55,7 @@ export interface PageMetaData {
   source?: 'static' | 'cms';
   /** CMS configuration with embedded schema (required when source: 'cms') */
   cms?: PageCmsConfig;
+  /** Draft pages are excluded from static build, sitemap, and robots.txt */
+  draft?: boolean;
 }
 

package/lib/shared/types/cms.ts

@@ -7,7 +7,7 @@
 export type CMSFieldType =
   | 'string'     // Single-line text
   | 'text'       // Multi-line text
-  | 'rich-text'  // Rich text with formatting (HTML)
+  | 'rich-text'  // Rich text with formatting (stored as Tiptap JSON, converted to HTML for SSR)
   | 'number'     // Numeric value
   | 'boolean'    // True/false
   | 'image'      // Image URL/path

package/lib/shared/utilityClassConfig.ts

@@ -42,6 +42,7 @@ export const propertyMap: Record<string, string> = {
   maxHeight: 'mh',
   minWidth: 'miw',
   minHeight: 'mih',
+  aspectRatio: 'ar',
 
   // Colors & Background
   backgroundColor: 'bgc',
@@ -69,14 +70,27 @@ export const propertyMap: Record<string, string> = {
   textDecoration: 'td',
   lineHeight: 'lh',
   letterSpacing: 'ls',
+  wordBreak: 'wb',
+  overflowWrap: 'ow',
+  textIndent: 'ti',
+  verticalAlign: 'va',
+
+  // Lists
   listStyle: 'lst',
+  listStyleType: 'lstt',
+  listStylePosition: 'lstp',
 
   // Transform & Effects
   opacity: 'o',
   transform: 'tm',
-  boxShadow: 'bs',
+  transformOrigin: 'tmo',
+  boxShadow: 'bsh',
   textShadow: 'ts',
   filter: 'flt',
+  backdropFilter: 'bdf',
+  backfaceVisibility: 'bfv',
+  mixBlendMode: 'mbm',
+  clipPath: 'cp',
 
   // Positioning
   position: 'pos',
@@ -84,23 +98,39 @@ export const propertyMap: Record<string, string> = {
   right: 'r',
   bottom: 'bo',
   left: 'l',
+  inset: 'ins',
   zIndex: 'z',
 
   // Grid Layout
   gridTemplateColumns: 'gtc',
   gridTemplateRows: 'gtr',
+  gridTemplateAreas: 'gta',
   gridGap: 'gg',
   gridAutoFlow: 'gaf',
   gridColumn: 'gc',
   gridRow: 'gr',
+  gridArea: 'ga',
   gridAutoRows: 'gar',
   gridAutoColumns: 'gac',
+  justifyItems: 'ji',
+  justifySelf: 'jse',
+  placeContent: 'plc',
+  placeItems: 'pli',
+  placeSelf: 'pls',
 
   // Flexbox extras
   flexGrow: 'fg',
-  flexShrink: 'fs',
+  flexShrink: 'fsh',
   flexBasis: 'fb',
   order: 'ord',
+  alignSelf: 'as',
+
+  // Outline
+  outline: 'ol',
+  outlineWidth: 'olw',
+  outlineStyle: 'ols',
+  outlineColor: 'olc',
+  outlineOffset: 'olo',
 
   // Other
   overflow: 'ov',
@@ -110,8 +140,11 @@ export const propertyMap: Record<string, string> = {
   transition: 'tn',
   objectFit: 'objf',
   objectPosition: 'objp',
-  boxSizing: 'bs',
+  boxSizing: 'bsz',
   visibility: 'vis',
+  resize: 'rsz',
+  scrollBehavior: 'scb',
+  accentColor: 'acc',
 };
 
 // Mapping of prefixes to CSS property names for dynamic rule generation
@@ -142,6 +175,7 @@ export const prefixToCSSProperty: Record<string, string> = {
   mh: 'max-height',
   miw: 'min-width',
   mih: 'min-height',
+  ar: 'aspect-ratio',
 
   // Colors & Background
   bgc: 'background-color',
@@ -169,36 +203,57 @@ export const prefixToCSSProperty: Record<string, string> = {
   td: 'text-decoration',
   lh: 'line-height',
   ls: 'letter-spacing',
+  wb: 'word-break',
+  ow: 'overflow-wrap',
+  ti: 'text-indent',
+  va: 'vertical-align',
+
+  // Lists
   lst: 'list-style',
+  lstt: 'list-style-type',
+  lstp: 'list-style-position',
 
   // Flexbox
   fd: 'flex-direction',
   jc: 'justify-content',
   ai: 'align-items',
   ac: 'align-content',
+  as: 'align-self',
   flex: 'flex',
   fw: 'flex-wrap',
   fg: 'flex-grow',
-  flsh: 'flex-shrink',
+  fsh: 'flex-shrink',
   fb: 'flex-basis',
   ord: 'order',
 
   // Grid
   gtc: 'grid-template-columns',
   gtr: 'grid-template-rows',
+  gta: 'grid-template-areas',
   gg: 'grid-gap',
   gaf: 'grid-auto-flow',
   gc: 'grid-column',
   gr: 'grid-row',
+  ga: 'grid-area',
   gar: 'grid-auto-rows',
   gac: 'grid-auto-columns',
+  ji: 'justify-items',
+  jse: 'justify-self',
+  plc: 'place-content',
+  pli: 'place-items',
+  pls: 'place-self',
 
   // Effects
   o: 'opacity',
   tm: 'transform',
+  tmo: 'transform-origin',
   bsh: 'box-shadow',
   ts: 'text-shadow',
   flt: 'filter',
+  bdf: 'backdrop-filter',
+  bfv: 'backface-visibility',
+  mbm: 'mix-blend-mode',
+  cp: 'clip-path',
 
   // Positioning
   pos: 'position',
@@ -206,8 +261,16 @@ export const prefixToCSSProperty: Record<string, string> = {
   r: 'right',
   bo: 'bottom',
   l: 'left',
+  ins: 'inset',
   z: 'z-index',
 
+  // Outline
+  ol: 'outline',
+  olw: 'outline-width',
+  ols: 'outline-style',
+  olc: 'outline-color',
+  olo: 'outline-offset',
+
   // Other
   ov: 'overflow',
   ovx: 'overflow-x',
@@ -218,6 +281,9 @@ export const prefixToCSSProperty: Record<string, string> = {
   objp: 'object-position',
   bsz: 'box-sizing',
   vis: 'visibility',
+  rsz: 'resize',
+  scb: 'scroll-behavior',
+  acc: 'accent-color',
 };
 
 // Special value mappings for specific properties

package/lib/shared/validation/schemas.ts

@@ -291,6 +291,7 @@ const PageMetaDataBaseSchema = z.object({
   ogImage: z.string().optional(),
   ogType: z.string().optional(),
   slugs: z.record(z.string(), z.string()).optional(),
+  draft: z.boolean().optional(),
 }).passthrough();
 
 // Temporary export for backward compatibility - will be replaced with full schema below
@@ -469,4 +470,5 @@ export const PageMetaDataWithCMSSchema = z.object({
   slugs: z.record(z.string(), z.string()).optional(),
   source: z.enum(['static', 'cms']).optional(),
   cms: PageCmsConfigSchema.optional(),
+  draft: z.boolean().optional(),
 }).passthrough();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "type": "module",
   "bin": {
     "meno": "./bin/cli.ts"