From 49ccd03c7bedb2b96936e5298c76cc278b047832 Mon Sep 17 00:00:00 2001
From: theoplawinski <hello@theoplawinski.com>
Date: Tue, 16 Jul 2024 17:18:19 +0200
Subject: [PATCH 1/5] Improved accessibility

---
 .../lazyImage/LazyImage.module.scss           | 18 +++++
 .../src/components/lazyImage/LazyImage.tsx    | 74 ++++++++++++++-----
 apps/front/src/index-server.tsx               |  2 +-
 apps/front/src/styles/_ratio.scss             | 54 +++++++++-----
 .../templates/react/page.tsx.template         |  2 +-
 5 files changed, 111 insertions(+), 39 deletions(-)

diff --git a/apps/front/src/components/lazyImage/LazyImage.module.scss b/apps/front/src/components/lazyImage/LazyImage.module.scss
index 3487bbf..c547de4 100644
--- a/apps/front/src/components/lazyImage/LazyImage.module.scss
+++ b/apps/front/src/components/lazyImage/LazyImage.module.scss
@@ -9,3 +9,21 @@
 :global(.lazyloaded) {
   opacity: 1;
 }
+
+.imageWrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+
+.image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  &:global(.lazyJs) {
+    opacity: 0;
+  }
+}
diff --git a/apps/front/src/components/lazyImage/LazyImage.tsx b/apps/front/src/components/lazyImage/LazyImage.tsx
index 97d6bbc..621967f 100644
--- a/apps/front/src/components/lazyImage/LazyImage.tsx
+++ b/apps/front/src/components/lazyImage/LazyImage.tsx
@@ -1,6 +1,7 @@
-import React, { CSSProperties, useEffect, useRef, useState } from "react"
-import css from "./LazyImage.module.scss"
 import { cls } from "@cher-ami/utils"
