@bagelink/vue 0.0.974 → 0.0.978

package/dist/components/Image.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":";SA4CM,MAAM;UACL,MAAM;YACJ,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;;SAHnB,MAAM;UACL,MAAM;YACJ,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;;AA8EzB,wBAMG"}
+{"version":3,"file":"Image.vue.d.ts","sourceRoot":"","sources":["../../src/components/Image.vue"],"names":[],"mappings":";SAyFM,MAAM;UACL,MAAM;YACJ,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;;SAHnB,MAAM;UACL,MAAM;YACJ,MAAM,GAAG,MAAM;aACd,MAAM,GAAG,MAAM;;AAwHzB,wBAMG"}

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export { default as DataPreview } from './DataPreview.vue';
 export { default as Dropdown } from './Dropdown.vue';
 export { default as Flag } from './Flag.vue';
 export * from './form';
+export { default as Image } from './Image.vue';
 export * from './layout';
 export { default as ListItem } from './ListItem.vue';
 export { default as ListView } from './ListView.vue';

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,cAAc,QAAQ,CAAA;AAEtB,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAE5C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,cAAc,QAAQ,CAAA;AACtB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAE9C,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/lightbox/Lightbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAwRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAapD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AA8fD,wBAMG"}
+{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAiRA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAYpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AAwfD,wBAMG"}

package/dist/index.cjs

@@ -19726,19 +19726,48 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
   __name: "Image",
   props: {
     src: {},
-    alt: {},
+    alt: { default: "" },
     width: {},
     height: {}
   },
   setup(__props) {
     let imageSrc = vue.ref(null);
     async function loadImage(src) {
-      if (src.endsWith(".heic")) {
+      var _a2;
+      if (!src) {
+        imageSrc.value = null;
+        return;
+      }
+      src = normalizeURL(src);
+      const ext = (_a2 = src.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
+      if (ext === "heic") {
+        if (!("caches" in window)) {
+          console.warn("Caching is not available. Proceeding without cache.");
+        } else {
+          try {
+            const imgCache = await window.caches.open("img-cache");
+            const cachedResponse = await imgCache.match(src);
+            if (cachedResponse) {
+              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
+              return;
+            }
+          } catch (error) {
+            console.warn("Error accessing cache:", error);
+          }
+        }
         try {
           const response = await fetch(src);
           const blob = await response.blob();
           const convertedBlob = await heic2any({ blob });
           imageSrc.value = URL.createObjectURL(convertedBlob);
+          if ("caches" in window) {
+            try {
+              const imgCache = await window.caches.open("img-cache");
+              imgCache.put(src, new Response(convertedBlob));
+            } catch (cacheError) {
+              console.warn("Failed to cache the image:", cacheError);
+            }
+          }
         } catch (error) {
           console.error("Error converting HEIC file:", error);
         }
@@ -19748,19 +19777,23 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     }
     vue.watch(() => __props.src, loadImage, { immediate: true });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", null, [
-        vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
-          key: 0,
-          src: vue.unref(imageSrc)
-        }, _ctx.$attrs, {
-          alt: _ctx.alt,
-          width: _ctx.width,
-          height: _ctx.height
-        }), null, 16, _hoisted_1$w)) : vue.createCommentVNode("", true)
-      ]);
+      return vue.unref(imageSrc) ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+        key: 0,
+        src: vue.unref(imageSrc)
+      }, _ctx.$attrs, {
+        alt: _ctx.alt,
+        width: vue.unref(normalizeDimension)(_ctx.width),
+        height: vue.unref(normalizeDimension)(_ctx.height)
+      }), null, 16, _hoisted_1$w)) : (vue.openBlock(), vue.createBlock(vue.unref(Skeleton), {
+        key: 1,
+        class: "img-web-kit",
+        width: vue.unref(normalizeDimension)(_ctx.width),
+        height: vue.unref(normalizeDimension)(_ctx.height)
+      }, null, 8, ["width", "height"]));
     };
   }
 });
