@place-framework/place-block-image 1.0.3 → 1.0.5

package/dist/react/PlaceBlockImage.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),E="image-",o={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},I=e=>e.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function d(e,t){return t?e.replace(new RegExp(`^${t.replace(/\//g,"\\/")}\\/?`),""):e}function L(e,t,n){return e?`${t}${I(d(e,n))}`:""}function P(e,t,n,r=""){return[`${t}${o.WRAPPER_SUFFIX}`,L(e,t,n),r].filter(Boolean).join(" ")}function v(e,t){return e?t?`${o.LAZY} ${o.LOADED}`:o.LAZY:""}function R(e,t,n=.1){const r=new IntersectionObserver(s=>{s.forEach(c=>{c.isIntersecting&&(t(),r.unobserve(c.target))})},{threshold:n});return r.observe(e),r}const i=({src:e,alt:t,imagePrefix:n=E,lazy:r=!1,className:s="",...c})=>{const u=a.useRef(null),[g,p]=a.useState(r?"":e),[l,f]=a.useState(!r),_=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"";a.useEffect(()=>{if(!r||l||!u.current)return;const S=R(u.current,()=>{p(e),f(!0)});return()=>S.disconnect()},[e,r,l]);const m=P(e,n,_,s),A=v(r,l);return a.createElement("picture",{className:m},a.createElement("img",{ref:u,src:g,alt:t,className:A,...c}))};exports.PlaceBlockImage=i;exports.default=i;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c);var l=`image-`,u={LAZY:`lazy`,LOADED:`loaded`,WRAPPER_SUFFIX:`wrapper`},d=e=>e.replace(/^https?:\/\/[^/]+/,``).replace(/^[/\\]+/,``).replace(/\.[^/.]+$/,``).toLowerCase().replace(/[^a-z0-9/-]/g,`-`).replace(/\//g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``);function f(e,t){return t?e.replace(RegExp(`^${t.replace(/\//g,`\\/`)}\\/?`),``):e}function p(e,t,n){return e?`${t}${d(f(e,n))}`:``}function m(e,t,n,r=``){return[`${t}${u.WRAPPER_SUFFIX}`,p(e,t,n),r].filter(Boolean).join(` `)}function h(e,t){return e?t?`${u.LAZY} ${u.LOADED}`:u.LAZY:``}function g(e,t,n=.1){let r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(t(),r.unobserve(e.target))})},{threshold:n});return r.observe(e),r}var _=({src:e,alt:t,imagePrefix:n=l,lazy:r=!1,className:i=``,...a})=>{let o=(0,c.useRef)(null),[s,u]=(0,c.useState)(r?``:e),[d,f]=(0,c.useState)(!r),p=typeof __PLUGIN_ASSET_PATH__<`u`?__PLUGIN_ASSET_PATH__:``;(0,c.useEffect)(()=>{if(!r||d||!o.current)return;let t=g(o.current,()=>{u(e),f(!0)});return()=>t.disconnect()},[e,r,d]);let _=m(e,n,p,i),v=h(r,d);return c.default.createElement(`picture`,{className:_},c.default.createElement(`img`,{ref:o,src:s,alt:t,className:v,...a}))};exports.PlaceBlockImage=_,exports.default=_;

package/dist/react/PlaceBlockImage.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface PlaceBlockImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt: string;
+    imagePrefix?: string;
+    lazy?: boolean;
+}
+/**
+ * PlaceBlockImage — prevents layout shift using CSS custom properties.
+ * Import: import PlaceBlockImage from '@place-framework/place-block-image/react'
+ *
+ * Usage:
+ *   <PlaceBlockImage src="/assets/logo.png" alt="Logo" />
+ *   <PlaceBlockImage src="/assets/hero.jpg" alt="Hero" lazy={true} />
+ */
+export declare const PlaceBlockImage: React.FC<PlaceBlockImageProps>;
+export default PlaceBlockImage;
+//# sourceMappingURL=PlaceBlockImage.d.ts.map

package/dist/react/PlaceBlockImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceBlockImage.d.ts","sourceRoot":"","sources":["../../src/react/PlaceBlockImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,UAAU,oBAAqB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuC1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/react/PlaceBlockImage.js