+import css from "./LazyImage.module.scss"
+import { CSSProperties } from "preact/compat"
+import { useRef, useState, useEffect } from "preact/hooks"
 
 interface IProps {
   src?: string
@@ -8,16 +9,14 @@ interface IProps {
   dataSrcSet?: string
   className?: string
   alt?: string
-  aspectRatio?: number
   style?: CSSProperties
+  width: number
+  height: number
   onLoaded?: (img: HTMLImageElement) => void
 }
 
 export type Lazy = "lazyload" | "lazyloading" | "lazyloaded"
 
-/**
- * @name LazyImage
- */
 function LazyImage(props: IProps) {
   const imageRef = useRef<HTMLImageElement>(null)
   const [lazyState, setLazyState] = useState<Lazy>("lazyload")
@@ -51,6 +50,21 @@ function LazyImage(props: IProps) {
   const lazyStateRef = useRef<Lazy>("lazyload")
 
   useEffect(() => {
+    // if img lazy is supported by the browser we don't need to use IntersectionObserver
+    if ("loading" in HTMLImageElement.prototype) {
+      // add src and srcset to image
+      if (imageRef.current) {
+        imageRef.current.srcset = props.dataSrcSet ?? ""
+        imageRef.current.src = props.src && !props.dataSrcSet ? props.src : ""
+      }
+      return
+    }
+
+    // add class lazyJs on imageRef
+    if (imageRef.current) {
+      imageRef.current.classList.add("lazyJs")
+    }
+
     const observer = new IntersectionObserver((entries) => {
       entries.forEach(async (entry) => {
         if (entry.isIntersecting) {
@@ -62,7 +76,9 @@ function LazyImage(props: IProps) {
           // Start preload
           await preloadImage(image)
 
-          // end!
+          // Set new src fallback
+          image.src = props.src ?? "data:,"
+
           setLazyState("lazyloaded")
           props.onLoaded?.(image)
           observer.disconnect()
@@ -76,19 +92,39 @@ function LazyImage(props: IProps) {
     }
   }, [])
 
+  const aspectRatioPadding =
+    props.width && props.height ? (props.height / props.width) * 100 : 0
+
   return (
-    <img
-      ref={imageRef}
-      className={cls(css.root, props.className, lazyState)}
-      src={props.src ?? "data:,"}
-      data-src={props?.dataSrc}
-      data-srcset={props?.dataSrcSet}
-      alt={props?.alt}
-      style={{
-        ...(props.aspectRatio ? { aspectRatio: `${props.aspectRatio}` } : {}),
-        ...(props.style || {})
-      }}
-    />
+    <>
+      <div
+        className={cls(css.imageWrapper, props.className)}
+        style={{ paddingBottom: `${aspectRatioPadding}%` }}
+      >
+        <img
+          ref={imageRef}
+          className={cls(css.image, lazyState)}
+          src={"data:,"}
+          data-src={props.dataSrc}
+          data-srcset={props.dataSrcSet}
+          alt={props.alt}
+          width={props.width}
+          height={props.height}
+          style={props.style}
+          loading={"lazy"}
+        />
+      </div>
+      <noscript>
+        <img
+          className={cls(css.image, props.className)}
+          src={props.src}
+          srcSet={props.dataSrcSet}
+          alt={props.alt}
+          width={props.width}
+          height={props.height}
+        />
+      </noscript>
+    </>
   )
 }
 
diff --git a/apps/front/src/index-server.tsx b/apps/front/src/index-server.tsx
index 1da0c07..f3b4104 100644
--- a/apps/front/src/index-server.tsx
+++ b/apps/front/src/index-server.tsx
@@ -55,7 +55,7 @@ export async function render(
       <head>
         <meta charSet="UTF-8" />
         <meta httpEquiv="x-ua-compatible" content="IE=Edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{meta?.title || "app"}</title>
         <meta name="description" content={meta?.description} />
         <link rel="canonical" href={meta?.url || url} />
diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
index d2ef85e..832400c 100644
--- a/apps/front/src/styles/_ratio.scss
+++ b/apps/front/src/styles/_ratio.scss
@@ -43,13 +43,13 @@
     #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2));
   } @else if length($value1) == 3 {
     #{$property}: fn.toRem(nth($value1, 1))
-      fn.toRem(nth($value1, 2))
-      fn.toRem(nth($value1, 3));
+    fn.toRem(nth($value1, 2))
+    fn.toRem(nth($value1, 3));
   } @else if length($value1) == 4 {
     #{$property}: fn.toRem(nth($value1, 1))
-      fn.toRem(nth($value1, 2))
-      fn.toRem(nth($value1, 3))
-      fn.toRem(nth($value1, 4));
+    fn.toRem(nth($value1, 2))
+    fn.toRem(nth($value1, 3))
+    fn.toRem(nth($value1, 4));
   }
   @if $value2 != $value1 {
     @media (min-width: breakpoints.$breakpoint-tablet) {
@@ -59,13 +59,13 @@
         #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2));
       } @else if length($value2) == 3 {
         #{$property}: fn.toRem(nth($value2, 1))
-          fn.toRem(nth($value2, 2))
-          fn.toRem(nth($value2, 3));
+        fn.toRem(nth($value2, 2))
+        fn.toRem(nth($value2, 3));
       } @else if length($value2) == 4 {
         #{$property}: fn.toRem(nth($value2, 1))
-          fn.toRem(nth($value2, 2))
-          fn.toRem(nth($value2, 3))
-          fn.toRem(nth($value2, 4));
+        fn.toRem(nth($value2, 2))
+        fn.toRem(nth($value2, 3))
+        fn.toRem(nth($value2, 4));
       }
     }
   }
@@ -97,7 +97,17 @@
     @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
   }
 
-  //Horizontal mobile
+  // Landscape Tablet
+  @include tablet-landscape {
+    @include propertyVH(
+      $property,
+      $value2,
+      $ratioVW: viewport.$viewport-reference-desktop-width,
+      $ratioVH: viewport.$viewport-reference-desktop-height
+    );
+  }
+
+  // Landscape mobile
   @include mobile-landscape {
     @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
   }
@@ -110,13 +120,13 @@
         #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2));
       } @else if length($value1) == 3 {
         #{$property}: fn.toPx(nth($value1, 1))
-          fn.toPx(nth($value1, 2))
-          fn.toPx(nth($value1, 3));
+        fn.toPx(nth($value1, 2))
+        fn.toPx(nth($value1, 3));
       } @else if length($value1) == 4 {
         #{$property}: fn.toPx(nth($value1, 1))
-          fn.toPx(nth($value1, 2))
-          fn.toPx(nth($value1, 3))
-          fn.toPx(nth($value1, 4));
+        fn.toPx(nth($value1, 2))
+        fn.toPx(nth($value1, 3))
+        fn.toPx(nth($value1, 4));
       }
     }
   }
@@ -142,9 +152,17 @@
 }
 
 /// Mobile landscape media query.
+/// @param {string} [$breakpoint=breakpoints.$breakpoint-tablet] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
+@mixin mobile-landscape($breakpoint: breakpoints.$breakpoint-tablet) {
+  @media (max-width: #{$breakpoint + 1}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+/// Tablet landscape media query.
 /// @param {string} [$breakpoint=breakpoints.$breakpoint-laptop] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
-@mixin mobile-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
-  @media (max-width: #{$breakpoint - 1}) and (orientation: landscape) {
+@mixin tablet-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
+  @media (max-width: #{$breakpoint + 1}) and (orientation: landscape) {
     @content;
   }
 }
diff --git a/cli/tasks/scaffold-component/templates/react/page.tsx.template b/cli/tasks/scaffold-component/templates/react/page.tsx.template
index 65f3038..3a4b59d 100644
--- a/cli/tasks/scaffold-component/templates/react/page.tsx.template
+++ b/cli/tasks/scaffold-component/templates/react/page.tsx.template
@@ -35,7 +35,7 @@ const %%upperComponentName%% = forwardRef((props: IProps, handleRef: ForwardedRe
 
   return (
     <div className={css.root} ref={rootRef}>
-      {componentName}
+      <h1>{componentName}</h1>
     </div>
   );
 });

From 56114e3bf0deb112cc1983f54e31d9ce5cd3e62c Mon Sep 17 00:00:00 2001
From: theoplawinski <hello@theoplawinski.com>
Date: Tue, 16 Jul 2024 17:22:17 +0200
Subject: [PATCH 2/5] Fixed LazyImage imports

---
 apps/front/src/components/lazyImage/LazyImage.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/front/src/components/lazyImage/LazyImage.tsx b/apps/front/src/components/lazyImage/LazyImage.tsx
index 621967f..287f58e 100644
--- a/apps/front/src/components/lazyImage/LazyImage.tsx
+++ b/apps/front/src/components/lazyImage/LazyImage.tsx
@@ -1,7 +1,6 @@
+import { CSSProperties, useEffect, useRef, useState } from "react"
 import { cls } from "@cher-ami/utils"
 import css from "./LazyImage.module.scss"
-import { CSSProperties } from "preact/compat"
-import { useRef, useState, useEffect } from "preact/hooks"
 
 interface IProps {
   src?: string

From f51c5194207e8ea210f7e4a96eddc74a8071c8f5 Mon Sep 17 00:00:00 2001
From: theoplawinski <hello@theoplawinski.com>
Date: Tue, 16 Jul 2024 17:35:06 +0200
Subject: [PATCH 3/5] Fixed deployment

---
 apps/front/src/components/lazyImage/LazyImage.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/front/src/components/lazyImage/LazyImage.tsx b/apps/front/src/components/lazyImage/LazyImage.tsx
index 287f58e..4d23f53 100644
--- a/apps/front/src/components/lazyImage/LazyImage.tsx
+++ b/apps/front/src/components/lazyImage/LazyImage.tsx
@@ -1,6 +1,6 @@
-import { CSSProperties, useEffect, useRef, useState } from "react"
-import { cls } from "@cher-ami/utils"
+import React, { CSSProperties, useEffect, useRef, useState } from "react"
 import css from "./LazyImage.module.scss"
+import { cls } from "@cher-ami/utils"
 
 interface IProps {
   src?: string
@@ -16,6 +16,9 @@ interface IProps {
 
 export type Lazy = "lazyload" | "lazyloading" | "lazyloaded"
 
+/**
+ * @name LazyImage
+ */
 function LazyImage(props: IProps) {
   const imageRef = useRef<HTMLImageElement>(null)
   const [lazyState, setLazyState] = useState<Lazy>("lazyload")
@@ -78,6 +81,7 @@ function LazyImage(props: IProps) {
           // Set new src fallback
           image.src = props.src ?? "data:,"
 
+          // end!
           setLazyState("lazyloaded")
           props.onLoaded?.(image)
           observer.disconnect()
@@ -104,9 +108,9 @@ function LazyImage(props: IProps) {
           ref={imageRef}
           className={cls(css.image, lazyState)}
           src={"data:,"}
-          data-src={props.dataSrc}
-          data-srcset={props.dataSrcSet}
-          alt={props.alt}
+          data-src={props?.dataSrc}
+          data-srcset={props?.dataSrcSet}
+          alt={props?.alt}
           width={props.width}
           height={props.height}
           style={props.style}

From 76ed1a37f98a343167dae691017924670da4dfd7 Mon Sep 17 00:00:00 2001
From: Bastien Cornier <bastien@cher-ami.tv>
Date: Tue, 15 Oct 2024 09:59:02 +0200
Subject: [PATCH 4/5] Add custom aspect ratio param to LazyImage

---
 .../src/components/lazyImage/LazyImage.tsx    |  14 +-
 apps/front/src/styles/_ratio.scss             |  30 +-
 package-lock.json                             | 331 ++++++++++--------
 3 files changed, 214 insertions(+), 161 deletions(-)

diff --git a/apps/front/src/components/lazyImage/LazyImage.tsx b/apps/front/src/components/lazyImage/LazyImage.tsx
index 4d23f53..0c5d54f 100644
--- a/apps/front/src/components/lazyImage/LazyImage.tsx
+++ b/apps/front/src/components/lazyImage/LazyImage.tsx
@@ -9,6 +9,7 @@ interface IProps {
   className?: string
   alt?: string
   style?: CSSProperties
+  aspectRatio?: string // ex: "16/9" "4/3"
   width: number
   height: number
   onLoaded?: (img: HTMLImageElement) => void
@@ -18,6 +19,8 @@ export type Lazy = "lazyload" | "lazyloading" | "lazyloaded"
 
 /**
  * @name LazyImage
+ * @description Lazy load image component with srcset and src fallback
+ * @example <LazyImage dataSrcSet="image-600 600w, image-800 800w, image-1024 1024w" src="image-800" alt="image" width={800} height={600} aspectRatio={"4 / 3"} />
  */
 function LazyImage(props: IProps) {
   const imageRef = useRef<HTMLImageElement>(null)
@@ -31,8 +34,7 @@ function LazyImage(props: IProps) {
     new Promise((resolve) => {
       const dataSrc = image.dataset.src
       const dataSrcSet = image.dataset.srcset
-      // create void image tag for start preload
-      // const img = document.createElement("img")
+
       if (dataSrc) image.src = dataSrc
       if (dataSrcSet) image.srcset = dataSrcSet
 
@@ -102,7 +104,11 @@ function LazyImage(props: IProps) {
     <>
       <div
         className={cls(css.imageWrapper, props.className)}
-        style={{ paddingBottom: `${aspectRatioPadding}%` }}
+        style={{
+          paddingBottom: props.aspectRatio
+            ? `calc((2 - ${props.aspectRatio})* 100%)`
+            : `${aspectRatioPadding}%`
+        }}
       >
         <img
           ref={imageRef}
@@ -110,7 +116,7 @@ function LazyImage(props: IProps) {
           src={"data:,"}
           data-src={props?.dataSrc}
           data-srcset={props?.dataSrcSet}
-          alt={props?.alt}
+          alt={props?.alt ?? ""}
           width={props.width}
           height={props.height}
           style={props.style}
diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
index 832400c..1ca2939 100644
--- a/apps/front/src/styles/_ratio.scss
+++ b/apps/front/src/styles/_ratio.scss
@@ -43,13 +43,13 @@
     #{$property}: fn.toRem(nth($value1, 1)) fn.toRem(nth($value1, 2));
   } @else if length($value1) == 3 {
     #{$property}: fn.toRem(nth($value1, 1))
-    fn.toRem(nth($value1, 2))
-    fn.toRem(nth($value1, 3));
+      fn.toRem(nth($value1, 2))
+      fn.toRem(nth($value1, 3));
   } @else if length($value1) == 4 {
     #{$property}: fn.toRem(nth($value1, 1))
-    fn.toRem(nth($value1, 2))
-    fn.toRem(nth($value1, 3))
-    fn.toRem(nth($value1, 4));
+      fn.toRem(nth($value1, 2))
+      fn.toRem(nth($value1, 3))
+      fn.toRem(nth($value1, 4));
   }
   @if $value2 != $value1 {
     @media (min-width: breakpoints.$breakpoint-tablet) {
@@ -59,13 +59,13 @@
         #{$property}: fn.toRem(nth($value2, 1)) fn.toRem(nth($value2, 2));
       } @else if length($value2) == 3 {
         #{$property}: fn.toRem(nth($value2, 1))
-        fn.toRem(nth($value2, 2))
-        fn.toRem(nth($value2, 3));
+          fn.toRem(nth($value2, 2))
+          fn.toRem(nth($value2, 3));
       } @else if length($value2) == 4 {
         #{$property}: fn.toRem(nth($value2, 1))
-        fn.toRem(nth($value2, 2))
-        fn.toRem(nth($value2, 3))
-        fn.toRem(nth($value2, 4));
+          fn.toRem(nth($value2, 2))
+          fn.toRem(nth($value2, 3))
+          fn.toRem(nth($value2, 4));
       }
     }
   }
@@ -120,13 +120,13 @@
         #{$property}: fn.toPx(nth($value1, 1)) fn.toPx(nth($value1, 2));
       } @else if length($value1) == 3 {
         #{$property}: fn.toPx(nth($value1, 1))
-        fn.toPx(nth($value1, 2))
-        fn.toPx(nth($value1, 3));
+          fn.toPx(nth($value1, 2))
+          fn.toPx(nth($value1, 3));
       } @else if length($value1) == 4 {
         #{$property}: fn.toPx(nth($value1, 1))
-        fn.toPx(nth($value1, 2))
-        fn.toPx(nth($value1, 3))
-        fn.toPx(nth($value1, 4));
+          fn.toPx(nth($value1, 2))
+          fn.toPx(nth($value1, 3))
+          fn.toPx(nth($value1, 4));
       }
     }
   }
diff --git a/package-lock.json b/package-lock.json
index 141474d..5042c59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,7 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -114,12 +115,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -220,6 +222,7 @@
       "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
       "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "slice-ansi": "^5.0.0",
         "string-width": "^7.0.0"
@@ -232,10 +235,11 @@
       }
     },
     "node_modules/cli-truncate/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -244,16 +248,18 @@
       }
     },
     "node_modules/cli-truncate/node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
-      "dev": true
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/cli-truncate/node_modules/string-width": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
-      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^10.3.0",
         "get-east-asian-width": "^1.0.0",
@@ -271,6 +277,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -321,15 +328,17 @@
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/commander": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
-      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/cross-spawn": {
@@ -347,12 +356,13 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -396,6 +406,19 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "dev": true
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
@@ -418,7 +441,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
       "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/execa": {
       "version": "8.0.1",
@@ -473,10 +497,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -508,10 +533,11 @@
       }
     },
     "node_modules/get-east-asian-width": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
-      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
+      "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -718,6 +744,7 @@
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
       "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -739,6 +766,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -786,30 +814,35 @@
       }
     },
     "node_modules/lilconfig": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz",
-      "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
     "node_modules/lint-staged": {
-      "version": "15.2.2",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.2.tgz",
-      "integrity": "sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "5.3.0",
-        "commander": "11.1.0",
-        "debug": "4.3.4",
-        "execa": "8.0.1",
-        "lilconfig": "3.0.0",
-        "listr2": "8.0.1",
-        "micromatch": "4.0.5",
-        "pidtree": "0.6.0",
-        "string-argv": "0.3.2",
-        "yaml": "2.3.4"
+      "version": "15.2.10",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.10.tgz",
+      "integrity": "sha512-5dY5t743e1byO19P9I4b3x8HJwalIznL5E1FWYnU6OWw33KxNBSLAc6Cy7F2PsFEO8FKnLwjwm5hx7aMF0jzZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.6",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.2",
+        "listr2": "~8.2.4",
+        "micromatch": "~4.0.8",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.5.0"
       },
       "bin": {
         "lint-staged": "bin/lint-staged.js"
@@ -822,16 +855,17 @@
       }
     },
     "node_modules/listr2": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.1.tgz",
-      "integrity": "sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==",
+      "version": "8.2.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.5.tgz",
+      "integrity": "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cli-truncate": "^4.0.0",
         "colorette": "^2.0.20",
         "eventemitter3": "^5.0.1",
-        "log-update": "^6.0.0",
-        "rfdc": "^1.3.0",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
         "wrap-ansi": "^9.0.0"
       },
       "engines": {
@@ -839,10 +873,11 @@
       }
     },
     "node_modules/listr2/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -851,16 +886,18 @@
       }
     },
     "node_modules/listr2/node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
