meno-core 1.0.0

package/lib/shared/responsiveScaling.test.ts

@@ -0,0 +1,268 @@
+import { describe, test, expect } from 'bun:test';
+import {
+  calculateResponsiveValue,
+  getScaleMultiplier,
+  parseMultiValue,
+  scaleValue,
+  scalePropertyValue,
+  getResponsiveValues,
+  DEFAULT_RESPONSIVE_SCALES,
+  type ResponsiveScales,
+  type CSSPropertyType,
+} from './responsiveScaling';
+
+describe('responsiveScaling', () => {
+  describe('calculateResponsiveValue', () => {
+    test('should calculate responsive value using formula', () => {
+      // responsive_value = base_value + (base_value - base_reference) * (scale - 1)
+      // 67 + (67 - 16) * (0.88 - 1) = 67 + 51 * (-0.12) = 67 - 6.12 = 60.88 -> 61
+      const result = calculateResponsiveValue(67, 16, 0.88);
+      expect(result).toBe(61);
+    });
+
+    test('should scale down with scale < 1', () => {
+      const result = calculateResponsiveValue(20, 16, 0.75);
+      // 20 + (20 - 16) * (0.75 - 1) = 20 + 4 * (-0.25) = 20 - 1 = 19
+      expect(result).toBe(19);
+    });
+
+    test('should scale up with scale > 1', () => {
+      const result = calculateResponsiveValue(20, 16, 1.5);
+      // 20 + (20 - 16) * (1.5 - 1) = 20 + 4 * 0.5 = 22
+      expect(result).toBe(22);
+    });
+
+    test('should return same value when scale is 1', () => {
+      const result = calculateResponsiveValue(20, 16, 1);
+      expect(result).toBe(20);
+    });
+
+    test('should handle value equal to base reference', () => {
+      const result = calculateResponsiveValue(16, 16, 0.75);
+      // 16 + (16 - 16) * (0.75 - 1) = 16 + 0 = 16
+      expect(result).toBe(16);
+    });
+  });
+
+  describe('getScaleMultiplier', () => {
+    test('should get tablet scale for fontSize', () => {
+      const scale = getScaleMultiplier(DEFAULT_RESPONSIVE_SCALES, 'fontSize', 'tablet');
+      expect(scale).toBe(0.88);
+    });
+
+    test('should get mobile scale for padding', () => {
+      const scale = getScaleMultiplier(DEFAULT_RESPONSIVE_SCALES, 'padding', 'mobile');
+      expect(scale).toBe(0.5);
+    });
+
+    test('should map paddingTop to padding category', () => {
+      const scale = getScaleMultiplier(DEFAULT_RESPONSIVE_SCALES, 'paddingTop', 'tablet');
+      expect(scale).toBe(0.75);
+    });
+
+    test('should map marginRight to margin category', () => {
+      const scale = getScaleMultiplier(DEFAULT_RESPONSIVE_SCALES, 'marginRight', 'mobile');
+      expect(scale).toBe(0.45);
+    });
+
+    test('should map rowGap to gap category', () => {
+      const scale = getScaleMultiplier(DEFAULT_RESPONSIVE_SCALES, 'rowGap', 'tablet');
+      expect(scale).toBe(0.65);
+    });
+
+    test('should return null for missing category', () => {
+      const scales: ResponsiveScales = { enabled: true, baseReference: 16 };
+      const scale = getScaleMultiplier(scales, 'fontSize', 'tablet');
+      expect(scale).toBeNull();
+    });
+
+    test('should return null for missing breakpoint', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { tablet: 0.88 }
+      };
+      const scale = getScaleMultiplier(scales, 'fontSize', 'mobile');
+      expect(scale).toBeNull();
+    });
+  });
+
+  describe('parseMultiValue', () => {
+    test('should parse space-separated values', () => {
+      const result = parseMultiValue('20px 40px');
+      expect(result).toEqual(['20px', '40px']);
+    });
+
+    test('should parse hyphen-separated values', () => {
+      const result = parseMultiValue('0-80px');
+      expect(result).toEqual(['0', '80px']);
+    });
+
+    test('should handle single value', () => {
+      const result = parseMultiValue('20px');
+      expect(result).toEqual(['20px']);
+    });
+
+    test('should handle auto value', () => {
+      const result = parseMultiValue('auto-20px');
+      expect(result).toEqual(['auto', '20px']);
+    });
+
+    test('should handle inherit value', () => {
+      const result = parseMultiValue('inherit');
+      expect(result).toEqual(['inherit']);
+    });
+
+    test('should filter empty values', () => {
+      const result = parseMultiValue('20px  40px');
+      expect(result).toEqual(['20px', '40px']);
+    });
+  });
+
+  describe('scaleValue', () => {
+    test('should scale pixel value', () => {
+      const result = scaleValue('67px', 16, 0.88);
+      expect(result).toBe('61px');
+    });
+
+    test('should scale rem value', () => {
+      const result = scaleValue('2rem', 16, 0.75);
+      // 2 + (2 - 16) * (0.75 - 1) = 2 + (-14) * (-0.25) = 2 + 3.5 = 5.5 -> 6
+      expect(result).toBe('6rem');
+    });
+
+    test('should return null for value without unit', () => {
+      const result = scaleValue('0', 16, 0.88);
+      expect(result).toBeNull();
+    });
+
+    test('should return null for auto', () => {
+      const result = scaleValue('auto', 16, 0.88);
+      expect(result).toBeNull();
+    });
+
+    test('should scale percentage value', () => {
+      const result = scaleValue('100%', 16, 0.5);
+      // 100 + (100 - 16) * (0.5 - 1) = 100 + 84 * (-0.5) = 100 - 42 = 58
+      expect(result).toBe('58%');
+    });
+  });
+
+  describe('scalePropertyValue', () => {
+    test('should scale single value', () => {
+      const result = scalePropertyValue('67px', 16, 0.88);
+      expect(result).toBe('61px');
+    });
+
+    test('should scale multi-value property', () => {
+      const result = scalePropertyValue('20px 40px', 16, 0.75);
+      // 20 + (20 - 16) * (0.75 - 1) = 20 + 4 * (-0.25) = 19
+      // 40 + (40 - 16) * (0.75 - 1) = 40 + 24 * (-0.25) = 34
+      expect(result).toBe('19px 34px');
+    });
+
+    test('should scale hyphen-separated values', () => {
+      const result = scalePropertyValue('0-80px', 16, 0.5);
+      // 0 stays 0, 80 + (80 - 16) * (0.5 - 1) = 80 - 32 = 48
+      expect(result).toBe('0 48px');
+    });
+
+    test('should keep unitless values as-is', () => {
+      const result = scalePropertyValue('0 auto 20px', 16, 0.75);
+      expect(result).toContain('0');
+      expect(result).toContain('auto');
+    });
+
+    test('should return null for empty string', () => {
+      const result = scalePropertyValue('', 16, 0.88);
+      expect(result).toBeNull();
+    });
+
+    test('should handle inherit value', () => {
+      const result = scalePropertyValue('inherit', 16, 0.88);
+      expect(result).toBe('inherit');
+    });
+  });
+
+  describe('getResponsiveValues', () => {
+    test('should return only base value when disabled', () => {
+      const scales: ResponsiveScales = { enabled: false, baseReference: 16 };
+      const result = getResponsiveValues('20px', 'fontSize', scales);
+      expect(result).toEqual({ base: '20px' });
+    });
+
+    test('should calculate tablet and mobile values', () => {
+      const scales = { ...DEFAULT_RESPONSIVE_SCALES, enabled: true };
+      const result = getResponsiveValues('67px', 'fontSize', scales);
+      expect(result.base).toBe('67px');
+      expect(result.tablet).toBe('61px'); // 0.88 scale
+      expect(result.mobile).toBe('54px'); // 0.75 scale
+    });
+
+    test('should handle padding property', () => {
+      const scales = { ...DEFAULT_RESPONSIVE_SCALES, enabled: true };
+      const result = getResponsiveValues('20px', 'padding', scales);
+      expect(result.base).toBe('20px');
+      expect(result.tablet).toBe('19px'); // 0.75 scale
+      expect(result.mobile).toBe('18px'); // 0.5 scale
+    });
+
+    test('should handle margin property', () => {
+      const scales = { ...DEFAULT_RESPONSIVE_SCALES, enabled: true };
+      const result = getResponsiveValues('20px', 'margin', scales);
+      expect(result.base).toBe('20px');
+      expect(result.tablet).toBe('19px'); // 0.7 scale
+      expect(result.mobile).toBe('18px'); // 0.45 scale
+    });
+
+    test('should skip breakpoint if scale not configured', () => {
+      const scales: ResponsiveScales = {
+        enabled: true,
+        baseReference: 16,
+        fontSize: { tablet: 0.88 }
+      };
+      const result = getResponsiveValues('20px', 'fontSize', scales);
+      expect(result.base).toBe('20px');
+      expect(result.tablet).toBeDefined();
+      expect(result.mobile).toBeUndefined();
+    });
+  });
+
+  describe('DEFAULT_RESPONSIVE_SCALES', () => {
+    test('should be disabled by default', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.enabled).toBe(false);
+    });
+
+    test('should have base reference of 16', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.baseReference).toBe(16);
+    });
+
+    test('should have fontSize scales', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.fontSize).toEqual({
+        tablet: 0.88,
+        mobile: 0.75,
+      });
+    });
+
+    test('should have padding scales', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.padding).toEqual({
+        tablet: 0.75,
+        mobile: 0.5,
+      });
+    });
+
+    test('should have margin scales', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.margin).toEqual({
+        tablet: 0.7,
+        mobile: 0.45,
+      });
+    });
+
+    test('should have gap scales', () => {
+      expect(DEFAULT_RESPONSIVE_SCALES.gap).toEqual({
+        tablet: 0.65,
+        mobile: 0.4,
+      });
+    });
+  });
+});

