vistaview 1.0.3 → 2.0.0

package/extensions/wistia-video/dist/main.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vistaview`)):typeof define==`function`&&define.amd?define([`exports`,`vistaview`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VistaView=e.VistaView||{},e.VistaView))})(this,function(e,t){function n(e){if(!e)return null;for(let t of[/wistia\.com\/medias\/([a-zA-Z0-9]+)/,/wistia\.net\/embed\/iframe\/([a-zA-Z0-9]+)/]){let n=e.match(t);if(n&&n[1])return n[1]}return null}async function r(e){let t=n(e);if(!t)throw Error(`Invalid Wistia video URL`);try{return(await(await fetch(`https://fast.wistia.com/oembed?url=https://home.wistia.com/medias/${t}`)).json()).thumbnail_url}catch(e){throw console.error(`Failed to fetch Wistia thumbnail:`,e),Error(`Failed to fetch Wistia thumbnail`)}}var i=class extends t.VistaBox{element;url;constructor(e){super(e);let t=e.elm.config.src;this.url=t;let r=document.createElement(`div`);r.style.position=`relative`,r.style.overflow=`hidden`,r.style.borderRadius=`14px`;let i=document.createElement(`img`);r.appendChild(i),i.style.width=`100%`,i.style.height=`100%`,i.style.objectFit=`cover`,i.src=this.origin?.image.src||``,i.classList.add(`vvw--pulsing`),this.element=r,this.element.classList.add(`vvw-img-hi`);let{width:a,height:o}=this.getFullSizeDim();if(this.fullH=o,this.fullW=a,this.minW=this.fullW*.5,this.maxW=this.fullW,this.element.style.width=`${a}px`,this.element.style.height=`${o}px`,this.setSizes({stableSize:!1,initDimension:!0}),this.pos===0){let e=document.createElement(`iframe`);e.frameBorder=`0`,e.allow=`autoplay; fullscreen`,e.allowFullscreen=!0,e.width=`100%`,e.height=`100%`,e.style.position=`absolute`,e.style.top=`0`,e.style.left=`0`,e.style.opacity=`0`,e.style.transition=`opacity 333ms ease`,e.src=`https://fast.wistia.net/embed/iframe/${n(t)}?autoPlay=1`,r.appendChild(e),e.onload=()=>{e.style.opacity=`1`,i.classList.remove(`vvw--pulsing`)}}this.isLoadedResolved(!0)}getFullSizeDim(){let e=Math.min(window.innerWidth,800);return{width:e,height:e*9/16}}setFinalTransform(){return super.setFinalTransform({propagateEvent:!1})}};function a(){return{name:`wistiaVideo`,onInitializeImage:e=>{let t=e.elm.config.src;if(n(t))return new i(e)},onImageView:async(e,t)=>{let n=e.images.to[Math.floor(e.images.to.length/2)];n instanceof i&&t.deactivateUi([`download`,`zoomIn`,`zoomOut`],n)}}}e.VistaWistiaVideo=i,e.getWistiaThumbnail=r,e.parseWistiaVideoId=n,e.wistiaVideo=a});
+//# sourceMappingURL=main.umd.cjs.map

