vlite3 1.4.7 → 1.4.9

package/components/AppShell/AppShellLayoutStorefront.vue.js

@@ -10,10 +10,10 @@ import { normalizeRoutePrefix as B } from "../CategoryMenu/utils.js";
 const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body text-foreground overflow-hidden" }, L = {
   key: 0,
   class: "shrink-0 w-full"
-}, M = { class: "w-full mx-auto max-w-7xl px-3 sm:px-4 md:px-6 lg:px-8" }, O = ["aria-label"], A = {
+}, M = { class: "w-full mx-auto px-3 sm:px-4 md:px-6 lg:px-8" }, O = ["aria-label"], A = {
   key: 0,
   class: "flex items-center justify-center min-w-0 flex-1 px-2"
-}, U = { class: "w-full min-w-0 max-w-7xl mx-auto overflow-hidden px-3 sm:px-4 md:px-6 lg:px-8" }, Y = {
+}, U = { class: "w-full min-w-0 mx-auto overflow-hidden" }, Y = {
   key: 0,
   class: "shrink-0 w-full"
 }, D = {
@@ -35,12 +35,12 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       toggleSidebar: G,
       pageTitle: J,
       breadcrumbData: p,
-      breakpointClasses: u,
+      breakpointClasses: m,
       nestedTabsItems: g,
       activeNestedTab: c,
-      handleNestedTabClick: x,
-      mainScrollRef: $,
-      layoutMainRef: C
+      handleNestedTabClick: $,
+      mainScrollRef: C,
+      layoutMainRef: x
     } = k, S = v(() => [
       "w-full shrink-0 bg-background transition-shadow duration-200",
       {
@@ -54,7 +54,7 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       s.floating ? "m-3 rounded-lg border border-border shadow-sm overflow-hidden" : "",
       s.class
     ].filter(Boolean).join(" ")), h = v(() => B(s.categoryRoutePrefix));
-    return (o, m) => (t(), i("div", E, [
+    return (o, u) => (t(), i("div", E, [
       o.$slots.announcement ? (t(), i("div", L, [
         l(o.$slots, "announcement")
       ])) : d("", !0),
@@ -74,9 +74,9 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
               }, () => [
                 a("button", {
                   type: "button",
-                  class: n(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [e(u).mobileTrigger, e(s).mobileTriggerClass]]),
+                  class: n(["inline-flex items-center justify-center w-9 h-9 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent", [e(m).mobileTrigger, e(s).mobileTriggerClass]]),
                   "aria-label": e(r) ? "Close menu" : "Open menu",
-                  onClick: m[0] || (m[0] = (b) => r.value = !e(r))
+                  onClick: u[0] || (u[0] = (b) => r.value = !e(r))
                 }, [
                   f(R, {
                     icon: e(r) ? "lucide:x" : "lucide:menu",
@@ -97,14 +97,14 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
           ], 2),
           o.$slots["mobile-bottom"] ? (t(), i("div", {
             key: 0,
-            class: n(["pb-3 w-full", e(u).mobileTrigger])
+            class: n(["pb-3 w-full", e(m).mobileTrigger])
           }, [
             l(o.$slots, "mobile-bottom")
           ], 2)) : d("", !0)
         ]),
         o.$slots.categories ? (t(), i("div", {
           key: 0,
-          class: n(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [e(u).desktopContent, e(s).menuClass]])
+          class: n(["w-full min-w-0 overflow-hidden border-t border-border bg-background", [e(m).desktopContent, e(s).menuClass]])
         }, [
           a("div", U, [
             l(o.$slots, "categories", { categoryRoutePrefix: h.value })
@@ -114,14 +114,14 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       o.$slots.main ? (t(), i("main", {
         key: 1,
         ref_key: "layoutMainRef",
-        ref: C,
+        ref: x,
         class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0"
       }, [
         e(s).renderNestedTabs && e(g).length > 0 ? (t(), i("div", Y, [
           f(V, {
             modelValue: e(c),
-            "onUpdate:modelValue": m[1] || (m[1] = (b) => y(c) ? c.value = b : null),
-            onChange: e(x),
+            "onUpdate:modelValue": u[1] || (u[1] = (b) => y(c) ? c.value = b : null),
+            onChange: e($),
             items: e(g)
           }, null, 8, ["modelValue", "onChange", "items"])
         ])) : d("", !0),
@@ -138,7 +138,7 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
         ], 2)) : d("", !0),
         a("div", {
           ref_key: "mainScrollRef",
-          ref: $,
+          ref: C,
           style: { "will-change": "transform", contain: "layout style" },
           class: n(["flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable", e(s).contentClass])
         }, [
@@ -150,11 +150,11 @@ const E = { class: "vlite-app-layout flex flex-col w-full h-full min-h-0 bg-body
       ])) : d("", !0),
       f(P, {
         show: e(r),
-        "onUpdate:show": m[2] || (m[2] = (b) => y(r) ? r.value = b : null),
+        "onUpdate:show": u[2] || (u[2] = (b) => y(r) ? r.value = b : null),
         position: "left",
         size: "sm",
-        triggerClass: e(u).mobileTrigger,
-        class: n(["z-60", e(u).mobileTrigger]),
+        triggerClass: e(m).mobileTrigger,
+        class: n(["z-60", e(m).mobileTrigger]),
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, _({

package/components/CategoryManager/CategoryManager.vue2.js

@@ -22,8 +22,8 @@ import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/Dropdown/DropdownMenu.vue.js

@@ -1,7 +1,7 @@
 import o from "./DropdownMenu.vue2.js";
 /* empty css                  */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-754d002e"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-173c7a02"]]);
 export {
   m as default
 };

package/components/Dropdown/DropdownMenu.vue2.js

@@ -144,7 +144,6 @@ const ve = ["dir"], ye = {
           size: "sm",
           autofocus: !0,
           class: "font-medium!",
-          "input-class": "-ml-1",
           variant: "transparent",
           "icon-class": "h-3.5! w-3.5!",
           "show-clear-button": !1,

package/components/Input.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as Y, computed as d, useSlots as Z, ref as v, onMounted as _, nextTick as B, openBlock as r, createElementBlock as s, normalizeClass as u, createBlock as j, withCtx as ee, createTextVNode as R, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as M, createVNode as C } from "vue";
+import { defineComponent as Z, computed as d, useSlots as _, ref as v, onMounted as ee, nextTick as B, openBlock as r, createElementBlock as s, normalizeClass as u, createBlock as j, withCtx as te, createTextVNode as R, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as M, createVNode as C } from "vue";
 import g from "./Icon.vue.js";
-import te from "./Label.vue.js";
-import le from "./Textarea.vue.js";
+import le from "./Label.vue.js";
+import ne from "./Textarea.vue.js";
 import { $t as E } from "../utils/i18n.js";
-const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly", "min", "max", "data-testid"], ae = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, fe = /* @__PURE__ */ Y({
+const oe = ["for"], ae = ["type", "value", "placeholder", "disabled", "readonly", "min", "max", "data-testid"], de = { class: "absolute right-3 top-1/2 -translate-y-1/2 flex items-center justify-center gap-2 z-20" }, me = /* @__PURE__ */ Z({
   __name: "Input",
   props: {
     modelValue: { default: "" },
@@ -39,16 +39,16 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
   },
   emits: ["update:modelValue", "focus", "blur", "change", "click:icon", "click:icon-right"],
   setup(t, { emit: D }) {
-    const e = t, c = D, a = d(() => e.labelI18n ? E(e.labelI18n) : e.label), S = d(
+    const e = t, c = D, a = d(() => e.labelI18n ? E(e.labelI18n) : e.label), L = d(
       () => e.placeholderI18n ? E(e.placeholderI18n) : e.placeholder
-    ), x = Z(), m = v(null), y = v(!1), h = v(!1), H = d(() => e.type === "password" && y.value ? "text" : e.type), k = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), $ = d(() => b.value || k.value || h.value), p = d(() => !!e.addonLeft || !!x["addon-left"]), V = d(() => !!e.addonRight || !!x["addon-right"]), U = d(() => [
+    ), x = _(), m = v(null), y = v(!1), p = v(!1), H = d(() => e.type === "password" && y.value ? "text" : e.type), k = d(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), $ = d(() => b.value || k.value || p.value), h = d(() => !!e.addonLeft || !!x["addon-left"]), V = d(() => !!e.addonRight || !!x["addon-right"]), U = d(() => [
       "relative w-full",
       e.class,
       e.labelPosition === "left" ? "flex items-center gap-4" : "",
       e.labelPosition === "right" ? "flex flex-row-reverse items-center gap-4" : "space-y-2"
     ].join(" ")), W = d(() => ["relative flex w-full items-stretch", e.labelPosition !== "top" ? "flex-1" : ""].join(
       " "
-    )), L = d(() => {
+    )), S = d(() => {
       const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", n = {
         solid: "bg-muted border-transparent focus-visible:border-black",
         outline: "border border-input focus-visible:border-black",
@@ -69,15 +69,23 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
         "2xl": "rounded-2xl",
         full: "rounded-full"
       }[e.rounded];
-      p.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), V.value && (p.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
+      h.value && (e.rounded === "md" ? o = "rounded-r-md rounded-l-none" : e.rounded === "sm" ? o = "rounded-r-sm rounded-l-none" : e.rounded === "lg" ? o = "rounded-r-lg rounded-l-none" : e.rounded === "full" ? o = "rounded-r-full rounded-l-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-r-").replace("rounded-l-", ""))), V.value && (h.value ? o = "rounded-none" : e.rounded === "md" ? o = "rounded-l-md rounded-r-none" : e.rounded === "sm" ? o = "rounded-l-sm rounded-r-none" : e.rounded === "lg" ? o = "rounded-l-lg rounded-r-none" : e.rounded === "full" ? o = "rounded-l-full rounded-r-none" : e.rounded !== "none" && (o = o.replace("rounded-", "rounded-l-").replace("rounded-r-", ""))), e.variant === "outline-b" && (o = "rounded-none");
       const T = e.variant === "outline-b" || e.variant === "transparent";
-      return e.variant, [
+      e.variant;
+      const Y = {
+        xs: "pl-6",
+        sm: "pl-8",
+        md: "pl-9",
+        lg: "pl-9",
+        xl: "pl-9"
+      };
+      return [
         l,
         n[e.variant],
         e.type === "textarea" ? "" : f[e.size],
         o,
         e.error ? "border-destructive focus-visible:ring-destructive" : "",
-        e.icon ? "pl-9" : T && !p.value ? "pl-0" : "",
+        e.icon ? Y[e?.size] : T && !h.value ? "pl-0" : "",
         e.showClearButton && k.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : T && !V.value ? "pr-0" : "",
         // Keyframe name used to detect browser autofill via animationstart event
         e.variant === "floating" ? "autofill-detect" : "",
@@ -147,26 +155,26 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
     }, N = (l) => {
       b.value = !1, c("blur", l);
     }, X = (l) => {
-      l.animationName === "onAutoFillStart" ? h.value = !0 : l.animationName === "onAutoFillCancel" && (h.value = !1);
+      l.animationName === "onAutoFillStart" ? p.value = !0 : l.animationName === "onAutoFillCancel" && (p.value = !1);
     };
-    return _(() => {
+    return ee(() => {
       e.autofocus && B(() => {
         setTimeout(() => {
           m.value?.focus(), b.value = !0;
         }, 100);
       }), B(() => {
-        m.value && m.value.value && !e.modelValue && (h.value = !0);
+        m.value && m.value.value && !e.modelValue && (p.value = !0);
       });
     }), (l, n) => (r(), s("div", {
       class: u(U.value)
     }, [
-      a.value && t.variant !== "floating" ? (r(), j(te, {
+      a.value && t.variant !== "floating" ? (r(), j(le, {
         key: 0,
         size: "xs",
         for: a.value,
         class: u(["mb-1.5", t.labelPosition !== "top" ? "mb-0" : ""].join(" "))
       }, {
-        default: ee(() => [
+        default: te(() => [
           R(w(a.value), 1)
         ]),
         _: 1
@@ -174,7 +182,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
       A("div", {
         class: u(W.value)
       }, [
-        p.value ? (r(), s("div", {
+        h.value ? (r(), s("div", {
           key: 0,
           class: u(q.value)
         }, [
@@ -194,15 +202,15 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
               "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
               $.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background] translate-y-0" : t.type === "textarea" ? `top-2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"} translate-y-0` : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
             ])
-          }, w(a.value), 11, ne)) : i("", !0),
-          t.type === "textarea" ? (r(), j(le, {
+          }, w(a.value), 11, oe)) : i("", !0),
+          t.type === "textarea" ? (r(), j(ne, {
             key: 1,
             "model-value": String(t.modelValue),
-            placeholder: t.variant === "floating" && a.value && !$.value ? "" : S.value,
+            placeholder: t.variant === "floating" && a.value && !$.value ? "" : L.value,
             disabled: t.disabled,
             readonly: t.readonly,
             rows: t.rows,
-            class: u(L.value),
+            class: u(S.value),
             "onUpdate:modelValue": n[0] || (n[0] = (f) => c("update:modelValue", f)),
             onBlur: N,
             onFocus: F,
@@ -213,19 +221,19 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
             ref: m,
             type: H.value,
             value: t.modelValue,
-            placeholder: t.variant === "floating" && a.value && !$.value ? "" : S.value,
+            placeholder: t.variant === "floating" && a.value && !$.value ? "" : L.value,
             disabled: t.disabled,
             readonly: t.readonly,
             min: t.min,
             max: t.max,
-            class: u(L.value),
+            class: u(S.value),
             onInput: J,
             onChange: K,
             onBlur: N,
             onFocus: F,
             onAnimationstart: X,
             "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `input-${l.$attrs.name}` : a.value ? `input-${a.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "input")
-          }, null, 42, oe)),
+          }, null, 42, ae)),
           t.icon ? (r(), s("div", {
             key: 3,
             tabindex: "-1",
@@ -239,7 +247,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
               class: u(["h-4 w-4", t.iconClass])
             }, null, 8, ["icon", "class"])
           ], 2)) : i("", !0),
-          A("div", ae, [
+          A("div", de, [
             t.loading ? (r(), j(g, {
               key: 0,
               icon: "lucide:loader-2",
@@ -297,5 +305,5 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "readonly"
   }
 });
 export {
-  fe as default
+  me as default
 };

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import se from "./RichTextToolbar.vue2.js";
-/* empty css                    */
-import de from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import se from "./RichTextToolbar.vue.js";
+/* empty css                     */
+import de from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
 const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({

package/components/RichTextEditor/RichTextLinkPopover.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextLinkPopover.vue2.js";
-/* empty css                        */
+import o from "./RichTextLinkPopover.vue.js";
+/* empty css                         */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue2.js";
-/* empty css                    */
+import o from "./RichTextToolbar.vue.js";
+/* empty css                     */
 export {
   o as default
 };

package/components/ScaleGenerator/ScaleGenerator.vue.d.ts

@@ -0,0 +1,44 @@
+import { ScaleGeneratorProps, ScaleHorizontalAlign } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            scale: number;
+            containerWidth: number;
+            targetWidth: number;
+        }): any;
+    };
+    refs: {
+        frameRef: HTMLDivElement;
+        contentRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ScaleGeneratorProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:scale": (value: number) => any;
+    "update:containerWidth": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<ScaleGeneratorProps> & Readonly<{
+    "onUpdate:scale"?: (value: number) => any;
+    "onUpdate:containerWidth"?: (value: number) => any;
+}>, {
+    maxWidth: number;
+    contentClass: string;
+    enabled: boolean;
+    targetWidth: number;
+    minScale: number;
+    maxScale: number;
+    scale: number | null;
+    isEditMode: boolean;
+    horizontalAlign: ScaleHorizontalAlign;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    frameRef: HTMLDivElement;
+    contentRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ScaleGenerator/ScaleGenerator.vue.js

@@ -0,0 +1,110 @@
+import { defineComponent as w, ref as n, computed as l, onMounted as O, onBeforeUnmount as M, watch as B, openBlock as E, createElementBlock as k, normalizeStyle as S, createElementVNode as C, normalizeClass as L, renderSlot as _, nextTick as $ } from "vue";
+const A = /* @__PURE__ */ w({
+  __name: "ScaleGenerator",
+  props: {
+    enabled: { type: Boolean, default: void 0 },
+    targetWidth: { default: void 0 },
+    maxWidth: { default: void 0 },
+    minScale: { default: 0.25 },
+    maxScale: { default: 1 },
+    scale: { default: null },
+    isEditMode: { type: Boolean, default: !1 },
+    horizontalAlign: { default: "center" },
+    contentClass: { default: "" }
+  },
+  emits: ["update:scale", "update:containerWidth"],
+  setup(v, { emit: b }) {
+    const e = v, c = b, o = n(null), r = n(null), a = n(1), m = n(0), h = n(0);
+    let u = null, d = null;
+    const f = l(() => e.enabled ?? !!e.isEditMode), i = l(
+      () => Math.max(1, e.targetWidth ?? e.maxWidth ?? 1440)
+    ), g = (t) => Math.min(e.maxScale, Math.max(e.minScale, t)), p = () => {
+      h.value = r.value?.scrollHeight ?? 0;
+    }, y = () => {
+      const t = o.value?.clientWidth ?? i.value;
+      if (m.value = t, c("update:containerWidth", t), !f.value) {
+        a.value = 1, p(), c("update:scale", 1);
+        return;
+      }
+      const W = typeof e.scale == "number" ? g(e.scale) : g(t / i.value);
+      a.value = Number(W.toFixed(4)), p(), c("update:scale", a.value);
+    }, s = async () => {
+      await $(), y();
+    };
+    O(() => {
+      s(), !(typeof ResizeObserver > "u") && (u = new ResizeObserver(() => {
+        s();
+      }), d = new ResizeObserver(() => {
+        s();
+      }), o.value && u.observe(o.value), r.value && d.observe(r.value));
+    }), M(() => {
+      u?.disconnect(), d?.disconnect();
+    }), B(
+      () => [
+        e.enabled,
+        e.isEditMode,
+        e.targetWidth,
+        e.maxWidth,
+        e.minScale,
+        e.maxScale,
+        e.scale,
+        e.horizontalAlign
+      ],
+      () => {
+        s();
+      }
+    );
+    const x = l(() => {
+      const t = e.horizontalAlign ?? "center";
+      return t === "left" ? {
+        marginLeft: "0",
+        marginRight: "auto",
+        transformOrigin: "top left"
+      } : t === "right" ? {
+        marginLeft: "auto",
+        marginRight: "0",
+        transformOrigin: "top right"
+      } : {
+        marginLeft: "auto",
+        marginRight: "auto",
+        transformOrigin: "top center"
+      };
+    }), R = l(() => {
+      if (!f.value) return;
+      const t = h.value * a.value;
+      return {
+        height: t > 0 ? `${t}px` : void 0
+      };
+    }), z = l(() => f.value ? {
+      width: `${i.value}px`,
+      transform: a.value !== 1 ? `scale(${a.value})` : "none",
+      ...x.value
+    } : {
+      maxWidth: e.maxWidth ? `${e.maxWidth}px` : void 0,
+      width: "100%",
+      ...x.value
+    });
+    return (t, W) => (E(), k("div", {
+      ref_key: "frameRef",
+      ref: o,
+      class: "vlite-scale-generator-frame relative w-full overflow-hidden",
+      style: S(R.value)
+    }, [
+      C("div", {
+        ref_key: "contentRef",
+        ref: r,
+        class: L(["vlite-scale-generator-content transition-transform duration-150 ease-out", v.contentClass]),
+        style: S(z.value)
+      }, [
+        _(t.$slots, "default", {
+          scale: a.value,
+          containerWidth: m.value,
+          targetWidth: i.value
+        })
+      ], 6)
+    ], 4));
+  }
+});
+export {
+  A as default
+};

package/components/ScaleGenerator/ScaleGenerator.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ScaleGenerator.vue.js";
+export {
+  f as default
+};

package/components/ScaleGenerator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScaleGenerator } from './ScaleGenerator.vue';
+export type { ScaleGeneratorProps, ScaleGeneratorSlotScope, ScaleHorizontalAlign, } from './types';

package/components/ScaleGenerator/types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Public type surface for {@link ScaleGenerator}.
+ *
+ * `ScaleGenerator` is a generic CSS-transform based scaler for embed-style
+ * previews. It is not tied to any particular domain — it scales whatever
+ * content lives inside its default slot to a configurable target width.
+ *
+ * It is used by the ERP editor's "store preview" pane to fit a full
+ * storefront (typically 1440px wide) into the available preview viewport,
+ * and by the live storefront to opt-in to a fixed display width.
+ *
+ * The component exposes its current scale, container width, and target
+ * width through its scoped slot so descendants can render their own
+ * rulers / overlays if they need to.
+ */
+export type ScaleHorizontalAlign = 'left' | 'center' | 'right';
+export interface ScaleGeneratorProps {
+    /**
+     * Master switch. When `false` the content renders at its natural width
+     * (clamped to `maxWidth` if provided) without any transform. Defaults
+     * to `true` whenever `isEditMode` is also `true`.
+     */
+    enabled?: boolean;
+    /**
+     * The width (in `px`) the content was designed for. The component will
+     * scale content down to fit the available viewport. Defaults to
+     * `maxWidth ?? 1440`.
+     */
+    targetWidth?: number;
+    /**
+     * Hard cap on the content width when not scaling. Ignored when scaling
+     * is active (the content always renders at exactly `targetWidth` and is
+     * then scaled down).
+     */
+    maxWidth?: number;
+    /** Lower bound for the computed scale. Defaults to `0.25`. */
+    minScale?: number;
+    /** Upper bound for the computed scale. Defaults to `1`. */
+    maxScale?: number;
+    /**
+     * Manual override for the scale. When provided, the component does not
+     * derive a scale from the frame width — it uses this value (clamped to
+     * `[minScale, maxScale]`) verbatim. Useful for "zoom" controls.
+     */
+    scale?: number | null;
+    /**
+     * When `true`, scaling is enabled by default. Mostly used by editor
+     * previews where you want the preview to always scale-to-fit.
+     */
+    isEditMode?: boolean;
+    /**
+     * Where to align the (possibly scaled) content horizontally inside
+     * the frame. Defaults to `'center'`.
+     */
+    horizontalAlign?: ScaleHorizontalAlign;
+    /** Extra class for the inner content wrapper. */
+    contentClass?: string;
+}
+export interface ScaleGeneratorSlotScope {
+    scale: number;
+    containerWidth: number;
+    targetWidth: number;
+}

package/components/Screen/ScreenFilter.vue.js

@@ -21,8 +21,8 @@ import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                    */
-/* empty css                                        */
+/* empty css                                     */
+/* empty css                                         */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/ThemeProvider/ThemeProvider.vue.d.ts

@@ -0,0 +1,27 @@
+import { ThemeProviderProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ThemeProviderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ThemeProviderProps> & Readonly<{}>, {
+    rootClass: string;
+    maxWidth: import('./types').ThemeMaxWidth;
+    borderRadius: number;
+    bgColor: string;
+    primaryColor: string;
+    footerBgColor: string;
+    baseFontSize: number;
+    headingScale: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ThemeProvider/ThemeProvider.vue.js

@@ -0,0 +1,37 @@
+import { defineComponent as s, computed as o, provide as n, openBlock as a, createElementBlock as m, normalizeStyle as u, normalizeClass as c, createBlock as f, resolveDynamicComponent as v, withCtx as p, createTextVNode as C, toDisplayString as b, renderSlot as S } from "vue";
+import { buildThemeVariables as g, buildCardOverrideStyles as h } from "./themeVars.js";
+import { THEME_STYLES_KEY as y } from "../../composables/useThemeStyles.js";
+import { isDarkColor as k } from "../../utils/colorUtils.js";
+const D = /* @__PURE__ */ s({
+  __name: "ThemeProvider",
+  props: {
+    bgColor: { default: void 0 },
+    primaryColor: { default: void 0 },
+    footerBgColor: { default: void 0 },
+    baseFontSize: { default: void 0 },
+    headingScale: { default: void 0 },
+    borderRadius: { default: void 0 },
+    maxWidth: { default: void 0 },
+    rootClass: { default: "vlite-theme-provider" }
+  },
+  setup(t) {
+    const e = t, r = o(() => e.bgColor ? k(e.bgColor) : !1), l = o(() => g(e)), d = o(
+      () => e.bgColor ? h(e.bgColor, r.value) : ""
+    );
+    return n(y, l), (i, T) => (a(), m("div", {
+      class: c([t.rootClass, "transition-colors duration-300", { dark: r.value }]),
+      style: u(l.value)
+    }, [
+      (a(), f(v("style"), null, {
+        default: p(() => [
+          C(b(d.value), 1)
+        ]),
+        _: 1
+      })),
+      S(i.$slots, "default")
+    ], 6));
+  }
+});
+export {
+  D as default
+};

package/components/ThemeProvider/ThemeProvider.vue2.js

@@ -0,0 +1,4 @@
+import f from "./ThemeProvider.vue.js";
+export {
+  f as default
+};