-      "dev": true
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/listr2/node_modules/string-width": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
-      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^10.3.0",
         "get-east-asian-width": "^1.0.0",
@@ -878,6 +915,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -893,6 +931,7 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
       "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.2.1",
         "string-width": "^7.0.0",
@@ -959,14 +998,15 @@
       }
     },
     "node_modules/log-update": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz",
-      "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-escapes": "^6.2.0",
-        "cli-cursor": "^4.0.0",
-        "slice-ansi": "^7.0.0",
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
         "strip-ansi": "^7.1.0",
         "wrap-ansi": "^9.0.0"
       },
@@ -978,25 +1018,27 @@
       }
     },
     "node_modules/log-update/node_modules/ansi-escapes": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz",
-      "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "type-fest": "^3.0.0"
+        "environment": "^1.0.0"
       },
       "engines": {
-        "node": ">=14.16"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/log-update/node_modules/ansi-regex": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
-      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -1005,31 +1047,34 @@
       }
     },
     "node_modules/log-update/node_modules/cli-cursor": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
-      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "restore-cursor": "^4.0.0"
+        "restore-cursor": "^5.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/log-update/node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
-      "dev": true
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/log-update/node_modules/is-fullwidth-code-point": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
       "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "get-east-asian-width": "^1.0.0"
       },
