@vizor-vr/react 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 UTG Networks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# @vizor-vr/react
+
+React wrappers for the [Vizor VR player](https://www.npmjs.com/package/@vizor-vr/player). Type-safe components with native event props.
+
+## Install
+
+```bash
+npm install @vizor-vr/react @vizor-vr/player
+```
+
+## Usage
+
+```tsx
+import { VzVideo } from '@vizor-vr/react';
+
+export function Player() {
+  return (
+    <VzVideo
+      src="video.mp4"
+      format="MONO_360"
+      autoplay
+      onReady={() => console.log('ready')}
+    />
+  );
+}
+```
+
+The wrappers import and register the underlying custom elements for you. Components are client-only — in Next.js App Router or other RSC setups, render them from a Client Component (`'use client'`).
+
+## Components
+
+`VzVideo`, `VzImg`, `VzTour`, `VzCinema`, `VzLive`, `VzPlaylist`, `VzAnnotation`, `VzCaption`.
+
+## License
+
+MIT — see [LICENSE](./LICENSE).

package/dist/VzAnnotation.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface VzAnnotationProps {
+    lat?: number;
+    lon?: number;
+    title?: string;
+    icon?: string;
+    timeStart?: number;
+    timeEnd?: number;
+    sortOrder?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * React wrapper for <vz-annotation>.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo src="video.mp4" format="MONO_360">
+ *   <VzAnnotation
+ *     lat={45}
+ *     lon={-90}
+ *     title="Look here"
+ *     icon="info"
+ *     timeStart={5}
+ *     timeEnd={15}
+ *   >
+ *     <p>Popup content</p>
+ *   </VzAnnotation>
+ * </VzVideo>
+ * ```
+ */
+export declare const VzAnnotation: React.ForwardRefExoticComponent<VzAnnotationProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzAnnotation.d.ts.map

package/dist/VzAnnotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzAnnotation.d.ts","sourceRoot":"","sources":["../src/VzAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,uFA0BxB,CAAC"}

package/dist/VzAnnotation.js

@@ -0,0 +1,46 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+/**
+ * React wrapper for <vz-annotation>.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo src="video.mp4" format="MONO_360">
+ *   <VzAnnotation
+ *     lat={45}
+ *     lon={-90}
+ *     title="Look here"
+ *     icon="info"
+ *     timeStart={5}
+ *     timeEnd={15}
+ *   >
+ *     <p>Popup content</p>
+ *   </VzAnnotation>
+ * </VzVideo>
+ * ```
+ */
+export const VzAnnotation = forwardRef(function VzAnnotation(props, forwardedRef) {
+    const innerRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    const attrs = {};
+    if (props.lat !== undefined)
+        attrs.lat = props.lat;
+    if (props.lon !== undefined)
+        attrs.lon = props.lon;
+    if (props.title !== undefined)
+        attrs.title = props.title;
+    if (props.icon !== undefined)
+        attrs.icon = props.icon;
+    if (props.timeStart !== undefined)
+        attrs['time-start'] = props.timeStart;
+    if (props.timeEnd !== undefined)
+        attrs['time-end'] = props.timeEnd;
+    if (props.sortOrder !== undefined)
+        attrs['sort-order'] = props.sortOrder;
+    return React.createElement('vz-annotation', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    }, props.children);
+});
+//# sourceMappingURL=VzAnnotation.js.map

package/dist/VzAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzAnnotation.js","sourceRoot":"","sources":["../src/VzAnnotation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAevE;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,YAAY;IACvC,MAAM,QAAQ,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE3C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAgD,EAAE,CAAC;IAC9D,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IACnD,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IACnD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;QAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IACzD,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;IACtD,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC;IACnE,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS;QAAE,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAEzE,OAAO,KAAK,CAAC,aAAa,CACxB,eAAe,EACf;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,EACD,KAAK,CAAC,QAAQ,CACf,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzCaption.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface VzCaptionProps {
+    src: string;
+    srclang: string;
+    label?: string;
+    default?: boolean;
+}
+/**
+ * React wrapper for caption <track> elements.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo src="video.mp4" format="MONO_360">
+ *   <VzCaption src="subs-en.vtt" srclang="en" label="English" default />
+ *   <VzCaption src="subs-fr.vtt" srclang="fr" label="French" />
+ * </VzVideo>
+ * ```
+ */
+export declare const VzCaption: React.ForwardRefExoticComponent<VzCaptionProps & React.RefAttributes<HTMLTrackElement>>;
+//# sourceMappingURL=VzCaption.d.ts.map

package/dist/VzCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzCaption.d.ts","sourceRoot":"","sources":["../src/VzCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,yFAYrB,CAAC"}

package/dist/VzCaption.js

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * React wrapper for caption <track> elements.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo src="video.mp4" format="MONO_360">
+ *   <VzCaption src="subs-en.vtt" srclang="en" label="English" default />
+ *   <VzCaption src="subs-fr.vtt" srclang="fr" label="French" />
+ * </VzVideo>
+ * ```
+ */
+export const VzCaption = React.forwardRef(({ src, srclang, label, default: isDefault, ...rest }, ref) => {
+    return React.createElement('track', {
+        ref,
+        src,
+        srcLang: srclang,
+        label,
+        default: isDefault,
+        kind: 'subtitles',
+        ...rest,
+    });
+});
+VzCaption.displayName = 'VzCaption';
+//# sourceMappingURL=VzCaption.js.map

package/dist/VzCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzCaption.js","sourceRoot":"","sources":["../src/VzCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;QAClC,GAAG;QACH,GAAG;QACH,OAAO,EAAE,OAAO;QAChB,KAAK;QACL,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,WAAW;QACjB,GAAG,IAAI;KACR,CAAC,CAAC;AACL,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/VzCinema.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { VzVideoProps } from './types.js';
+/**
+ * React wrapper for <vz-cinema>.
+ * Renders flat video on a virtual screen inside a 360° cinema environment.
+ *
+ * @example
+ * ```tsx
+ * <VzCinema
+ *   src="movie.mp4"
+ *   format="MONO_FLAT"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ * />
+ * ```
+ */
+export declare const VzCinema: React.ForwardRefExoticComponent<VzVideoProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzCinema.d.ts.map

package/dist/VzCinema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzCinema.d.ts","sourceRoot":"","sources":["../src/VzCinema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,kFAyBpB,CAAC"}

package/dist/VzCinema.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { useVizorEvents, buildAttributes, useVizorRef } from './use-vizor-element.js';
+/**
+ * React wrapper for <vz-cinema>.
+ * Renders flat video on a virtual screen inside a 360° cinema environment.
+ *
+ * @example
+ * ```tsx
+ * <VzCinema
+ *   src="movie.mp4"
+ *   format="MONO_FLAT"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ * />
+ * ```
+ */
+export const VzCinema = forwardRef(function VzCinema(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useVizorEvents(innerRef, props);
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    const attrs = buildAttributes(props);
+    if (props.src)
+        attrs.src = props.src;
+    const sources = props.sources?.map((s, i) => (_jsx("source", { src: s.src, type: s.type, "data-quality": s.quality }, i)));
+    return React.createElement('vz-cinema', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    }, sources);
+});
+//# sourceMappingURL=VzCinema.js.map

package/dist/VzCinema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzCinema.js","sourceRoot":"","sources":["../src/VzCinema.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEtF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CAAC,KAAK,EAAE,YAAY;IACnC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAEhC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3C,iBAAgB,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,kBAAgB,CAAC,CAAC,OAAO,IAApD,CAAC,CAAuD,CACtE,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,aAAa,CACxB,WAAW,EACX;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,EACD,OAAO,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzImg.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { VzImgProps } from './types.js';
+/**
+ * React wrapper for <vz-img>.
+ *
+ * @example
+ * ```tsx
+ * <VzImg
+ *   src="panorama.jpg"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '2/1' }}
+ * />
+ * ```
+ */
+export declare const VzImg: React.ForwardRefExoticComponent<VzImgProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzImg.d.ts.map

package/dist/VzImg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzImg.d.ts","sourceRoot":"","sources":["../src/VzImg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,gFAoBjB,CAAC"}

package/dist/VzImg.js

@@ -0,0 +1,29 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { useVizorEvents, buildAttributes, useVizorRef } from './use-vizor-element.js';
+/**
+ * React wrapper for <vz-img>.
+ *
+ * @example
+ * ```tsx
+ * <VzImg
+ *   src="panorama.jpg"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '2/1' }}
+ * />
+ * ```
+ */
+export const VzImg = forwardRef(function VzImg(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useVizorEvents(innerRef, props);
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    const attrs = buildAttributes(props);
+    if (props.src)
+        attrs.src = props.src;
+    return React.createElement('vz-img', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    });
+});
+//# sourceMappingURL=VzImg.js.map

package/dist/VzImg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzImg.js","sourceRoot":"","sources":["../src/VzImg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEtF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,SAAS,KAAK,CAAC,KAAK,EAAE,YAAY;IAChC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAEhC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAErC,OAAO,KAAK,CAAC,aAAa,CACxB,QAAQ,EACR;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,CACF,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzLive.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { VzLiveProps } from './types.js';
+/**
+ * React wrapper for <vz-live>.
+ * Live HLS/DASH streaming with live indicator.
+ *
+ * @example
+ * ```tsx
+ * <VzLive
+ *   src="https://stream.example.com/live.m3u8"
+ *   format="MONO_360"
+ *   title="Live Concert"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ * />
+ * ```
+ */
+export interface VzLiveHandle {
+    /** Get the underlying <vz-live> element */
+    el: HTMLElement | null;
+    /** Start playback */
+    play: () => void;
+    /** Pause playback */
+    pause: () => void;
+    /** Seek to the live edge */
+    seekToLive: () => void;
+}
+export declare const VzLive: React.ForwardRefExoticComponent<VzLiveProps & React.RefAttributes<VzLiveHandle>>;
+//# sourceMappingURL=VzLive.d.ts.map

package/dist/VzLive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzLive.d.ts","sourceRoot":"","sources":["../src/VzLive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG9C;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAC;IACvB,qBAAqB;IACrB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,qBAAqB;IACrB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,kFA8BlB,CAAC"}

package/dist/VzLive.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { useVizorEvents, buildAttributes, useVizorRef } from './use-vizor-element.js';
+export const VzLive = forwardRef(function VzLive(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useVizorEvents(innerRef, props);
+    useImperativeHandle(forwardedRef, () => ({
+        el: innerRef.current,
+        play: () => innerRef.current?.play?.(),
+        pause: () => innerRef.current?.pause?.(),
+        seekToLive: () => innerRef.current?.seekToLiveEdge?.(),
+    }), [innerRef]);
+    const attrs = buildAttributes(props);
+    if (props.src)
+        attrs.src = props.src;
+    const sources = props.sources?.map((s, i) => (_jsx("source", { src: s.src, type: s.type, "data-quality": s.quality }, i)));
+    return React.createElement('vz-live', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    }, sources);
+});
+//# sourceMappingURL=VzLive.js.map

package/dist/VzLive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzLive.js","sourceRoot":"","sources":["../src/VzLive.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AA2BtF,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,SAAS,MAAM,CAAC,KAAK,EAAE,YAAY;IACjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAEhC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;QACvC,EAAE,EAAE,QAAQ,CAAC,OAAO;QACpB,IAAI,EAAE,GAAG,EAAE,CAAE,QAAQ,CAAC,OAAe,EAAE,IAAI,EAAE,EAAE;QAC/C,KAAK,EAAE,GAAG,EAAE,CAAE,QAAQ,CAAC,OAAe,EAAE,KAAK,EAAE,EAAE;QACjD,UAAU,EAAE,GAAG,EAAE,CAAE,QAAQ,CAAC,OAAe,EAAE,cAAc,EAAE,EAAE;KAChE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEhB,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3C,iBAAgB,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,kBAAgB,CAAC,CAAC,OAAO,IAApD,CAAC,CAAuD,CACtE,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,aAAa,CACxB,SAAS,EACT;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,EACD,OAAO,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzPlaylist.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { VzPlaylistProps } from './types.js';
+/**
+ * React wrapper for <vz-playlist>.
+ * Container for multiple video elements with auto-advance.
+ *
+ * @example
+ * ```tsx
+ * <VzPlaylist autoplay>
+ *   <VzVideo src="video1.mp4" format="MONO_360" title="Video 1" />
+ *   <VzVideo src="video2.mp4" format="MONO_FLAT" title="Video 2" />
+ * </VzPlaylist>
+ * ```
+ */
+export declare const VzPlaylist: React.ForwardRefExoticComponent<VzPlaylistProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzPlaylist.d.ts.map

package/dist/VzPlaylist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzPlaylist.d.ts","sourceRoot":"","sources":["../src/VzPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,qFAkDtB,CAAC"}

package/dist/VzPlaylist.js

@@ -0,0 +1,57 @@
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
+import { useVizorRef } from './use-vizor-element.js';
+/**
+ * React wrapper for <vz-playlist>.
+ * Container for multiple video elements with auto-advance.
+ *
+ * @example
+ * ```tsx
+ * <VzPlaylist autoplay>
+ *   <VzVideo src="video1.mp4" format="MONO_360" title="Video 1" />
+ *   <VzVideo src="video2.mp4" format="MONO_FLAT" title="Video 2" />
+ * </VzPlaylist>
+ * ```
+ */
+export const VzPlaylist = forwardRef(function VzPlaylist(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    // Playlist-specific event listeners
+    useEffect(() => {
+        const el = innerRef.current;
+        if (!el)
+            return;
+        const cleanups = [];
+        if (props.onPlaylistChange) {
+            const handler = (e) => {
+                if (e instanceof CustomEvent) {
+                    props.onPlaylistChange(e.detail);
+                }
+            };
+            el.addEventListener('vz-playlist-change', handler);
+            cleanups.push(() => el.removeEventListener('vz-playlist-change', handler));
+        }
+        if (props.onPlaylistEnd) {
+            const handler = () => props.onPlaylistEnd();
+            el.addEventListener('vz-playlist-end', handler);
+            cleanups.push(() => el.removeEventListener('vz-playlist-end', handler));
+        }
+        return () => {
+            for (const cleanup of cleanups)
+                cleanup();
+        };
+    }, [innerRef, props.onPlaylistChange, props.onPlaylistEnd]);
+    const attrs = {};
+    if (props.autoplay)
+        attrs.autoplay = '';
+    if (props.loopPlaylist)
+        attrs['loop-playlist'] = '';
+    if (props.panel)
+        attrs.panel = props.panel;
+    return React.createElement('vz-playlist', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    }, props.children);
+});
+//# sourceMappingURL=VzPlaylist.js.map

package/dist/VzPlaylist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzPlaylist.js","sourceRoot":"","sources":["../src/VzPlaylist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,SAAS,UAAU,CAAC,KAAK,EAAE,YAAY;IACrC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,oCAAoC;IACpC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,QAAQ,GAAsB,EAAE,CAAC;QAEvC,IAAI,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC3B,MAAM,OAAO,GAAG,CAAC,CAAQ,EAAE,EAAE;gBAC3B,IAAI,CAAC,YAAY,WAAW,EAAE,CAAC;oBAC7B,KAAK,CAAC,gBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,CAAC;YACF,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;YACnD,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAAC;QAC7E,CAAC;QAED,IAAI,KAAK,CAAC,aAAa,EAAE,CAAC;YACxB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,aAAc,EAAE,CAAC;YAC7C,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;YAChD,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;QAC1E,CAAC;QAED,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,OAAO,IAAI,QAAQ;gBAAE,OAAO,EAAE,CAAC;QAC5C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;IAE5D,MAAM,KAAK,GAAuC,EAAE,CAAC;IACrD,IAAI,KAAK,CAAC,QAAQ;QAAE,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;IACxC,IAAI,KAAK,CAAC,YAAY;QAAE,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC;IACpD,IAAI,KAAK,CAAC,KAAK;QAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAE3C,OAAO,KAAK,CAAC,aAAa,CACxB,aAAa,EACb;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,EACD,KAAK,CAAC,QAAQ,CACf,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzTour.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { VzCommonProps } from './types.js';
+/** Props for the tour element */
+export interface VzTourProps extends Omit<VzCommonProps, 'loop' | 'muted' | 'preload'> {
+    /** Tour config URL (JSON) */
+    src?: string;
+}
+/**
+ * React wrapper for <vz-tour>.
+ *
+ * @example
+ * ```tsx
+ * <VzTour
+ *   src="/tours/museum.json"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ * />
+ * ```
+ */
+export declare const VzTour: React.ForwardRefExoticComponent<VzTourProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzTour.d.ts.map

package/dist/VzTour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzTour.d.ts","sourceRoot":"","sources":["../src/VzTour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,iCAAiC;AACjC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACpF,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,iFAoBlB,CAAC"}

package/dist/VzTour.js

@@ -0,0 +1,29 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { useVizorEvents, buildAttributes, useVizorRef } from './use-vizor-element.js';
+/**
+ * React wrapper for <vz-tour>.
+ *
+ * @example
+ * ```tsx
+ * <VzTour
+ *   src="/tours/museum.json"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ * />
+ * ```
+ */
+export const VzTour = forwardRef(function VzTour(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useVizorEvents(innerRef, props);
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    const attrs = buildAttributes(props);
+    if (props.src)
+        attrs.src = props.src;
+    return React.createElement('vz-tour', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    });
+});
+//# sourceMappingURL=VzTour.js.map

package/dist/VzTour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzTour.js","sourceRoot":"","sources":["../src/VzTour.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAQtF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,SAAS,MAAM,CAAC,KAAK,EAAE,YAAY;IACjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAEhC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAErC,OAAO,KAAK,CAAC,aAAa,CACxB,SAAS,EACT;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,CACF,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/VzVideo.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { VzVideoProps } from './types.js';
+/**
+ * React wrapper for <vz-video>.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo
+ *   src="video.mp4"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ *   onReady={() => console.log('ready')}
+ * />
+ * ```
+ */
+export declare const VzVideo: React.ForwardRefExoticComponent<VzVideoProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=VzVideo.d.ts.map

