meno-core 1.0.53 → 1.1.0

package/lib/server/utils/jsonLineMapper.test.ts

@@ -1,9 +1,9 @@
-import { test, expect, describe } from "bun:test";
-import { buildLineMap, lineMapToObject } from "./jsonLineMapper";
+import { test, expect, describe } from 'bun:test';
+import { buildLineMap, lineMapToObject } from './jsonLineMapper';
 
-describe("jsonLineMapper", () => {
-  describe("buildLineMap", () => {
-    test("should track line numbers for children array elements", () => {
+describe('jsonLineMapper', () => {
+  describe('buildLineMap', () => {
+    test('should track line numbers for children array elements', () => {
       const json = `{
   "root": {
     "type": "node",
@@ -23,15 +23,15 @@ describe("jsonLineMapper", () => {
       const lineMap = buildLineMap(json);
 
       // First child starts at line 5, ends at line 8
-      expect(lineMap.get("0")).toBeDefined();
-      expect(lineMap.get("0")?.startLine).toBe(5);
+      expect(lineMap.get('0')).toBeDefined();
+      expect(lineMap.get('0')?.startLine).toBe(5);
 
       // Second child starts at line 9, ends at line 12
-      expect(lineMap.get("1")).toBeDefined();
-      expect(lineMap.get("1")?.startLine).toBe(9);
+      expect(lineMap.get('1')).toBeDefined();
+      expect(lineMap.get('1')?.startLine).toBe(9);
     });
 
-    test("should handle nested children", () => {
+    test('should handle nested children', () => {
       const json = `{
   "root": {
     "type": "node",
@@ -53,15 +53,15 @@ describe("jsonLineMapper", () => {
       const lineMap = buildLineMap(json);
 
       // First child of root - uses comma-separated format to match pathToString
-      expect(lineMap.get("0")).toBeDefined();
-      expect(lineMap.get("0")?.startLine).toBe(5);
+      expect(lineMap.get('0')).toBeDefined();
+      expect(lineMap.get('0')?.startLine).toBe(5);
 
       // First child of first child - comma-separated format
-      expect(lineMap.get("0,0")).toBeDefined();
-      expect(lineMap.get("0,0")?.startLine).toBe(9);
+      expect(lineMap.get('0,0')).toBeDefined();
+      expect(lineMap.get('0,0')?.startLine).toBe(9);
     });
 
-    test("should handle empty children array", () => {
+    test('should handle empty children array', () => {
       const json = `{
   "root": {
     "type": "node",
@@ -72,7 +72,7 @@ describe("jsonLineMapper", () => {
       const lineMap = buildLineMap(json);
       // Only the root entry (empty-string key) is recorded; no children.
       expect(lineMap.size).toBe(1);
-      expect(lineMap.get("")).toBeDefined();
+      expect(lineMap.get('')).toBeDefined();
     });
 
     test("records the root's own line range under the empty-string key", () => {
@@ -90,10 +90,10 @@ describe("jsonLineMapper", () => {
 
       const lineMap = buildLineMap(json);
       // Root value starts at line 2 and closes at line 10.
-      expect(lineMap.get("")).toEqual({ startLine: 2, endLine: 10 });
+      expect(lineMap.get('')).toEqual({ startLine: 2, endLine: 10 });
     });
 
-    test("should handle JSON without root", () => {
+    test('should handle JSON without root', () => {
       const json = `{
   "meta": {
     "title": "Test"
@@ -104,7 +104,7 @@ describe("jsonLineMapper", () => {
       expect(lineMap.size).toBe(0);
     });
 
-    test("tracks component format via component.structure", () => {
+    test('tracks component format via component.structure', () => {
       const json = `{
   "component": {
     "interface": {
@@ -129,24 +129,24 @@ describe("jsonLineMapper", () => {
 
       const lineMap = buildLineMap(json);
       // Structure spans from its opening `{` (line 6) to its closing `}` (line 19).
-      expect(lineMap.get("")).toEqual({ startLine: 6, endLine: 19 });
+      expect(lineMap.get('')).toEqual({ startLine: 6, endLine: 19 });
       // First child: the <span>.
-      expect(lineMap.get("0")?.startLine).toBe(10);
+      expect(lineMap.get('0')?.startLine).toBe(10);
       // Second child: the Icon component instance.
-      expect(lineMap.get("1")?.startLine).toBe(14);
+      expect(lineMap.get('1')?.startLine).toBe(14);
     });
   });
 
-  describe("lineMapToObject", () => {
-    test("should convert Map to plain object", () => {
+  describe('lineMapToObject', () => {
+    test('should convert Map to plain object', () => {
       const lineMap = new Map();
-      lineMap.set("0", { startLine: 5, endLine: 10 });
-      lineMap.set("0,1", { startLine: 7, endLine: 9 });
+      lineMap.set('0', { startLine: 5, endLine: 10 });
+      lineMap.set('0,1', { startLine: 7, endLine: 9 });
 
       const obj = lineMapToObject(lineMap);
 
-      expect(obj["0"]).toEqual({ startLine: 5, endLine: 10 });
-      expect(obj["0,1"]).toEqual({ startLine: 7, endLine: 9 });
+      expect(obj['0']).toEqual({ startLine: 5, endLine: 10 });
+      expect(obj['0,1']).toEqual({ startLine: 7, endLine: 9 });
     });
   });
 });

package/lib/server/utils/jsonLineMapper.ts

@@ -16,7 +16,7 @@ export type LineMap = Map<string, LineRange>;
  */
 export function buildLineMap(jsonText: string): LineMap {
   const lineMap = new Map<string, LineRange>();
-  const lines = jsonText.split('\n');
+  const _lines = jsonText.split('\n');
 
   // Build character offset to line number lookup
   const charToLine: number[] = [];
@@ -32,7 +32,7 @@ export function buildLineMap(jsonText: string): LineMap {
   let pos = 0;
 
   function skipWhitespace(): void {
-    while (pos < jsonText.length && /\s/.test(jsonText[pos])) {
+    while (pos < jsonText.length && /\s/.test(jsonText[pos] ?? '')) {
       pos++;
     }
   }
@@ -58,7 +58,7 @@ export function buildLineMap(jsonText: string): LineMap {
   }
 
   function parseNumber(): void {
-    while (pos < jsonText.length && /[\d.eE\-+]/.test(jsonText[pos])) {
+    while (pos < jsonText.length && /[\d.eE\-+]/.test(jsonText[pos] ?? '')) {
       pos++;
     }
   }
@@ -91,8 +91,8 @@ export function buildLineMap(jsonText: string): LineMap {
     // under the empty-string key, so callers can resolve the root selection itself.
     const { start, end } = parseValue(path, true);
     lineMap.set('', {
-      startLine: charToLine[start],
-      endLine: charToLine[end - 1] || charToLine[start],
+      startLine: charToLine[start] ?? 0,
+      endLine: charToLine[end - 1] || charToLine[start] || 0,
     });
   }
 
@@ -169,8 +169,8 @@ export function buildLineMap(jsonText: string): LineMap {
       if (trackChildren) {
         const pathStr = childPath.join(',');
         lineMap.set(pathStr, {
-          startLine: charToLine[start],
-          endLine: charToLine[end - 1] || charToLine[start]
+          startLine: charToLine[start] ?? 0,
+          endLine: charToLine[end - 1] || charToLine[start] || 0,
         });
       }
 

package/lib/server/validateStyleCoverage.ts

@@ -3,7 +3,6 @@
  * Scans all rendered HTML and warns about styles that don't generate utility classes
  */
 
-import { propertyMap } from '../shared/utilityClassConfig';
 import type { StyleObject, ResponsiveStyleObject } from '../shared/types';
 
 interface MissingStyleReport {
@@ -26,8 +25,17 @@ const missingStylesMap = new Map<string, MissingStyleReport>();
 function canGenerateClass(property: string, value: unknown): boolean {
   // Skip internal component properties that shouldn't be styles
   const internalProps = new Set([
-    'type', 'tag', 'props', 'component', 'children', 'id', 'key',
-    'ref', 'className', 'style', 'node'
+    'type',
+    'tag',
+    'props',
+    'component',
+    'children',
+    'id',
+    'key',
+    'ref',
+    'className',
+    'style',
+    'node',
   ]);
 
   if (internalProps.has(property)) {
@@ -36,7 +44,7 @@ function canGenerateClass(property: string, value: unknown): boolean {
 
   // Skip if value is null, undefined, or empty - these don't need utility classes
   if (value === null || value === undefined || value === '') {
-    return true;  // Skip reporting - nothing to convert
+    return true; // Skip reporting - nothing to convert
   }
 
   // Try to convert to string and check
@@ -60,10 +68,7 @@ function canGenerateClass(property: string, value: unknown): boolean {
 /**
  * Validate a style object and report missing utility class coverage
  */
-export function validateStyleCoverage(
-  styles: StyleObject | ResponsiveStyleObject | undefined,
-  location: string
-): void {
+export function validateStyleCoverage(styles: StyleObject | ResponsiveStyleObject | undefined, location: string): void {
   if (!styles || typeof styles !== 'object') {
     return;
   }
@@ -111,21 +116,15 @@ export function printMissingStyleWarnings(verbose = false): void {
   }
 
   const warnings: string[] = [];
-  warnings.push(
-    '\n⚠️  WARNING: Found styles that cannot be converted to utility classes\n'
-  );
-  warnings.push(
-    'These styles use object values which cannot be serialized to class names:\n'
-  );
+  warnings.push('\n⚠️  WARNING: Found styles that cannot be converted to utility classes\n');
+  warnings.push('These styles use object values which cannot be serialized to class names:\n');
 
   // Sort by frequency
-  const sorted = Array.from(missingStylesMap.values()).sort(
-    (a, b) => b.count - a.count
-  );
+  const sorted = Array.from(missingStylesMap.values()).sort((a, b) => b.count - a.count);
 
   for (const report of sorted) {
     warnings.push(
-      `  • ${report.property}: "${report.value}" (used ${report.count} time${report.count > 1 ? 's' : ''})`
+      `  • ${report.property}: "${report.value}" (used ${report.count} time${report.count > 1 ? 's' : ''})`,
     );
 
     if (verbose && report.locations.length > 0) {
@@ -133,9 +132,7 @@ export function printMissingStyleWarnings(verbose = false): void {
         warnings.push(`      └─ ${location}`);
       }
       if (report.locations.length > 3) {
-        warnings.push(
-          `      └─ ... and ${report.locations.length - 3} more locations`
-        );
+        warnings.push(`      └─ ... and ${report.locations.length - 3} more locations`);
       }
     }
   }

package/lib/server/websocketManager.ts

@@ -23,29 +23,27 @@ export class WebSocketManager {
   removeClient(ws: RuntimeWSClient): void {
     this.clients.delete(ws);
   }
-  
+
   /**
    * Broadcast message to all connected clients
    */
   broadcast(message: HMRMessage | string): void {
-    const messageStr = typeof message === 'string' 
-      ? message 
-      : JSON.stringify(message);
-    
+    const messageStr = typeof message === 'string' ? message : JSON.stringify(message);
+
     for (const ws of this.clients) {
       if (ws.readyState === WEBSOCKET_STATES.OPEN) {
         ws.send(messageStr);
       }
     }
   }
-  
+
   /**
    * Broadcast update notification
    */
   broadcastUpdate(path?: string): void {
     this.broadcast({
       type: 'hmr:update',
-      path: path || 'all'
+      path: path || 'all',
     });
   }
 
@@ -54,7 +52,7 @@ export class WebSocketManager {
    */
   broadcastColorsUpdate(): void {
     this.broadcast({
-      type: 'hmr:colors-update'
+      type: 'hmr:colors-update',
     });
   }
 
@@ -63,7 +61,7 @@ export class WebSocketManager {
    */
   broadcastVariablesUpdate(): void {
     this.broadcast({
-      type: 'hmr:variables-update'
+      type: 'hmr:variables-update',
     });
   }
 
@@ -72,7 +70,7 @@ export class WebSocketManager {
    */
   broadcastFontsUpdate(): void {
     this.broadcast({
-      type: 'hmr:fonts-update'
+      type: 'hmr:fonts-update',
     });
   }
 
@@ -81,7 +79,7 @@ export class WebSocketManager {
    */
   broadcastLibrariesUpdate(): void {
     this.broadcast({
-      type: 'hmr:libraries-update'
+      type: 'hmr:libraries-update',
     });
   }
 
@@ -90,7 +88,7 @@ export class WebSocketManager {
    */
   broadcastEnumsUpdate(): void {
     this.broadcast({
-      type: 'hmr:enums-update'
+      type: 'hmr:enums-update',
     });
   }
 
@@ -100,7 +98,7 @@ export class WebSocketManager {
   broadcastCMSUpdate(collection: string): void {
     this.broadcast({
       type: 'hmr:cms-update',
-      collection
+      collection,
     });
   }
 
@@ -111,7 +109,7 @@ export class WebSocketManager {
    */
   broadcastCollectionsUpdate(): void {
     this.broadcast({
-      type: 'hmr:cms-collections-update'
+      type: 'hmr:cms-collections-update',
     });
   }
 
@@ -123,7 +121,19 @@ export class WebSocketManager {
    */
   broadcastConfigUpdate(): void {
     this.broadcast({
-      type: 'hmr:config-update'
+      type: 'hmr:config-update',
+    });
+  }
+
+  /**
+   * Broadcast external-stylesheet update notification. Emitted when a project CSS
+   * file outside the watched categories changes (e.g. a mirror-import class edit
+   * via /api/element-styles/update) — tells the canvas to cache-bust its `<link>`
+   * stylesheets and repaint, since the file watcher doesn't cover public/ CSS.
+   */
+  broadcastStylesheetUpdate(): void {
+    this.broadcast({
+      type: 'hmr:stylesheet-update',
     });
   }
 
@@ -133,21 +143,21 @@ export class WebSocketManager {
   getClientCount(): number {
     return this.clients.size;
   }
-  
+
   /**
    * Clear all clients
    */
   clear(): void {
     this.clients.clear();
   }
-  
+
   /**
    * Get all clients
    */
   getClients(): Set<RuntimeWSClient> {
     return new Set(this.clients);
   }
-  
+
   /**
    * Check if any clients are connected
    */
@@ -155,4 +165,3 @@ export class WebSocketManager {
     return this.clients.size > 0;
   }
 }
-

package/lib/shared/attributeNodeUtils.test.ts

@@ -18,12 +18,12 @@ describe('attributeNodeUtils', () => {
       const node: ComponentNode = {
         type: 'node' as const,
         tag: 'div',
-        attributes: { id: 'test', disabled: true, tabIndex: 0 }
+        attributes: { id: 'test', disabled: true, tabIndex: 0 },
       };
       expect(extractAttributesFromNode(node)).toEqual({
         id: 'test',
         disabled: true,
-        tabIndex: 0
+        tabIndex: 0,
       });
     });
 
@@ -31,7 +31,7 @@ describe('attributeNodeUtils', () => {
       const node: ComponentNode = {
         type: 'node' as const,
         tag: 'div',
-        attributes: {}
+        attributes: {},
       };
       expect(extractAttributesFromNode(node)).toEqual({});
     });
@@ -44,14 +44,14 @@ describe('attributeNodeUtils', () => {
           type: 'text',
           required: true,
           maxLength: 100,
-          placeholder: 'Enter text'
-        }
+          placeholder: 'Enter text',
+        },
       };
       expect(extractAttributesFromNode(node)).toEqual({
         type: 'text',
         required: true,
         maxLength: 100,
-        placeholder: 'Enter text'
+        placeholder: 'Enter text',
       });
     });
 
@@ -83,7 +83,7 @@ describe('attributeNodeUtils', () => {
       expect(result).toEqual({
         type: 'node',
         tag: 'div',
-        attributes: { id: 'test', className: 'btn' }
+        attributes: { id: 'test', className: 'btn' },
       });
     });
 
@@ -91,7 +91,7 @@ describe('attributeNodeUtils', () => {
       const node: ComponentNode = {
         type: 'node',
         tag: 'div',
-        attributes: { id: 'original', disabled: true }
+        attributes: { id: 'original', disabled: true },
       };
       const result = applyAttributesToNode(node, { className: 'new', tabIndex: 0 });
       expect(result).toEqual({
@@ -101,8 +101,8 @@ describe('attributeNodeUtils', () => {
           id: 'original',
           disabled: true,
           className: 'new',
-          tabIndex: 0
-        }
+          tabIndex: 0,
+        },
       });
     });
 
@@ -110,25 +110,25 @@ describe('attributeNodeUtils', () => {
       const node: ComponentNode = {
         type: 'node',
         tag: 'div',
-        attributes: { id: 'original', className: 'old' }
+        attributes: { id: 'original', className: 'old' },
       };
       const result = applyAttributesToNode(node, { className: 'new' });
       expect(result.attributes).toEqual({
         id: 'original',
-        className: 'new'
+        className: 'new',
       });
     });
 
     test('works with component nodes', () => {
       const node: ComponentNode = {
         type: 'component' as const,
-        component: 'Button'
+        component: 'Button',
       };
       const result = applyAttributesToNode(node, { disabled: true });
       expect(result).toEqual({
         type: 'component',
         component: 'Button',
-        attributes: { disabled: true }
+        attributes: { disabled: true },
       });
     });
 
@@ -142,7 +142,7 @@ describe('attributeNodeUtils', () => {
       const node: ComponentNode = {
         type: 'node',
         tag: 'div',
-        attributes: { id: 'original' }
+        attributes: { id: 'original' },
       };
       const original = JSON.stringify(node);
       applyAttributesToNode(node, { className: 'new' });

package/lib/shared/attributeNodeUtils.ts

@@ -11,9 +11,7 @@ import { isComponentNode, isHtmlNode } from './nodeUtils';
  * Attributes are stored at the top level of the node (like styles)
  * Returns a record of attributes ready for React props
  */
-export function extractAttributesFromNode(
-  node: ComponentNode
-): Record<string, string | number | boolean> {
+export function extractAttributesFromNode(node: ComponentNode): Record<string, string | number | boolean> {
   if (!node || typeof node !== 'object') {
     return {};
   }
@@ -32,16 +30,12 @@ export function extractAttributesFromNode(
  */
 export function skipEmptyTemplateAttributes(
   original: Record<string, unknown>,
-  resolved: Record<string, unknown>
+  resolved: Record<string, unknown>,
 ): Record<string, unknown> {
   const result: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(resolved)) {
     const orig = original[key];
-    if (
-      typeof orig === 'string' &&
-      /^\{\{.+\}\}$/.test(orig) &&
-      value === ''
-    ) {
+    if (typeof orig === 'string' && /^\{\{.+\}\}$/.test(orig) && value === '') {
       continue;
     }
     result[key] = value;
@@ -55,7 +49,7 @@ export function skipEmptyTemplateAttributes(
  */
 export function applyAttributesToNode(
   node: ComponentNode,
-  attributes: Record<string, string | number | boolean> | null | undefined
+  attributes: Record<string, string | number | boolean> | null | undefined,
 ): ComponentNode {
   if (!attributes || Object.keys(attributes).length === 0) {
     return node;
@@ -64,10 +58,9 @@ export function applyAttributesToNode(
   if (isComponentNode(node) || isHtmlNode(node)) {
     return {
       ...node,
-      attributes: { ...(node.attributes || {}), ...attributes }
+      attributes: { ...(node.attributes || {}), ...attributes },
     };
   }
 
   return node;
 }
-

package/lib/shared/breakpoints.test.ts

@@ -18,10 +18,10 @@ import type { BreakpointConfig, BreakpointConfigInput } from './breakpoints';
 describe('breakpoints', () => {
   describe('DEFAULT_BREAKPOINTS', () => {
     test('should have tablet and mobile breakpoints with new format', () => {
-      expect(DEFAULT_BREAKPOINTS.tablet.breakpoint).toBe(1024);
-      expect(DEFAULT_BREAKPOINTS.tablet.previewPoint).toBe(768);
-      expect(DEFAULT_BREAKPOINTS.mobile.breakpoint).toBe(540);
-      expect(DEFAULT_BREAKPOINTS.mobile.previewPoint).toBe(375);
+      expect(DEFAULT_BREAKPOINTS.tablet!.breakpoint).toBe(1024);
+      expect(DEFAULT_BREAKPOINTS.tablet!.previewPoint).toBe(768);
+      expect(DEFAULT_BREAKPOINTS.mobile!.breakpoint).toBe(540);
+      expect(DEFAULT_BREAKPOINTS.mobile!.previewPoint).toBe(375);
     });
   });
 
@@ -102,7 +102,7 @@ describe('breakpoints', () => {
       };
       const result = normalizeBreakpointConfig(input);
 
-      expect(result.tabletLandscape.label).toBe('Tablet Landscape');
+      expect(result.tabletLandscape!.label).toBe('Tablet Landscape');
       expect(result.tabletPortrait).not.toHaveProperty('label');
       expect(result.mobile).not.toHaveProperty('label');
     });

package/lib/shared/breakpoints.ts

@@ -46,9 +46,7 @@ export const DEFAULT_BREAKPOINTS: BreakpointConfig = {
  * Converts legacy number format to object format
  * If previewPoint is not specified, defaults to breakpoint value
  */
-export function normalizeBreakpointConfig(
-  input: BreakpointConfigInput | LegacyBreakpointConfig
-): BreakpointConfig {
+export function normalizeBreakpointConfig(input: BreakpointConfigInput | LegacyBreakpointConfig): BreakpointConfig {
   const result: BreakpointConfig = {};
 
   for (const [name, value] of Object.entries(input)) {
@@ -97,9 +95,7 @@ export function getPreviewPointValues(config: BreakpointConfig): LegacyBreakpoin
  * Always includes 'base' plus all keys from the config
  * Order: base (desktop) -> breakpoints sorted by value descending (largest to smallest viewport)
  */
-export function getAllBreakpointNames(
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
-): BreakpointName[] {
+export function getAllBreakpointNames(breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS): BreakpointName[] {
   // Base is always included first
   const names: BreakpointName[] = ['base'];
 
@@ -124,7 +120,7 @@ export function getAllBreakpointNames(
  */
 export function getBreakpointName(
   viewportWidth: number,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
 ): BreakpointName {
   // Sort breakpoints by breakpoint value (ascending) to find the smallest one that matches
   const breakpointEntries = Object.entries(breakpoints);
@@ -148,10 +144,7 @@ export function getBreakpointName(
  * 2. "Desktop" for 'base'
  * 3. Auto-capitalized name (camelCase -> Title Case)
  */
-export function getBreakpointLabel(
-  name: BreakpointName,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
-): string {
+export function getBreakpointLabel(name: BreakpointName, breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS): string {
   // Base always returns "Desktop"
   if (name === 'base') {
     return 'Desktop';