cloudcommerce 0.8.7 → 0.9.0

package/packages/storefront/dist/server/entry.mjs

@@ -2,7 +2,7 @@ import { performance } from 'node:perf_hooks';
 import { ByteLengthQueuingStrategy, CountQueuingStrategy, ReadableByteStreamController, ReadableStream, ReadableStreamBYOBReader, ReadableStreamBYOBRequest, ReadableStreamDefaultController, ReadableStreamDefaultReader, TransformStream, WritableStream, WritableStreamDefaultController, WritableStreamDefaultWriter } from 'node:stream/web';
 import { File, FormData, Headers, Request, Response, fetch } from 'undici';
 import { setTimeout as setTimeout$1, clearTimeout as clearTimeout$1 } from 'node:timers';
-import { N as NodeApp, g as server_default, h as deserializeManifest } from './chunks/astro.9781c0a7.mjs';
+import { N as NodeApp, g as server_default, h as deserializeManifest } from './chunks/astro.39f7f387.mjs';
 import { Readable } from 'stream';
 import https from 'https';
 import path from 'path';
@@ -14,7 +14,7 @@ import enableDestroy from 'server-destroy';
 import { defineComponent, computed, useSSRContext, mergeProps, h as h$1, createSSRApp } from 'vue';
 import { ssrRenderSlotInner, ssrRenderAttrs, ssrRenderSlot, renderToString } from 'vue/server-renderer';
 import { img, imgSizes, i18n, formatMoney } from '@ecomplus/utils';
-/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.b355675e.mjs';
+/* empty css                                  */import { _ as _export_sfc, a as _page0, b as _page1, c as _page2, d as _page3, e as _page4, f as _page5 } from './chunks/pages/all.b15cad2d.mjs';
 import 'mime';
 import 'cookie';
 import 'kleur/colors';
@@ -37,7 +37,7 @@ import '@cloudcommerce/api';
 import 'node:fs';
 import '@cloudcommerce/config';
 /* empty css                                     */import '@vueuse/core';
-import '@headlessui/vue';
+/* empty css                                 */import '@headlessui/vue';
 
 /** Returns the function bound to the given object. */
 const __function_bind = Function.bind.bind(Function.call);