@@ -1040,57 +1085,45 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-update/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/log-update/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "mimic-fn": "^2.1.0"
+        "mimic-function": "^5.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/log-update/node_modules/restore-cursor": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
-      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-update/node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
-    },
     "node_modules/log-update/node_modules/slice-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
       "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.2.1",
         "is-fullwidth-code-point": "^5.0.0"
@@ -1103,10 +1136,11 @@
       }
     },
     "node_modules/log-update/node_modules/string-width": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
-      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^10.3.0",
         "get-east-asian-width": "^1.0.0",
@@ -1124,6 +1158,7 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1134,23 +1169,12 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/log-update/node_modules/type-fest": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
-      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/log-update/node_modules/wrap-ansi": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
       "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.2.1",
         "string-width": "^7.0.0",
@@ -1170,12 +1194,13 @@
       "dev": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -1194,11 +1219,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/mute-stream": {
       "version": "1.0.0",
@@ -1328,6 +1367,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },
@@ -1420,10 +1460,11 @@
       "dev": true
     },
     "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
-      "dev": true
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/run-async": {
       "version": "3.0.0",
@@ -1524,6 +1565,7 @@
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
       "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.0.0",
         "is-fullwidth-code-point": "^4.0.0"
@@ -1629,6 +1671,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -1723,10 +1766,14 @@
       }
     },
     "node_modules/yaml": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
