meno-core 1.0.53 → 1.1.0

package/lib/shared/styleUtils.ts

@@ -11,7 +11,7 @@ export function isResponsiveStyle(style: StyleValue): style is ResponsiveStyleOb
   if (!style || typeof style !== 'object' || Array.isArray(style)) {
     return false;
   }
-  
+
   // Check if it has base, tablet, or mobile keys (indicating responsive format)
   return 'base' in style || 'tablet' in style || 'mobile' in style;
 }
@@ -23,14 +23,14 @@ export function isStyleObject(style: unknown): style is StyleObject {
   if (!style || typeof style !== 'object' || Array.isArray(style)) {
     return false;
   }
-  
+
   // StyleObject is a record of string keys to string | number | StyleMapping values
   // Check that it's not a ResponsiveStyleObject (which has base/tablet/mobile keys)
   // Use proper type narrowing instead of assertion
   if (!('base' in style) && !('tablet' in style) && !('mobile' in style)) {
     // All values should be string, number, or objects with _mapping property
     const obj = style as Record<string, unknown>;
-    return Object.values(obj).every(value => {
+    return Object.values(obj).every((value) => {
       if (typeof value === 'string' || typeof value === 'number') {
         return true;
       }
@@ -40,7 +40,7 @@ export function isStyleObject(style: unknown): style is StyleObject {
       return false;
     });
   }
-  
+
   return false; // This is a ResponsiveStyleObject, not a StyleObject
 }
 
@@ -51,7 +51,7 @@ export function isStyleValue(style: unknown): style is StyleValue {
   if (!style || typeof style !== 'object' || Array.isArray(style)) {
     return false;
   }
-  
+
   // Check if it's a ResponsiveStyleObject
   if (isResponsiveStyle(style as StyleValue)) {
     return true;
@@ -60,4 +60,3 @@ export function isStyleValue(style: unknown): style is StyleValue {
   // Check if it's a StyleObject
   return isStyleObject(style);
 }
-

package/lib/shared/themeDefaults.test.ts

@@ -5,9 +5,6 @@ import {
   DEFAULT_TEXTAREA_STYLE,
   DEFAULT_PROPS_PANEL_COLORS,
   LIGHT_PROPS_PANEL_COLORS,
-  type PropsPanelColors,
-  type PropsPanelSpacing,
-  type PropsPanelInputStyle,
 } from './themeDefaults';
 
 describe('themeDefaults', () => {
@@ -26,16 +23,16 @@ describe('themeDefaults', () => {
   });
 
   describe('DEFAULT_INPUT_STYLE', () => {
-    test('should have Consolas monospace font', () => {
-      expect(DEFAULT_INPUT_STYLE.fontFamily).toBe('Consolas, monospace');
+    test('should have Inter UI font stack', () => {
+      expect(DEFAULT_INPUT_STYLE.fontFamily).toBe("'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif");
     });
 
-    test('should have 12px font size', () => {
-      expect(DEFAULT_INPUT_STYLE.fontSize).toBe('12px');
+    test('should have 13px font size', () => {
+      expect(DEFAULT_INPUT_STYLE.fontSize).toBe('13px');
     });
 
-    test('should have 4px 6px padding', () => {
-      expect(DEFAULT_INPUT_STYLE.padding).toBe('4px 6px');
+    test('should have 6px 8px padding', () => {
+      expect(DEFAULT_INPUT_STYLE.padding).toBe('6px 8px');
     });
 
     test('should have 3px border radius', () => {
@@ -56,8 +53,8 @@ describe('themeDefaults', () => {
       expect(DEFAULT_TEXTAREA_STYLE.fontSize).toBe('13px');
     });
 
-    test('should have 4px 6px padding', () => {
-      expect(DEFAULT_TEXTAREA_STYLE.padding).toBe('4px 6px');
+    test('should have 6px 8px padding', () => {
+      expect(DEFAULT_TEXTAREA_STYLE.padding).toBe('6px 8px');
     });
 
     test('should have 3px border radius', () => {
@@ -103,7 +100,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have input colors', () => {
-      expect(DEFAULT_PROPS_PANEL_COLORS.inputBackground).toBe('#1e1e1e');
+      expect(DEFAULT_PROPS_PANEL_COLORS.inputBackground).toBe('#2a2a2a');
       expect(DEFAULT_PROPS_PANEL_COLORS.inputBorder).toBe('#444444');
     });
 
@@ -120,7 +117,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have border colors', () => {
-      expect(LIGHT_PROPS_PANEL_COLORS.border).toBe('#e0e0e0');
+      expect(LIGHT_PROPS_PANEL_COLORS.border).toBe('#e4e8ec');
       expect(LIGHT_PROPS_PANEL_COLORS.borderSecondary).toBe('#d0d0d0');
     });
 
@@ -146,7 +143,7 @@ describe('themeDefaults', () => {
     });
 
     test('should have input colors', () => {
-      expect(LIGHT_PROPS_PANEL_COLORS.inputBackground).toBe('#ffffff');
+      expect(LIGHT_PROPS_PANEL_COLORS.inputBackground).toBe('#f5f7fa');
       expect(LIGHT_PROPS_PANEL_COLORS.inputBorder).toBe('#d0d0d0');
     });
 

package/lib/shared/themeDefaults.ts

@@ -31,9 +31,9 @@ export interface PropsPanelColors {
  * Spacing constants for props panel components
  */
 export interface PropsPanelSpacing {
-  tight: string;    // 2px - for label:colon:input gaps
-  normal: string;    // 4px - for standard gaps
-  loose: string;     // 8px - for larger gaps
+  tight: string; // 2px - for label:colon:input gaps
+  normal: string; // 4px - for standard gaps
+  loose: string; // 8px - for larger gaps
 }
 
 export const DEFAULT_PROPS_PANEL_SPACING: PropsPanelSpacing = {
@@ -129,4 +129,3 @@ export const LIGHT_PROPS_PANEL_COLORS: PropsPanelColors = {
   hoverBackground: '#f0f0f0',
   variableBackground: '#ebedf0',
 };
-

package/lib/shared/tree/PathBuilder.test.ts

@@ -8,13 +8,7 @@
  */
 
 import { describe, it, expect } from 'bun:test';
-import {
-  buildTreePathsWithRendered,
-  buildComponentTreePaths,
-  computeCumulativeInstancePath,
-  type NavigationContext,
-} from './PathBuilder';
-import type { Path } from '../pathArrayUtils';
+import { buildTreePathsWithRendered, computeCumulativeInstancePath, type NavigationContext } from './PathBuilder';
 
 // Helper to wrap component structure in expected PageData format
 function wrapAsComponentData(structure: any) {
@@ -32,11 +26,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Component structure: Header (0), Slot (1), Footer (2)
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       // Editing component with 3 children in the slot
@@ -55,13 +45,11 @@ describe('PathBuilder - post-slot element path calculation', () => {
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         undefined, // no registry needed for this test
-        navigationHistory
+        navigationHistory,
       );
 
       // Find footer path (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
       // Footer should be at rendered [0, 4] because:
@@ -73,11 +61,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
     it('should not offset pre-slot elements', () => {
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       const navigationHistory: NavigationContext[] = [
@@ -91,16 +75,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentStructure), undefined, navigationHistory);
 
       // Find header path (logical [0, 0])
-      const headerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 0
-      );
+      const headerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 0);
 
       expect(headerPathData).toBeDefined();
       // Header should stay at rendered [0, 0] - no offset for pre-slot elements
@@ -110,11 +88,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
     it('should handle empty slot (no offset needed)', () => {
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       const navigationHistory: NavigationContext[] = [
@@ -125,16 +99,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentStructure), undefined, navigationHistory);
 
       // Find footer path (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
       // With empty slot, footer stays at rendered [0, 2] (no offset)
@@ -155,7 +123,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
           { type: 'component', component: 'Section' }, // 1
           { type: 'component', component: 'Section' }, // 2
           { type: 'component', component: 'Section' }, // 3
-          { type: 'slot' },         // 4 - CaseStudyLayout's slot
+          { type: 'slot' }, // 4 - CaseStudyLayout's slot
           { type: 'component', component: 'CtaSection' }, // 5 - after slot
         ],
       };
@@ -163,23 +131,26 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Mock registry with Layout structure
       // Layout has slot at [0, 1, 0] (div → main → slot)
       const mockRegistry = new Map([
-        ['Layout', {
-          component: {
-            structure: {
-              tag: 'div',
-              children: [
-                { component: 'Navigation' }, // 0
-                {
-                  tag: 'main',
-                  children: [
-                    { type: 'slot' }, // slot at index 0 within main
-                  ],
-                }, // 1
-                { component: 'Footer' }, // 2
-              ],
+        [
+          'Layout',
+          {
+            component: {
+              structure: {
+                tag: 'div',
+                children: [
+                  { component: 'Navigation' }, // 0
+                  {
+                    tag: 'main',
+                    children: [
+                      { type: 'slot' }, // slot at index 0 within main
+                    ],
+                  }, // 1
+                  { component: 'Footer' }, // 2
+                ],
+              },
             },
           },
-        }],
+        ],
       ]);
 
       // Editing CaseStudyLayout from a page that passes 1 child to slot
@@ -187,22 +158,18 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0],
           componentInstanceRenderedPath: [0],
-          instanceChildren: [
-            { component: 'Section', children: 'Instance content' },
-          ] as any, // 1 child passed to CaseStudyLayout's slot
+          instanceChildren: [{ component: 'Section', children: 'Instance content' }] as any, // 1 child passed to CaseStudyLayout's slot
         },
       ];
 
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         mockRegistry,
-        navigationHistory
+        navigationHistory,
       );
 
       // Find CtaSection path (logical [0, 5])
-      const ctaSectionPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 5
-      );
+      const ctaSectionPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 5);
 
       expect(ctaSectionPathData).toBeDefined();
 
@@ -222,22 +189,25 @@ describe('PathBuilder - post-slot element path calculation', () => {
         component: 'Layout',
         children: [
           { type: 'component', component: 'Section' }, // 0
-          { type: 'slot' },         // 1 - slot
+          { type: 'slot' }, // 1 - slot
           { type: 'component', component: 'CtaSection' }, // 2 - after slot
         ],
       };
 
       const mockRegistry = new Map([
-        ['Layout', {
-          component: {
-            structure: {
-              tag: 'div',
-              children: [
-                { type: 'slot' }, // Layout's slot at [0, 0]
-              ],
+        [
+          'Layout',
+          {
+            component: {
+              structure: {
+                tag: 'div',
+                children: [
+                  { type: 'slot' }, // Layout's slot at [0, 0]
+                ],
+              },
             },
           },
-        }],
+        ],
       ]);
 
       // 3 children passed to slot
@@ -245,24 +215,18 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0],
           componentInstanceRenderedPath: [0],
-          instanceChildren: [
-            { tag: 'p' },
-            { tag: 'p' },
-            { tag: 'p' },
-          ] as any,
+          instanceChildren: [{ tag: 'p' }, { tag: 'p' }, { tag: 'p' }] as any,
         },
       ];
 
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         mockRegistry,
-        navigationHistory
+        navigationHistory,
       );
 
       // Find CtaSection path (logical [0, 2])
-      const ctaSectionPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const ctaSectionPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(ctaSectionPathData).toBeDefined();
 
@@ -284,11 +248,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Card structure: Header (0), Slot (1), Footer (2)
       const cardStructure = {
         tag: 'div',
-        children: [
-          { tag: 'div', children: 'Card Header' },
-          { type: 'slot' },
-          { tag: 'div', children: 'Card Footer' },
-        ],
+        children: [{ tag: 'div', children: 'Card Header' }, { type: 'slot' }, { tag: 'div', children: 'Card Footer' }],
       };
 
       // Navigation history: first entered Section, then Card
@@ -316,16 +276,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(cardStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(cardStructure), undefined, navigationHistory);
 
       // Find Card's footer (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
 
@@ -342,11 +296,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
 
       const componentC = {
         tag: 'div',
-        children: [
-          { tag: 'span', children: 'C Header' },
-          { type: 'slot' },
-          { tag: 'span', children: 'C Footer' },
-        ],
+        children: [{ tag: 'span', children: 'C Header' }, { type: 'slot' }, { tag: 'span', children: 'C Footer' }],
       };
 
       // Each componentInstancePath is relative to the current view:
@@ -368,25 +318,14 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0, 0], // C is first child in B's slot
           componentInstanceRenderedPath: [0, 0],
-          instanceChildren: [
-            { tag: 'div' },
-            { tag: 'div' },
-            { tag: 'div' },
-            { tag: 'div' },
-          ] as any, // C has 4 children
+          instanceChildren: [{ tag: 'div' }, { tag: 'div' }, { tag: 'div' }, { tag: 'div' }] as any, // C has 4 children
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentC),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentC), undefined, navigationHistory);
 
       // Find C's footer (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
 
@@ -406,15 +345,11 @@ describe('computeCumulativeInstancePath', () => {
   });
 
   it('returns the first entry path verbatim when there is one entry', () => {
+    expect(computeCumulativeInstancePath([{ componentInstancePath: [0], componentInstanceRenderedPath: [0] }])).toEqual(
+      [0],
+    );
     expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0], componentInstanceRenderedPath: [0] },
-      ]),
-    ).toEqual([0]);
-    expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0, 2], componentInstanceRenderedPath: [0, 2] },
-      ]),
+      computeCumulativeInstancePath([{ componentInstancePath: [0, 2], componentInstanceRenderedPath: [0, 2] }]),
     ).toEqual([0, 2]);
   });
 
