meno-core 1.0.0

package/lib/client/responsiveStyleResolver.test.ts

@@ -0,0 +1,491 @@
+import { test, expect, describe, beforeEach, afterEach } from "bun:test";
+import { 
+  resolveResponsiveStyleSync,
+  resolveResponsiveStyle,
+  initializeBreakpoints
+} from "./responsiveStyleResolver";
+import { getBreakpointName, DEFAULT_BREAKPOINTS } from "../shared/breakpoints";
+import type { ResponsiveStyleObject, StyleObject } from "../shared/types";
+
+describe("Responsive Style Resolver - getBreakpointName", () => {
+  describe("Breakpoint detection", () => {
+    test("should return 'base' for large viewport", () => {
+      const viewportWidth = 1920;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("base");
+    });
+
+    test("should return 'base' for viewport wider than tablet", () => {
+      const viewportWidth = 1025;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("base");
+    });
+
+    test("should return 'tablet' for viewport at tablet breakpoint", () => {
+      const viewportWidth = 1024;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("tablet");
+    });
+
+    test("should return 'tablet' for viewport between mobile and tablet", () => {
+      const viewportWidth = 768;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("tablet");
+    });
+
+    test("should return 'tablet' for viewport just above mobile breakpoint", () => {
+      const viewportWidth = 541;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("tablet");
+    });
+
+    test("should return 'mobile' for viewport at mobile breakpoint", () => {
+      const viewportWidth = 540;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("mobile");
+    });
+
+    test("should return 'mobile' for viewport smaller than mobile breakpoint", () => {
+      const viewportWidth = 320;
+      const result = getBreakpointName(viewportWidth);
+      expect(result).toBe("mobile");
+    });
+
+    test("should use custom breakpoints when provided", () => {
+      const viewportWidth = 800;
+      const customBreakpoints = {
+        tablet: 900,
+        mobile: 400
+      };
+      const result = getBreakpointName(viewportWidth, customBreakpoints);
+      expect(result).toBe("tablet");
+    });
+  });
+
+  describe("Edge cases", () => {
+    test("should handle exact breakpoint boundaries", () => {
+      const tabletWidth = DEFAULT_BREAKPOINTS.tablet;
+      const mobileWidth = DEFAULT_BREAKPOINTS.mobile;
+      
+      expect(getBreakpointName(tabletWidth)).toBe("tablet");
+      expect(getBreakpointName(tabletWidth - 1)).toBe("tablet");
+      expect(getBreakpointName(tabletWidth + 1)).toBe("base");
+      
+      expect(getBreakpointName(mobileWidth)).toBe("mobile");
+      expect(getBreakpointName(mobileWidth - 1)).toBe("mobile");
+      expect(getBreakpointName(mobileWidth + 1)).toBe("tablet");
+    });
+
+    test("should handle zero viewport width", () => {
+      const result = getBreakpointName(0);
+      expect(result).toBe("mobile");
+    });
+
+    test("should handle very large viewport width", () => {
+      const result = getBreakpointName(10000);
+      expect(result).toBe("base");
+    });
+  });
+});
+
+describe("Responsive Style Resolver - resolveResponsiveStyleSync", () => {
+  describe("Non-responsive styles", () => {
+    test("should pass through flat style objects", () => {
+      const style: StyleObject = {
+        color: "red",
+        fontSize: "16px"
+      };
+      
+      const result = resolveResponsiveStyleSync(style);
+      expect(result).toEqual(style);
+      expect(result.color).toBe("red");
+      expect(result.fontSize).toBe("16px");
+    });
+
+    test("should return same object for non-responsive styles", () => {
+      const style: StyleObject = {
+        padding: "10px",
+        margin: "20px"
+      };
+      
+      const result = resolveResponsiveStyleSync(style);
+      expect(result).toBe(style); // Should return same reference for flat styles
+    });
+  });
+
+  describe("Responsive styles - viewport strategy", () => {
+    test("should merge base only styles at base breakpoint", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          color: "red",
+          fontSize: "16px"
+        }
+      };
+      const viewportWidth = 1920;
+      
+      const result = resolveResponsiveStyleSync(style, viewportWidth);
+      
+      expect(result.color).toBe("red");
+      expect(result.fontSize).toBe("16px");
+    });
+
+    test("should merge base and tablet styles at tablet breakpoint", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          color: "red",
+          fontSize: "16px"
+        },
+        tablet: {
+          fontSize: "14px",
+          padding: "10px"
+        }
+      };
+      const viewportWidth = 768;
+      
+      const result = resolveResponsiveStyleSync(style, viewportWidth);
+      
+      expect(result.color).toBe("red"); // From base
+      expect(result.fontSize).toBe("14px"); // Overridden by tablet
+      expect(result.padding).toBe("10px"); // From tablet
+    });
+
+    test("should merge all breakpoints at mobile breakpoint", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          color: "red",
+          fontSize: "16px"
+        },
+        tablet: {
+          fontSize: "14px"
+        },
+        mobile: {
+          fontSize: "12px",
+          color: "blue"
+        }
+      };
+      const viewportWidth = 320;
+      
+      const result = resolveResponsiveStyleSync(style, viewportWidth);
+      
+      expect(result.color).toBe("blue"); // Overridden by mobile
+      expect(result.fontSize).toBe("12px"); // Overridden by mobile
+    });
+
+    test("should apply tablet styles at tablet viewport", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          padding: "20px"
+        },
+        tablet: {
+          padding: "15px"
+        }
+      };
+      const viewportWidth = 1024;
+      
+      const result = resolveResponsiveStyleSync(style, viewportWidth);
+      
+      expect(result.padding).toBe("15px");
+    });
+
+    test("should apply mobile styles at mobile viewport", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          padding: "20px"
+        },
+        tablet: {
+          padding: "15px"
+        },
+        mobile: {
+          padding: "10px"
+        }
+      };
+      const viewportWidth = 540;
+      
+      const result = resolveResponsiveStyleSync(style, viewportWidth);
+      
+      expect(result.padding).toBe("10px");
+    });
+  });
+
+  describe("Responsive styles - style object variations", () => {
+    test("should handle styles with base only", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          color: "black",
+          backgroundColor: "white"
+        }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 1920);
+      
+      expect(result.color).toBe("black");
+      expect(result.backgroundColor).toBe("white");
+    });
+
+    test("should handle styles with base and tablet", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          fontSize: "16px"
+        },
+        tablet: {
+          fontSize: "14px"
+        }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 768);
+      
+      expect(result.fontSize).toBe("14px");
+    });
+
+    test("should handle styles with all breakpoints", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          fontSize: "18px",
+          color: "black"
+        },
+        tablet: {
+          fontSize: "16px"
+        },
+        mobile: {
+          fontSize: "14px",
+          color: "gray"
+        }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 320);
+      
+      expect(result.fontSize).toBe("14px");
+      expect(result.color).toBe("gray");
+    });
+
+    test("should handle missing breakpoint styles", () => {
+      const style: ResponsiveStyleObject = {
+        base: {
+          color: "red"
+        }
+        // No tablet or mobile
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 320);
+      
+      expect(result.color).toBe("red"); // Should still have base styles
+    });
+
+    test("should handle empty base styles", () => {
+      const style: ResponsiveStyleObject = {
+        base: {},
+        tablet: {
+          fontSize: "14px"
+        }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 768);
+      
+      expect(result.fontSize).toBe("14px");
+    });
+  });
+
+  describe("Edge cases", () => {
+    test("should handle empty responsive style object", () => {
+      const style: ResponsiveStyleObject = {
+        base: {}
+      };
+      
+      const result = resolveResponsiveStyleSync(style, 1920);
+      
+      expect(Object.keys(result).length).toBe(0);
+    });
+
+    test("should handle viewport width at exact tablet boundary", () => {
+      const style: ResponsiveStyleObject = {
+        base: { fontSize: "16px" },
+        tablet: { fontSize: "14px" }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.tablet);
+      
+      expect(result.fontSize).toBe("14px");
+    });
+
+    test("should handle viewport width at exact mobile boundary", () => {
+      const style: ResponsiveStyleObject = {
+        base: { fontSize: "16px" },
+        tablet: { fontSize: "14px" },
+        mobile: { fontSize: "12px" }
+      };
+      
+      const result = resolveResponsiveStyleSync(style, DEFAULT_BREAKPOINTS.mobile);
+      
+      expect(result.fontSize).toBe("12px");
+    });
+
+    test("should use default viewport width when not provided", () => {
+      const style: ResponsiveStyleObject = {
+        base: { fontSize: "16px" }
+      };
+      
+      // Should use window.innerWidth or 1920 as default
+      const result = resolveResponsiveStyleSync(style);
+      
+      expect(result.fontSize).toBe("16px");
+      // Note: Can't reliably test the exact default without window object in test env
+    });
+  });
+});
+
+describe("Responsive Style Resolver - resolveResponsiveStyle (async)", () => {
+  // Mock fetch for async tests
+  beforeEach(() => {
+    // Reset global fetch mock
+    global.fetch = global.fetch || (() => Promise.reject(new Error('fetch not implemented'))) as any;
+  });
+
+  test("should resolve non-responsive styles asynchronously", async () => {
+    const style: StyleObject = {
+      color: "red"
+    };
+    
+    const result = await resolveResponsiveStyle(style);
+    
+    expect(result).toEqual(style);
+  });
+
+  test("should resolve responsive styles with default breakpoints on fetch error", async () => {
+    // Mock fetch to fail
+    global.fetch = () => Promise.reject(new Error('Network error')) as any;
+    
+    const style: ResponsiveStyleObject = {
+      base: {
+        fontSize: "16px"
+      },
+      tablet: {
+        fontSize: "14px"
+      }
+    };
+    
+    const result = await resolveResponsiveStyle(style);
+    
+    // Should use default breakpoints and resolve based on window.innerWidth or 1920
+    expect(result.fontSize).toBeDefined();
+  });
+
+  test("should handle async breakpoint config loading", async () => {
+    // Mock successful fetch
+    global.fetch = () => Promise.resolve({
+      json: () => Promise.resolve({
+        breakpoints: {
+          tablet: 900,
+          mobile: 400
+        }
+      })
+    }) as any;
+    
+    const style: ResponsiveStyleObject = {
+      base: { fontSize: "16px" },
+      tablet: { fontSize: "14px" }
+    };
+    
+    // First call should trigger config load
+    await resolveResponsiveStyle(style);
+    
+    // Second call should use cached config
+    const result = await resolveResponsiveStyle(style);
+    
+    expect(result.fontSize).toBeDefined();
+  });
+});
+
+describe("Responsive Style Resolver - initializeBreakpoints", () => {
+  test("should initialize breakpoint config", async () => {
+    // Mock successful fetch
+    global.fetch = () => Promise.resolve({
+      json: () => Promise.resolve({
+        breakpoints: {
+          tablet: 900,
+          mobile: 400
+        }
+      })
+    }) as any;
+    
+    await initializeBreakpoints();
+    
+    // If initialization succeeds, subsequent resolveResponsiveStyleSync should use cached config
+    const style: ResponsiveStyleObject = {
+      base: { fontSize: "16px" }
+    };
+    
+    const result = resolveResponsiveStyleSync(style);
+    expect(result.fontSize).toBe("16px");
+  });
+
+  test("should handle initialization error gracefully", async () => {
+    // Mock fetch to fail
+    global.fetch = () => Promise.reject(new Error('Network error')) as any;
+    
+    // Should not throw
+    await expect(initializeBreakpoints()).resolves.toBeUndefined();
+  });
+});
+
+describe("Responsive Style Resolver - Real-world examples", () => {
+  test("should handle complex responsive style from index.json example", () => {
+    // Based on pages/index.json - h1 with responsive fontSize
+    const style: ResponsiveStyleObject = {
+      base: {
+        fontSize: "89px",
+        fontWeight: "600",
+        marginBottom: "16px",
+        color: "#1f2937",
+        letterSpacing: "-0.02em"
+      },
+      tablet: {
+        fontSize: "32px"
+      },
+      mobile: {}
+    };
+    
+    // Test at base viewport
+    const resultBase = resolveResponsiveStyleSync(style, 1920);
+    expect(resultBase.fontSize).toBe("89px");
+    expect(resultBase.fontWeight).toBe("600");
+    
+    // Test at tablet viewport
+    const resultTablet = resolveResponsiveStyleSync(style, 768);
+    expect(resultTablet.fontSize).toBe("32px");
+    expect(resultTablet.fontWeight).toBe("600"); // From base
+    
+    // Test at mobile viewport
+    // Implementation note: viewport strategy applies base + active breakpoint only
+    // Tablet styles don't cascade to mobile - each breakpoint is independent
+    const resultMobile = resolveResponsiveStyleSync(style, 320);
+    expect(resultMobile.fontSize).toBe("89px"); // Base only (mobile is empty, tablet doesn't cascade)
+    expect(resultMobile.fontWeight).toBe("600"); // From base
+  });
+
+  test("should apply base + active breakpoint styles", () => {
+    // Implementation note: viewport strategy applies base + active breakpoint only
+    // Tablet styles don't cascade to mobile - each breakpoint is independent
+    const style: ResponsiveStyleObject = {
+      base: {
+        padding: "20px",
+        margin: "10px",
+        color: "black"
+      },
+      tablet: {
+        padding: "15px",
+        fontSize: "14px"
+      },
+      mobile: {
+        padding: "10px",
+        color: "gray"
+      }
+    };
+
+    const result = resolveResponsiveStyleSync(style, 320);
+
+    expect(result.padding).toBe("10px"); // Mobile overrides
+    expect(result.margin).toBe("10px"); // From base
+    expect(result.color).toBe("gray"); // Mobile overrides
+    expect(result.fontSize).toBeUndefined(); // Tablet doesn't cascade to mobile
+  });
+});