package/dist/VzVideo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzVideo.d.ts","sourceRoot":"","sources":["../src/VzVideo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,kFAyBnB,CAAC"}

package/dist/VzVideo.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { useVizorEvents, buildAttributes, useVizorRef } from './use-vizor-element.js';
+/**
+ * React wrapper for <vz-video>.
+ *
+ * @example
+ * ```tsx
+ * <VzVideo
+ *   src="video.mp4"
+ *   format="MONO_360"
+ *   style={{ width: '100%', aspectRatio: '16/9' }}
+ *   onReady={() => console.log('ready')}
+ * />
+ * ```
+ */
+export const VzVideo = forwardRef(function VzVideo(props, forwardedRef) {
+    const innerRef = useVizorRef();
+    useVizorEvents(innerRef, props);
+    useImperativeHandle(forwardedRef, () => innerRef.current, [innerRef]);
+    const attrs = buildAttributes(props);
+    if (props.src)
+        attrs.src = props.src;
+    const sources = props.sources?.map((s, i) => (_jsx("source", { src: s.src, type: s.type, "data-quality": s.quality }, i)));
+    return React.createElement('vz-video', {
+        ref: innerRef,
+        class: props.className,
+        style: props.style,
+        ...attrs,
+    }, sources);
+});
+//# sourceMappingURL=VzVideo.js.map

package/dist/VzVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VzVideo.js","sourceRoot":"","sources":["../src/VzVideo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEtF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAC/B,SAAS,OAAO,CAAC,KAAK,EAAE,YAAY;IAClC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IAEhC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEvE,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,KAAK,CAAC,GAAG;QAAE,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAErC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3C,iBAAgB,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,kBAAgB,CAAC,CAAC,OAAO,IAApD,CAAC,CAAuD,CACtE,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,aAAa,CACxB,UAAU,EACV;QACE,GAAG,EAAE,QAAQ;QACb,KAAK,EAAE,KAAK,CAAC,SAAS;QACtB,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,GAAG,KAAK;KACT,EACD,OAAO,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/__tests__/build-attributes.test.d.ts

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

package/dist/__tests__/build-attributes.test.d.ts.map

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