@@ -436,10 +371,7 @@ describe('computeCumulativeInstancePath', () => {
 
   it('falls back to componentInstancePath when componentInstanceRenderedPath is missing', () => {
     expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0, 2] },
-        { componentInstancePath: [0, 1] },
-      ]),
+      computeCumulativeInstancePath([{ componentInstancePath: [0, 2] }, { componentInstancePath: [0, 1] }]),
     ).toEqual([0, 2, 1]);
   });
 });
@@ -467,16 +399,10 @@ describe('slotRenderedPaths on slot entries', () => {
       },
     ];
 
-    const paths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      navigationHistory,
-    );
+    const paths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, navigationHistory);
 
     // Slot's logical path is [0, 1] (second child of structure root).
-    const slotEntry = paths.find(
-      (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 1,
-    );
+    const slotEntry = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 1);
     expect(slotEntry).toBeDefined();
     expect(slotEntry!.renderedPath).toEqual([0, 1]);
     // With 7 instance children, the slot occupies positions 1..7 under the
@@ -503,16 +429,8 @@ describe('slotRenderedPaths on slot entries', () => {
         instanceChildren: [{ type: 'component' as const, component: 'Only' }] as any,
       },
     ];
-    const noChildrenPaths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      noChildren,
-    );
-    const oneChildPaths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      oneChild,
-    );
+    const noChildrenPaths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, noChildren);
+    const oneChildPaths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, oneChild);
 
     const slotEntryNo = noChildrenPaths.find((p) => p.path.length === 2 && p.path[1] === 1);
     const slotEntryOne = oneChildPaths.find((p) => p.path.length === 2 && p.path[1] === 1);