-      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
       "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
       "engines": {
         "node": ">= 14"
       }

From acbc423a3b54100f4ab030309a7664ef46777ef3 Mon Sep 17 00:00:00 2001
From: Bastien Cornier <bastien@cher-ami.tv>
Date: Tue, 15 Oct 2024 10:10:53 +0200
Subject: [PATCH 5/5] Update ratio breakpoints to cover larger sizes landscape
 and portrait

---
 apps/front/src/styles/_breakpoints.scss       |  2 +
 apps/front/src/styles/_ratio.scss             | 59 +++++++++++++++----
 apps/front/src/styles/breakpoints-inline.scss |  2 +
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/apps/front/src/styles/_breakpoints.scss b/apps/front/src/styles/_breakpoints.scss
index 42a2380..e8a8766 100644
--- a/apps/front/src/styles/_breakpoints.scss
+++ b/apps/front/src/styles/_breakpoints.scss
@@ -3,6 +3,8 @@
 $breakpoint-mobile: 320px;
 $breakpoint-mobile-horizontal: 500px;
 $breakpoint-tablet: 768px;
+$breakpoint-tablet-height: 950px;
 $breakpoint-laptop: 1024px;
+$breakpoint-bigLaptop-min: 1366px;
 $breakpoint-bigLaptop: 1440px;
 $breakpoint-desktop: 1680px;
