vlite3 1.4.8 → 1.4.10

package/components/Cart/CartVariant2.vue.js

@@ -28,7 +28,7 @@ const I = { class: "flex items-center justify-center gap-1.5" }, R = { class: "f
       () => c.value.totals.itemCount ?? c.value.items?.reduce((h, t) => h + (t.quantity || 0), 0) ?? 0
     );
     return (h, t) => (a(), s("div", {
-      class: o(["v-cart v-cart-v2 flex flex-col bg-background text-foreground border border-border max-w-md mx-auto overflow-hidden h-full", [e.containerClass, e.compact ? "rounded-sm" : "rounded-md"]])
+      class: o(["v-cart v-cart-v2 flex flex-col bg-background text-foreground border border-border overflow-hidden h-full", [e.containerClass, e.compact ? "rounded-sm" : "rounded-md"]])
     }, [
       n("div", {
         class: o(["text-center border-b border-dashed border-border shrink-0", e.compact ? "p-3" : "p-4"])

package/components/Cart/CartVariant4.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as q, computed as c, openBlock as a, createElementBlock as i, normalizeClass as r, createElementVNode as m, createVNode as v, toDisplayString as b, createCommentVNode as u, unref as z, createBlock as y, Fragment as B, renderList as N, withCtx as k, createTextVNode as C } from "vue";
+import { defineComponent as q, computed as c, openBlock as o, createElementBlock as i, normalizeClass as r, createElementVNode as m, createVNode as v, toDisplayString as b, createCommentVNode as u, unref as z, createBlock as y, Fragment as B, renderList as N, withCtx as k, createTextVNode as C } from "vue";
 import D from "../Icon.vue.js";
 import E from "../Price/Price.vue.js";
 import w from "../Button.vue.js";
@@ -28,11 +28,11 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
   },
   emits: ["update:quantity", "remove", "clear", "apply-coupon", "remove-coupon", "coupon-change", "continue", "continue-shopping"],
   setup(e, { emit: $ }) {
-    const p = e, l = $, s = c(() => p.data), g = c(() => p.labels || {}), o = c(() => p.actions || {}), f = c(() => p.features || {}), d = c(() => s.value.empty || !s.value.items || s.value.items.length === 0), S = c(
+    const p = e, l = $, s = c(() => p.data), g = c(() => p.labels || {}), n = c(() => p.actions || {}), f = c(() => p.features || {}), d = c(() => s.value.empty || !s.value.items || s.value.items.length === 0), S = c(
       () => s.value.totals.itemCount ?? s.value.items?.reduce((h, t) => h + (t.quantity || 0), 0) ?? 0
     );
-    return (h, t) => (a(), i("div", {
-      class: r(["v-cart v-cart-v4 flex flex-col bg-background text-foreground border border-border rounded-lg overflow-hidden w-full h-full", [e.containerClass, e.compact ? "max-w-xs" : "max-w-sm"]])
+    return (h, t) => (o(), i("div", {
+      class: r(["v-cart v-cart-v4 flex flex-col bg-background text-foreground border border-border rounded-lg overflow-hidden w-full h-full", [e.containerClass]])
     }, [
       m("div", {
         class: r(["flex items-center justify-between gap-2 border-b border-border shrink-0", e.compact ? "px-3 py-2" : "px-4 py-2.5"])
@@ -45,9 +45,9 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           m("p", {
             class: r(["font-bold text-foreground truncate", (e.compact, "text-sm")])
           }, b(s.value.title || g.value.cart || "Cart"), 3),
-          d.value ? u("", !0) : (a(), i("span", A, b(S.value), 1))
+          d.value ? u("", !0) : (o(), i("span", A, b(S.value), 1))
         ]),
-        !d.value && !e.compact ? (a(), i("p", F, [
+        !d.value && !e.compact ? (o(), i("p", F, [
           m("span", U, [
             v(z(E), {
               value: e.data.totals.grandTotal,
@@ -57,20 +57,20 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
         ])) : u("", !0)
       ], 2),
       m("div", G, [
-        d.value ? (a(), y(R, {
+        d.value ? (o(), y(R, {
           key: 0,
           labels: e.labels,
           compact: !0,
-          onContinueShopping: t[0] || (t[0] = (n) => l("continue-shopping"))
-        }, null, 8, ["labels"])) : (a(), i("ul", {
+          onContinueShopping: t[0] || (t[0] = (a) => l("continue-shopping"))
+        }, null, 8, ["labels"])) : (o(), i("ul", {
           key: 1,
           class: r(["divide-y divide-border", e.compact ? "px-3" : "px-4"])
         }, [
-          (a(!0), i(B, null, N(e.data.items, (n) => (a(), i("li", {
-            key: n.id
+          (o(!0), i(B, null, N(e.data.items, (a) => (o(), i("li", {
+            key: a.id
           }, [
             v(L, {
-              item: n,
+              item: a,
               features: e.features,
               labels: e.labels,
               compact: e.compact,
@@ -82,7 +82,7 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           ]))), 128))
         ], 2))
       ]),
-      d.value ? u("", !0) : (a(), i("div", {
+      d.value ? u("", !0) : (o(), i("div", {
         key: 0,
         class: r(["border-t border-border bg-muted/30 shrink-0", e.compact ? "p-3 space-y-2" : "p-4 space-y-3"])
       }, [
@@ -94,44 +94,44 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           coupon: e.data.coupon,
           variant: "Variant4"
         }, null, 8, ["totals", "features", "labels", "compact", "coupon"]),
-        e.features.coupon ? (a(), y(I, {
+        e.features.coupon ? (o(), y(I, {
           key: 0,
           coupon: e.data.coupon,
           labels: e.labels,
           compact: e.compact,
           readonly: e.data.readonly,
-          onApply: t[3] || (t[3] = (n) => l("apply-coupon", n)),
-          onRemove: t[4] || (t[4] = (n) => l("remove-coupon")),
-          onChange: t[5] || (t[5] = (n) => l("coupon-change", n))
+          onApply: t[3] || (t[3] = (a) => l("apply-coupon", a)),
+          onRemove: t[4] || (t[4] = (a) => l("remove-coupon")),
+          onChange: t[5] || (t[5] = (a) => l("coupon-change", a))
         }, null, 8, ["coupon", "labels", "compact", "readonly"])) : u("", !0),
-        o.value.showContinue && f.value.continue || o.value.showContinueShopping && f.value.continueShopping ? (a(), i("div", H, [
-          o.value.showContinue && f.value.continue ? (a(), y(w, {
+        n.value.showContinue && f.value.continue || n.value.showContinueShopping && f.value.continueShopping ? (o(), i("div", H, [
+          n.value.showContinue && f.value.continue ? (o(), y(w, {
             key: 0,
             variant: "primary",
             size: e.compact ? "sm" : "md",
             block: !0,
-            icon: o.value.continueIcon || "lucide:arrow-right",
-            disabled: o.value.continueDisabled || d.value,
+            icon: n.value.continueIcon || "lucide:arrow-right",
+            disabled: n.value.continueDisabled || d.value,
             class: "w-full",
-            onClick: t[6] || (t[6] = (n) => l("continue"))
+            onClick: t[6] || (t[6] = (a) => l("continue"))
           }, {
             default: k(() => [
-              C(b(o.value.continueLabel || g.value.continue || "Checkout"), 1)
+              C(b(n.value.continueLabel || g.value.continue || "Checkout"), 1)
             ]),
             _: 1
           }, 8, ["size", "icon", "disabled"])) : u("", !0),
-          o.value.showContinueShopping && f.value.continueShopping ? (a(), y(w, {
+          n.value.showContinueShopping && f.value.continueShopping ? (o(), y(w, {
             key: 1,
             variant: "ghost",
             size: "sm",
             block: !0,
-            icon: o.value.continueShoppingIcon || "lucide:arrow-left",
-            disabled: o.value.continueShoppingDisabled,
+            icon: n.value.continueShoppingIcon || "lucide:arrow-left",
+            disabled: n.value.continueShoppingDisabled,
             class: "w-full",
-            onClick: t[7] || (t[7] = (n) => l("continue-shopping"))
+            onClick: t[7] || (t[7] = (a) => l("continue-shopping"))
           }, {
             default: k(() => [
-              C(b(o.value.continueShoppingLabel || g.value.continueShopping || "Continue shopping"), 1)
+              C(b(n.value.continueShoppingLabel || g.value.continueShopping || "Continue shopping"), 1)
             ]),
             _: 1
           }, 8, ["icon", "disabled"])) : u("", !0)

package/components/CategoryManager/CategoryManager.vue2.js

@@ -17,13 +17,13 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 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/ColorPicker/ColorIro.vue3.js

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

package/components/ColorPicker/ColorPicker.vue.js

@@ -7,8 +7,8 @@ import "../../core/config.js";
 /* empty css                                    */
 /* empty css                            */
 import E from "../Button.vue.js";
-import _ from "./ColorIro.vue.js";
-/* empty css              */
+import _ from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as I } from "@vueuse/core";
 const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
   key: 0,

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.vue.js";
-/* empty css                     */
-import de from "./RichTextLinkPopover.vue.js";
-/* empty css                         */
+import se from "./RichTextToolbar.vue2.js";
+/* empty css                    */
+import de from "./RichTextLinkPopover.vue2.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.vue.js";
-/* empty css                         */
+import o from "./RichTextLinkPopover.vue2.js";
+/* empty css                        */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue.js";
-/* empty css                     */
+import o from "./RichTextToolbar.vue2.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

@@ -15,14 +15,14 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 import "iconify-icon-picker";
 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
+};

package/components/ThemeProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from './ThemeProvider.vue';
+export type { ThemeProviderProps, ThemeStyles, ThemeMaxWidth } from './types';
+export { buildThemeVariables, buildCardOverrideStyles } from './themeVars';

package/components/ThemeProvider/themeVars.d.ts

@@ -0,0 +1,23 @@
+import { ThemeProviderProps, ThemeStyles } from './types';
+export declare const DEFAULT_BASE_FONT_SIZE = 16;
+export declare const DEFAULT_HEADING_SCALE = 1.25;
+export declare const DEFAULT_BORDER_RADIUS = 8;
+export declare const DEFAULT_MAX_WIDTH = 1440;
+/**
+ * Nested card overrides. Lives outside `buildThemeVariables` because the SFC
+ * has to inject it as a real `<style>` block (it targets descendant
+ * `.bg-card .bg-card` selectors which cannot be expressed as inline variables).
+ */
+export declare function buildCardOverrideStyles(bg: string, isDark: boolean): string;
+/**
+ * Compute the full theme-styles record from a {@link ThemeProviderProps}.
+ * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
+ *
+ * Every value is suffixed with `!important` so the provider's tokens
+ * reliably win the cascade against host-app stylesheets that may declare
+ * the same custom properties (e.g. an app-level `.dark { --color-primary:
+ * #xxx }` rule). The provider is the source of truth for the tokens it
+ * generates; `!important` in the value is the correct way to express
+ * that without forcing every consumer to re-style the entire app.
+ */
+export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;