package/lib/client/responsiveStyleResolver.ts

@@ -0,0 +1,184 @@
+/**
+ * Responsive Style Resolver for Editor
+ * Merges responsive styles into inline styles based on current viewport width
+ */
+
+import type { ResponsiveStyleObject, StyleObject } from '../shared/types';
+import type { BreakpointConfig } from '../shared/breakpoints';
+import { DEFAULT_BREAKPOINTS } from '../shared/breakpoints';
+import type { ResponsiveScales } from '../shared/responsiveScaling';
+import { DEFAULT_RESPONSIVE_SCALES } from '../shared/responsiveScaling';
+import { isResponsiveStyle } from '../shared/styleUtils';
+import { mergeResponsiveStyles } from '../shared/responsiveStyleUtils';
+
+/**
+ * Get breakpoint configuration (with caching)
+ */
+let breakpointConfig: BreakpointConfig | null = null;
+let breakpointPromise: Promise<BreakpointConfig> | null = null;
+
+/**
+ * Get responsive scales configuration (with caching)
+ */
+let responsiveScalesConfig: ResponsiveScales | null = null;
+let responsiveScalesPromise: Promise<ResponsiveScales> | null = null;
+
+/**
+ * Shared config fetching promise
+ */
+let configPromise: Promise<void> | null = null;
+
+/**
+ * Clear the breakpoint config cache (useful when config file changes)
+ */
+export function clearBreakpointConfigCache(): void {
+  breakpointConfig = null;
+  breakpointPromise = null;
+}
+
+/**
+ * Clear the responsive scales config cache (useful when config file changes)
+ */
+export function clearResponsiveScalesConfigCache(): void {
+  responsiveScalesConfig = null;
+  responsiveScalesPromise = null;
+}
+
+/**
+ * Clear all config caches
+ */
+export function clearAllConfigCache(): void {
+  clearBreakpointConfigCache();
+  clearResponsiveScalesConfigCache();
+  configPromise = null;
+}
+
+/**
+ * Get cached breakpoint config synchronously (returns null if not loaded yet)
+ */
+export function getCachedBreakpointConfig(): BreakpointConfig | null {
+  return breakpointConfig;
+}
+
+/**
+ * Get cached responsive scales config synchronously (returns null if not loaded yet)
+ */
+export function getCachedResponsiveScalesConfig(): ResponsiveScales | null {
+  return responsiveScalesConfig;
+}
+
+/**
+ * Shared config fetching - loads both breakpoints and responsive scales from single API call
+ */
+async function loadConfig(): Promise<void> {
+  if (breakpointConfig && responsiveScalesConfig) {
+    return;
+  }
+
+  if (!configPromise) {
+    configPromise = (async () => {
+      try {
+        const response = await fetch('/api/config');
+        const config = await response.json();
+
+        // Parse breakpoints
+        if (config.breakpoints && typeof config.breakpoints === 'object') {
+          const breakpoints: BreakpointConfig = {};
+          for (const [key, value] of Object.entries(config.breakpoints)) {
+            if (typeof value === 'number' && value > 0) {
+              breakpoints[key] = value;
+            }
+          }
+          breakpointConfig = Object.keys(breakpoints).length > 0
+            ? breakpoints
+            : { ...DEFAULT_BREAKPOINTS };
+        } else {
+          breakpointConfig = { ...DEFAULT_BREAKPOINTS };
+        }
+
+        // Parse responsive scales
+        if (config.responsiveScales && typeof config.responsiveScales === 'object') {
+          responsiveScalesConfig = {
+            ...DEFAULT_RESPONSIVE_SCALES,
+            ...config.responsiveScales,
+          };
+        } else {
+          responsiveScalesConfig = { ...DEFAULT_RESPONSIVE_SCALES };
+        }
+      } catch {
+        breakpointConfig = { ...DEFAULT_BREAKPOINTS };
+        responsiveScalesConfig = { ...DEFAULT_RESPONSIVE_SCALES };
+      }
+    })();
+  }
+
+  await configPromise;
+}
+
+async function getBreakpointConfig(): Promise<BreakpointConfig> {
+  await loadConfig();
+  return breakpointConfig!;
+}
+
+/**
+ * Get responsive scales configuration asynchronously
+ */
+export async function getResponsiveScalesConfig(): Promise<ResponsiveScales> {
+  await loadConfig();
+  return responsiveScalesConfig!;
+}
+
+/**
+ * Merge responsive styles into a single style object based on current viewport
+ * Styles cascade: base → tablet → mobile
+ */
+export async function resolveResponsiveStyle(
+  style: ResponsiveStyleObject | StyleObject
+): Promise<StyleObject> {
+  if (!isResponsiveStyle(style)) {
+    return style as StyleObject;
+  }
+  
+  const responsiveStyle = style as ResponsiveStyleObject;
+  const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
+  const breakpoints = await getBreakpointConfig();
+  
+  return mergeResponsiveStyles(responsiveStyle, 'viewport', viewportWidth, breakpoints);
+}
+
+/**
+ * Synchronous version that uses cached breakpoints or defaults
+ * For immediate rendering, then async update when breakpoints load
+ */
+export function resolveResponsiveStyleSync(
+  style: ResponsiveStyleObject | StyleObject,
+  viewportWidth: number = typeof window !== 'undefined' ? window.innerWidth : 1920
+): StyleObject {
+  if (!isResponsiveStyle(style)) {
+    return style as StyleObject;
+  }
+  
+  const responsiveStyle = style as ResponsiveStyleObject;
+  
+  // Use cached breakpoints or defaults
+  const breakpoints = breakpointConfig || { ...DEFAULT_BREAKPOINTS };
+  
+  return mergeResponsiveStyles(responsiveStyle, 'viewport', viewportWidth, breakpoints);
+}
+
+/**
+ * Initialize breakpoint and responsive scales config (call this early)
+ * If forceRefresh is true, clears cache and fetches fresh config
+ */
+export async function initializeBreakpoints(forceRefresh: boolean = false): Promise<void> {
+  if (forceRefresh) {
+    clearAllConfigCache();
+  }
+  await loadConfig();
+}
+
+/**
+ * Alias for initializeBreakpoints - initializes all config including responsive scales
+ */
+export const initializeConfig = initializeBreakpoints;
+