meno-core 1.0.53 → 1.1.0

package/lib/shared/responsiveScaling.ts

@@ -52,7 +52,32 @@ export interface ResponsiveScales {
 export const DEFAULT_FLUID_RANGE: FluidRange = { min: 320, max: 1440 };
 export const DEFAULT_SITE_MARGIN: SiteMarginConfig = { min: 16, max: 32 };
 
-export type CSSPropertyType = 'fontSize' | 'padding' | 'margin' | 'gap' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'rowGap' | 'columnGap' | 'borderRadius' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'width' | 'height' | 'maxWidth' | 'maxHeight' | 'minWidth' | 'minHeight';
+export type CSSPropertyType =
+  | 'fontSize'
+  | 'padding'
+  | 'margin'
+  | 'gap'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'marginTop'
+  | 'marginRight'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'rowGap'
+  | 'columnGap'
+  | 'borderRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'width'
+  | 'height'
+  | 'maxWidth'
+  | 'maxHeight'
+  | 'minWidth'
+  | 'minHeight';
 
 /**
  * Map CSS property to its scale category
@@ -64,8 +89,17 @@ function getScaleCategory(property: CSSPropertyType): keyof ResponsiveScales | n
   if (propertyStr.startsWith('padding')) return 'padding';
   if (propertyStr.startsWith('margin')) return 'margin';
   if (property === 'gap' || property === 'rowGap' || property === 'columnGap') return 'gap';
-  if (propertyStr === 'borderRadius' || (propertyStr.startsWith('border') && propertyStr.includes('Radius'))) return 'borderRadius';
-  if (property === 'width' || property === 'height' || property === 'maxWidth' || property === 'maxHeight' || property === 'minWidth' || property === 'minHeight') return 'size';
+  if (propertyStr === 'borderRadius' || (propertyStr.startsWith('border') && propertyStr.includes('Radius')))
+    return 'borderRadius';
+  if (
+    property === 'width' ||
+    property === 'height' ||
+    property === 'maxWidth' ||
+    property === 'maxHeight' ||
+    property === 'minWidth' ||
+    property === 'minHeight'
+  )
+    return 'size';
   return null;
 }
 
@@ -77,8 +111,8 @@ export function parseValue(valueStr: string): { value: number; unit: string } |
   const match = valueStr.trim().match(/^(-?[\d.]+)(px|rem|em|%|pt)$/);
   if (!match) return null;
   return {
-    value: parseFloat(match[1]),
-    unit: match[2],
+    value: parseFloat(match[1] ?? ''),
+    unit: match[2] ?? '',
   };
 }
 
@@ -139,11 +173,7 @@ export const SCALABLE_CSS_PROPERTIES: ReadonlySet<string> = new Set([
  * 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 {
+export function calculateResponsiveValue(baseValue: number, baseReference: number, scale: number): number {
   // Values at or below baseReference stay unchanged
   if (Math.abs(baseValue) <= baseReference) {
     return Math.round(baseValue);
@@ -161,7 +191,7 @@ export function calculateResponsiveValue(
 export function getScaleMultiplier(
   scales: ResponsiveScales,
   property: CSSPropertyType,
-  breakpoint: string
+  breakpoint: string,
 ): number | null {
   const category = getScaleCategory(property);
   if (!category || !scales[category]) return null;
@@ -179,18 +209,17 @@ 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(/(?<=\w)-(?=\d|auto|inherit|initial|unset)/g, ' ');
-  return normalized.trim().split(/\s+/).filter(v => v.length > 0);
+  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 {
+export function scaleValue(valueStr: string, baseReference: number, scale: number): string | null {
   const parsed = parseValue(valueStr);
   if (!parsed) return null;
 
@@ -209,15 +238,11 @@ export function scaleValue(
  * 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 {
+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 => {
+  const scaledParts = parts.map((part) => {
     // Try to scale the value
     const scaled = scaleValue(part, baseReference, scale);
     if (scaled !== null) {
@@ -244,7 +269,7 @@ export function getResponsiveValues(
   baseValue: string,
   property: CSSPropertyType,
   scales: ResponsiveScales,
-  breakpointNames?: string[]
+  breakpointNames?: string[],
 ): Record<string, string | null> {
   if (!scales.enabled) {
     return { base: baseValue };
@@ -283,7 +308,7 @@ export function getResponsiveValues(
 export function resolveVariableValueAtBreakpoint(
   variable: { value: string; type: string; scales?: Record<string, string> },
   breakpoint: string,
-  responsiveScales?: ResponsiveScales | null
+  responsiveScales?: ResponsiveScales | null,
 ): string {
   if (breakpoint === 'base') return variable.value;
 
@@ -291,11 +316,7 @@ export function resolveVariableValueAtBreakpoint(
   if (override !== undefined) return override;
 
   if (responsiveScales?.enabled && variable.type !== 'none') {
-    const scale = getScaleMultiplier(
-      responsiveScales,
-      variable.type as CSSPropertyType,
-      breakpoint
-    );
+    const scale = getScaleMultiplier(responsiveScales, variable.type as CSSPropertyType, breakpoint);
     if (scale !== null) {
       const baseRef = responsiveScales.baseReference || 16;
       const scaled = scalePropertyValue(variable.value, baseRef, scale);
@@ -314,13 +335,14 @@ export function resolveVariableValueAtBreakpoint(
  * Returns null if there are no entries.
  */
 export function getSmallestBreakpointName(
-  breakpoints: Record<string, { breakpoint: number }> | undefined | null
+  breakpoints: Record<string, { breakpoint: number }> | undefined | null,
 ): string | null {
   if (!breakpoints) return null;
   const entries = Object.entries(breakpoints);
-  if (entries.length === 0) return null;
-  let smallestName = entries[0][0];
-  let smallestWidth = entries[0][1].breakpoint;
+  const firstEntry = entries[0];
+  if (entries.length === 0 || firstEntry === undefined) return null;
+  let smallestName = firstEntry[0];
+  let smallestWidth = firstEntry[1].breakpoint;
   for (const [name, cfg] of entries) {
     if (cfg.breakpoint < smallestWidth) {
       smallestWidth = cfg.breakpoint;
@@ -350,7 +372,7 @@ export function buildFluidClamp(
   scale: number,
   vpMin: number,
   vpMax: number,
-  baseReference = 16
+  baseReference = 16,
 ): string {
   const max = baseValue;
   const min = calculateResponsiveValue(baseValue, baseReference, scale);
@@ -392,7 +414,7 @@ export function buildFluidClampWithExplicitMin(
   maxValue: number,
   unit: string,
   vpMin: number,
-  vpMax: number
+  vpMax: number,
 ): string {
   if (minValue === maxValue || vpMax === vpMin) {
     return `${formatNumber(maxValue)}${unit}`;
@@ -424,10 +446,7 @@ function formatNumber(n: number): string {
  *
  * If `min === max` the function returns the plain value (no clamp).
  */
-export function buildSiteMarginClamp(
-  siteMargin: SiteMarginConfig,
-  fluidRange: FluidRange
-): string {
+export function buildSiteMarginClamp(siteMargin: SiteMarginConfig, fluidRange: FluidRange): string {
   const { min, max } = siteMargin;
   const { min: vpMin, max: vpMax } = fluidRange;
 
@@ -455,13 +474,13 @@ export function buildFluidPropertyValue(
   scale: number,
   vpMin: number,
   vpMax: number,
-  baseReference = 16
+  baseReference = 16,
 ): string | null {
   const parts = parseMultiValue(valueStr);
   if (parts.length === 0) return null;
 
   let anyScaled = false;
-  const out = parts.map(part => {
+  const out = parts.map((part) => {
     const parsed = parseValue(part);
     if (!parsed) return part;
     if (parsed.unit === '%' || parsed.unit === 'em') return part;

package/lib/shared/responsiveStyleUtils.test.ts

@@ -4,7 +4,6 @@ import {
   normalizeStyle,
   getAvailableBreakpoints,
   breakpointToViewportWidth,
-  type MergeStrategy,
 } from './responsiveStyleUtils';
 import type { ResponsiveStyleObject, StyleObject } from './types';
 import type { BreakpointConfig } from './breakpoints';

package/lib/shared/responsiveStyleUtils.ts

@@ -17,7 +17,7 @@ export type MergeStrategy = 'all' | 'viewport';
 
 /**
  * Merge responsive styles into a single style object
- * 
+ *
  * @param responsiveStyle - The responsive style object to merge
  * @param strategy - 'all' merges all breakpoints, 'viewport' merges based on active breakpoint
  * @param viewportWidth - Viewport width in pixels (required for 'viewport' strategy)
@@ -27,7 +27,7 @@ export function mergeResponsiveStyles(
   responsiveStyle: ResponsiveStyleObject,
   strategy: MergeStrategy = 'all',
   viewportWidth?: number,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
 ): StyleObject {
   // Start with base styles
   const merged: StyleObject = { ...(responsiveStyle.base || {}) };
@@ -82,14 +82,14 @@ export function normalizeStyle(
   style: StyleValue | null | undefined,
   strategy: MergeStrategy = 'all',
   viewportWidth?: number,
-  breakpoints?: BreakpointConfig
+  breakpoints?: BreakpointConfig,
 ): StyleObject | null {
   if (!style) return null;
-  
+
   if (isResponsiveStyle(style)) {
     return mergeResponsiveStyles(style, strategy, viewportWidth, breakpoints);
   }
-  
+
   // Legacy flat style object
   return style as StyleObject;
 }
@@ -98,25 +98,23 @@ export function normalizeStyle(
  * Get breakpoint names that have non-empty styles defined
  * Always includes 'base' if the responsive style exists
  */
-export function getAvailableBreakpoints(
-  responsiveStyle: ResponsiveStyleObject | null | undefined
-): BreakpointName[] {
+export function getAvailableBreakpoints(responsiveStyle: ResponsiveStyleObject | null | undefined): BreakpointName[] {
   if (!responsiveStyle) return [];
-  
+
   const available: BreakpointName[] = [];
-  
+
   // Always include 'base' if it exists and has styles
   if (responsiveStyle.base && Object.keys(responsiveStyle.base).length > 0) {
     available.push('base');
   }
-  
+
   // Check all other breakpoint properties (excluding 'base')
   for (const [key, value] of Object.entries(responsiveStyle)) {
     if (key !== 'base' && value && typeof value === 'object' && Object.keys(value).length > 0) {
       available.push(key);
     }
   }
-  
+
   return available;
 }
 
@@ -126,7 +124,7 @@ export function getAvailableBreakpoints(
  */
 export function breakpointToViewportWidth(
   breakpoint: BreakpointName,
-  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS
+  breakpoints: BreakpointConfig = DEFAULT_BREAKPOINTS,
 ): number {
   // Extract breakpoint values for comparisons
   const breakpointValues = getBreakpointValues(breakpoints);