package/lib/shared/responsiveScaling.ts

@@ -0,0 +1,194 @@
+/**
+ * Responsive Scaling Calculator
+ * Automatically calculates responsive values for different breakpoints
+ * using configured scale multipliers
+ */
+
+export interface ResponsiveScales {
+  enabled: boolean;
+  baseReference: number;
+  fontSize?: {
+    tablet?: number;
+    mobile?: number;
+  };
+  padding?: {
+    tablet?: number;
+    mobile?: number;
+  };
+  margin?: {
+    tablet?: number;
+    mobile?: number;
+  };
+  gap?: {
+    tablet?: number;
+    mobile?: number;
+  };
+  [key: string]: any;
+}
+
+export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap';
+
+/**
+ * Map CSS property to its scale category
+ * e.g., paddingTop -> padding, marginRight -> margin
+ */
+function getScaleCategory(property: CSSPropertyType): keyof ResponsiveScales | null {
+  if (property === 'fontSize') return 'fontSize';
+  if (property.startsWith('padding') || property === 'paddingInline' || property === 'paddingBlock') return 'padding';
+  if (property.startsWith('margin') || property === 'marginInline' || property === 'marginBlock') return 'margin';
+  if (property === 'gap' || property === 'rowGap' || property === 'columnGap') return 'gap';
+  return null;
+}
+
+/**
+ * Extract numeric value and unit from a CSS value string
+ * e.g., "67px" -> { value: 67, unit: "px" }
+ */
+function parseValue(valueStr: string): { value: number; unit: string } | null {
+  const match = valueStr.trim().match(/^([\d.]+)(px|rem|em|%|pt)$/);
+  if (!match) return null;
+  return {
+    value: parseFloat(match[1]),
+    unit: match[2],
+  };
+}
+
+/**
+ * Calculate responsive value using the formula:
+ * responsive_value = base_value + (base_value - base_reference) * (scale - 1)
+ */
+export function calculateResponsiveValue(
+  baseValue: number,
+  baseReference: number,
+  scale: number
+): number {
+  const scaled = baseValue + (baseValue - baseReference) * (scale - 1);
+  return Math.round(scaled);
+}
+
+/**
+ * Get the scale multiplier for a specific property and breakpoint
+ */
+export function getScaleMultiplier(
+  scales: ResponsiveScales,
+  property: CSSPropertyType,
+  breakpoint: 'tablet' | 'mobile'
+): number | null {
+  const category = getScaleCategory(property);
+  if (!category || !scales[category]) return null;
+
+  const scaleConfig = scales[category] as Record<string, number> | undefined;
+  return scaleConfig?.[breakpoint] ?? null;
+}
+
+/**
+ * Parse multi-value CSS property (e.g., "20px 40px" for padding)
+ * Handles both space-separated ("20px 40px") and hyphen-separated ("20px-40px") formats
+ * Returns array of individual values
+ */
+export function parseMultiValue(valueStr: string): string[] {
+  // First, convert hyphen separators to spaces (for class names like "p-0-80px" → "0-80px")
+  // But only convert hyphens between values (digit/px followed by hyphen followed by digit/px)
+  const normalized = valueStr.replace(/-(?=\d|auto|inherit|initial|unset)/g, ' ');
+  return normalized.trim().split(/\s+/).filter(v => v.length > 0);
+}
+
+/**
+ * Scale a single CSS value using the responsive scale
+ * Returns null if the value cannot be parsed (no unit)
+ */
+export function scaleValue(
+  valueStr: string,
+  baseReference: number,
+  scale: number
+): string | null {
+  const parsed = parseValue(valueStr);
+  if (!parsed) return null;
+
+  const scaledValue = calculateResponsiveValue(parsed.value, baseReference, scale);
+  return `${scaledValue}${parsed.unit}`;
+}
+
+/**
+ * Scale a potentially multi-value CSS property
+ * e.g., "20px 40px" -> "18px 36px" (both values scaled independently)
+ * Unitless values (0, auto, inherit) are kept as-is
+ */
+export function scalePropertyValue(
+  valueStr: string,
+  baseReference: number,
+  scale: number
+): string | null {
+  const parts = parseMultiValue(valueStr);
+  if (parts.length === 0) return null;
+
+  const scaledParts = parts.map(part => {
+    // Try to scale the value
+    const scaled = scaleValue(part, baseReference, scale);
+    if (scaled !== null) {
+      return scaled;
+    }
+    // If it can't be scaled, keep it as-is (for unitless values like 0, auto, inherit)
+    return part;
+  });
+
+  return scaledParts.join(' ');
+}
+
+/**
+ * Get responsive values for all breakpoints
+ * Returns object with calculated values for each breakpoint
+ */
+export function getResponsiveValues(
+  baseValue: string,
+  property: CSSPropertyType,
+  scales: ResponsiveScales
+): Record<string, string | null> {
+  if (!scales.enabled) {
+    return { base: baseValue };
+  }
+
+  const result: Record<string, string | null> = {
+    base: baseValue,
+  };
+
+  const baseRef = scales.baseReference || 16;
+
+  // Calculate tablet value
+  const tabletScale = getScaleMultiplier(scales, property, 'tablet');
+  if (tabletScale !== null) {
+    result.tablet = scalePropertyValue(baseValue, baseRef, tabletScale);
+  }
+
+  // Calculate mobile value
+  const mobileScale = getScaleMultiplier(scales, property, 'mobile');
+  if (mobileScale !== null) {
+    result.mobile = scalePropertyValue(baseValue, baseRef, mobileScale);
+  }
+
+  return result;
+}
+
+/**
+ * Default responsive scales configuration
+ */
+export const DEFAULT_RESPONSIVE_SCALES: ResponsiveScales = {
+  enabled: false,
+  baseReference: 16,
+  fontSize: {
+    tablet: 0.88,
+    mobile: 0.75,
+  },
+  padding: {
+    tablet: 0.75,
+    mobile: 0.5,
+  },
+  margin: {
+    tablet: 0.7,
+    mobile: 0.45,
+  },
+  gap: {
+    tablet: 0.65,
+    mobile: 0.4,
+  },
+};