meno-core 1.0.53 → 1.1.0

package/lib/shared/colorVariableUtils.test.ts

@@ -3,6 +3,7 @@ import {
   isColorVariable,
   extractVariableName,
   createVariableReference,
+  colorTokenName,
   resolveColorVariable,
   resolveColorVariablesInStyles,
   getColorVariablesFromStyles,
@@ -102,12 +103,33 @@ describe('colorVariableUtils', () => {
     });
   });
 
+  describe('colorTokenName', () => {
+    const colors = { text: '#1f2937', bg: '#ffffff', muted: '#6b7280', border: '#e5e7eb' };
+
+    test('extracts the name from a var() reference', () => {
+      expect(colorTokenName('var(--muted)', colors)).toBe('muted');
+      expect(colorTokenName('var(--primary)', colors)).toBe('primary'); // var() form is self-describing
+    });
+
+    test('recognizes a bare token that is a defined project color (the class round-trip form)', () => {
+      expect(colorTokenName('muted', colors)).toBe('muted');
+      expect(colorTokenName('border', colors)).toBe('border');
+    });
+
+    test('a bare value that is NOT a defined color stays a literal (null)', () => {
+      expect(colorTokenName('red', colors)).toBeNull(); // named CSS color, not a project token
+      expect(colorTokenName('#6b7280', colors)).toBeNull(); // hex literal
+      expect(colorTokenName('muted', undefined)).toBeNull(); // no colors loaded yet
+      expect(colorTokenName('', colors)).toBeNull();
+    });
+  });
+
   describe('resolveColorVariable', () => {
     const colorMap = {
       'primary-color': '#3b82f6',
-      'background': '#ffffff',
+      background: '#ffffff',
       'text-dark': '#1f2937',
-      'accent': 'rgb(239, 68, 68)',
+      accent: 'rgb(239, 68, 68)',
     };
 
     test('should resolve valid variable to color value', () => {
@@ -142,9 +164,9 @@ describe('colorVariableUtils', () => {
 
   describe('resolveColorVariablesInStyles', () => {
     const colorMap = {
-      'primary': '#3b82f6',
-      'background': '#ffffff',
-      'text': '#1f2937',
+      primary: '#3b82f6',
+      background: '#ffffff',
+      text: '#1f2937',
     };
 
     test('should resolve all color variables in styles', () => {

package/lib/shared/colorVariableUtils.ts

@@ -18,7 +18,7 @@ export function isColorVariable(value: string | unknown): value is string {
  */
 export function extractVariableName(value: string): string | null {
   const match = value.match(/^var\(--([^)]+)\)$/);
-  return match ? match[1] : null;
+  return match ? (match[1] ?? null) : null;
 }
 
 /**
@@ -29,16 +29,27 @@ export function createVariableReference(variableName: string): string {
   return `var(--${variableName})`;
 }
 
+/**
+ * The project color a color-prop value references, or null if it's a literal color / unknown.
+ * Accepts BOTH the `var(--muted)` form AND the bare token `muted` — the latter being the form the
+ * class-string round-trip stores (colorTokenProps keep the bare token, e.g. `bg-muted`). A bare
+ * value is only a token when it's a defined color name in `colors` (so literals like `#fff` / `red`
+ * stay literals). Lets the editor resolve a bare-token color to its swatch + linked-color widget.
+ * @example colorTokenName("var(--muted)", {...}) -> "muted"
+ * @example colorTokenName("muted", { muted: "#6b7280" }) -> "muted"
+ * @example colorTokenName("#fff", {...}) -> null
+ */
+export function colorTokenName(value: string, colors: Record<string, string> | undefined | null): string | null {
+  return extractVariableName(value) ?? (value && colors?.[value] ? value : null);
+}
+
 /**
  * Resolve a color variable to its actual value
  * @param value - The style value (may be a variable reference or actual color)
  * @param colorMap - Map of variable names to color values
  * @returns Resolved color value or original value if not a variable
  */
-export function resolveColorVariable(
-  value: string | unknown,
-  colorMap: Record<string, string>
-): string {
+export function resolveColorVariable(value: string | unknown, colorMap: Record<string, string>): string {
   if (!isColorVariable(value)) {
     return String(value);
   }
@@ -58,10 +69,10 @@ export function resolveColorVariable(
  * @returns New style object with variables resolved
  */
 export function resolveColorVariablesInStyles(
-  styles: Record<string, any>,
-  colorMap: Record<string, string>
-): Record<string, any> {
-  const resolved: Record<string, any> = {};
+  styles: Record<string, unknown>,
+  colorMap: Record<string, string>,
+): Record<string, unknown> {
+  const resolved: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(styles)) {
     if (typeof value === 'string') {
@@ -79,9 +90,7 @@ export function resolveColorVariablesInStyles(
  * @param styles - Style object to search
  * @returns Array of variable names found in styles
  */
-export function getColorVariablesFromStyles(
-  styles: Record<string, any>
-): string[] {
+export function getColorVariablesFromStyles(styles: Record<string, unknown>): string[] {
   const variables = new Set<string>();
 
   for (const value of Object.values(styles)) {

package/lib/shared/componentRefs.ts

@@ -16,11 +16,7 @@
  * like "Button" will never collide with HTML tags, CSS classes, prop strings,
  * embedded SVG/HTML, or any user copy that happens to contain the word.
  */
-export function rewriteComponentRefs(
-  node: unknown,
-  oldName: string,
-  newName: string,
-): boolean {
+export function rewriteComponentRefs(node: unknown, oldName: string, newName: string): boolean {
   if (!node || typeof node !== 'object') return false;
   let changed = false;
 

package/lib/shared/constants.test.ts

@@ -48,7 +48,7 @@ describe('constants', () => {
     });
 
     test('all routes are strings starting with /api/', () => {
-      Object.values(API_ROUTES).forEach(route => {
+      Object.values(API_ROUTES).forEach((route) => {
         expect(typeof route).toBe('string');
         expect(route.startsWith('/api/')).toBe(true);
       });
@@ -150,14 +150,14 @@ describe('constants', () => {
     });
 
     test('contains ui, layout, and content types', () => {
-      const ids = DEFAULT_COMPONENT_TYPES.map(t => t.id);
+      const ids = DEFAULT_COMPONENT_TYPES.map((t) => t.id);
       expect(ids).toContain('ui');
       expect(ids).toContain('layout');
       expect(ids).toContain('content');
     });
 
     test('each type has id, label, and color', () => {
-      DEFAULT_COMPONENT_TYPES.forEach(type => {
+      DEFAULT_COMPONENT_TYPES.forEach((type) => {
         expect(typeof type.id).toBe('string');
         expect(typeof type.label).toBe('string');
         expect(typeof type.color).toBe('string');

package/lib/shared/constants.ts

@@ -4,15 +4,12 @@
 
 // Read PORT from environment variable, fallback to 3000
 // Safe for browser environments where process is not defined
-export const SERVER_PORT = typeof process !== 'undefined' && process.env?.PORT
-  ? parseInt(process.env.PORT, 10)
-  : 3000;
+export const SERVER_PORT = typeof process !== 'undefined' && process.env?.PORT ? parseInt(process.env.PORT, 10) : 3000;
 
 // Port for serving built static files (SSR preview)
 // Reads MENO_SERVE_PORT env var so each project instance can get its own port
-export const SERVE_PORT = typeof process !== 'undefined' && process.env?.MENO_SERVE_PORT
-  ? parseInt(process.env.MENO_SERVE_PORT, 10)
-  : 8080;
+export const SERVE_PORT =
+  typeof process !== 'undefined' && process.env?.MENO_SERVE_PORT ? parseInt(process.env.MENO_SERVE_PORT, 10) : 8080;
 
 export const API_ROUTES = {
   PAGES: '/api/pages',
@@ -60,6 +57,7 @@ export const API_ROUTES = {
   // Multi-page import routes
   FETCH_SITEMAP: '/api/fetch-sitemap', // Fetch & parse sitemap.xml
   IMPORT_PAGE: '/api/import-page', // Import a single subpage
+  DOWNLOAD_PAGE_IMAGES: '/api/download-page-images', // Backfill a page's deferred images to local
   ANALYZE_PAGE: '/api/analyze-page', // Analyze a subpage
   EXTRACT_PAGE_CONTENT: '/api/extract-page-content', // Extract content from a subpage
   GENERATE_HOMEPAGE_PROMPT: '/api/generate-homepage-prompt', // Homepage prompt with site structure
@@ -159,9 +157,12 @@ export const NODE_TYPE = {
   LINK: 'link',
   LOCALE_LIST: 'locale-list',
   LIST: 'list',
+  ISLAND: 'island',
+  MARKDOWN: 'markdown',
+  CUSTOM: 'custom',
 } as const;
 
-export type NodeType = typeof NODE_TYPE[keyof typeof NODE_TYPE];
+export type NodeType = (typeof NODE_TYPE)[keyof typeof NODE_TYPE];
 
 // Special path identifiers for component editing
 export const SPECIAL_PATHS = {
@@ -194,4 +195,3 @@ export const DEFAULT_ICON_COLOR = '#6b7280';
  * Used by rich-text fields to signal that content should render as HTML
  */
 export const RAW_HTML_PREFIX = '<!--MENO_RAW_HTML-->';
-