package/extensions/wistia-video/dist/main.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.umd.cjs","names":[],"sources":["../src/main.ts"],"sourcesContent":["import type { VistaData, VistaExtension, VistaImageParams, VistaView } from 'vistaview';\nimport { VistaBox } from 'vistaview';\n\n/**\n * Parse Wistia URL and extract video ID\n * Supports various Wistia URL formats:\n * - https://home.wistia.com/medias/VIDEO_ID\n * - https://fast.wistia.net/embed/iframe/VIDEO_ID\n * - https://ACCOUNT.wistia.com/medias/VIDEO_ID\n * @param url - Wistia video URL\n * @returns Video ID or null if not found\n */\nexport function parseWistiaVideoId(url: string): string | null {\n  if (!url) return null;\n\n  // Try different Wistia URL patterns\n  const patterns = [\n    /wistia\\.com\\/medias\\/([a-zA-Z0-9]+)/,\n    /wistia\\.net\\/embed\\/iframe\\/([a-zA-Z0-9]+)/,\n  ];\n\n  for (const pattern of patterns) {\n    const match = url.match(pattern);\n    if (match && match[1]) {\n      return match[1];\n    }\n  }\n\n  return null;\n}\n\n/**\n * Get Wistia video thumbnail URL using oEmbed API\n * Note: This fetches data asynchronously from Wistia's oEmbed endpoint\n * @param videoUrl - Wistia video URL\n * @returns Promise with thumbnail URL\n */\nexport async function getWistiaThumbnail(videoUrl: string): Promise<string> {\n  const videoId = parseWistiaVideoId(videoUrl);\n\n  if (!videoId) {\n    throw new Error('Invalid Wistia video URL');\n  }\n\n  try {\n    const response = await fetch(\n      `https://fast.wistia.com/oembed?url=https://home.wistia.com/medias/${videoId}`\n    );\n    const data = await response.json();\n    return data.thumbnail_url;\n  } catch (error) {\n    // Fallback: return a placeholder or rethrow\n    console.error('Failed to fetch Wistia thumbnail:', error);\n    throw new Error('Failed to fetch Wistia thumbnail');\n  }\n}\n\nexport class VistaWistiaVideo extends VistaBox {\n  element: HTMLDivElement;\n  url: string;\n\n  constructor(par: VistaImageParams) {\n    super(par);\n\n    const url = par.elm.config.src;\n    this.url = url;\n\n    const div = document.createElement('div');\n    div.style.position = 'relative';\n    div.style.overflow = 'hidden';\n    div.style.borderRadius = '14px';\n    const image = document.createElement('img');\n    div.appendChild(image);\n    image.style.width = '100%';\n    image.style.height = '100%';\n    image.style.objectFit = 'cover';\n    image.src = this.origin?.image.src || ''; // use existing thumbnail if available\n    image.classList.add('vvw--pulsing');\n\n    this.element = div;\n\n    this.element.classList.add('vvw-img-hi');\n\n    // set sizes\n    const { width: fullWidth, height: fullHeight } = this.getFullSizeDim();\n    this.fullH = fullHeight;\n    this.fullW = fullWidth;\n    this.minW = this.fullW * 0.5;\n    this.maxW = this.fullW; // no scaling\n    this.element.style.width = `${fullWidth}px`;\n    this.element.style.height = `${fullHeight}px`;\n\n    // trigger setSizes to setup thumb and iframe initial style\n    this.setSizes({ stableSize: false, initDimension: true });\n\n    if (this.pos === 0) {\n      const iframe = document.createElement('iframe');\n      iframe.frameBorder = '0';\n      iframe.allow = 'autoplay; fullscreen';\n      iframe.allowFullscreen = true;\n      iframe.width = '100%';\n      iframe.height = '100%';\n      iframe.style.position = 'absolute';\n      iframe.style.top = '0';\n      iframe.style.left = '0';\n      iframe.style.opacity = '0';\n      iframe.style.transition = 'opacity 333ms ease';\n      iframe.src = `https://fast.wistia.net/embed/iframe/${parseWistiaVideoId(url)}?autoPlay=1`;\n      div.appendChild(iframe);\n\n      iframe.onload = () => {\n        iframe.style.opacity = '1';\n        image.classList.remove('vvw--pulsing');\n      };\n    }\n\n    this.isLoadedResolved!(true);\n  }\n\n  // the default full size is the scaled thumbnail size\n  // so we change it to 16:9 full window width size (or max 800px)\n  protected getFullSizeDim(): { width: number; height: number } {\n    const maxWidth = Math.min(window.innerWidth, 800);\n    return {\n      width: maxWidth,\n      height: (maxWidth * 9) / 16,\n    };\n  }\n\n  // override to avoid propagating content change event\n  // (because no change will happen on iframe)\n  setFinalTransform() {\n    return super.setFinalTransform({ propagateEvent: false });\n  }\n}\n\nexport function wistiaVideo(): VistaExtension {\n  return {\n    name: 'wistiaVideo',\n    onInitializeImage: (params: VistaImageParams) => {\n      const url = params.elm.config.src;\n      const videoId = parseWistiaVideoId(url);\n      if (!videoId) return;\n\n      return new VistaWistiaVideo(params);\n    },\n    onImageView: async (data: VistaData, v: VistaView) => {\n      const mainData = data.images.to![Math.floor(data.images.to!.length / 2)];\n      if (mainData instanceof VistaWistiaVideo) {\n        v.deactivateUi(['download', 'zoomIn', 'zoomOut'], mainData);\n      }\n    },\n  };\n}\n"],"mappings":"gRAYA,SAAgB,EAAmB,EAA4B,CAC7D,GAAI,CAAC,EAAK,OAAO,KAQjB,IAAK,IAAM,IALM,CACf,sCACA,6CACD,CAE+B,CAC9B,IAAM,EAAQ,EAAI,MAAM,EAAQ,CAChC,GAAI,GAAS,EAAM,GACjB,OAAO,EAAM,GAIjB,OAAO,KAST,eAAsB,EAAmB,EAAmC,CAC1E,IAAM,EAAU,EAAmB,EAAS,CAE5C,GAAI,CAAC,EACH,MAAU,MAAM,2BAA2B,CAG7C,GAAI,CAKF,OADa,MAHI,MAAM,MACrB,qEAAqE,IACtE,EAC2B,MAAM,EACtB,oBACL,EAAO,CAGd,MADA,QAAQ,MAAM,oCAAqC,EAAM,CAC/C,MAAM,mCAAmC,EAIvD,IAAa,EAAb,cAAsC,EAAA,QAAS,CAC7C,QACA,IAEA,YAAY,EAAuB,CACjC,MAAM,EAAI,CAEV,IAAM,EAAM,EAAI,IAAI,OAAO,IAC3B,KAAK,IAAM,EAEX,IAAM,EAAM,SAAS,cAAc,MAAM,CACzC,EAAI,MAAM,SAAW,WACrB,EAAI,MAAM,SAAW,SACrB,EAAI,MAAM,aAAe,OACzB,IAAM,EAAQ,SAAS,cAAc,MAAM,CAC3C,EAAI,YAAY,EAAM,CACtB,EAAM,MAAM,MAAQ,OACpB,EAAM,MAAM,OAAS,OACrB,EAAM,MAAM,UAAY,QACxB,EAAM,IAAM,KAAK,QAAQ,MAAM,KAAO,GACtC,EAAM,UAAU,IAAI,eAAe,CAEnC,KAAK,QAAU,EAEf,KAAK,QAAQ,UAAU,IAAI,aAAa,CAGxC,GAAM,CAAE,MAAO,EAAW,OAAQ,GAAe,KAAK,gBAAgB,CAWtE,GAVA,KAAK,MAAQ,EACb,KAAK,MAAQ,EACb,KAAK,KAAO,KAAK,MAAQ,GACzB,KAAK,KAAO,KAAK,MACjB,KAAK,QAAQ,MAAM,MAAQ,GAAG,EAAU,IACxC,KAAK,QAAQ,MAAM,OAAS,GAAG,EAAW,IAG1C,KAAK,SAAS,CAAE,WAAY,GAAO,cAAe,GAAM,CAAC,CAErD,KAAK,MAAQ,EAAG,CAClB,IAAM,EAAS,SAAS,cAAc,SAAS,CAC/C,EAAO,YAAc,IACrB,EAAO,MAAQ,uBACf,EAAO,gBAAkB,GACzB,EAAO,MAAQ,OACf,EAAO,OAAS,OAChB,EAAO,MAAM,SAAW,WACxB,EAAO,MAAM,IAAM,IACnB,EAAO,MAAM,KAAO,IACpB,EAAO,MAAM,QAAU,IACvB,EAAO,MAAM,WAAa,qBAC1B,EAAO,IAAM,wCAAwC,EAAmB,EAAI,CAAC,aAC7E,EAAI,YAAY,EAAO,CAEvB,EAAO,WAAe,CACpB,EAAO,MAAM,QAAU,IACvB,EAAM,UAAU,OAAO,eAAe,EAI1C,KAAK,iBAAkB,GAAK,CAK9B,gBAA8D,CAC5D,IAAM,EAAW,KAAK,IAAI,OAAO,WAAY,IAAI,CACjD,MAAO,CACL,MAAO,EACP,OAAS,EAAW,EAAK,GAC1B,CAKH,mBAAoB,CAClB,OAAO,MAAM,kBAAkB,CAAE,eAAgB,GAAO,CAAC,GAI7D,SAAgB,GAA8B,CAC5C,MAAO,CACL,KAAM,cACN,kBAAoB,GAA6B,CAC/C,IAAM,EAAM,EAAO,IAAI,OAAO,IACd,KAAmB,EAAI,CAGvC,OAAO,IAAI,EAAiB,EAAO,EAErC,YAAa,MAAO,EAAiB,IAAiB,CACpD,IAAM,EAAW,EAAK,OAAO,GAAI,KAAK,MAAM,EAAK,OAAO,GAAI,OAAS,EAAE,EACnE,aAAoB,GACtB,EAAE,aAAa,CAAC,WAAY,SAAU,UAAU,CAAE,EAAS,EAGhE"}

package/{dist/lib/extensions/youtube-video.d.ts → extensions/youtube-video/dist/main.d.ts}

@@ -1,5 +1,5 @@
-import { VistaExtension, VistaImageParams } from '../types';
-import { VistaBox } from '../vista-box';
+import type { VistaExtension, VistaImageParams } from 'vistaview';
+import { VistaBox } from 'vistaview';
 /**
  * Parse YouTube URL and extract video ID
  * Supports various YouTube URL formats:
@@ -35,4 +35,4 @@ export declare class VistaYoutubeVideo extends VistaBox {
     } | undefined;
 }
 export declare function youtubeVideo(): VistaExtension;
-//# sourceMappingURL=youtube-video.d.ts.map
+//# sourceMappingURL=main.d.ts.map

package/extensions/youtube-video/dist/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,cAAc,EAAE,gBAAgB,EAAa,MAAM,WAAW,CAAC;AACxF,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAoB9D;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,EAChB,OAAO,GAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAgB,GACxD,MAAM,CAeR;AAED,qBAAa,iBAAkB,SAAQ,QAAQ;IAC7C,OAAO,EAAE,cAAc,CAAC;IACxB,GAAG,EAAE,MAAM,CAAC;gBAEA,GAAG,EAAE,gBAAgB;IA0DjC,SAAS,CAAC,cAAc,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAU7D,iBAAiB;;;;CAGlB;AAED,wBAAgB,YAAY,IAAI,cAAc,CAiB7C"}

package/extensions/youtube-video/dist/main.js

@@ -0,0 +1,80 @@
+import { VistaBox } from "vistaview";
+function parseYouTubeVideoId(e) {
+	if (!e) return null;
+	for (let t of [
+		/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/v\/([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/live\/([a-zA-Z0-9_-]{11})/,
+		/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/
+	]) {
+		let n = e.match(t);
+		if (n && n[1]) return n[1];
+	}
+	return null;
+}
+function getYouTubeThumbnail(e, n = "hq") {
+	let r = {
+		maxres: "maxresdefault.jpg",
+		hq: "hqdefault.jpg",
+		mq: "mqdefault.jpg",
+		sd: "sddefault.jpg",
+		default: "default.jpg"
+	}, i = parseYouTubeVideoId(e);
+	if (!i) throw Error("Invalid YouTube video URL");
+	return `https://img.youtube.com/vi/${i}/${r[n]}`;
+}
+var VistaYoutubeVideo = class extends VistaBox {
+	element;
+	url;
+	constructor(e) {
+		super(e);
+		let r = e.elm.config.src;
+		this.url = r;
+		let i = document.createElement("div");
+		i.style.position = "relative";
+		let a = document.createElement("img");
+		i.appendChild(a), a.src = this.origin?.image.src || getYouTubeThumbnail(r, "hq"), a.style.width = "100%", a.style.height = "100%", a.style.objectFit = "cover", a.classList.add("vvw--pulsing"), this.element = i, this.element.classList.add("vvw-img-hi");
+		let { width: o, height: s } = this.getFullSizeDim();
+		if (this.fullH = s, this.fullW = o, this.minW = this.fullW * .5, this.maxW = this.fullW, this.element.style.width = `${o}px`, this.element.style.height = `${s}px`, this.setSizes({
+			stableSize: !1,
+			initDimension: !0
+		}), this.pos === 0) {
+			let e = document.createElement("iframe");
+			e.frameBorder = "0", e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", e.allowFullscreen = !0, e.width = "100%", e.height = "100%", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.opacity = "0", e.style.transition = "opacity 333ms ease", e.src = `https://www.youtube.com/embed/${parseYouTubeVideoId(r)}?autoplay=1&rel=0`, i.appendChild(e), e.onload = () => {
+				e.style.opacity = "1", a.classList.remove("vvw--pulsing");
+			};
+		}
+		this.isLoadedResolved(!0);
+	}
+	getFullSizeDim() {
+		let e = Math.min(window.innerWidth, 800);
+		return {
+			width: e,
+			height: e * 9 / 16
+		};
+	}
+	setFinalTransform() {
+		return super.setFinalTransform({ propagateEvent: !1 });
+	}
+};
+function youtubeVideo() {
+	return {
+		name: "youtubeVideo",
+		onInitializeImage: (e) => {
+			let n = e.elm.config.src;
+			if (parseYouTubeVideoId(n)) return new VistaYoutubeVideo(e);
+		},
+		onImageView: async (e, t) => {
+			let n = e.images.to[Math.floor(e.images.to.length / 2)];
+			n instanceof VistaYoutubeVideo && t.deactivateUi([
+				"download",
+				"zoomIn",
+				"zoomOut"
+			], n);
+		}
+	};
+}
+export { VistaYoutubeVideo, getYouTubeThumbnail, parseYouTubeVideoId, youtubeVideo };
+
+//# sourceMappingURL=main.js.map

package/extensions/youtube-video/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":[],"sources":["../src/main.ts"],"sourcesContent":["import type { VistaData, VistaExtension, VistaImageParams, VistaView } from 'vistaview';\nimport { VistaBox } from 'vistaview';\n\n/**\n * Parse YouTube URL and extract video ID\n * Supports various YouTube URL formats:\n * - https://www.youtube.com/watch?v=VIDEO_ID\n * - https://youtu.be/VIDEO_ID\n * - https://www.youtube.com/embed/VIDEO_ID\n * - https://m.youtube.com/watch?v=VIDEO_ID\n * - https://www.youtube.com/v/VIDEO_ID\n * - https://www.youtube.com/live/VIDEO_ID\n * - https://www.youtube.com/shorts/VIDEO_ID\n * @param url - YouTube video URL\n * @returns Video ID or null if not found\n */\nexport function parseYouTubeVideoId(url: string): string | null {\n  if (!url) return null;\n\n  // Try different YouTube URL patterns\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/embed\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/v\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/live\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/,\n  ];\n\n  for (const pattern of patterns) {\n    const match = url.match(pattern);\n    if (match && match[1]) {\n      return match[1];\n    }\n  }\n\n  return null;\n}\n\n/**\n * Get YouTube video thumbnail URL\n * @param videoUrl - YouTube video URL\n * @param quality - Thumbnail quality: 'maxres' | 'hq' | 'mq' | 'sd' | 'default'\n * @returns Thumbnail URL\n */\nexport function getYouTubeThumbnail(\n  videoUrl: string,\n  quality: 'maxres' | 'hq' | 'mq' | 'sd' | 'default' = 'hq'\n): string {\n  const qualityMap = {\n    maxres: 'maxresdefault.jpg',\n    hq: 'hqdefault.jpg',\n    mq: 'mqdefault.jpg',\n    sd: 'sddefault.jpg',\n    default: 'default.jpg',\n  };\n\n  const videoId = parseYouTubeVideoId(videoUrl);\n  if (!videoId) {\n    throw new Error('Invalid YouTube video URL');\n  }\n\n  return `https://img.youtube.com/vi/${videoId}/${qualityMap[quality]}`;\n}\n\nexport class VistaYoutubeVideo extends VistaBox {\n  element: HTMLDivElement;\n  url: string;\n\n  constructor(par: VistaImageParams) {\n    super(par);\n\n    const url = par.elm.config.src;\n    this.url = url;\n\n    const div = document.createElement('div');\n    div.style.position = 'relative';\n    const image = document.createElement('img');\n    div.appendChild(image);\n    image.src = this.origin?.image.src || getYouTubeThumbnail(url, 'hq');\n    image.style.width = '100%';\n    image.style.height = '100%';\n    image.style.objectFit = 'cover';\n    image.classList.add('vvw--pulsing');\n    this.element = div;\n\n    this.element.classList.add('vvw-img-hi');\n\n    // set sizes\n    const { width: fullWidth, height: fullHeight } = this.getFullSizeDim();\n    this.fullH = fullHeight;\n    this.fullW = fullWidth;\n    this.minW = this.fullW * 0.5;\n    this.maxW = this.fullW; // no scaling\n    this.element.style.width = `${fullWidth}px`;\n    this.element.style.height = `${fullHeight}px`;\n\n    // trigger setSizes to setup thumb and iframe initial style\n    this.setSizes({ stableSize: false, initDimension: true });\n\n    if (this.pos === 0) {\n      const iframe = document.createElement('iframe');\n      iframe.frameBorder = '0';\n      iframe.allow =\n        'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';\n      iframe.allowFullscreen = true;\n      iframe.width = '100%';\n      iframe.height = '100%';\n      iframe.style.position = 'absolute';\n      iframe.style.top = '0';\n      iframe.style.left = '0';\n      iframe.style.opacity = '0';\n      iframe.style.transition = 'opacity 333ms ease';\n      iframe.src = `https://www.youtube.com/embed/${parseYouTubeVideoId(url)}?autoplay=1&rel=0`;\n      div.appendChild(iframe);\n\n      iframe.onload = () => {\n        iframe.style.opacity = '1';\n        image.classList.remove('vvw--pulsing');\n      };\n    }\n\n    this.isLoadedResolved!(true);\n  }\n\n  // the default full size is the scaled thumbnail size\n  // so we change it to 16:9 full window width size (or max 800px)\n  protected getFullSizeDim(): { width: number; height: number } {\n    const maxWidth = Math.min(window.innerWidth, 800);\n    return {\n      width: maxWidth,\n      height: (maxWidth * 9) / 16,\n    };\n  }\n\n  // override to avoid propagating content change event\n  // (because no change will happen on iframe)\n  setFinalTransform() {\n    return super.setFinalTransform({ propagateEvent: false });\n  }\n}\n\nexport function youtubeVideo(): VistaExtension {\n  return {\n    name: 'youtubeVideo',\n    onInitializeImage: (params: VistaImageParams) => {\n      const url = params.elm.config.src;\n      const videoId = parseYouTubeVideoId(url);\n      if (!videoId) return;\n\n      return new VistaYoutubeVideo(params);\n    },\n    onImageView: async (data: VistaData, v: VistaView) => {\n      const mainData = data.images.to![Math.floor(data.images.to!.length / 2)];\n      if (mainData instanceof VistaYoutubeVideo) {\n        v.deactivateUi(['download', 'zoomIn', 'zoomOut'], mainData);\n      }\n    },\n  };\n}\n"],"mappings":";AAgBA,SAAgB,oBAAoB,GAA4B;AAC9D,KAAI,CAAC,EAAK,QAAO;AAWjB,MAAK,IAAM,KARM;EACf;EACA;EACA;EACA;EACA;EACD,EAE+B;EAC9B,IAAM,IAAQ,EAAI,MAAM,EAAQ;AAChC,MAAI,KAAS,EAAM,GACjB,QAAO,EAAM;;AAIjB,QAAO;;AAST,SAAgB,oBACd,GACA,IAAqD,MAC7C;CACR,IAAM,IAAa;EACjB,QAAQ;EACR,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACV,EAEK,IAAU,oBAAoB,EAAS;AAC7C,KAAI,CAAC,EACH,OAAU,MAAM,4BAA4B;AAG9C,QAAO,8BAA8B,EAAQ,GAAG,EAAW;;AAG7D,IAAa,oBAAb,cAAuC,SAAS;CAC9C;CACA;CAEA,YAAY,GAAuB;AACjC,QAAM,EAAI;EAEV,IAAM,IAAM,EAAI,IAAI,OAAO;AAC3B,OAAK,MAAM;EAEX,IAAM,IAAM,SAAS,cAAc,MAAM;AACzC,IAAI,MAAM,WAAW;EACrB,IAAM,IAAQ,SAAS,cAAc,MAAM;AAS3C,EARA,EAAI,YAAY,EAAM,EACtB,EAAM,MAAM,KAAK,QAAQ,MAAM,OAAO,oBAAoB,GAAK,KAAK,EACpE,EAAM,MAAM,QAAQ,QACpB,EAAM,MAAM,SAAS,QACrB,EAAM,MAAM,YAAY,SACxB,EAAM,UAAU,IAAI,eAAe,EACnC,KAAK,UAAU,GAEf,KAAK,QAAQ,UAAU,IAAI,aAAa;EAGxC,IAAM,EAAE,OAAO,GAAW,QAAQ,MAAe,KAAK,gBAAgB;AAWtE,MAVA,KAAK,QAAQ,GACb,KAAK,QAAQ,GACb,KAAK,OAAO,KAAK,QAAQ,IACzB,KAAK,OAAO,KAAK,OACjB,KAAK,QAAQ,MAAM,QAAQ,GAAG,EAAU,KACxC,KAAK,QAAQ,MAAM,SAAS,GAAG,EAAW,KAG1C,KAAK,SAAS;GAAE,YAAY;GAAO,eAAe;GAAM,CAAC,EAErD,KAAK,QAAQ,GAAG;GAClB,IAAM,IAAS,SAAS,cAAc,SAAS;AAe/C,GAdA,EAAO,cAAc,KACrB,EAAO,QACL,uGACF,EAAO,kBAAkB,IACzB,EAAO,QAAQ,QACf,EAAO,SAAS,QAChB,EAAO,MAAM,WAAW,YACxB,EAAO,MAAM,MAAM,KACnB,EAAO,MAAM,OAAO,KACpB,EAAO,MAAM,UAAU,KACvB,EAAO,MAAM,aAAa,sBAC1B,EAAO,MAAM,iCAAiC,oBAAoB,EAAI,CAAC,oBACvE,EAAI,YAAY,EAAO,EAEvB,EAAO,eAAe;AAEpB,IADA,EAAO,MAAM,UAAU,KACvB,EAAM,UAAU,OAAO,eAAe;;;AAI1C,OAAK,iBAAkB,GAAK;;CAK9B,iBAA8D;EAC5D,IAAM,IAAW,KAAK,IAAI,OAAO,YAAY,IAAI;AACjD,SAAO;GACL,OAAO;GACP,QAAS,IAAW,IAAK;GAC1B;;CAKH,oBAAoB;AAClB,SAAO,MAAM,kBAAkB,EAAE,gBAAgB,IAAO,CAAC;;;AAI7D,SAAgB,eAA+B;AAC7C,QAAO;EACL,MAAM;EACN,oBAAoB,MAA6B;GAC/C,IAAM,IAAM,EAAO,IAAI,OAAO;AACd,2BAAoB,EAAI,CAGxC,QAAO,IAAI,kBAAkB,EAAO;;EAEtC,aAAa,OAAO,GAAiB,MAAiB;GACpD,IAAM,IAAW,EAAK,OAAO,GAAI,KAAK,MAAM,EAAK,OAAO,GAAI,SAAS,EAAE;AACvE,GAAI,aAAoB,qBACtB,EAAE,aAAa;IAAC;IAAY;IAAU;IAAU,EAAE,EAAS;;EAGhE"}

package/extensions/youtube-video/dist/main.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.test.d.ts.map

package/extensions/youtube-video/dist/main.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.test.d.ts","sourceRoot":"","sources":["../src/main.test.ts"],"names":[],"mappings":""}

package/extensions/youtube-video/dist/main.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vistaview`)):typeof define==`function`&&define.amd?define([`exports`,`vistaview`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VistaView=e.VistaView||{},e.VistaView))})(this,function(e,t){function n(e){if(!e)return null;for(let t of[/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/,/youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/,/youtube\.com\/v\/([a-zA-Z0-9_-]{11})/,/youtube\.com\/live\/([a-zA-Z0-9_-]{11})/,/youtube\.com\/shorts\/([a-zA-Z0-9_-]{11})/]){let n=e.match(t);if(n&&n[1])return n[1]}return null}function r(e,t=`hq`){let r={maxres:`maxresdefault.jpg`,hq:`hqdefault.jpg`,mq:`mqdefault.jpg`,sd:`sddefault.jpg`,default:`default.jpg`},i=n(e);if(!i)throw Error(`Invalid YouTube video URL`);return`https://img.youtube.com/vi/${i}/${r[t]}`}var i=class extends t.VistaBox{element;url;constructor(e){super(e);let t=e.elm.config.src;this.url=t;let i=document.createElement(`div`);i.style.position=`relative`;let a=document.createElement(`img`);i.appendChild(a),a.src=this.origin?.image.src||r(t,`hq`),a.style.width=`100%`,a.style.height=`100%`,a.style.objectFit=`cover`,a.classList.add(`vvw--pulsing`),this.element=i,this.element.classList.add(`vvw-img-hi`);let{width:o,height:s}=this.getFullSizeDim();if(this.fullH=s,this.fullW=o,this.minW=this.fullW*.5,this.maxW=this.fullW,this.element.style.width=`${o}px`,this.element.style.height=`${s}px`,this.setSizes({stableSize:!1,initDimension:!0}),this.pos===0){let e=document.createElement(`iframe`);e.frameBorder=`0`,e.allow=`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,e.allowFullscreen=!0,e.width=`100%`,e.height=`100%`,e.style.position=`absolute`,e.style.top=`0`,e.style.left=`0`,e.style.opacity=`0`,e.style.transition=`opacity 333ms ease`,e.src=`https://www.youtube.com/embed/${n(t)}?autoplay=1&rel=0`,i.appendChild(e),e.onload=()=>{e.style.opacity=`1`,a.classList.remove(`vvw--pulsing`)}}this.isLoadedResolved(!0)}getFullSizeDim(){let e=Math.min(window.innerWidth,800);return{width:e,height:e*9/16}}setFinalTransform(){return super.setFinalTransform({propagateEvent:!1})}};function a(){return{name:`youtubeVideo`,onInitializeImage:e=>{let t=e.elm.config.src;if(n(t))return new i(e)},onImageView:async(e,t)=>{let n=e.images.to[Math.floor(e.images.to.length/2)];n instanceof i&&t.deactivateUi([`download`,`zoomIn`,`zoomOut`],n)}}}e.VistaYoutubeVideo=i,e.getYouTubeThumbnail=r,e.parseYouTubeVideoId=n,e.youtubeVideo=a});
+//# sourceMappingURL=main.umd.cjs.map

package/extensions/youtube-video/dist/main.umd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.umd.cjs","names":[],"sources":["../src/main.ts"],"sourcesContent":["import type { VistaData, VistaExtension, VistaImageParams, VistaView } from 'vistaview';\nimport { VistaBox } from 'vistaview';\n\n/**\n * Parse YouTube URL and extract video ID\n * Supports various YouTube URL formats:\n * - https://www.youtube.com/watch?v=VIDEO_ID\n * - https://youtu.be/VIDEO_ID\n * - https://www.youtube.com/embed/VIDEO_ID\n * - https://m.youtube.com/watch?v=VIDEO_ID\n * - https://www.youtube.com/v/VIDEO_ID\n * - https://www.youtube.com/live/VIDEO_ID\n * - https://www.youtube.com/shorts/VIDEO_ID\n * @param url - YouTube video URL\n * @returns Video ID or null if not found\n */\nexport function parseYouTubeVideoId(url: string): string | null {\n  if (!url) return null;\n\n  // Try different YouTube URL patterns\n  const patterns = [\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/embed\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/v\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/live\\/([a-zA-Z0-9_-]{11})/,\n    /youtube\\.com\\/shorts\\/([a-zA-Z0-9_-]{11})/,\n  ];\n\n  for (const pattern of patterns) {\n    const match = url.match(pattern);\n    if (match && match[1]) {\n      return match[1];\n    }\n  }\n\n  return null;\n}\n\n/**\n * Get YouTube video thumbnail URL\n * @param videoUrl - YouTube video URL\n * @param quality - Thumbnail quality: 'maxres' | 'hq' | 'mq' | 'sd' | 'default'\n * @returns Thumbnail URL\n */\nexport function getYouTubeThumbnail(\n  videoUrl: string,\n  quality: 'maxres' | 'hq' | 'mq' | 'sd' | 'default' = 'hq'\n): string {\n  const qualityMap = {\n    maxres: 'maxresdefault.jpg',\n    hq: 'hqdefault.jpg',\n    mq: 'mqdefault.jpg',\n    sd: 'sddefault.jpg',\n    default: 'default.jpg',\n  };\n\n  const videoId = parseYouTubeVideoId(videoUrl);\n  if (!videoId) {\n    throw new Error('Invalid YouTube video URL');\n  }\n\n  return `https://img.youtube.com/vi/${videoId}/${qualityMap[quality]}`;\n}\n\nexport class VistaYoutubeVideo extends VistaBox {\n  element: HTMLDivElement;\n  url: string;\n\n  constructor(par: VistaImageParams) {\n    super(par);\n\n    const url = par.elm.config.src;\n    this.url = url;\n\n    const div = document.createElement('div');\n    div.style.position = 'relative';\n    const image = document.createElement('img');\n    div.appendChild(image);\n    image.src = this.origin?.image.src || getYouTubeThumbnail(url, 'hq');\n    image.style.width = '100%';\n    image.style.height = '100%';\n    image.style.objectFit = 'cover';\n    image.classList.add('vvw--pulsing');\n    this.element = div;\n\n    this.element.classList.add('vvw-img-hi');\n\n    // set sizes\n    const { width: fullWidth, height: fullHeight } = this.getFullSizeDim();\n    this.fullH = fullHeight;\n    this.fullW = fullWidth;\n    this.minW = this.fullW * 0.5;\n    this.maxW = this.fullW; // no scaling\n    this.element.style.width = `${fullWidth}px`;\n    this.element.style.height = `${fullHeight}px`;\n\n    // trigger setSizes to setup thumb and iframe initial style\n    this.setSizes({ stableSize: false, initDimension: true });\n\n    if (this.pos === 0) {\n      const iframe = document.createElement('iframe');\n      iframe.frameBorder = '0';\n      iframe.allow =\n        'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';\n      iframe.allowFullscreen = true;\n      iframe.width = '100%';\n      iframe.height = '100%';\n      iframe.style.position = 'absolute';\n      iframe.style.top = '0';\n      iframe.style.left = '0';\n      iframe.style.opacity = '0';\n      iframe.style.transition = 'opacity 333ms ease';\n      iframe.src = `https://www.youtube.com/embed/${parseYouTubeVideoId(url)}?autoplay=1&rel=0`;\n      div.appendChild(iframe);\n\n      iframe.onload = () => {\n        iframe.style.opacity = '1';\n        image.classList.remove('vvw--pulsing');\n      };\n    }\n\n    this.isLoadedResolved!(true);\n  }\n\n  // the default full size is the scaled thumbnail size\n  // so we change it to 16:9 full window width size (or max 800px)\n  protected getFullSizeDim(): { width: number; height: number } {\n    const maxWidth = Math.min(window.innerWidth, 800);\n    return {\n      width: maxWidth,\n      height: (maxWidth * 9) / 16,\n    };\n  }\n\n  // override to avoid propagating content change event\n  // (because no change will happen on iframe)\n  setFinalTransform() {\n    return super.setFinalTransform({ propagateEvent: false });\n  }\n}\n\nexport function youtubeVideo(): VistaExtension {\n  return {\n    name: 'youtubeVideo',\n    onInitializeImage: (params: VistaImageParams) => {\n      const url = params.elm.config.src;\n      const videoId = parseYouTubeVideoId(url);\n      if (!videoId) return;\n\n      return new VistaYoutubeVideo(params);\n    },\n    onImageView: async (data: VistaData, v: VistaView) => {\n      const mainData = data.images.to![Math.floor(data.images.to!.length / 2)];\n      if (mainData instanceof VistaYoutubeVideo) {\n        v.deactivateUi(['download', 'zoomIn', 'zoomOut'], mainData);\n      }\n    },\n  };\n}\n"],"mappings":"gRAgBA,SAAgB,EAAoB,EAA4B,CAC9D,GAAI,CAAC,EAAK,OAAO,KAWjB,IAAK,IAAM,IARM,CACf,6DACA,2CACA,uCACA,0CACA,4CACD,CAE+B,CAC9B,IAAM,EAAQ,EAAI,MAAM,EAAQ,CAChC,GAAI,GAAS,EAAM,GACjB,OAAO,EAAM,GAIjB,OAAO,KAST,SAAgB,EACd,EACA,EAAqD,KAC7C,CACR,IAAM,EAAa,CACjB,OAAQ,oBACR,GAAI,gBACJ,GAAI,gBACJ,GAAI,gBACJ,QAAS,cACV,CAEK,EAAU,EAAoB,EAAS,CAC7C,GAAI,CAAC,EACH,MAAU,MAAM,4BAA4B,CAG9C,MAAO,8BAA8B,EAAQ,GAAG,EAAW,KAG7D,IAAa,EAAb,cAAuC,EAAA,QAAS,CAC9C,QACA,IAEA,YAAY,EAAuB,CACjC,MAAM,EAAI,CAEV,IAAM,EAAM,EAAI,IAAI,OAAO,IAC3B,KAAK,IAAM,EAEX,IAAM,EAAM,SAAS,cAAc,MAAM,CACzC,EAAI,MAAM,SAAW,WACrB,IAAM,EAAQ,SAAS,cAAc,MAAM,CAC3C,EAAI,YAAY,EAAM,CACtB,EAAM,IAAM,KAAK,QAAQ,MAAM,KAAO,EAAoB,EAAK,KAAK,CACpE,EAAM,MAAM,MAAQ,OACpB,EAAM,MAAM,OAAS,OACrB,EAAM,MAAM,UAAY,QACxB,EAAM,UAAU,IAAI,eAAe,CACnC,KAAK,QAAU,EAEf,KAAK,QAAQ,UAAU,IAAI,aAAa,CAGxC,GAAM,CAAE,MAAO,EAAW,OAAQ,GAAe,KAAK,gBAAgB,CAWtE,GAVA,KAAK,MAAQ,EACb,KAAK,MAAQ,EACb,KAAK,KAAO,KAAK,MAAQ,GACzB,KAAK,KAAO,KAAK,MACjB,KAAK,QAAQ,MAAM,MAAQ,GAAG,EAAU,IACxC,KAAK,QAAQ,MAAM,OAAS,GAAG,EAAW,IAG1C,KAAK,SAAS,CAAE,WAAY,GAAO,cAAe,GAAM,CAAC,CAErD,KAAK,MAAQ,EAAG,CAClB,IAAM,EAAS,SAAS,cAAc,SAAS,CAC/C,EAAO,YAAc,IACrB,EAAO,MACL,sGACF,EAAO,gBAAkB,GACzB,EAAO,MAAQ,OACf,EAAO,OAAS,OAChB,EAAO,MAAM,SAAW,WACxB,EAAO,MAAM,IAAM,IACnB,EAAO,MAAM,KAAO,IACpB,EAAO,MAAM,QAAU,IACvB,EAAO,MAAM,WAAa,qBAC1B,EAAO,IAAM,iCAAiC,EAAoB,EAAI,CAAC,mBACvE,EAAI,YAAY,EAAO,CAEvB,EAAO,WAAe,CACpB,EAAO,MAAM,QAAU,IACvB,EAAM,UAAU,OAAO,eAAe,EAI1C,KAAK,iBAAkB,GAAK,CAK9B,gBAA8D,CAC5D,IAAM,EAAW,KAAK,IAAI,OAAO,WAAY,IAAI,CACjD,MAAO,CACL,MAAO,EACP,OAAS,EAAW,EAAK,GAC1B,CAKH,mBAAoB,CAClB,OAAO,MAAM,kBAAkB,CAAE,eAAgB,GAAO,CAAC,GAI7D,SAAgB,GAA+B,CAC7C,MAAO,CACL,KAAM,eACN,kBAAoB,GAA6B,CAC/C,IAAM,EAAM,EAAO,IAAI,OAAO,IACd,KAAoB,EAAI,CAGxC,OAAO,IAAI,EAAkB,EAAO,EAEtC,YAAa,MAAO,EAAiB,IAAiB,CACpD,IAAM,EAAW,EAAK,OAAO,GAAI,KAAK,MAAM,EAAK,OAAO,GAAI,OAAS,EAAE,EACnE,aAAoB,GACtB,EAAE,aAAa,CAAC,WAAY,SAAU,UAAU,CAAE,EAAS,EAGhE"}

package/frameworks/react/dist/main.d.ts

@@ -0,0 +1,3 @@
+export { useVistaView } from "./use-vistaview";
+export { VistaView } from "./vistaview";
+export type { VistaViewProps, VistaComponentRef } from "./vistaview";

package/frameworks/react/dist/main.es.js

@@ -0,0 +1,51 @@
+"use client";
+import { useCallback, useEffect, useId, useImperativeHandle, useRef } from "react";
+import { vistaView } from "vistaview";
+import { jsx } from "react/jsx-runtime";
+function useVistaView(a) {
+	let o = useRef(null);
+	return useEffect(() => (o.current = vistaView(a), () => {
+		o.current?.destroy(), o.current = null;
+	}), [a]), {
+		open: useCallback((e = 0) => o.current?.open(e), []),
+		close: useCallback(() => o.current?.close() ?? Promise.resolve(), []),
+		reset: useCallback(() => o.current?.reset(), []),
+		next: useCallback(() => o.current?.next(), []),
+		prev: useCallback(() => o.current?.prev(), []),
+		zoomIn: useCallback(() => o.current?.zoomIn(), []),
+		zoomOut: useCallback(() => o.current?.zoomOut(), []),
+		getCurrentIndex: useCallback(() => o.current?.getCurrentIndex() ?? -1, []),
+		view: useCallback((e) => o.current?.view(e), []),
+		destroy: useCallback(() => o.current?.destroy(), [])
+	};
+}
+const VistaView = (function({ children: e, selector: s = "> a", options: c, id: l, ref: u, ...d }) {
+	let f = useRef(null), p = useRef(null), m = useId(), h = l || `vvw-gallery-${m.replace(/:/g, "")}`;
+	return useImperativeHandle(u, () => ({
+		vistaView: p.current,
+		container: f.current
+	}), []), useEffect(() => {
+		if (f.current) return p.current = vistaView({
+			...c,
+			elements: `#${h} ${s}`
+		}), () => {
+			p.current?.destroy(), p.current = null;
+		};
+	}, [
+		h,
+		s,
+		c
+	]), useEffect(() => {
+		p.current?.reset();
+	}, [e]), /* @__PURE__ */ jsx("div", {
+		ref: (e) => {
+			f.current = e;
+		},
+		...d,
+		id: h,
+		children: e
+	});
+});
+export { VistaView, useVistaView };
+
+//# sourceMappingURL=main.es.js.map

package/frameworks/react/dist/main.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.es.js","names":[],"sources":["../src/use-vistaview.ts","../src/vistaview.tsx"],"sourcesContent":["\nimport { useEffect, useRef, useCallback } from 'react';\nimport { vistaView } from 'vistaview';\nimport type { VistaParams, VistaInterface } from 'vistaview';\n\nexport function useVistaView(options: VistaParams): VistaInterface {\n  const instance = useRef<VistaInterface | null>(null);\n\n  useEffect(() => {\n    instance.current = vistaView(options);\n    return () => {\n      instance.current?.destroy();\n      instance.current = null;\n    };\n  }, [options]);\n\n  return {\n    open: useCallback((i = 0) => instance.current?.open(i), []),\n    close: useCallback(() => instance.current?.close() ?? Promise.resolve(), []),\n    reset: useCallback(() => instance.current?.reset(), []),\n    next: useCallback(() => instance.current?.next(), []),\n    prev: useCallback(() => instance.current?.prev(), []),\n    zoomIn: useCallback(() => instance.current?.zoomIn(), []),\n    zoomOut: useCallback(() => instance.current?.zoomOut(), []),\n    getCurrentIndex: useCallback(() => instance.current?.getCurrentIndex() ?? -1, []),\n    view: useCallback((i: number) => instance.current?.view(i), []),\n    destroy: useCallback(() => instance.current?.destroy(), []),\n  };\n}","\nimport { useEffect, useRef, useId, useImperativeHandle } from 'react';\nimport type { ReactNode } from 'react';\nimport { vistaView } from 'vistaview';\nimport type { VistaInterface, VistaOpt } from 'vistaview';\n\nexport interface VistaViewProps {\n  children: ReactNode;\n  selector?: string;\n  options?: VistaOpt;\n  ref?: React.Ref<VistaComponentRef>;\n}\n\nexport type VistaComponentRef = { vistaView: VistaInterface | null; container: HTMLDivElement | null } | null;\n\nexport const VistaView = (function VistaView(\n  { children, selector = '> a', options, id, ref, ...rest }: VistaViewProps & React.HTMLAttributes<HTMLDivElement>\n) {\n  const containerRefInner = useRef<HTMLDivElement | null>(null);\n  const instanceRef = useRef<VistaInterface | null>(null);\n  const generatedId = useId();\n  const galleryId = id || `vvw-gallery-${generatedId.replace(/:/g, '')}`;\n\n  // expose { vistaView, container } on the component ref\n  useImperativeHandle(ref as React.Ref<VistaComponentRef>, () => ({\n    vistaView: instanceRef.current,\n    container: containerRefInner.current,\n  }), []);\n\n  useEffect(() => {\n    if (!containerRefInner.current) return;\n\n    instanceRef.current = vistaView({\n      ...options,\n      elements: `#${galleryId} ${selector}`,\n    });\n\n    return () => {\n      instanceRef.current?.destroy();\n      instanceRef.current = null;\n    };\n  }, [galleryId, selector, options]);\n\n  useEffect(() => {\n    // reset when children change\n    instanceRef.current?.reset();\n  }, [children]);\n\n  return (\n    <div ref={el => { containerRefInner.current = el }} {...rest} id={galleryId}>\n      {children}\n    </div>\n  );\n});\n\n"],"mappings":";;;;AAKA,SAAgB,aAAa,GAAsC;CACjE,IAAM,IAAW,OAA8B,KAAK;AAUpD,QARA,iBACE,EAAS,UAAU,UAAU,EAAQ,QACxB;AAEX,EADA,EAAS,SAAS,SAAS,EAC3B,EAAS,UAAU;KAEpB,CAAC,EAAQ,CAAC,EAEN;EACL,MAAM,aAAa,IAAI,MAAM,EAAS,SAAS,KAAK,EAAE,EAAE,EAAE,CAAC;EAC3D,OAAO,kBAAkB,EAAS,SAAS,OAAO,IAAI,QAAQ,SAAS,EAAE,EAAE,CAAC;EAC5E,OAAO,kBAAkB,EAAS,SAAS,OAAO,EAAE,EAAE,CAAC;EACvD,MAAM,kBAAkB,EAAS,SAAS,MAAM,EAAE,EAAE,CAAC;EACrD,MAAM,kBAAkB,EAAS,SAAS,MAAM,EAAE,EAAE,CAAC;EACrD,QAAQ,kBAAkB,EAAS,SAAS,QAAQ,EAAE,EAAE,CAAC;EACzD,SAAS,kBAAkB,EAAS,SAAS,SAAS,EAAE,EAAE,CAAC;EAC3D,iBAAiB,kBAAkB,EAAS,SAAS,iBAAiB,IAAI,IAAI,EAAE,CAAC;EACjF,MAAM,aAAa,MAAc,EAAS,SAAS,KAAK,EAAE,EAAE,EAAE,CAAC;EAC/D,SAAS,kBAAkB,EAAS,SAAS,SAAS,EAAE,EAAE,CAAC;EAC5D;;ACZH,MAAa,aAAa,SACxB,EAAE,aAAU,cAAW,OAAO,YAAS,OAAI,QAAK,GAAG,KACnD;CACA,IAAM,IAAoB,OAA8B,KAAK,EACvD,IAAc,OAA8B,KAAK,EACjD,IAAc,OAAO,EACrB,IAAY,KAAM,eAAe,EAAY,QAAQ,MAAM,GAAG;AA2BpE,QAxBA,oBAAoB,UAA4C;EAC9D,WAAW,EAAY;EACvB,WAAW,EAAkB;EAC9B,GAAG,EAAE,CAAC,EAEP,gBAAgB;AACT,QAAkB,QAOvB,QALA,EAAY,UAAU,UAAU;GAC9B,GAAG;GACH,UAAU,IAAI,EAAU,GAAG;GAC5B,CAAC,QAEW;AAEX,GADA,EAAY,SAAS,SAAS,EAC9B,EAAY,UAAU;;IAEvB;EAAC;EAAW;EAAU;EAAQ,CAAC,EAElC,gBAAgB;AAEd,IAAY,SAAS,OAAO;IAC3B,CAAC,EAAS,CAAC,EAGZ,oBAAC,OAAA;EAAI,MAAK,MAAM;AAAE,KAAkB,UAAU;;EAAM,GAAI;EAAM,IAAI;EAC/D;GACG"}

package/frameworks/react/dist/test-setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/frameworks/react/dist/use-vistaview.d.ts

@@ -0,0 +1,2 @@
+import type { VistaParams, VistaInterface } from 'vistaview';
+export declare function useVistaView(options: VistaParams): VistaInterface;

package/frameworks/react/dist/vistaview.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { VistaInterface, VistaOpt } from 'vistaview';
+export interface VistaViewProps {
+    children: ReactNode;
+    selector?: string;
+    options?: VistaOpt;
+    ref?: React.Ref<VistaComponentRef>;
+}
+export type VistaComponentRef = {
+    vistaView: VistaInterface | null;
+    container: HTMLDivElement | null;
+} | null;
+export declare const VistaView: ({ children, selector, options, id, ref, ...rest }: VistaViewProps & React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/frameworks/solid/dist/dev.js

@@ -0,0 +1,77 @@
+import { onMount, onCleanup, splitProps, children, createEffect } from 'solid-js';
+import { vistaView } from 'vistaview';
+import { template, use, spread, mergeProps, insert } from 'solid-js/web';
+
+// src/use-vistaview.ts
+function useVistaView(options) {
+  let instance = null;
+  onMount(() => {
+    instance = vistaView(options);
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+  return {
+    open: (i) => instance?.open(i),
+    close: () => instance?.close() ?? Promise.resolve(),
+    reset: () => instance?.reset(),
+    next: () => instance?.next(),
+    prev: () => instance?.prev(),
+    zoomIn: () => instance?.zoomIn(),
+    zoomOut: () => instance?.zoomOut(),
+    getCurrentIndex: () => instance?.getCurrentIndex() ?? -1,
+    view: (i) => instance?.view(i),
+    destroy: () => instance?.destroy()
+  };
+}
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function VistaView(props) {
+  let container;
+  let instance = null;
+  const [local, rest] = splitProps(props, ["selector", "options", "componentRef", "id", "children"]);
+  let galleryId = local.id || `vvw-gallery-${Math.random().toString(36).slice(2)}`;
+  const resolved = children(() => props.children);
+  createEffect(() => {
+    const nodes = resolved();
+    if (nodes && instance) {
+      instance.reset();
+    }
+  });
+  onMount(() => {
+    if (!container) {
+      console.warn("VistaView: container not yet mounted");
+      return;
+    }
+    const realId = container.id;
+    const selector = `#${realId} ${local.selector ?? "> a"}`;
+    const nodes = document.querySelectorAll(selector);
+    if (nodes.length > 0) {
+      instance?.destroy();
+      instance = vistaView({
+        ...local.options,
+        elements: selector
+      });
+      local.componentRef?.({
+        vistaView: instance,
+        container
+      });
+    }
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    local.componentRef?.(null);
+    instance = null;
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    use((el) => container = el, _el$);
+    spread(_el$, mergeProps(rest, {
+      "id": galleryId
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+
+export { VistaView, useVistaView };

package/frameworks/solid/dist/dev.jsx

@@ -0,0 +1,72 @@
+// src/use-vistaview.ts
+import { onMount, onCleanup } from "solid-js";
+import { vistaView } from "vistaview";
+function useVistaView(options) {
+  let instance = null;
+  onMount(() => {
+    instance = vistaView(options);
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+  return {
+    open: (i) => instance?.open(i),
+    close: () => instance?.close() ?? Promise.resolve(),
+    reset: () => instance?.reset(),
+    next: () => instance?.next(),
+    prev: () => instance?.prev(),
+    zoomIn: () => instance?.zoomIn(),
+    zoomOut: () => instance?.zoomOut(),
+    getCurrentIndex: () => instance?.getCurrentIndex() ?? -1,
+    view: (i) => instance?.view(i),
+    destroy: () => instance?.destroy()
+  };
+}
+
+// src/vistaview.tsx
+import { onCleanup as onCleanup2, onMount as onMount2, splitProps } from "solid-js";
+import { children, createEffect } from "solid-js";
+import { vistaView as vistaView2 } from "vistaview";
+function VistaView(props) {
+  let container;
+  let instance = null;
+  const [local, rest] = splitProps(props, ["selector", "options", "componentRef", "id", "children"]);
+  let galleryId = local.id || `vvw-gallery-${Math.random().toString(36).slice(2)}`;
+  const resolved = children(() => props.children);
+  createEffect(() => {
+    const nodes = resolved();
+    if (nodes && instance) {
+      instance.reset();
+    }
+  });
+  onMount2(() => {
+    if (!container) {
+      console.warn("VistaView: container not yet mounted");
+      return;
+    }
+    const realId = container.id;
+    const selector = `#${realId} ${local.selector ?? "> a"}`;
+    const nodes = document.querySelectorAll(selector);
+    if (nodes.length > 0) {
+      instance?.destroy();
+      instance = vistaView2({
+        ...local.options,
+        elements: selector
+      });
+      local.componentRef?.({ vistaView: instance, container });
+    }
+  });
+  onCleanup2(() => {
+    instance?.destroy();
+    local.componentRef?.(null);
+    instance = null;
+  });
+  return <div ref={(el) => container = el} {...rest} id={galleryId}>
+      {local.children}
+    </div>;
+}
+export {
+  VistaView,
+  useVistaView
+};

package/frameworks/solid/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { VistaParams, VistaInterface, VistaOpt } from 'vistaview';
+import { JSX } from 'solid-js';
+
+declare function useVistaView(options: VistaParams): VistaInterface;
+
+interface VistaViewProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    selector?: string;
+    options?: VistaOpt;
+    componentRef?: (obj: {
+        vistaView: VistaInterface | null;
+        container?: HTMLDivElement | undefined;
+    } | null) => void;
+    id?: string;
+    children?: any;
+}
+declare function VistaView(props: VistaViewProps): JSX.Element;
+
+export { VistaView, type VistaViewProps, useVistaView };

package/frameworks/solid/dist/index.js

@@ -0,0 +1,76 @@
+import { onMount, onCleanup, splitProps, children, createEffect } from 'solid-js';
+import { vistaView } from 'vistaview';
+import { template, use, spread, mergeProps, insert } from 'solid-js/web';
+
+// src/use-vistaview.ts
+function useVistaView(options) {
+  let instance = null;
+  onMount(() => {
+    instance = vistaView(options);
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+  return {
+    open: (i) => instance?.open(i),
+    close: () => instance?.close() ?? Promise.resolve(),
+    reset: () => instance?.reset(),
+    next: () => instance?.next(),
+    prev: () => instance?.prev(),
+    zoomIn: () => instance?.zoomIn(),
+    zoomOut: () => instance?.zoomOut(),
+    getCurrentIndex: () => instance?.getCurrentIndex() ?? -1,
+    view: (i) => instance?.view(i),
+    destroy: () => instance?.destroy()
+  };
+}
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function VistaView(props) {
+  let container;
+  let instance = null;
+  const [local, rest] = splitProps(props, ["selector", "options", "componentRef", "id", "children"]);
+  let galleryId = local.id || `vvw-gallery-${Math.random().toString(36).slice(2)}`;
+  const resolved = children(() => props.children);
+  createEffect(() => {
+    const nodes = resolved();
+    if (nodes && instance) {
+      instance.reset();
+    }
+  });
+  onMount(() => {
+    if (!container) {
+      return;
+    }
+    const realId = container.id;
+    const selector = `#${realId} ${local.selector ?? "> a"}`;
+    const nodes = document.querySelectorAll(selector);
+    if (nodes.length > 0) {
+      instance?.destroy();
+      instance = vistaView({
+        ...local.options,
+        elements: selector
+      });
+      local.componentRef?.({
+        vistaView: instance,
+        container
+      });
+    }
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    local.componentRef?.(null);
+    instance = null;
+  });
+  return (() => {
+    var _el$ = _tmpl$();
+    use((el) => container = el, _el$);
+    spread(_el$, mergeProps(rest, {
+      "id": galleryId
+    }), false, true);
+    insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+
+export { VistaView, useVistaView };

package/frameworks/solid/dist/index.jsx

@@ -0,0 +1,71 @@
+// src/use-vistaview.ts
+import { onMount, onCleanup } from "solid-js";
+import { vistaView } from "vistaview";
+function useVistaView(options) {
+  let instance = null;
+  onMount(() => {
+    instance = vistaView(options);
+  });
+  onCleanup(() => {
+    instance?.destroy();
+    instance = null;
+  });
+  return {
+    open: (i) => instance?.open(i),
+    close: () => instance?.close() ?? Promise.resolve(),
+    reset: () => instance?.reset(),
+    next: () => instance?.next(),
+    prev: () => instance?.prev(),
+    zoomIn: () => instance?.zoomIn(),
+    zoomOut: () => instance?.zoomOut(),
+    getCurrentIndex: () => instance?.getCurrentIndex() ?? -1,
+    view: (i) => instance?.view(i),
+    destroy: () => instance?.destroy()
+  };
+}
+
+// src/vistaview.tsx
+import { onCleanup as onCleanup2, onMount as onMount2, splitProps } from "solid-js";
+import { children, createEffect } from "solid-js";
+import { vistaView as vistaView2 } from "vistaview";
+function VistaView(props) {
+  let container;
+  let instance = null;
+  const [local, rest] = splitProps(props, ["selector", "options", "componentRef", "id", "children"]);
+  let galleryId = local.id || `vvw-gallery-${Math.random().toString(36).slice(2)}`;
+  const resolved = children(() => props.children);
+  createEffect(() => {
+    const nodes = resolved();
+    if (nodes && instance) {
+      instance.reset();
+    }
+  });
+  onMount2(() => {
+    if (!container) {
+      return;
+    }
+    const realId = container.id;
+    const selector = `#${realId} ${local.selector ?? "> a"}`;
+    const nodes = document.querySelectorAll(selector);
+    if (nodes.length > 0) {
+      instance?.destroy();
+      instance = vistaView2({
+        ...local.options,
+        elements: selector
+      });
+      local.componentRef?.({ vistaView: instance, container });
+    }
+  });
+  onCleanup2(() => {
+    instance?.destroy();
+    local.componentRef?.(null);
+    instance = null;
+  });
+  return <div ref={(el) => container = el} {...rest} id={galleryId}>
+      {local.children}
+    </div>;
+}
+export {
+  VistaView,
+  useVistaView
+};

package/frameworks/svelte/dist/VistaView.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { vistaView } from 'vistaview';
+  import type { VistaOpt, VistaInterface } from 'vistaview';
+  import { tick } from 'svelte';
+
+  export let selector: string = '> a';
+  export let options: VistaOpt = {} as VistaOpt;
+  export let id: string = '';
+  export let vistaRef: ((obj: { vistaView: VistaInterface | null; container: HTMLElement | null } | null) => void) | undefined = undefined;
+
+  let container: HTMLDivElement | null = null;
+  let instance: VistaInterface | null = null;
+  const galleryId = id || `vvw-gallery-${Math.random().toString(36).slice(2)}`;
+
+  function destroyInstance() {
+    instance?.destroy();
+    instance = null;
+    vistaRef?.(null);
+  }
+
+  function initInstance() {
+    if (!container) return;
+    destroyInstance();
+    instance = vistaView({
+      ...options,
+      elements: `#${galleryId} ${selector}`,
+    });
+    vistaRef?.({ vistaView: instance, container });
+  }
+
+  // expose API via component instance
+  export function getApi() {
+    return { vistaView: instance, container };
+  }
+
+  // re-init when props change
+  $: selector, options, async () => {
+    // wait DOM update if necessary
+    await tick();
+    initInstance();
+  };
+
+  let observer: MutationObserver | null = null;
+  onMount(() => {
+    initInstance();
+    observer = new MutationObserver(() => {
+      instance?.reset();
+    });
+
+    observer.observe(container!, {
+      childList: true,
+      subtree: false,
+    });
+  });
+
+  onDestroy(() => {
+    observer?.disconnect();
+    destroyInstance();
+  });
+</script>
+
+<div id={galleryId} bind:this={container} {...$$restProps}>
+  <slot />
+</div>