@@ -2458,6 +2458,7 @@ function isNodeReadableStream(value) {
 }
 function readerIterator(reader) {
   const iterator = {
+    //@ts-expect-error
     next() {
       return reader.read();
     }
@@ -2639,13 +2640,26 @@ async function writeWebResponse(app, res, webResponse) {
   res.end();
 }
 
+function parsePathname(pathname, host, port) {
+  try {
+    const urlPathname = new URL(pathname, `http://${host}:${port}`).pathname;
+    return decodeURI(encodeURI(urlPathname));
+  } catch (err) {
+    return void 0;
+  }
+}
 function createServer({ client, port, host, removeBase }, handler) {
   const listener = (req, res) => {
     if (req.url) {
       let pathname = removeBase(req.url);
       pathname = pathname[0] === "/" ? pathname : "/" + pathname;
-      pathname = new URL(pathname, `http://${host}:${port}`).pathname;
-      const stream = send(req, encodeURI(decodeURI(pathname)), {
+      const encodedURI = parsePathname(pathname, host, port);
+      if (!encodedURI) {
+        res.writeHead(400);
+        res.end("Bad request.");
+        return res;
+      }
+      const stream = send(req, encodedURI, {
         root: fileURLToPath(client),
         dotfiles: pathname.startsWith("/.well-known/") ? "allow" : "deny"
       });
@@ -2867,10 +2881,10 @@ const _sfc_main$2 = defineComponent({
         el.style.position = "absolute";
         el.style.visibility = "hidden";
         const { width: width2, height: height2 } = getComputedStyle(el);
-        el.style.width = isSlideY.value ? null : "0";
-        el.style.height = isSlideY.value ? "0" : null;
-        el.style.position = null;
-        el.style.visibility = null;
+        el.style.width = isSlideY.value ? "" : "0";
+        el.style.height = isSlideY.value ? "0" : "";
+        el.style.position = "";
+        el.style.visibility = "";
         getComputedStyle(el)[isSlideY.value ? "height" : "width"];
         requestAnimationFrame(() => {
           if (isSlideY.value) {
@@ -2883,7 +2897,7 @@ const _sfc_main$2 = defineComponent({
     };
     const onAfterEnter = (el) => {
       if (props.slide && !props.isFloating && props.isEnterFrom) {
-        el.style[isSlideY.value ? "height" : "width"] = null;
+        el.style[isSlideY.value ? "height" : "width"] = "";
       }
     };
     const onLeave = (el) => {
@@ -2931,7 +2945,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       if (props.href.startsWith("http")) {
         const domain = globalThis.storefront.settings.domain || window.location.host;
         if (props.href.startsWith(`https://${domain}`))
-          return null;
+          return void 0;
       }
       return "_blank";
     });
@@ -2944,7 +2958,7 @@ function _sfc_ssrRender$1(_ctx, _push, _parent, _attrs, $props, $setup, $data, $
   _push(`<a${ssrRenderAttrs(mergeProps({
     href: $props.href,
     target: $setup.linkTarget,
-    rel: $setup.linkTarget === "_blank" ? "noopener" : null
+    rel: $setup.linkTarget === "_blank" ? "noopener" : void 0
   }, _attrs))}>`);
   ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
   _push(`</a>`);
@@ -2977,13 +2991,12 @@ const _sfc_main = defineComponent({
       return imgSizes(image.value);
     });
     const attrs = computed(() => ({
-      ...props,
       src: image.value.url,
       alt: image.value.alt,
-      width: dimensions.value.width || null,
-      height: dimensions.value.height || null,
-      decoding: props.decoding || (dimensions.value.height ? "async" : null),
-      picture: null
+      width: dimensions.value.width || void 0,
+      height: dimensions.value.height || void 0,
+      loading: props.loading,
+      decoding: props.decoding || (dimensions.value.height ? "async" : void 0)
     }));
     const __returned__ = { props, image, dimensions, attrs };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -3059,10 +3072,10 @@ const _renderer1 = {
 	renderToStaticMarkup,
 };
 
-const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.16.0_astro@2.1.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5],]);
+const pageMap = new Map([["../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js", _page0],["src/pages/index.astro", _page1],["src/pages/fallback.astro", _page2],["src/pages/app/index.astro", _page3],["src/pages/app/account.astro", _page4],["src/pages/[...slug].astro", _page5],]);
 const renderers = [Object.assign({"name":"astro:jsx","serverEntrypoint":"astro/jsx/server.js","jsxImportSource":"astro"}, { ssr: server_default }),Object.assign({"name":"@astrojs/vue","clientEntrypoint":"@astrojs/vue/client.js","serverEntrypoint":"@astrojs/vue/server.js"}, { ssr: _renderer1 }),];
 
-const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.0_astro@2.1.2+sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.45f0edaf.css","_astro/index.0c833781.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.45f0edaf.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["_astro/_...slug_.45f0edaf.css"],"scripts":[{"type":"external","value":"_astro/hoisted.541b5c05.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"propagation":[],"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","@@sf/components/ProductCard.vue":"_astro/ProductCard.7e891c08.js","~/components/Prices.vue":"_astro/Prices.55399c72.js","~/components/PitchBar.vue":"_astro/PitchBar.5d55c359.js","@astrojs/vue/client.js":"_astro/client.0de2f274.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.dc90f814.js","/astro/hoisted.js?q=0":"_astro/hoisted.541b5c05.js","~/components/ShopHeader.vue":"_astro/ShopHeader.6bbe1a17.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.d090c84e.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.0c833781.css","/_astro/server.1bc2fa51.css","/_astro/_...slug_.45f0edaf.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/PitchBar.5d55c359.js","/_astro/Prices.55399c72.js","/_astro/ProductCard.7e891c08.js","/_astro/ShopHeader.6bbe1a17.js","/_astro/_plugin-vue_export-helper.77ed7c18.js","/_astro/client.0de2f274.js","/_astro/firebase-app.d090c84e.js","/_astro/format-money.ab6b71eb.js","/_astro/hoisted.541b5c05.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.ff4f0b30.js","/_astro/modules-info.06ac0727.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.d2f39f33.js","/_astro/session-utm.72684b84.js","/_astro/workbox-window.prod.es5.dc90f814.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/icon.png","/img/uploads/large-icon.png","/img/uploads/logo.png","/img/uploads/logo.webp","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png"]}), {
+const _manifest = Object.assign(deserializeManifest({"adapterName":"@astrojs/node","routes":[{"file":"","links":[],"scripts":[],"routeData":{"type":"endpoint","route":"/_image","pattern":"^\\/_image$","segments":[[{"content":"_image","dynamic":false,"spread":false}]],"params":[],"component":"../../node_modules/.pnpm/@astrojs+image@0.16.6_astro@2.3.0_sharp@0.31.3/node_modules/@astrojs/image/dist/endpoint.js","pathname":"/_image","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.9a31c59e.css","/_astro/index.e56fc6b3.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"routeData":{"route":"/","type":"page","pattern":"^\\/$","segments":[],"params":[],"component":"src/pages/index.astro","pathname":"/","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.9a31c59e.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"routeData":{"route":"/fallback","type":"page","pattern":"^\\/fallback\\/?$","segments":[[{"content":"fallback","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/fallback.astro","pathname":"/fallback","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app","type":"page","pattern":"^\\/app\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/index.astro","pathname":"/app","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":[],"scripts":[],"routeData":{"route":"/app/account","type":"page","pattern":"^\\/app\\/account\\/?$","segments":[[{"content":"app","dynamic":false,"spread":false}],[{"content":"account","dynamic":false,"spread":false}]],"params":[],"component":"src/pages/app/account.astro","pathname":"/app/account","prerender":false,"_meta":{"trailingSlash":"ignore"}}},{"file":"","links":["/_astro/_...slug_.9a31c59e.css","/_astro/index.1eaf97c3.css"],"scripts":[{"type":"external","value":"/_astro/hoisted.56fa2eff.js"}],"routeData":{"route":"/[...slug]","type":"page","pattern":"^(?:\\/(.*?))?\\/?$","segments":[[{"content":"...slug","dynamic":true,"spread":true}]],"params":["...slug"],"component":"src/pages/[...slug].astro","prerender":false,"_meta":{"trailingSlash":"ignore"}}}],"site":"https://ecom2-002.web.app","base":"/","markdown":{"drafts":false,"syntaxHighlight":"shiki","shikiConfig":{"langs":[],"theme":"github-dark","wrap":false},"remarkPlugins":[],"rehypePlugins":[],"remarkRehype":{},"gfm":true,"smartypants":true},"pageMap":null,"componentMetadata":[["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/[...slug].astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/fallback.astro",{"propagation":"none","containsHead":true}],["/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/pages/index.astro",{"propagation":"none","containsHead":true}]],"renderers":[],"entryModules":{"\u0000@astrojs-ssr-virtual-entry":"_@astrojs-ssr-virtual-entry.mjs","~/components/PitchBar.vue":"_astro/PitchBar.1c993792.js","~/components/Prices.vue":"_astro/Prices.70885f17.js","@astrojs/vue/client.js":"_astro/client.4e825332.js","/astro/hoisted.js?q=0":"_astro/hoisted.56fa2eff.js","~/components/HeroSlider.vue":"_astro/HeroSlider.34436243.js","/home/leo/code/ecomplus/cloud-commerce/node_modules/workbox-window/build/workbox-window.prod.es5.mjs":"_astro/workbox-window.prod.es5.dc90f814.js","~/components/ShopHeader.vue":"_astro/ShopHeader.e901fad5.js","/home/leo/code/ecomplus/cloud-commerce/packages/storefront/src/lib/scripts/firebase-app.ts":"_astro/firebase-app.247497b8.js","astro:scripts/before-hydration.js":""},"assets":["/_astro/index.e56fc6b3.css","/_astro/index.1eaf97c3.css","/_astro/server.1dabec03.css","/_astro/_...slug_.9a31c59e.css","/manifest.webmanifest","/robots.txt","/sw.js","/workbox-e0d788d4.js","/_astro/Carousel.dfb3f26a.js","/_astro/HeroSlider.34436243.js","/_astro/PitchBar.1c993792.js","/_astro/Prices.70885f17.js","/_astro/ShopHeader.e901fad5.js","/_astro/_plugin-vue_export-helper.0c2b7f88.js","/_astro/client.4e825332.js","/_astro/firebase-app.247497b8.js","/_astro/format-money.f09b89ed.js","/_astro/hoisted.56fa2eff.js","/_astro/idle-callback.889bf0ea.js","/_astro/index.9018a8da.js","/_astro/modules-info.2a72e536.js","/_astro/preload-helper.101896b7.js","/_astro/runtime-dom.esm-bundler.1fd80976.js","/_astro/session-utm.ac492493.js","/_astro/workbox-window.prod.es5.dc90f814.js","/admin/config.json","/assets/cms-preview.css","/assets/cms.css","/assets/cvv.png","/assets/img-placeholder.png","/assets/payments.png","/assets/ssl-safe.png","/img/icon.png","/img/large-icon.png","/img/uploads/banner1.png","/img/uploads/banner2.png","/img/uploads/banner2.webp","/img/uploads/ecom-icon.png","/img/uploads/favicon.png","/img/uploads/headless.png","/img/uploads/headphone.png","/img/uploads/headphone.webp","/img/uploads/logo.png","/img/uploads/og-image.png","/img/uploads/passion.png","/img/uploads/passion.webp","/img/uploads/pwa-reliable.png","/img/uploads/rect8589.png","/img/uploads/rect859.png","/img/uploads/rect89.png","/img/uploads/rect89.webp","/img/uploads/ssl-safe.png"]}), {
 	pageMap: pageMap,
 	renderers: renderers
 });

package/packages/storefront/dist/server/manifest.webmanifest

@@ -1 +1 @@
-{"name":"My Shop","short_name":"My Shop","start_url":"/","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"My PWA Shop","theme_color":"#137c5c","crossorigin":"use-credentials","icons":[{"src":"/_image?f=png&w=192&h=192&href=%2Fimg%2Fuploads%2Flarge-icon.png&V=_","sizes":"192x192","type":"image/png"},{"src":"/_image?f=png&w=512&h=512&href=%2Fimg%2Fuploads%2Flarge-icon.png&V=_","sizes":"512x512","type":"image/png"},{"src":"/img/uploads/large-icon.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}]}
+{"name":"My Shop","short_name":"My Shop","start_url":"/","display":"standalone","background_color":"#f5f6fa","lang":"en","scope":"/","description":"My PWA Shop","theme_color":"#37003c","crossorigin":"use-credentials","icons":[{"src":"/_image?f=png&w=192&h=192&href=%2Fimg%2Fuploads%2Fecom-icon.png&V=_","sizes":"192x192","type":"image/png"},{"src":"/_image?f=png&w=512&h=512&href=%2Fimg%2Fuploads%2Fecom-icon.png&V=_","sizes":"512x512","type":"image/png"},{"src":"/img/uploads/ecom-icon.png","sizes":"512x512","type":"image/png","purpose":"any maskable"}]}

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -29,36 +29,36 @@
     "prepare-monorepo": "bash scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/image": "0.16.0",
-    "@astrojs/node": "5.1.0",
-    "@astrojs/vue": "2.1.0",
+    "@astrojs/image": "0.16.6",
+    "@astrojs/node": "5.1.1",
+    "@astrojs/vue": "2.1.1",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.3",
     "@fastify/deepmerge": "^1.3.0",
-    "@headlessui/vue": "^1.7.12",
-    "@iconify-json/fa6-brands": "^1.1.10",
+    "@headlessui/vue": "^1.7.13",
+    "@iconify-json/fa6-brands": "^1.1.11",
     "@iconify-json/heroicons": "^1.1.10",
-    "@iconify-json/logos": "^1.1.23",
+    "@iconify-json/logos": "^1.1.24",
     "@vite-pwa/astro": "^0.0.5",
-    "@vueuse/core": "9.12.0",
-    "astro": "2.1.2",
+    "@vueuse/core": "10.0.2",
+    "astro": "2.3.0",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
-    "firebase": "^9.18.0",
+    "firebase": "^9.19.1",
     "image-size": "^1.0.2",
     "mime": "^3.0.0",
-    "semver": "^7.3.8",
+    "semver": "^7.4.0",
     "sharp": "^0.31.3",
-    "tailwindcss": "^3.2.7",
-    "unocss": "^0.50.6",
+    "tailwindcss": "^3.3.1",
+    "unocss": "^0.51.4",
     "vite": "^4.2.1",
-    "vite-plugin-pwa": "^0.14.5",
+    "vite-plugin-pwa": "^0.14.7",
     "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.21.4",
     "@cloudcommerce/types": "workspace:*"
   }
 }

package/packages/storefront/server.d.ts

@@ -31,7 +31,7 @@ declare global {
     onLoad: (callback: (...args: any[]) => void) => void,
   };
   // eslint-disable-next-line
-  var api_prefetch_endpoints: undefined | ApiEndpoint[];
+  var api_prefetch_endpoints: ApiEndpoint[];
   // eslint-disable-next-line
   var storefront_slim_doc_regex: undefined | RegExp;
 }

package/packages/storefront/src/images/use-ssr-picture.ts

@@ -67,26 +67,46 @@ const useSSRPicture = async (params: UsePictureParams) => {
   let sizes: string = propSizes || '';
   if (!sizes && attrs.class) {
     const classNames = attrs.class.split(' ');
-    const classRegex = /^(\w+:)?max-w-\[(\w+)\]$/;
     let nextSize: string;
+    const breakpoints = {
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      '2xl': 1536,
+    };
     [
       [''],
-      ['sm', 640],
-      ['md', 768],
-      ['lg', 1024],
-      ['xl', 1280],
-      ['2xl', 1536],
+      ...Object.entries(breakpoints),
     ].forEach(([breakpoint, minWidth]: [string, number | undefined]) => {
-      const className = classNames.find((_class) => {
-        return _class.startsWith(breakpoint ? `${breakpoint}:max-w-[` : 'max-w-[');
+      const classRegex = breakpoint
+        ? new RegExp(`^${breakpoint}:max-w-(\\[\\w+\\]|screen-\\w+)$`)
+        : /^max-w-(\[\w+\]|screen-\w+)$/;
+      let classMaxW: string | undefined;
+      classNames.find((_class) => {
+        const maxW = _class.replace(classRegex, '$1');
+        if (maxW !== _class) {
+          classMaxW = maxW;
+          return true;
+        }
+        return false;
       });
-      if (className) {
+      if (classMaxW) {
         if (nextSize) {
           // max-w-50px sm:max-w-[... => (max-width: 639px) 50px...
           if (sizes) sizes += ', ';
           sizes += `(max-width: ${(minWidth - 1)}px) ${nextSize}`;
         }
-        nextSize = className.replace(classRegex, '$2');
+        if (classMaxW.charAt(0) === '[') {
+          // [100px] => 100px
+          nextSize = classMaxW.slice(1, classMaxW.length - 1);
+        } else {
+          // screen-2xl => 1536px
+          const screenSize = breakpoints[classMaxW.slice(7)];
+          if (screenSize) {
+            nextSize = `${screenSize}px`;
+          }
+        }
       }
     });
     if (nextSize) {

package/packages/storefront/src/lib/assets/base.css

@@ -11,8 +11,10 @@
   --transition: .15s ease-in-out;
   --transition-slow: .25s ease-in-out;
   --transition-slower: .45s ease-in-out;
-  --c-on-dark: rgb(255, 255, 255);
-  --c-on-light: rgb(0, 0, 0);
+  --rgb-on-dark: 255, 255, 255;
+  --c-on-dark: rgb(var(--rgb-on-dark));
+  --rgb-on-light: 0, 0, 0;
+  --c-on-light: rgb(var(--rgb-on-light));
   --c-background: #fff;
   --c-on-background: theme('colors.base.800');
   --un-prose-body: theme('colors.base.700');

package/packages/storefront/src/lib/cms.d.ts

@@ -1,25 +1,21 @@
 import type { CmsSettings as _CmsSettings } from '@cloudcommerce/types';
 
-type CmsSettings = _CmsSettings &
+export type CmsSettings = _CmsSettings &
   Omit<typeof import('content/settings.json'), keyof _CmsSettings>;
-type CmsCode = typeof import('content/code.json');
-type CmsMetatags = typeof import('content/metatags.json');
-type CmsHeader = typeof import('content/header.json');
 
-type CMS = <T extends string>(filename: T) =>
+export type CmsLayout = typeof import('content/layout.json');
+
+export type CmsHome = typeof import('content/home.json');
+
+export type ContentFilenames = 'settings'
+  | 'layout'
+  | 'home'
+  | `${string}/`
+  | `${string}/${string}`;
+
+export type CMS = <T extends ContentFilenames>(filename: T) =>
   T extends `${string}/` ? Promise<Array<string>> :
   T extends 'settings' ? CmsSettings :
-  T extends 'code' ? Promise<CmsCode | null> :
-  T extends 'metatags' ? Promise<CmsMetatags | null> :
-  T extends 'header' ? Promise<CmsHeader | null> :
+  T extends 'layout' ? Promise<CmsLayout> :
+  T extends 'home' ? Promise<CmsHome> :
   Promise<Record<string, any> | null>;
-
-export default CMS;
-
-export type {
-  CMS,
-  CmsSettings,
-  CmsCode,
-  CmsMetatags,
-  CmsHeader,
-};

package/packages/storefront/src/lib/components/Carousel.vue

@@ -36,28 +36,32 @@ watch(currentIndex, (current, previous) => {
     emit('update:modelValue', current + 1);
   }
 });
-const wrapper = ref<HTMLElement>(null);
+const wrapper = ref<HTMLElement | null>(null);
 const { x: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
 const isBoundLeft = computed(() => arrivedState.left);
 const isBoundRight = computed(() => arrivedState.right);
-const slidesWidth = ref([]);
+const slidesWidth = ref<{ offsetLeft: number; width: number; }[]>([]);
 const wrapperScrollWidth = ref(0);
 const wrapperVisibleWidth = ref(0);
 const indexCount = ref(0);
 const calcWrapperWidth = () => {
+  if (!wrapper.value) return;
   wrapperScrollWidth.value = wrapper.value.scrollWidth;
   wrapperVisibleWidth.value = wrapper.value.offsetWidth;
 };
 const calcSlidesWidth = () => {
-  const childNodes = [...wrapper.value.children];
-  slidesWidth.value = childNodes.map((node: HTMLElement) => ({
+  if (!wrapper.value) return;
+  let childNodes = [...wrapper.value.children] as HTMLElement[];
+  if (childNodes.length === 1 && childNodes[0].tagName.endsWith('SLOT')) {
+    childNodes = [...childNodes[0].children] as HTMLElement[];
+  }
+  slidesWidth.value = childNodes.map((node) => ({
     offsetLeft: node.offsetLeft,
     width: node.offsetWidth,
   }));
 };
 const calcNextWidth = (direction) => {
-  const nextSlideIndex = direction > 0
-    ? currentIndex.value : currentIndex.value + direction;
+  const nextSlideIndex = currentIndex.value + direction;
   const width = slidesWidth.value[nextSlideIndex]?.width || 0;
   if (!width) {
     return 0;
@@ -65,7 +69,7 @@ const calcNextWidth = (direction) => {
   return width * direction;
 };
 const calcCurrentIndex = () => {
-  const getCurrentIndex = slidesWidth.value.findIndex((slide: HTMLElement) => {
+  const getCurrentIndex = slidesWidth.value.findIndex((slide) => {
     // Find the closest point, with 5px approximate.
     return Math.abs(slide.offsetLeft - currentPos.value) <= 5;
   });
@@ -78,7 +82,7 @@ const calcIndexCount = () => {
   indexCount.value = slidesWidth.value
     .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos - 5));
 };
-let autoplayTimer = null;
+let autoplayTimer: ReturnType<typeof setTimeout> | undefined;
 const restartAutoplay = () => {
   if (props.autoplay) {
     clearTimeout(autoplayTimer);
@@ -103,7 +107,7 @@ const changeSlide = (direction: number) => {
   }
   const nextSlideWidth = calcNextWidth(direction);
   if (nextSlideWidth) {
-    wrapper.value.scrollBy({ left: nextSlideWidth, behavior: 'smooth' });
+    wrapper.value?.scrollBy({ left: nextSlideWidth, behavior: 'smooth' });
     restartAutoplay();
   }
 };
@@ -134,6 +138,7 @@ const calcOnInit = () => {
   calcIndexCount();
 };
 const onResize = useDebounceFn(() => {
+  if (!wrapper.value) return;
   wrapper.value.scrollLeft = 0;
   calcOnInit();
 }, 400);
@@ -141,7 +146,8 @@ onMounted(() => {
   calcOnInit();
   if (!import.meta.env.SSR) {
     nextTick(() => {
-      [...wrapper.value.children].forEach((slide: HTMLElement) => {
+      if (!wrapper.value) return;
+      [...wrapper.value.children].forEach((slide) => {
         slide.setAttribute('tabindex', '0');
       });
     });

package/packages/storefront/src/lib/components/CarouselControl.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue';
-import { carouselKey } from './_injection-keys';
+import { type CarouselInject, carouselKey } from './_injection-keys';
 
 export interface Props {
   direction?: number;
@@ -9,7 +9,7 @@ export interface Props {
 withDefaults(defineProps<Props>(), {
   direction: 1,
 });
-const { changeSlide } = inject(carouselKey);
+const { changeSlide } = inject(carouselKey) as CarouselInject;
 </script>
 
 <template>

package/packages/storefront/src/lib/components/Drawer.vue

@@ -23,9 +23,9 @@ const emit = defineEmits([
   'update:modelValue',
 ]);
 const close = () => emit('update:modelValue', false);
-const drawer = ref(null);
+const drawer = ref<HTMLElement | null>(null);
 const outsideClickListener = (ev: MouseEvent) => {
-  if (!drawer.value?.contains(ev.target)) {
+  if (!drawer.value?.contains(ev.target as Node)) {
     close();
   }
 };
@@ -45,8 +45,8 @@ watch(toRef(props, 'modelValue'), async (isOpen) => {
       document.addEventListener('keydown', escClickListener, { passive: true });
     }, 500);
   } else {
-    document.body.style.overflow = null;
-    document.body.style.paddingRight = null;
+    document.body.style.overflow = '';
+    document.body.style.paddingRight = '';
     document.removeEventListener('click', outsideClickListener);
     document.removeEventListener('keydown', escClickListener);
   }
@@ -79,7 +79,7 @@ const isPlacementX = computed(() => {
         isPlacementX ? 'max-w-sm' : null,
       ]"
       :style="{
-        maxWidth: !isPlacementX ? `calc(100vw - ${scrollbarWidth}px)` : null,
+        maxWidth: !isPlacementX ? `calc(100vw - ${scrollbarWidth}px)` : undefined,
       }"
       :open="modelValue"
       :data-drawer="placement"

package/packages/storefront/src/lib/components/HeroPicture.astro

@@ -0,0 +1,54 @@
+---
+import type { HeroSliderProps } from '@@sf/layouts/sections/use-hero-section';
+import Picture from '@@sf/components/Picture.astro';
+
+export type Props = HeroSliderProps['slides'][0] & {
+  index: number;
+  widths?: number[];
+  mobileWidths?: number[];
+};
+
+const {
+  img,
+  alt,
+  mobileImg,
+  title,
+  subtitle,
+  buttonText,
+  index,
+} = Astro.props as Props;
+const hasHeader = title || subtitle || buttonText;
+let { widths, mobileWidths }= Astro.props;
+if (!widths?.length) {
+  if (mobileImg) {
+    widths = [1536, 2048];
+  } else {
+    widths = [856, 1536, 2048];
+    if (hasHeader) {
+      widths = widths.map((w) => (w / 2));
+    }
+  }
+}
+if (!mobileWidths?.length) {
+  mobileWidths = [720, 856];
+}
+---
+
+<Picture
+  src={img}
+  alt={alt || ''}
+  widths={widths}
+  fetchpriority={index === 0 ? 'high' : 'low'}
+  loading={index === 0 ? 'eager' : 'lazy'}
+  class={`${(mobileImg ? 'hidden md:block' : '')} max-w-screen-2xl mx-auto`}
+/>
+{mobileImg &&
+  <Picture
+    src={mobileImg}
+    alt={alt || ''}
+    widths={mobileWidths}
+    fetchpriority={index === 0 ? 'high' : 'low'}
+    loading={index === 0 ? 'eager' : 'lazy'}
+    class="md:hidden max-w-screen-sm mx-auto"
+  />
+}

package/packages/storefront/src/lib/components/LoginForm.vue

@@ -33,7 +33,7 @@ watch(isLogged, (_isLogged) => {
   immediate: true,
 });
 watch(email, (_email) => {
-  emit('set:email', _email);
+  emit('set:email', _email as string);
 }, {
   immediate: true,
 });
@@ -47,6 +47,7 @@ watch(isSignUp, (_isSignUp) => {
 const password = ref('');
 const submitLogin = async () => {
   const firebaseAuth = getAuth();
+  if (!email.value) return;
   window.localStorage.setItem('emailForSignIn', email.value);
   try {
     if (isLinkSignIn.value) {
@@ -59,7 +60,7 @@ const submitLogin = async () => {
     } else {
       await signInWithEmailAndPassword(firebaseAuth, email.value, password.value);
     }
-  } catch (error) {
+  } catch (error: any) {
     console.warn(error.code);
     console.error(error);
   }

package/packages/storefront/src/lib/components/SocialNetworkLink.vue

@@ -12,8 +12,8 @@ export interface Props {
 }
 
 const props = defineProps<Props>();
-const fixedHref = computed(() => {
-  let href = props.href || socialNetworks[props.network];
+const fixedHref = computed<string>(() => {
+  let href = props.href || socialNetworks[props.network] || '';
   if (props.network === 'whatsapp') {
     const tel = href.replace(/[^+\d]/g, '');
     // eslint-disable-next-line prefer-template

package/packages/storefront/src/lib/components/_injection-keys.ts

@@ -1,9 +1,11 @@
 /* eslint-disable import/prefer-default-export */
 import type { Ref, InjectionKey } from 'vue';
 
-export const carouselKey = Symbol('carousel') as InjectionKey<{
-  autoplay: Ref<number>,
+export type CarouselInject = {
+  autoplay: Ref<number | undefined>,
   changeSlide: (direction: number) => void,
   isBoundLeft: Ref<boolean>,
   isBoundRight: Ref<boolean>,
-}>;
+};
+
+export const carouselKey = Symbol('carousel') as InjectionKey<CarouselInject>;

package/packages/storefront/src/lib/components/globals/AImg.vue

@@ -40,13 +40,12 @@ const dimensions = computed(() => {
   return getImgSizes(image.value) as { width: number, height: number };
 });
 const attrs = computed<ImgHTMLAttributes>(() => ({
-  ...props,
   src: image.value.url,
   alt: image.value.alt,
-  width: dimensions.value.width || null,
-  height: dimensions.value.height || null,
-  decoding: props.decoding || (dimensions.value.height ? 'async' : null),
-  picture: null,
+  width: dimensions.value.width || undefined,
+  height: dimensions.value.height || undefined,
+  loading: props.loading,
+  decoding: props.decoding || (dimensions.value.height ? 'async' : undefined),
 }));
 </script>
 

package/packages/storefront/src/lib/components/globals/ALink.vue

@@ -11,7 +11,7 @@ const linkTarget = computed(() => {
   if (props.target) return props.target;
   if (props.href.startsWith('http')) {
     const domain = globalThis.storefront.settings.domain || window.location.host;
-    if (props.href.startsWith(`https://${domain}`)) return null;
+    if (props.href.startsWith(`https://${domain}`)) return undefined;
   }
   return '_blank';
 });
@@ -21,6 +21,6 @@ const linkTarget = computed(() => {
   <a
     :href="href"
     :target="linkTarget"
-    :rel="linkTarget === '_blank' ? 'noopener' : null"
+    :rel="linkTarget === '_blank' ? 'noopener' : undefined"
   ><slot /></a>
 </template>