diff --git a/apps/front/src/styles/_ratio.scss b/apps/front/src/styles/_ratio.scss
index 1ca2939..c570dbf 100644
--- a/apps/front/src/styles/_ratio.scss
+++ b/apps/front/src/styles/_ratio.scss
@@ -1,6 +1,7 @@
 @use "./_viewport" as viewport;
 @use "./_breakpoints" as breakpoints;
 @use "./_functions" as fn;
+@use "./_utils" as utils;
 
 /// Set property calculated with VH & VW ratio
 /// @param {css property} $property
@@ -22,6 +23,20 @@
   }
 }
 
+@mixin mobileVH(
+  $property,
+  $n1,
+  $ratioVH: viewport.$viewport-reference-height,
+  $ratioVW: viewport.$viewport-reference-width
+) {
+  #{$property}: #{fn.ratioVH($n1, $ratioVH)};
+  @if $ratioVW > 0 {
+    @media (max-aspect-ratio: #{ #{$ratioVW} / #{$ratioVH+1} }) {
+      #{$property}: #{fn.ratioVW($n1, $ratioVW)};
+    }
+  }
+}
+
 /// Set property calculated with VW ratio
 /// @param {css property} $property
 /// @param {Number} $n1
@@ -87,14 +102,19 @@
   //Mobile
   @include propertyVW($property, $value1);
 