@@ -1,67 +1,57 @@
-import l, { useRef as I, useState as i, useEffect as L } from "react";
-const S = "image-", c = {
-  // Lazy loading states
-  LAZY: "lazy",
-  LOADED: "loaded",
-  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
-  WRAPPER_SUFFIX: "wrapper"
-}, P = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-function d(e, t) {
-  return t ? e.replace(new RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
+import e, { useEffect as t, useRef as n, useState as r } from "react";
+//#region src/constants/index.ts
+var i = "image-", a = {
+	LAZY: "lazy",
+	LOADED: "loaded",
+	WRAPPER_SUFFIX: "wrapper"
+}, o = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function s(e, t) {
+	return t ? e.replace(RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
 }
-function R(e, t, n) {
-  return e ? `${t}${P(d(e, n))}` : "";
+function c(e, t, n) {
+	return e ? `${t}${o(s(e, n))}` : "";
 }
-function $(e, t, n, r = "") {
-  return [
-    `${t}${c.WRAPPER_SUFFIX}`,
-    R(e, t, n),
-    r
-  ].filter(Boolean).join(" ");
+function l(e, t, n, r = "") {
+	return [
+		`${t}${a.WRAPPER_SUFFIX}`,
+		c(e, t, n),
+		r
+	].filter(Boolean).join(" ");
 }
-function v(e, t) {
-  return e ? t ? `${c.LAZY} ${c.LOADED}` : c.LAZY : "";
+function u(e, t) {
+	return e ? t ? `${a.LAZY} ${a.LOADED}` : a.LAZY : "";
 }
-function C(e, t, n = 0.1) {
-  const r = new IntersectionObserver(
-    (a) => {
-      a.forEach((s) => {
-        s.isIntersecting && (t(), r.unobserve(s.target));
-      });
-    },
-    { threshold: n }
-  );
-  return r.observe(e), r;
+function d(e, t, n = .1) {
+	let r = new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			e.isIntersecting && (t(), r.unobserve(e.target));
+		});
+	}, { threshold: n });
+	return r.observe(e), r;
 }
-const b = ({
-  src: e,
-  alt: t,
-  imagePrefix: n = S,
-  lazy: r = !1,
-  className: a = "",
-  ...s
-}) => {
-  const o = I(null), [p, f] = i(r ? "" : e), [u, g] = i(!r), m = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "";
-  L(() => {
-    if (!r || u || !o.current) return;
-    const E = C(o.current, () => {
-      f(e), g(!0);
-    });
-    return () => E.disconnect();
-  }, [e, r, u]);
-  const _ = $(e, n, m, a), A = v(r, u);
-  return /* @__PURE__ */ l.createElement("picture", { className: _ }, /* @__PURE__ */ l.createElement(
-    "img",
-    {
-      ref: o,
-      src: p,
-      alt: t,
-      className: A,
-      ...s
-    }
-  ));
-};
-export {
-  b as PlaceBlockImage,
-  b as default
+//#endregion
+//#region src/react/PlaceBlockImage.tsx
+var f = ({ src: a, alt: o, imagePrefix: s = i, lazy: c = !1, className: f = "", ...p }) => {
+	let m = n(null), [h, g] = r(c ? "" : a), [_, v] = r(!c), y = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "";
+	t(() => {
+		if (!c || _ || !m.current) return;
+		let e = d(m.current, () => {
+			g(a), v(!0);
+		});
+		return () => e.disconnect();
+	}, [
+		a,
+		c,
+		_
+	]);
+	let b = l(a, s, y, f), x = u(c, _);
+	return /* @__PURE__ */ e.createElement("picture", { className: b }, /* @__PURE__ */ e.createElement("img", {
+		ref: m,
+		src: h,
+		alt: o,
+		className: x,
+		...p
+	}));
 };
+//#endregion
+export { f as PlaceBlockImage, f as default };

package/dist/vue/PlaceBlockImage.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),d="image-",i={LAZY:"lazy",LOADED:"loaded",WRAPPER_SUFFIX:"wrapper"},A=r=>r.replace(/^https?:\/\/[^/]+/,"").replace(/^[/\\]+/,"").replace(/\.[^/.]+$/,"").toLowerCase().replace(/[^a-z0-9/-]/g,"-").replace(/\//g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"");function y(r,a){return a?r.replace(new RegExp(`^${a.replace(/\//g,"\\/")}\\/?`),""):r}function L(r,a,t){return r?`${a}${A(y(r,t))}`:""}function P(r,a,t,s=""){return[`${a}${i.WRAPPER_SUFFIX}`,L(r,a,t),s].filter(Boolean).join(" ")}function E(r,a){return r?a?`${i.LAZY} ${i.LOADED}`:i.LAZY:""}function S(r,a,t=.1){const s=new IntersectionObserver(l=>{l.forEach(n=>{n.isIntersecting&&(a(),s.unobserve(n.target))})},{threshold:t});return s.observe(r),s}const z=["src","alt"],I=e.defineComponent({inheritAttrs:!1,__name:"PlaceBlockImage",props:{src:{type:String,required:!0},alt:{type:String,required:!0},imagePrefix:{type:String,default:()=>d},lazy:{type:Boolean,default:!1}},setup(r){const a=e.useAttrs(),t=r,s=e.computed(()=>{const{class:o,...g}=a;return g}),l=e.ref(null),n=e.ref(t.lazy?"":t.src),c=e.ref(!t.lazy);let u=null;const m=typeof __PLUGIN_ASSET_PATH__<"u"?__PLUGIN_ASSET_PATH__:"",_=e.computed(()=>P(t.src,t.imagePrefix,m)),v=e.computed(()=>E(t.lazy,c.value)),f=()=>{!t.lazy||c.value||!l.value||(u=S(l.value,()=>{n.value=t.src,c.value=!0}))},p=()=>{u&&(u.disconnect(),u=null)};return e.onMounted(()=>{f()}),e.onUnmounted(()=>{p()}),e.watch(()=>t.src,o=>{t.lazy?c.value||(p(),f()):n.value=o}),e.watch(c,o=>{o&&(n.value=t.src,p())}),(o,g)=>(e.openBlock(),e.createElementBlock("picture",{class:e.normalizeClass([_.value,e.unref(a).class])},[e.createElementVNode("img",e.mergeProps({ref_key:"imgRef",ref:l,src:n.value,alt:r.alt,class:v.value},s.value),null,16,z)],2))}});module.exports=I;
+let e=require("vue");var t=`image-`,n={LAZY:`lazy`,LOADED:`loaded`,WRAPPER_SUFFIX:`wrapper`},r=e=>e.replace(/^https?:\/\/[^/]+/,``).replace(/^[/\\]+/,``).replace(/\.[^/.]+$/,``).toLowerCase().replace(/[^a-z0-9/-]/g,`-`).replace(/\//g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``);function i(e,t){return t?e.replace(RegExp(`^${t.replace(/\//g,`\\/`)}\\/?`),``):e}function a(e,t,n){return e?`${t}${r(i(e,n))}`:``}function o(e,t,r,i=``){return[`${t}${n.WRAPPER_SUFFIX}`,a(e,t,r),i].filter(Boolean).join(` `)}function s(e,t){return e?t?`${n.LAZY} ${n.LOADED}`:n.LAZY:``}function c(e,t,n=.1){let r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(t(),r.unobserve(e.target))})},{threshold:n});return r.observe(e),r}var l=[`src`,`alt`],u=(0,e.defineComponent)({inheritAttrs:!1,__name:`PlaceBlockImage`,props:{src:{type:String,required:!0},alt:{type:String,required:!0},imagePrefix:{type:String,default:()=>t},lazy:{type:Boolean,default:!1}},setup(t){let n=(0,e.useAttrs)(),r=t,i=(0,e.computed)(()=>{let{class:e,...t}=n;return t}),a=(0,e.ref)(null),u=(0,e.ref)(r.lazy?``:r.src),d=(0,e.ref)(!r.lazy),f=null,p=typeof __PLUGIN_ASSET_PATH__<`u`?__PLUGIN_ASSET_PATH__:``,m=(0,e.computed)(()=>o(r.src,r.imagePrefix,p)),h=(0,e.computed)(()=>s(r.lazy,d.value)),g=()=>{!r.lazy||d.value||!a.value||(f=c(a.value,()=>{u.value=r.src,d.value=!0}))},_=()=>{f&&=(f.disconnect(),null)};return(0,e.onMounted)(()=>{g()}),(0,e.onUnmounted)(()=>{_()}),(0,e.watch)(()=>r.src,e=>{r.lazy?d.value||(_(),g()):u.value=e}),(0,e.watch)(d,e=>{e&&(u.value=r.src,_())}),(r,o)=>((0,e.openBlock)(),(0,e.createElementBlock)(`picture`,{class:(0,e.normalizeClass)([m.value,(0,e.unref)(n).class])},[(0,e.createElementVNode)(`img`,(0,e.mergeProps)({ref_key:`imgRef`,ref:a,src:u.value,alt:t.alt,class:h.value},i.value),null,16,l)],2))}});module.exports=u;

package/dist/vue/PlaceBlockImage.d.ts

@@ -0,0 +1,41 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const __VLS_export: DefineComponent<ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    imagePrefix: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    imagePrefix: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    lazy: boolean;
+    imagePrefix: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/PlaceBlockImage.js

@@ -1,83 +1,84 @@
-import { defineComponent as y, useAttrs as L, computed as p, ref as f, onMounted as P, onUnmounted as E, watch as _, openBlock as S, createElementBlock as z, normalizeClass as I, unref as C, createElementVNode as $, mergeProps as h } from "vue";
-const R = "image-", u = {
-  // Lazy loading states
-  LAZY: "lazy",
-  LOADED: "loaded",
-  // Suffix appended to imagePrefix to form the wrapper class (e.g. 'image-wrapper')
-  WRAPPER_SUFFIX: "wrapper"
-}, b = (t) => t.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-function w(t, r) {
-  return r ? t.replace(new RegExp(`^${r.replace(/\//g, "\\/")}\\/?`), "") : t;
+import { computed as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeProps as i, normalizeClass as a, onMounted as o, onUnmounted as s, openBlock as c, ref as l, unref as u, useAttrs as d, watch as f } from "vue";
+//#region src/constants/index.ts
+var p = "image-", m = {
+	LAZY: "lazy",
+	LOADED: "loaded",
+	WRAPPER_SUFFIX: "wrapper"
+}, h = (e) => e.replace(/^https?:\/\/[^/]+/, "").replace(/^[/\\]+/, "").replace(/\.[^/.]+$/, "").toLowerCase().replace(/[^a-z0-9/-]/g, "-").replace(/\//g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+function g(e, t) {
+	return t ? e.replace(RegExp(`^${t.replace(/\//g, "\\/")}\\/?`), "") : e;
 }
-function N(t, r, e) {
-  return t ? `${r}${b(w(t, e))}` : "";
+function _(e, t, n) {
+	return e ? `${t}${h(g(e, n))}` : "";
 }
-function B(t, r, e, a = "") {
-  return [
-    `${r}${u.WRAPPER_SUFFIX}`,
-    N(t, r, e),
-    a
-  ].filter(Boolean).join(" ");
+function v(e, t, n, r = "") {
+	return [
+		`${t}${m.WRAPPER_SUFFIX}`,
+		_(e, t, n),
+		r
+	].filter(Boolean).join(" ");
 }
-function F(t, r) {
-  return t ? r ? `${u.LAZY} ${u.LOADED}` : u.LAZY : "";
+function y(e, t) {
+	return e ? t ? `${m.LAZY} ${m.LOADED}` : m.LAZY : "";
 }
-function O(t, r, e = 0.1) {
-  const a = new IntersectionObserver(
-    (s) => {
-      s.forEach((n) => {
-        n.isIntersecting && (r(), a.unobserve(n.target));
-      });
-    },
-    { threshold: e }
-  );
-  return a.observe(t), a;
+function b(e, t, n = .1) {
+	let r = new IntersectionObserver((e) => {
+		e.forEach((e) => {
+			e.isIntersecting && (t(), r.unobserve(e.target));
+		});
+	}, { threshold: n });
+	return r.observe(e), r;
 }
-const U = ["src", "alt"], x = /* @__PURE__ */ y({
-  inheritAttrs: !1,
-  __name: "PlaceBlockImage",
-  props: {
-    src: { type: String, required: !0 },
-    alt: { type: String, required: !0 },
-    imagePrefix: { type: String, default: () => R },
-    lazy: { type: Boolean, default: !1 }
-  },
-  setup(t) {
-    const r = L(), e = t, a = p(() => {
-      const { class: c, ...m } = r;
-      return m;
-    }), s = f(null), n = f(e.lazy ? "" : e.src), l = f(!e.lazy);
-    let o = null;
-    const v = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "", d = p(
-      () => B(e.src, e.imagePrefix, v)
-    ), A = p(() => F(e.lazy, l.value)), g = () => {
-      !e.lazy || l.value || !s.value || (o = O(s.value, () => {
-        n.value = e.src, l.value = !0;
-      }));
-    }, i = () => {
-      o && (o.disconnect(), o = null);
-    };
-    return P(() => {
-      g();
-    }), E(() => {
-      i();
-    }), _(() => e.src, (c) => {
-      e.lazy ? l.value || (i(), g()) : n.value = c;
-    }), _(l, (c) => {
-      c && (n.value = e.src, i());
-    }), (c, m) => (S(), z("picture", {
-      class: I([d.value, C(r).class])
-    }, [
-      $("img", h({
-        ref_key: "imgRef",
-        ref: s,
-        src: n.value,
-        alt: t.alt,
-        class: A.value
-      }, a.value), null, 16, U)
-    ], 2));
-  }
+//#endregion
+//#region src/vue/PlaceBlockImage.vue?vue&type=script&setup=true&lang.ts
+var x = ["src", "alt"], S = /* @__PURE__ */ r({
+	inheritAttrs: !1,
+	__name: "PlaceBlockImage",
+	props: {
+		src: {
+			type: String,
+			required: !0
+		},
+		alt: {
+			type: String,
+			required: !0
+		},
+		imagePrefix: {
+			type: String,
+			default: () => p
+		},
+		lazy: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		let p = d(), m = r, h = e(() => {
+			let { class: e, ...t } = p;
+			return t;
+		}), g = l(null), _ = l(m.lazy ? "" : m.src), S = l(!m.lazy), C = null, w = typeof __PLUGIN_ASSET_PATH__ < "u" ? __PLUGIN_ASSET_PATH__ : "", T = e(() => v(m.src, m.imagePrefix, w)), E = e(() => y(m.lazy, S.value)), D = () => {
+			!m.lazy || S.value || !g.value || (C = b(g.value, () => {
+				_.value = m.src, S.value = !0;
+			}));
+		}, O = () => {
+			C &&= (C.disconnect(), null);
+		};
+		return o(() => {
+			D();
+		}), s(() => {
+			O();
+		}), f(() => m.src, (e) => {
+			m.lazy ? S.value || (O(), D()) : _.value = e;
+		}), f(S, (e) => {
+			e && (_.value = m.src, O());
+		}), (e, o) => (c(), t("picture", { class: a([T.value, u(p).class]) }, [n("img", i({
+			ref_key: "imgRef",
+			ref: g,
+			src: _.value,
+			alt: r.alt,
+			class: E.value
+		}, h.value), null, 16, x)], 2));
+	}
 });
-export {
-  x as default
-};
+//#endregion
+export { S as default };

package/dist/vue/index.d.ts

@@ -0,0 +1 @@
+export { default as PlaceBlockImage } from './PlaceBlockImage';

package/dist/vue/src/constants/index.d.ts

@@ -0,0 +1,8 @@
+export declare const IMAGE_PREFIX = "image-";
+export declare const CLASS_NAMES: {
+    readonly LAZY: "lazy";
+    readonly LOADED: "loaded";
+    readonly WRAPPER_SUFFIX: "wrapper";
+};
+export declare const getWrapperClassName: (imagePrefix: string) => string;
+export declare const getImageClassName: (imagePrefix: string, filename: string) => string;

package/dist/vue/src/utils/index.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Converts any image URL or path into a CSS-safe kebab-case string.
+ * Used at build time by generateImageClassName() and at runtime by
+ * the Vue/React components to derive the CSS class from the src prop.
+ */
+export declare const cleanImagePath: (src: string) => string;
+/**
+ * Generate CSS class name from a file path — path-agnostic, works with any URL format.
+ * Matches the runtime getImageClassName logic emitted by getSharedLogic().
+ *
+ * @param filePath     - Relative path from imageDir (e.g. "story/accent-orchid.png")
+ * @param imagePrefix  - The prefix to add to the class name (e.g. "image-")
+ * @param outputPrefix - Optional output path prefix prepended before filePath to mirror
+ *                       the served URL (e.g. "images/" when assetModuleFilename outputs
+ *                       to "images/…" so the browser requests "/images/story/…")
+ * @returns The generated CSS class name (e.g. "image-images-story-accent-orchid")
+ */
+export declare function generateImageClassName(filePath: string, imagePrefix: string, outputPrefix?: string): string;
+/**
+ * Strips the Vite/webpack plugin's injected asset-path prefix from a src string
+ * so the remaining path matches what the plugin used when generating CSS classes.
+ *
+ * @param src       - The raw src value (may include the asset path prefix)
+ * @param assetPath - The value of __PLUGIN_ASSET_PATH__ (empty string if undefined)
+ */
+export declare function resolveAssetPath(src: string, assetPath: string): string;
+/**
+ * Derives the per-image CSS class from a src URL, stripping the asset-path
+ * prefix first so the class matches what the plugin generated at build time.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ */
+export declare function getImageClass(src: string, imagePrefix: string, assetPath: string): string;
+/**
+ * Builds the full className string for the <picture> wrapper element.
+ *
+ * @param src         - Raw src prop value
+ * @param imagePrefix - e.g. "image-"
+ * @param assetPath   - Value of __PLUGIN_ASSET_PATH__ (pass '' if not defined)
+ * @param extraClass  - Any additional class(es) passed by the consumer (e.g. className prop)
+ */
+export declare function getWrapperClass(src: string, imagePrefix: string, assetPath: string, extraClass?: string): string;
+/**
+ * Returns the CSS class string for the <img> element based on lazy-load state.
+ *
+ * @param lazy     - Whether lazy loading is enabled
+ * @param isLoaded - Whether the image has been loaded (intersected)
+ */
+export declare function getLazyClass(lazy: boolean, isLoaded: boolean): string;
+/**
+ * Creates an IntersectionObserver that fires `onIntersect` once when the given
+ * element enters the viewport, then automatically stops observing.
+ *
+ * @param element      - The DOM element to observe
+ * @param onIntersect  - Callback invoked when the element intersects
+ * @param threshold    - Intersection threshold (default 0.1)
+ * @returns The created IntersectionObserver (call .disconnect() to clean up early)
+ */
+export declare function createLazyObserver(element: Element, onIntersect: () => void, threshold?: number): IntersectionObserver;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@place-framework/place-block-image",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A utility package for generating CSS custom properties from image dimensions to prevent layout shift",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -48,9 +48,11 @@
     "@types/glob": "^8.1.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/language-core": "^3.1.8",
     "typescript": "^5.0.0",
-    "vite": "^5.4.21"
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
   },
   "dependencies": {
     "glob": "^10.0.0",

package/tsconfig.vue.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "baseUrl": "."
+  },
+  "include": ["src/vue/**/*", "src/utils/**/*", "src/constants/**/*"]
+}

package/vite.react.config.mts

@@ -1,10 +1,18 @@
 import { resolve } from 'path';
 import type { UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
-
-// Builds src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs}
+// Builds src/react/PlaceBlockImage.tsx → dist/react/PlaceBlockImage.{js,cjs,d.ts}
 // React and its runtime are kept external — consumers supply their own.
 export const reactConfig: UserConfig = {
+  plugins: [
+    dts({
+      include: ['src/react/PlaceBlockImage.tsx'],
+      outDirs: 'dist/react',
+      entryRoot: 'src/react',
+      tsconfigPath: './tsconfig.json',
+    }),
+  ],
   build: {
     outDir: 'dist/react',
     emptyOutDir: true,

package/vite.vue.config.mts

@@ -1,12 +1,22 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import type { UserConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
-
-// Builds src/vue/PlaceBlockImage.vue → dist/vue/PlaceBlockImage.{js,cjs}
+// Builds src/vue/PlaceBlockImage.vue → dist/vue/PlaceBlockImage.{js,cjs,d.ts}
 // Vue and its runtime are kept external — consumers supply their own.
 export const vueConfig: UserConfig = {
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    dts({
+      outDirs: 'dist/vue',
+      entryRoot: 'src/vue',
+      tsconfigPath: './tsconfig.vue.json',
+      processor: 'vue',
+      cleanVueFileName: true,
+      staticImport: true,
+    }),
+  ],
   build: {
     outDir: 'dist/vue',
     emptyOutDir: true,