meno-core 1.0.38 → 1.0.39

package/lib/server/astro/tailwindMapper.ts

@@ -0,0 +1,547 @@
+/**
+ * Tailwind CSS Class Mapper for Astro Export
+ * Converts CSS property:value pairs to Tailwind utility classes.
+ * Uses exact-match table for common values, arbitrary value fallback for the rest.
+ */
+
+import type {
+  StyleObject,
+  ResponsiveStyleObject,
+  StyleMapping,
+} from '../../shared/types/styles';
+import type { BreakpointConfig } from '../../shared/breakpoints';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function isStyleMapping(value: unknown): value is StyleMapping {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    '_mapping' in value &&
+    (value as StyleMapping)._mapping === true
+  );
+}
+
+function hasTemplateExpression(value: string): boolean {
+  return /\{\{.+?\}\}/.test(value);
+}
+
+function isResponsiveStyle(
+  style: StyleObject | ResponsiveStyleObject
+): style is ResponsiveStyleObject {
+  return 'base' in style || 'tablet' in style || 'mobile' in style;
+}
+
+// ---------------------------------------------------------------------------
+// Exact match table: property+value → Tailwind class
+// ---------------------------------------------------------------------------
+
+const exactMatches: Record<string, Record<string, string>> = {
+  display: {
+    flex: 'flex',
+    grid: 'grid',
+    block: 'block',
+    none: 'hidden',
+    inline: 'inline',
+    'inline-block': 'inline-block',
+    'inline-flex': 'inline-flex',
+    'inline-grid': 'inline-grid',
+  },
+  flexDirection: {
+    column: 'flex-col',
+    row: 'flex-row',
+    'column-reverse': 'flex-col-reverse',
+    'row-reverse': 'flex-row-reverse',
+  },
+  justifyContent: {
+    center: 'justify-center',
+    'flex-start': 'justify-start',
+    'flex-end': 'justify-end',
+    'space-between': 'justify-between',
+    'space-around': 'justify-around',
+    'space-evenly': 'justify-evenly',
+    // camelCase aliases (component data uses camelCase)
+    spaceBetween: 'justify-between',
+    spaceAround: 'justify-around',
+    spaceEvenly: 'justify-evenly',
+    flexStart: 'justify-start',
+    flexEnd: 'justify-end',
+  },
+  alignItems: {
+    center: 'items-center',
+    'flex-start': 'items-start',
+    'flex-end': 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline',
+    // camelCase aliases
+    flexStart: 'items-start',
+    flexEnd: 'items-end',
+  },
+  alignContent: {
+    center: 'content-center',
+    'flex-start': 'content-start',
+    'flex-end': 'content-end',
+    'space-between': 'content-between',
+    'space-around': 'content-around',
+    stretch: 'content-stretch',
+  },
+  alignSelf: {
+    auto: 'self-auto',
+    center: 'self-center',
+    'flex-start': 'self-start',
+    'flex-end': 'self-end',
+    stretch: 'self-stretch',
+  },
+  position: {
+    relative: 'relative',
+    absolute: 'absolute',
+    fixed: 'fixed',
+    sticky: 'sticky',
+    static: 'static',
+  },
+  overflow: {
+    hidden: 'overflow-hidden',
+    auto: 'overflow-auto',
+    scroll: 'overflow-scroll',
+    visible: 'overflow-visible',
+  },
+  overflowX: {
+    hidden: 'overflow-x-hidden',
+    auto: 'overflow-x-auto',
+    scroll: 'overflow-x-scroll',
+    visible: 'overflow-x-visible',
+  },
+  overflowY: {
+    hidden: 'overflow-y-hidden',
+    auto: 'overflow-y-auto',
+    scroll: 'overflow-y-scroll',
+    visible: 'overflow-y-visible',
+  },
+  cursor: {
+    pointer: 'cursor-pointer',
+    default: 'cursor-default',
+    'not-allowed': 'cursor-not-allowed',
+    grab: 'cursor-grab',
+    grabbing: 'cursor-grabbing',
+    text: 'cursor-text',
+    move: 'cursor-move',
+    wait: 'cursor-wait',
+  },
+  textAlign: {
+    center: 'text-center',
+    left: 'text-left',
+    right: 'text-right',
+    justify: 'text-justify',
+  },
+  textDecoration: {
+    none: 'no-underline',
+    underline: 'underline',
+    'line-through': 'line-through',
+    overline: 'overline',
+  },
+  textTransform: {
+    uppercase: 'uppercase',
+    lowercase: 'lowercase',
+    capitalize: 'capitalize',
+    none: 'normal-case',
+  },
+  objectFit: {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill',
+    none: 'object-none',
+    'scale-down': 'object-scale-down',
+  },
+  objectPosition: {
+    center: 'object-center',
+    top: 'object-top',
+    bottom: 'object-bottom',
+    left: 'object-left',
+    right: 'object-right',
+  },
+  flexWrap: {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+  },
+  pointerEvents: {
+    none: 'pointer-events-none',
+    auto: 'pointer-events-auto',
+  },
+  userSelect: {
+    none: 'select-none',
+    auto: 'select-auto',
+    text: 'select-text',
+    all: 'select-all',
+  },
+  visibility: {
+    hidden: 'invisible',
+    visible: 'visible',
+  },
+  whiteSpace: {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    'pre-wrap': 'whitespace-pre-wrap',
+    'pre-line': 'whitespace-pre-line',
+  },
+  wordBreak: {
+    'break-all': 'break-all',
+    'break-word': 'break-words',
+    normal: 'break-normal',
+  },
+  listStyleType: {
+    none: 'list-none',
+    disc: 'list-disc',
+    decimal: 'list-decimal',
+  },
+  listStylePosition: {
+    inside: 'list-inside',
+    outside: 'list-outside',
+  },
+  boxSizing: {
+    'border-box': 'box-border',
+    'content-box': 'box-content',
+  },
+  gridAutoFlow: {
+    row: 'grid-flow-row',
+    column: 'grid-flow-col',
+    dense: 'grid-flow-dense',
+    'row dense': 'grid-flow-row-dense',
+    'column dense': 'grid-flow-col-dense',
+  },
+};
+
+// Single-value exact matches (property → class when value matches)
+const singleValueMatches: Record<string, string> = {
+  // width/height 100%
+  'width:100%': 'w-full',
+  'height:100%': 'h-full',
+  'width:100vw': 'w-screen',
+  'height:100vh': 'h-screen',
+  'width:auto': 'w-auto',
+  'height:auto': 'h-auto',
+  'width:fit-content': 'w-fit',
+  'height:fit-content': 'h-fit',
+  'width:min-content': 'w-min',
+  'height:min-content': 'h-min',
+  'width:max-content': 'w-max',
+  'height:max-content': 'h-max',
+  'maxWidth:100%': 'max-w-full',
+  'maxWidth:none': 'max-w-none',
+  'maxHeight:100%': 'max-h-full',
+  'maxHeight:none': 'max-h-none',
+  'minWidth:0': 'min-w-0',
+  'minHeight:0': 'min-h-0',
+  'margin:auto': 'm-auto',
+  'margin:0 auto': 'mx-auto',
+  'marginLeft:auto': 'ml-auto',
+  'marginRight:auto': 'mr-auto',
+  'marginInline:auto': 'mx-auto',
+  'borderRadius:50%': 'rounded-full',
+  'borderRadius:9999px': 'rounded-full',
+  'borderRadius:0': 'rounded-none',
+  'flex:1': 'flex-1',
+  'flex:none': 'flex-none',
+  'flex:auto': 'flex-auto',
+  'flexGrow:0': 'grow-0',
+  'flexGrow:1': 'grow',
+  'flexShrink:0': 'shrink-0',
+  'flexShrink:1': 'shrink',
+  'opacity:0': 'opacity-0',
+  'opacity:1': 'opacity-100',
+  'zIndex:0': 'z-0',
+  'zIndex:10': 'z-10',
+  'zIndex:20': 'z-20',
+  'zIndex:30': 'z-30',
+  'zIndex:40': 'z-40',
+  'zIndex:50': 'z-50',
+  'inset:0': 'inset-0',
+  'top:0': 'top-0',
+  'right:0': 'right-0',
+  'bottom:0': 'bottom-0',
+  'left:0': 'left-0',
+};
+
+// ---------------------------------------------------------------------------
+// Arbitrary value prefix map: CSS property → Tailwind prefix
+// ---------------------------------------------------------------------------
+
+const arbitraryPrefixMap: Record<string, string> = {
+  // Spacing
+  padding: 'p',
+  paddingTop: 'pt',
+  paddingRight: 'pr',
+  paddingBottom: 'pb',
+  paddingLeft: 'pl',
+  paddingInline: 'px',
+  paddingBlock: 'py',
+  margin: 'm',
+  marginTop: 'mt',
+  marginRight: 'mr',
+  marginBottom: 'mb',
+  marginLeft: 'ml',
+  marginInline: 'mx',
+  marginBlock: 'my',
+  gap: 'gap',
+  rowGap: 'gap-y',
+  columnGap: 'gap-x',
+
+  // Sizing
+  width: 'w',
+  height: 'h',
+  maxWidth: 'max-w',
+  maxHeight: 'max-h',
+  minWidth: 'min-w',
+  minHeight: 'min-h',
+
+  // Typography
+  fontSize: 'text',
+  fontWeight: 'font',
+  fontFamily: 'font',
+  lineHeight: 'leading',
+  letterSpacing: 'tracking',
+
+  // Borders
+  borderRadius: 'rounded',
+  borderTopLeftRadius: 'rounded-tl',
+  borderTopRightRadius: 'rounded-tr',
+  borderBottomLeftRadius: 'rounded-bl',
+  borderBottomRightRadius: 'rounded-br',
+  border: 'border',
+  borderTop: 'border-t',
+  borderRight: 'border-r',
+  borderBottom: 'border-b',
+  borderLeft: 'border-l',
+  borderColor: 'border',
+
+  // Colors
+  color: 'text',
+  backgroundColor: 'bg',
+  background: 'bg',
+  backgroundImage: 'bg',
+
+  // Effects
+  opacity: 'opacity',
+  boxShadow: 'shadow',
+  textShadow: '[text-shadow]',
+  filter: '[filter]',
+  backdropFilter: 'backdrop',
+  transform: '[transform]',
+  transformOrigin: 'origin',
+  transition: 'transition',
+  mixBlendMode: 'mix-blend',
+  clipPath: '[clip-path]',
+
+  // Positioning
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+  inset: 'inset',
+  zIndex: 'z',
+
+  // Grid
+  gridTemplateColumns: 'grid-cols',
+  gridTemplateRows: 'grid-rows',
+  gridColumn: 'col',
+  gridRow: 'row',
+  gridAutoRows: 'auto-rows',
+  gridAutoColumns: 'auto-cols',
+
+  // Flexbox extras
+  flexGrow: 'grow',
+  flexShrink: 'shrink',
+  flexBasis: 'basis',
+  order: 'order',
+  flex: 'flex',
+
+  // Aspect ratio
+  aspectRatio: 'aspect',
+
+  // Outline
+  outline: 'outline',
+  outlineWidth: 'outline',
+  outlineOffset: 'outline-offset',
+  outlineColor: 'outline',
+
+  // Other
+  accentColor: 'accent',
+  textIndent: '[text-indent]',
+  verticalAlign: 'align',
+  overflowWrap: '[overflow-wrap]',
+  scrollBehavior: 'scroll',
+  resize: 'resize',
+};
+
+// ---------------------------------------------------------------------------
+// Core conversion functions
+// ---------------------------------------------------------------------------
+
+/**
+ * Convert a single CSS property:value pair to a Tailwind class.
+ * Returns null if the value should be skipped (mappings, templates).
+ */
+export function propertyToTailwind(
+  property: string,
+  value: string | number
+): string | null {
+  const strValue = String(value);
+
+  // Skip empty values — they produce broken classes like gap-[], mt-[]
+  if (strValue === '') return null;
+
+  // Skip template expressions — these must be handled via inline style
+  if (hasTemplateExpression(strValue)) return null;
+
+  // Check single-value exact matches first
+  const singleKey = `${property}:${strValue}`;
+  if (singleValueMatches[singleKey]) {
+    return singleValueMatches[singleKey];
+  }
+
+  // Check exact match table
+  if (exactMatches[property]?.[strValue]) {
+    return exactMatches[property][strValue];
+  }
+
+  // Color variable handling:
+  // "var(--text)" → "text-[var(--text)]"
+  // Bare color name like "text" → "text-[var(--text)]"
+  if (property === 'color' || property === 'backgroundColor' || property === 'borderColor') {
+    const prefix = property === 'color' ? 'text' : property === 'backgroundColor' ? 'bg' : 'border';
+    if (strValue.includes('var(')) {
+      return `${prefix}-[${strValue}]`;
+    }
+    // Bare name (not a hex, rgb, or number-starting value)
+    if (!strValue.match(/^[#\d]/) && !strValue.includes('rgb') && !strValue.includes('hsl')) {
+      return `${prefix}-[var(--${strValue})]`;
+    }
+  }
+
+  // Arbitrary value fallback
+  const twPrefix = arbitraryPrefixMap[property];
+  if (!twPrefix) {
+    // Unknown property: use arbitrary property syntax
+    const cssProp = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+    const sanitized = strValue.replace(/\s+/g, '_');
+    return `[${cssProp}:${sanitized}]`;
+  }
+
+  // For prefixes that start with '[' it's an arbitrary property
+  if (twPrefix.startsWith('[')) {
+    const sanitized = strValue.replace(/\s+/g, '_');
+    return `${twPrefix.slice(0, -1)}:${sanitized}]`;
+  }
+
+  // Standard arbitrary value: prefix-[value]
+  const sanitized = strValue.replace(/\s+/g, '_');
+
+  // Font family names need quotes in arbitrary syntax for Tailwind to parse correctly
+  if (property === 'fontFamily' && !sanitized.includes(',') && !sanitized.startsWith("'")) {
+    return `${twPrefix}-['${sanitized}']`;
+  }
+
+  return `${twPrefix}-[${sanitized}]`;
+}
+
+/**
+ * Convert a flat style object to an array of Tailwind classes.
+ * Skips StyleMapping values (handled separately via class:list).
+ * Returns { classes, dynamicStyles } where dynamicStyles are template-expression
+ * styles that need inline style attributes.
+ */
+export function stylesToTailwind(
+  style: StyleObject | Record<string, string | number>
+): { classes: string[]; dynamicStyles: Record<string, string> } {
+  const classes: string[] = [];
+  const dynamicStyles: Record<string, string> = {};
+
+  for (const [prop, value] of Object.entries(style)) {
+    if (isStyleMapping(value)) continue;
+
+    const strValue = String(value);
+
+    // Template expressions go to dynamic/inline styles
+    if (hasTemplateExpression(strValue)) {
+      const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      dynamicStyles[cssProp] = strValue;
+      continue;
+    }
+
+    const twClass = propertyToTailwind(prop, value);
+    if (twClass) {
+      classes.push(twClass);
+    }
+  }
+
+  return { classes, dynamicStyles };
+}
+
+/**
+ * Convert a responsive style object to Tailwind classes with responsive prefixes.
+ * Uses desktop-first max-width breakpoints.
+ *
+ * - base styles → no prefix (desktop default)
+ * - tablet styles → max-[{breakpoint}px]: prefix
+ * - mobile styles → max-[{breakpoint}px]: prefix
+ */
+export function responsiveStylesToTailwind(
+  style: StyleObject | ResponsiveStyleObject | null | undefined,
+  breakpoints: BreakpointConfig
+): { classes: string[]; dynamicStyles: Record<string, string> } {
+  if (!style) return { classes: [], dynamicStyles: {} };
+
+  const allClasses: string[] = [];
+  const allDynamicStyles: Record<string, string> = {};
+
+  if (isResponsiveStyle(style)) {
+    const responsive = style as ResponsiveStyleObject;
+
+    // Base styles (no prefix)
+    if (responsive.base) {
+      const { classes, dynamicStyles } = stylesToTailwind(responsive.base);
+      allClasses.push(...classes);
+      Object.assign(allDynamicStyles, dynamicStyles);
+    }
+
+    // Tablet styles
+    if (responsive.tablet) {
+      const bpValue = breakpoints.tablet?.breakpoint ?? 1024;
+      const prefix = `max-[${bpValue}px]:`;
+      const { classes, dynamicStyles } = stylesToTailwind(responsive.tablet);
+      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      // Dynamic styles for tablet — just merge (can't do responsive inline styles easily)
+      Object.assign(allDynamicStyles, dynamicStyles);
+    }
+
+    // Mobile styles
+    if (responsive.mobile) {
+      const bpValue = breakpoints.mobile?.breakpoint ?? 540;
+      const prefix = `max-[${bpValue}px]:`;
+      const { classes, dynamicStyles } = stylesToTailwind(responsive.mobile);
+      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      Object.assign(allDynamicStyles, dynamicStyles);
+    }
+
+    // Handle any other custom breakpoints
+    for (const [bpName, bpStyle] of Object.entries(responsive)) {
+      if (bpName === 'base' || bpName === 'tablet' || bpName === 'mobile' || !bpStyle) continue;
+      const bpValue = breakpoints[bpName]?.breakpoint;
+      if (!bpValue) continue;
+      const prefix = `max-[${bpValue}px]:`;
+      const { classes, dynamicStyles } = stylesToTailwind(bpStyle);
+      allClasses.push(...classes.map(cls => `${prefix}${cls}`));
+      Object.assign(allDynamicStyles, dynamicStyles);
+    }
+  } else {
+    // Flat style object — treat as base
+    const { classes, dynamicStyles } = stylesToTailwind(style as StyleObject);
+    allClasses.push(...classes);
+    Object.assign(allDynamicStyles, dynamicStyles);
+  }
+
+  return { classes: allClasses, dynamicStyles: allDynamicStyles };
+}

package/lib/server/index.ts

@@ -62,6 +62,9 @@ export { migrateTemplatesDirectory } from './migrateTemplates';
 // Static build
 export { buildStaticPages } from '../../build-static';
 
+// Astro export
+export { buildAstroProject } from '../../build-astro';
+
 // Utilities
 export * from './utils';
 

package/lib/server/ssr/htmlGenerator.ts

@@ -401,6 +401,9 @@ img {
   width: 100%;
   height: 100%;
 }
+picture {
+  display: block;
+}
 .olink {
   text-decoration: none;
   display: block;

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

@@ -2327,7 +2327,7 @@ describe('ssrRenderer', () => {
       expect(html).toContain('sizes="(max-width: 768px) 100vw, 50vw"');
     });
 
-    test('picture element splits classes between picture and img tags', async () => {
+    test('picture element splits classes: layout on picture, objf/objp on img', async () => {
       mockImageMetadataMap.set('/split.jpg', {
         srcset: '/split.webp 400w',
         avifSrcset: '/split.avif 400w',
@@ -2336,11 +2336,15 @@ describe('ssrRenderer', () => {
       const node = {
         type: 'node',
         tag: 'img',
-        attributes: { src: '/split.jpg', alt: 'Split', className: 'w-full objf-cover' },
+        attributes: { src: '/split.jpg', alt: 'Split', className: 'w-full objf-cover objp-center' },
       };
       const html = await render(node);
-      expect(html).toContain('<picture');
-      // objf-* class should be on img, layout classes on picture
+      // Layout classes go on <picture>
+      expect(html).toContain('<picture class="w-full">');
+      // Image-specific classes go on <img>
+      expect(html).toContain('class="objf-cover objp-center"');
+      // No display:contents
+      expect(html).not.toContain('display:contents');
     });
   });
 

package/lib/server/ssr/ssrRenderer.ts

@@ -1461,7 +1461,7 @@ function renderImageElement(
   }
 
   // Render as <picture> element if AVIF is available
-  // Split classes: layout/sizing on <picture>, image-specific on <img>
+  // Layout classes go on <picture> (block container), image-specific classes on <img>
   if (metadata?.avifSrcset) {
     // Image-specific class prefixes that should stay on <img>
     const imgClassPrefixes = [
@@ -1471,11 +1471,9 @@ function renderImageElement(
     // Opacity classes (o-NUMBER) go on img, but overflow (o-h, o-a, o-s, o-v) stays on picture
     const opacityPattern = /^o-\d/;
 
-    // Parse classes from classAttr
     const classMatch = classAttr.match(/class="([^"]*)"/);
     const allClasses = classMatch ? classMatch[1].split(/\s+/).filter(Boolean) : [];
 
-    // Split classes between picture and img
     const imgClasses: string[] = [];
     const pictureClasses: string[] = [];
 

package/lib/shared/themeDefaults.test.ts

@@ -88,7 +88,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have code syntax colors', () => {
-      expect(DEFAULT_PROPS_PANEL_COLORS.codeString).toBe('#ce9178');
+      expect(DEFAULT_PROPS_PANEL_COLORS.codeString).toBe('#ffffff');
       expect(DEFAULT_PROPS_PANEL_COLORS.codeNumber).toBe('#b5cea8');
       expect(DEFAULT_PROPS_PANEL_COLORS.codeKey).toBe('#9cdcfe');
       expect(DEFAULT_PROPS_PANEL_COLORS.codeType).toBe('#4ec9b0');

package/lib/shared/themeDefaults.ts

@@ -24,6 +24,7 @@ export interface PropsPanelColors {
   inputBackground: string;
   inputBorder: string;
   hoverBackground: string;
+  variableBackground?: string;
 }
 
 /**
@@ -87,7 +88,7 @@ export const DEFAULT_PROPS_PANEL_COLORS: PropsPanelColors = {
   text: '#cccccc',
   textSecondary: '#cccccc',
   textMuted: '#888888',
-  codeString: '#ce9178',
+  codeString: '#ffffff',
   codeNumber: '#b5cea8',
   codeKey: '#9cdcfe',
   codeType: '#4ec9b0',
@@ -99,6 +100,7 @@ export const DEFAULT_PROPS_PANEL_COLORS: PropsPanelColors = {
   inputBackground: '#2a2a2a',
   inputBorder: '#444444',
   hoverBackground: '#2a2d2e',
+  variableBackground: '#2a2a2a',
 };
 
 /**
@@ -125,5 +127,6 @@ export const LIGHT_PROPS_PANEL_COLORS: PropsPanelColors = {
   inputBackground: '#f5f7fa',
   inputBorder: '#d0d0d0',
   hoverBackground: '#f0f0f0',
+  variableBackground: '#ebedf0',
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"