-  //Horizontal Desktop & Tablet
-  @include desktop($breakpoint) {
-    @include propertyVH($property, $value2, $ratioVW: 0);
+  // Landscape mobile
+  @include mobile-landscape {
+    @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
   }
 
-  //Portrait Desktop & Tablet
-  @include desktop-portrait {
-    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
+  // Portrait Tablet
+  @include tablet-portrait {
+    @include propertyVH(
+      $property,
+      $value2,
+      $ratioVW: viewport.$viewport-reference-tablet-width,
+      $ratioVH: viewport.$viewport-reference-tablet-height
+    );
   }
 
   // Landscape Tablet
@@ -102,14 +122,19 @@
     @include propertyVH(
       $property,
       $value2,
-      $ratioVW: viewport.$viewport-reference-desktop-width,
-      $ratioVH: viewport.$viewport-reference-desktop-height
+      $ratioVW: viewport.$viewport-reference-tablet-width,
+      $ratioVH: viewport.$viewport-reference-tablet-height
     );
   }
 
-  // Landscape mobile
-  @include mobile-landscape {
-    @include propertyVH($property, $value2, viewport.$viewport-reference-width, 0);
+  //Portrait Desktop & Tablet
+  @include desktop-portrait {
+    @include propertyVW($property, $value2, viewport.$viewport-reference-tablet-width);
+  }
+
+  //Horizontal Desktop & Tablet
+  @include desktop($breakpoint) {
+    @include propertyVH($property, $value2, $ratioVW: 0);
   }
 
   @if $cap {
@@ -146,7 +171,7 @@
 /// Desktop & Tablet portrait media query
 /// @param {string} [$breakpoint=breakpoints.$breakpoint-tablet] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-tablet).
 @mixin desktop-portrait($breakpoint: breakpoints.$breakpoint-tablet) {
-  @media (min-width: $breakpoint) and (orientation: portrait) {
+  @media (min-width: $breakpoint) and (min-height: breakpoints.$breakpoint-bigLaptop) and (orientation: portrait) {
     @content;
   }
 }
@@ -162,7 +187,15 @@
 /// Tablet landscape media query.
 /// @param {string} [$breakpoint=breakpoints.$breakpoint-laptop] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
 @mixin tablet-landscape($breakpoint: breakpoints.$breakpoint-laptop) {
-  @media (max-width: #{$breakpoint + 1}) and (orientation: landscape) {
+  @media (max-width: #{breakpoints.$breakpoint-bigLaptop-min + 1}) and (min-width: #{$breakpoint}) and (orientation: landscape) {
+    @content;
+  }
+}
+
+/// Tablet portrait media query.
+/// @param {string} [$breakpoint=breakpoints.$breakpoints-tablet-height] - Le point de rupture pour les médias queries (par défaut égal à breakpoints.$breakpoint-laptop).
+@mixin tablet-portrait($breakpoint: breakpoints.$breakpoint-tablet-height) {
+  @media (min-height: #{$breakpoint}) and (orientation: portrait) {
     @content;
   }
 }
diff --git a/apps/front/src/styles/breakpoints-inline.scss b/apps/front/src/styles/breakpoints-inline.scss
index 09df491..609ab00 100644
--- a/apps/front/src/styles/breakpoints-inline.scss
+++ b/apps/front/src/styles/breakpoints-inline.scss
@@ -4,7 +4,9 @@
   --breakpoint-mobile: #{$breakpoint-mobile};
   --breakpoint-mobile-horizontal: #{$breakpoint-mobile-horizontal};
   --breakpoint-tablet: #{$breakpoint-tablet};
+  --breakpoint-tablet-height: #{$breakpoint-tablet-height};
   --breakpoint-laptop: #{$breakpoint-laptop};
+  --breakpoint-bigLaptop-min: #{$breakpoint-bigLaptop-min};
   --breakpoint-bigLaptop: #{$breakpoint-bigLaptop};
   --breakpoint-desktop: #{$breakpoint-desktop};
 }