+const Image$2 = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-e1f932a8"]]);
 const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
@@ -20071,7 +20104,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                  isImage(file.extension || file.url) ? (vue.openBlock(), vue.createBlock(Image$2, {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
@@ -20099,7 +20132,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                   class: "multi-image-item-preview"
                 }, [
                   isImage(fileQ.file.type) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                    _ctx.multiple ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                    _ctx.multiple ? (vue.openBlock(), vue.createBlock(Image$2, {
                       key: 0,
                       width: _ctx.width || "220",
                       class: "multi-preview",
@@ -20162,7 +20195,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]),
                   isImage(file.extension || file.url) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
-                    vue.withDirectives(vue.createVNode(_sfc_main$E, {
+                    vue.withDirectives(vue.createVNode(Image$2, {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
@@ -20195,7 +20228,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                       icon: "check"
                     })
                   ], 6),
-                  isImage(fileQ.file.type) ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                  isImage(fileQ.file.type) ? (vue.openBlock(), vue.createBlock(Image$2, {
                     key: 0,
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
@@ -56328,8 +56361,8 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "Skeleton",
   props: {
     count: { default: 1 },
-    height: { default: "50px" },
-    width: { default: "auto" },
+    height: {},
+    width: {},
     round: { type: Boolean, default: false },
     borderRadius: { default: "var(--skeleton-radius)" },
     class: { default: "" }
@@ -56355,7 +56388,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-9a44f23a"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4da8c0d1"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];
@@ -58935,11 +58968,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (val) document.body.style.overflow = "hidden";
       else document.body.style.overflow = "";
     });
-    function normalizeURL(url) {
-      if (url.startsWith("https://")) return url;
-      url = url.replace(/http:\/\//, "");
-      return `//${url}`;
-    }
     function handleKeydown(event) {
       if (event.key === "Escape") {
         close2();
@@ -59052,7 +59080,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     default: vue.withCtx(() => {
                       var _a3;
                       return [
-                        vue.createVNode(_sfc_main$E, {
+                        vue.createVNode(vue.unref(Image$2), {
                           draggable: false,
                           src: (_a3 = vue.unref(currentItem)) == null ? void 0 : _a3.src,
                           alt: "Preview",
@@ -59069,7 +59097,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     class: "vw90"
                   }, null, 8, ["src"])) : ((_m = vue.unref(currentItem)) == null ? void 0 : _m.type) === "pdf" ? (vue.openBlock(), vue.createElementBlock("embed", {
                     key: 2,
-                    src: normalizeURL((_n2 = vue.unref(currentItem)) == null ? void 0 : _n2.src),
+                    src: vue.unref(normalizeURL)((_n2 = vue.unref(currentItem)) == null ? void 0 : _n2.src),
                     type: "application/pdf",
                     width: "100%",
                     height: "1080",
@@ -59111,7 +59139,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item, index2) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
-                      item.type === "image" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+                      item.type === "image" ? (vue.openBlock(), vue.createBlock(vue.unref(Image$2), {
                         key: 0,
                         class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         src: item.src,
@@ -59135,7 +59163,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0a882f27"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5e5a1db"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -59488,6 +59516,15 @@ function appendScript(src) {
     document.head.append(script2);
   });
 }
+function normalizeURL(url) {
+  if (url.startsWith("https://")) return url;
+  url = url.replace(/http:\/\//, "");
+  return `https://${url}`;
+}
+function normalizeDimension(value, defaultMetric = "px") {
+  if (typeof value === "number") return `${value}${defaultMetric}`;
+  return value;
+}
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -60085,6 +60122,7 @@ exports.Flag = Flag;
 exports.IMAGE_FORMATS = IMAGE_FORMATS;
 exports.IMAGE_FORMATS_REGEXP = IMAGE_FORMATS_REGEXP;
 exports.Icon = _sfc_main$c;
+exports.Image = Image$2;
 exports.JSONInput = JSONInput;
 exports.Layout = Layout;
 exports.Lineart = _sfc_main$Q;
@@ -60141,6 +60179,8 @@ exports.iffer = iffer;
 exports.initials = initials;
 exports.isDate = isDate;
 exports.keyToLabel = keyToLabel;
+exports.normalizeDimension = normalizeDimension;
+exports.normalizeURL = normalizeURL;
 exports.sleep = sleep;
 exports.timeAgo = timeAgo;
 exports.useBagel = useBagel;

package/dist/index.mjs

@@ -19724,19 +19724,48 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "Image",
   props: {
     src: {},
-    alt: {},
+    alt: { default: "" },
     width: {},
     height: {}
   },
   setup(__props) {
     let imageSrc = ref(null);
     async function loadImage(src) {
-      if (src.endsWith(".heic")) {
+      var _a2;
+      if (!src) {
+        imageSrc.value = null;
+        return;
+      }
+      src = normalizeURL(src);
+      const ext = (_a2 = src.split(".").pop()) == null ? void 0 : _a2.toLowerCase().split("?").shift();
+      if (ext === "heic") {
+        if (!("caches" in window)) {
+          console.warn("Caching is not available. Proceeding without cache.");
+        } else {
+          try {
+            const imgCache = await window.caches.open("img-cache");
+            const cachedResponse = await imgCache.match(src);
+            if (cachedResponse) {
+              imageSrc.value = URL.createObjectURL(await cachedResponse.blob());
+              return;
+            }
+          } catch (error) {
+            console.warn("Error accessing cache:", error);
+          }
+        }
         try {
           const response = await fetch(src);
           const blob = await response.blob();
           const convertedBlob = await heic2any({ blob });
           imageSrc.value = URL.createObjectURL(convertedBlob);
+          if ("caches" in window) {
+            try {
+              const imgCache = await window.caches.open("img-cache");
+              imgCache.put(src, new Response(convertedBlob));
+            } catch (cacheError) {
+              console.warn("Failed to cache the image:", cacheError);
+            }
+          }
         } catch (error) {
           console.error("Error converting HEIC file:", error);
         }
@@ -19746,19 +19775,23 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     }
     watch(() => __props.src, loadImage, { immediate: true });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
-          key: 0,
-          src: unref(imageSrc)
-        }, _ctx.$attrs, {
-          alt: _ctx.alt,
-          width: _ctx.width,
-          height: _ctx.height
-        }), null, 16, _hoisted_1$w)) : createCommentVNode("", true)
-      ]);
+      return unref(imageSrc) ? (openBlock(), createElementBlock("img", mergeProps({
+        key: 0,
+        src: unref(imageSrc)
+      }, _ctx.$attrs, {
+        alt: _ctx.alt,
+        width: unref(normalizeDimension)(_ctx.width),
+        height: unref(normalizeDimension)(_ctx.height)
+      }), null, 16, _hoisted_1$w)) : (openBlock(), createBlock(unref(Skeleton), {
+        key: 1,
+        class: "img-web-kit",
+        width: unref(normalizeDimension)(_ctx.width),
+        height: unref(normalizeDimension)(_ctx.height)
+      }, null, 8, ["width", "height"]));
     };
   }
 });
+const Image$2 = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-e1f932a8"]]);
 const _hoisted_1$v = { class: "bagel-input" };
 const _hoisted_2$l = {
   key: 0,
@@ -20069,7 +20102,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   key: file.id,
                   class: "multi-image-item-preview"
                 }, [
-                  isImage(file.extension || file.url) ? (openBlock(), createBlock(_sfc_main$E, {
+                  isImage(file.extension || file.url) ? (openBlock(), createBlock(Image$2, {
                     key: 0,
                     class: "multi-preview",
                     src: file.url,
@@ -20097,7 +20130,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                   class: "multi-image-item-preview"
                 }, [
                   isImage(fileQ.file.type) ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
-                    _ctx.multiple ? (openBlock(), createBlock(_sfc_main$E, {
+                    _ctx.multiple ? (openBlock(), createBlock(Image$2, {
                       key: 0,
                       width: _ctx.width || "220",
                       class: "multi-preview",
@@ -20160,7 +20193,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     ])
                   ]),
                   isImage(file.extension || file.url) ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
-                    withDirectives(createVNode(_sfc_main$E, {
+                    withDirectives(createVNode(Image$2, {
                       class: "single-preview",
                       src: file.url,
                       alt: ""
@@ -20193,7 +20226,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                       icon: "check"
                     })
                   ], 6),
-                  isImage(fileQ.file.type) ? (openBlock(), createBlock(_sfc_main$E, {
+                  isImage(fileQ.file.type) ? (openBlock(), createBlock(Image$2, {
                     key: 0,
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
@@ -56326,8 +56359,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
     count: { default: 1 },
-    height: { default: "50px" },
-    width: { default: "auto" },
+    height: {},
+    width: {},
     round: { type: Boolean, default: false },
     borderRadius: { default: "var(--skeleton-radius)" },
     class: { default: "" }
@@ -56353,7 +56386,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-9a44f23a"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4da8c0d1"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];
@@ -58933,11 +58966,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (val) document.body.style.overflow = "hidden";
       else document.body.style.overflow = "";
     });
-    function normalizeURL(url) {
-      if (url.startsWith("https://")) return url;
-      url = url.replace(/http:\/\//, "");
-      return `//${url}`;
-    }
     function handleKeydown(event) {
       if (event.key === "Escape") {
         close2();
@@ -59050,7 +59078,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     default: withCtx(() => {
                       var _a3;
                       return [
-                        createVNode(_sfc_main$E, {
+                        createVNode(unref(Image$2), {
                           draggable: false,
                           src: (_a3 = unref(currentItem)) == null ? void 0 : _a3.src,
                           alt: "Preview",
@@ -59067,7 +59095,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: "vw90"
                   }, null, 8, ["src"])) : ((_m = unref(currentItem)) == null ? void 0 : _m.type) === "pdf" ? (openBlock(), createElementBlock("embed", {
                     key: 2,
-                    src: normalizeURL((_n2 = unref(currentItem)) == null ? void 0 : _n2.src),
+                    src: unref(normalizeURL)((_n2 = unref(currentItem)) == null ? void 0 : _n2.src),
                     type: "application/pdf",
                     width: "100%",
                     height: "1080",
@@ -59109,7 +59137,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_13, [
                   (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(group), (item, index2) => {
                     return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
-                      item.type === "image" ? (openBlock(), createBlock(_sfc_main$E, {
+                      item.type === "image" ? (openBlock(), createBlock(unref(Image$2), {
                         key: 0,
                         class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
                         src: item.src,
@@ -59133,7 +59161,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0a882f27"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5e5a1db"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {
@@ -59486,6 +59514,15 @@ function appendScript(src) {
     document.head.append(script2);
   });
 }
+function normalizeURL(url) {
+  if (url.startsWith("https://")) return url;
+  url = url.replace(/http:\/\//, "");
+  return `https://${url}`;
+}
+function normalizeDimension(value, defaultMetric = "px") {
+  if (typeof value === "number") return `${value}${defaultMetric}`;
+  return value;
+}
 const clickOutside = {
   beforeMount(el, binding) {
     el.clickOutsideEvent = (event) => {
@@ -60084,6 +60121,7 @@ export {
   IMAGE_FORMATS,
   IMAGE_FORMATS_REGEXP,
   _sfc_main$c as Icon,
+  Image$2 as Image,
   JSONInput,
   Layout,
   _sfc_main$Q as Lineart,
@@ -60140,6 +60178,8 @@ export {
   initials,
   isDate,
   keyToLabel,
+  normalizeDimension,
+  normalizeURL,
   sleep,
   timeAgo,
   useBagel,

package/dist/style.css

@@ -707,6 +707,13 @@ data[data-v-6c27f163] {
 }
 }
 
+.img-web-kit[data-v-e1f932a8] {
+	max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+	width: 100%;
+}
+
 .fileUploadWrap[data-v-e057bb0f] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
@@ -1805,25 +1812,25 @@ p {
   transform: translateX(-20px);
 }
 
-.skeleton-wrap[data-v-9a44f23a] {
+.skeleton-wrap[data-v-4da8c0d1] {
 	margin-bottom: var(--skeleton-margin);
 }
-.skeleton[data-v-9a44f23a] {
+.skeleton[data-v-4da8c0d1] {
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
     position: relative;
     overflow: hidden;
 }
-.skeleton[data-v-9a44f23a]::before {
+.skeleton[data-v-4da8c0d1]::before {
     content: "";
     background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
-    animation: loadingAnimation-9a44f23a 1s ease-in-out infinite;
+    animation: loadingAnimation-4da8c0d1 1s ease-in-out infinite;
     position: absolute;
     inset: 0px;
     transform: translateX(-100%);
 }
-@keyframes loadingAnimation-9a44f23a {
+@keyframes loadingAnimation-4da8c0d1 {
 to {
         transform: translateX(100%);
 }
@@ -3474,19 +3481,19 @@ tbody tr[data-v-fae54756]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-0a882f27]{
+.lightbox-image[data-v-d5e5a1db]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-0a882f27] {
+.bgl-lightbox-overlay[data-v-d5e5a1db] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-0a882f27] {
+.bgl-lightbox[data-v-d5e5a1db] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-0a882f27]{
-	animation: 500ms ease bgl-lightbox-load-0a882f27;
+.bgl-lightbox-item[data-v-d5e5a1db]{
+	animation: 500ms ease bgl-lightbox-load-d5e5a1db;
 }
-@keyframes bgl-lightbox-load-0a882f27 {
+@keyframes bgl-lightbox-load-d5e5a1db {
 from {
     scale:0.7;
 }
@@ -3494,44 +3501,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-0a882f27] * {
+.bgl-lightbox-item[data-v-d5e5a1db] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-0a882f27;
+	animation: 200ms ease bgl-lightbox-load-d5e5a1db;
 }
-.navigation[data-v-0a882f27] {
+.navigation[data-v-d5e5a1db] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-0a882f27] {
+.navigation-btn[data-v-d5e5a1db] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-0a882f27] {
+.thumbnail[data-v-d5e5a1db] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-0a882f27]:hover {
+.thumbnail[data-v-d5e5a1db]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-0a882f27]:active {
+.thumbnail[data-v-d5e5a1db]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-0a882f27] {
+.thumbnail.active[data-v-d5e5a1db] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-0a882f27]{
+.file-info[data-v-d5e5a1db]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-0a882f27]{
+.file-info[data-v-d5e5a1db]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-0a882f27] *{
+.file-info[data-v-d5e5a1db] *{
 	text-align: center !important;
 	margin-inline: 0 !important;;
 	max-width: 100% !important;

package/dist/utils/index.d.ts

@@ -16,6 +16,8 @@ export declare const isDate: (dateToTest: any) => boolean;
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
 export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string): Promise<void>;
+export declare function normalizeURL(url: string): string;
+export declare function normalizeDimension(value: string | number | undefined, defaultMetric?: string): string | undefined;
 export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export { formatString } from './strings';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.974",
+  "version": "0.0.978",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
 import heic2any from 'heic2any'
 import { watch } from 'vue'
 
-const { src, alt, width, height } = defineProps<{
+const { height, width, alt = '', src } = defineProps<{
 	src: string
 	alt?: string
 	width?: string | number
@@ -12,12 +13,42 @@ const { src, alt, width, height } = defineProps<{
 let imageSrc = $ref<string | null>(null)
 
 async function loadImage(src: string) {
-	if (src.endsWith('.heic')) {
+	if (!src) {
+		imageSrc = null
+		return
+	}
+	src = normalizeURL(src)
+	const ext = src.split('.').pop()?.toLowerCase().split('?').shift()
+
+	if (ext === 'heic') {
+		if (!('caches' in window)) {
+			console.warn('Caching is not available. Proceeding without cache.')
+		} else {
+			try {
+				const imgCache = await window.caches.open('img-cache')
+				const cachedResponse = await imgCache.match(src)
+				if (cachedResponse) {
+					imageSrc = URL.createObjectURL(await cachedResponse.blob())
+					return
+				}
+			} catch (error) {
+				console.warn('Error accessing cache:', error)
+			}
+		}
 		try {
 			const response = await fetch(src)
 			const blob = await response.blob()
 			const convertedBlob = await heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
+			// Only attempt to cache if the cache API is available
+			if ('caches' in window) {
+				try {
+					const imgCache = await window.caches.open('img-cache')
+					imgCache.put(src, new Response(convertedBlob))
+				} catch (cacheError) {
+					console.warn('Failed to cache the image:', cacheError)
+				}
+			}
 		} catch (error) {
 			console.error('Error converting HEIC file:', error)
 		}
@@ -25,12 +56,25 @@ async function loadImage(src: string) {
 		imageSrc = src
 	}
 }
-
 watch(() => src, loadImage, { immediate: true })
 </script>
 
 <template>
-	<div>
-		<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="width" :height="height">
-	</div>
+	<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+	<Skeleton
+		v-else
+		class="img-web-kit"
+		:width="normalizeDimension(width)"
+		:height="normalizeDimension(height)"
+	/>
 </template>
+
+<style scoped>
+.img-web-kit {
+	max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+	width: 100%;
+
+}
+</style>

package/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as DataPreview } from './DataPreview.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
+export { default as Image } from './Image.vue'
 // export * from './whatsapp';
 export * from './layout'
 export { default as ListItem } from './ListItem.vue'
@@ -25,8 +26,8 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
-export { default as Pill } from './Pill.vue'
 
+export { default as Pill } from './Pill.vue'
 export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'
 export { default as Title } from './Title.vue'

package/src/components/layout/Skeleton.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const {
 	count = 1,
-	height = '50px',
-	width = 'auto',
+	height,
+	width,
 	borderRadius = 'var(--skeleton-radius)',
 	round = false,
 	class: className = '',

package/src/components/lightbox/Lightbox.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL } from '@bagelink/vue'
 import { watch } from 'vue'
-import Image from '../Image.vue'
 
 let isOpen = $ref(false)
 let currentItem = $ref<LightboxItem>()
@@ -48,12 +47,6 @@ watch(() => isOpen, (val) => {
 	else document.body.style.overflow = ''
 })
 
-function normalizeURL(url: string) {
-	if (url.startsWith('https://')) return url
-	url = url.replace(/http:\/\//, '')
-	return `//${url}`
-}
-
 function handleKeydown(event: KeyboardEvent) {
 	if (event.key === 'Escape') {
 		close()

package/src/utils/index.ts

@@ -127,6 +127,17 @@ export function appendScript(src: string): Promise<void> {
 	})
 }
 
+export function normalizeURL(url: string) {
+	if (url.startsWith('https://')) return url
+	url = url.replace(/http:\/\//, '')
+	return `https://${url}`
+}
+
+export function normalizeDimension(value: string | number | undefined, defaultMetric = 'px'): string | undefined {
+	if (typeof value === 'number') return `${value}${defaultMetric}`
+	return value
+}
+
 export * as bagelFormUtils from './BagelFormUtils'
 
 export { useLang } from './lang'