@xrift/world-components 0.15.1 → 0.15.2

package/README.md

@@ -8,7 +8,7 @@ Xrift ワールド開発用の共有コンポーネントとユーティリテ
 npm install @xrift/world-components
 ```
 
-## 必要な依存関係
+### 必要な依存関係
 
 以下のパッケージがpeerDependenciesとして必要です：
 
@@ -21,525 +21,17 @@ npm install @xrift/world-components
 }
 ```
 
-## 機能
+## ドキュメント
 
-### XRiftContext
+コンポーネントやHooksの詳細については、公式ドキュメントをご覧ください：
 
-ワールドの基本情報（ベースURLなど）を提供するContextです。
+**[docs.xrift.net](https://docs.xrift.net)**
 
-```tsx
-import { XRiftProvider, useXRift } from '@xrift/world-components'
+## 関連リンク
 
-// Providerでワールドをラップ
-function App() {
-  return (
-    <XRiftProvider baseUrl="https://assets.xrift.net/users/xxx/worlds/yyy/hash123/">
-      <MyWorld />
-    </XRiftProvider>
-  )
-}
-
-// ワールド内でbaseUrlを取得
-function MyWorld() {
-  const { baseUrl } = useXRift()
-  const gltf = useGLTF(baseUrl + 'assets/model.glb')
-
-  return <primitive object={gltf.scene} />
-}
-```
-
-### useInstanceState フック
-
-インスタンス全体で同期される状態を管理するフックです。React の `useState` と同じAPIを提供します。
-
-```tsx
-import { useInstanceState } from '@xrift/world-components'
-
-function MyWorld() {
-  // インスタンス全体で同期される状態
-  const [buttonState, setButtonState] = useInstanceState('button-1', { enabled: false })
-
-  return (
-    <Interactable
-      id="button-1"
-      onInteract={() => {
-        // 状態を更新（全てのクライアントで同期される）
-        setButtonState({ enabled: !buttonState.enabled })
-      }}
-    >
-      <mesh>
-        <meshStandardMaterial color={buttonState.enabled ? 'green' : 'red'} />
-      </mesh>
-    </Interactable>
-  )
-}
-```
-
-#### 使用方法
-
-```tsx
-const [state, setState] = useInstanceState<T>(stateId, initialState)
-```
-
-- `stateId`: 状態の一意識別子（インスタンス内で一意である必要があります）
-- `initialState`: 初期状態
-- `setState`: 状態を更新する関数（直接値 or 関数型アップデートをサポート）
-
-#### 関数型アップデート
-
-```tsx
-// 直接値を設定
-setState({ enabled: true })
-
-// 前の状態を基に更新
-setState(prev => ({ enabled: !prev.enabled }))
-```
-
-#### 注意事項
-
-- Context未設定時はローカル `useState` として動作します
-- プラットフォーム側（xrift-frontend）がWebSocket実装を注入することで、インスタンス全体での同期が有効になります
-- 状態はシリアライズ可能な値（JSON）である必要があります
-
-### Interactable コンポーネント
-
-3Dオブジェクトをインタラクション可能にするラッパーコンポーネントです。
-
-```tsx
-import { Interactable } from '@xrift/world-components'
-
-function MyWorld() {
-  const handleButtonClick = (id: string) => {
-    console.log(`${id} がクリックされました！`)
-  }
-
-  return (
-    <Interactable
-      id="my-button"
-      onInteract={handleButtonClick}
-      interactionText="ボタンを押す"
-    >
-      <mesh position={[0, 1, -3]}>
-        <boxGeometry args={[1, 1, 1]} />
-        <meshStandardMaterial color="blue" />
-      </mesh>
-    </Interactable>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `id` | `string` | ✓ | - | オブジェクトの一意なID |
-| `onInteract` | `(id: string) => void` | ✓ | - | インタラクション時のコールバック |
-| `interactionText` | `string` | - | `"クリックする"` | インタラクション時に表示するテキスト |
-| `enabled` | `boolean` | - | `true` | インタラクション可能かどうか |
-| `children` | `ReactNode` | ✓ | - | 3Dオブジェクト |
-
-### Mirror コンポーネント
-
-リアルタイムで周囲を反射する鏡のコンポーネントです。
-
-```tsx
-import { Mirror } from '@xrift/world-components'
-
-function MyWorld() {
-  return (
-    <>
-      {/* 基本的な使い方 */}
-      <Mirror position={[0, 2.5, -5]} size={[4, 3]} />
-
-      {/* 高解像度の鏡 */}
-      <Mirror
-        position={[5, 2.5, -5]}
-        size={[3, 3]}
-        textureResolution={1024}
-      />
-
-      {/* 金色の鏡 */}
-      <Mirror
-        position={[-5, 2.5, -5]}
-        size={[2, 4]}
-        color={0xffd700}
-      />
-    </>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `position` | `[number, number, number]` | - | `[0, 2.5, -9]` | 鏡の位置 |
-| `rotation` | `[number, number, number]` | - | `[0, 0, 0]` | 鏡の回転 |
-| `size` | `[number, number]` | - | `[8, 5]` | 鏡のサイズ [幅, 高さ] |
-| `color` | `number` | - | `0xcccccc` | 反射の色（16進数カラー） |
-| `textureResolution` | `number` | - | `512` | 反射テクスチャの解像度。sizeの比率に応じて自動調整されます |
-
-#### 注意事項
-
-- 物理コライダーは含まれていません。必要な場合は`@react-three/rapier`などを使って別途追加してください
-- Meta Quest（Android Chrome）での互換性のため、マルチサンプリングは無効化されています
-
-### VideoScreen コンポーネント
-
-ワールド内で動画を再生できるスクリーンコンポーネントです。`useInstanceState`を使用してインスタンス内の全ユーザーで再生状態が同期されます。
-
-```tsx
-import { VideoScreen } from '@xrift/world-components'
-
-function MyWorld() {
-  return (
-    <>
-      {/* メインスクリーン */}
-      <VideoScreen
-        id="main-screen"
-        position={[0, 2, -5]}
-        scale={[16/9 * 3, 3]}
-        url="https://example.com/video.mp4"
-      />
-
-      {/* サブスクリーン */}
-      <VideoScreen
-        id="sub-screen"
-        position={[5, 1.5, -3]}
-        scale={[16/9 * 1.5, 1.5]}
-      />
-    </>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `id` | `string` | ✓ | - | スクリーンの一意なID（インスタンス内で一意である必要があります） |
-| `position` | `[number, number, number]` | - | `[0, 2, -5]` | スクリーンの位置 |
-| `rotation` | `[number, number, number]` | - | `[0, 0, 0]` | スクリーンの回転 |
-| `scale` | `[number, number]` | - | `[16/9 * 3, 3]` | スクリーンのサイズ [幅, 高さ] |
-| `url` | `string` | - | `''` | 動画のURL |
-| `playing` | `boolean` | - | `true` | 再生中かどうか |
-| `currentTime` | `number` | - | `0` | 再生位置（秒） |
-| `sync` | `'global' \| 'local'` | - | `'global'` | 同期モード: `global` = インスタンス全体で同期, `local` = ローカルのみ |
-
-#### 同期モード
-
-VideoScreenは2つの同期モードをサポートしています：
-
-- **`sync="global"`（デフォルト）**: インスタンス内の全ユーザーで動画の状態が同期されます。シアターのメインスクリーンなど、全員で同じ動画を見る場合に使用します。
-- **`sync="local"`**: ローカルのみで動作し、他のユーザーとは同期されません。個人用モニターなど、各ユーザーが別々の動画を見る場合に使用します。
-
-```tsx
-// グローバル同期（デフォルト）
-<VideoScreen
-  id="theater-screen"
-  url="https://example.com/movie.mp4"
-  sync="global"
-/>
-
-// ローカルのみ
-<VideoScreen
-  id="personal-monitor"
-  url="https://example.com/video.mp4"
-  sync="local"
-/>
-```
-
-#### 状態管理
-
-VideoScreenは`useInstanceState`を使用して以下の状態を管理します：
-
-```tsx
-interface VideoState {
-  url: string          // 動画のURL
-  isPlaying: boolean   // 再生中かどうか
-  currentTime: number  // 現在の再生位置（秒）
-  serverTime: number   // サーバータイム（VRChat方式の同期用）
-}
-```
-
-#### 再生状態の制御（方法1: propsで制御）
-
-VideoScreenはpropsで直接制御できます：
-
-```tsx
-import { VideoScreen, Interactable } from '@xrift/world-components'
-import { useState } from 'react'
-
-function MyWorld() {
-  const [playing, setPlaying] = useState(true)
-  const [currentTime, setCurrentTime] = useState(0)
-
-  return (
-    <>
-      <VideoScreen
-        id="main-screen"
-        position={[0, 2, -5]}
-        scale={[16/9 * 3, 3]}
-        url="https://example.com/video.mp4"
-        playing={playing}
-        currentTime={currentTime}
-      />
-
-      <Interactable
-        id="toggle-button"
-        onInteract={() => setPlaying(!playing)}
-      >
-        <mesh>
-          <boxGeometry />
-          <meshStandardMaterial color={playing ? 'red' : 'green'} />
-        </mesh>
-      </Interactable>
-
-      <Interactable
-        id="seek-button"
-        onInteract={() => setCurrentTime(currentTime + 10)}
-      >
-        <mesh>
-          <boxGeometry />
-          <meshStandardMaterial color="cyan" />
-        </mesh>
-      </Interactable>
-    </>
-  )
-}
-```
-
-#### 再生状態の制御（方法2: useInstanceStateで制御）
-
-VideoScreenの状態は`useInstanceState`を使って外部から制御できます：
-
-```tsx
-import { VideoScreen, useInstanceState } from '@xrift/world-components'
-
-function MyWorld() {
-  const [videoState, setVideoState] = useInstanceState('video-main-screen', {
-    url: '',
-    isPlaying: false,
-    currentTime: 0,
-    serverTime: Date.now(),
-  })
-
-  const playVideo = (url: string) => {
-    setVideoState({
-      url,
-      isPlaying: true,
-      currentTime: 0,
-      serverTime: Date.now(),
-    })
-  }
-
-  return (
-    <>
-      <VideoScreen id="main-screen" />
-
-      <Interactable
-        id="play-button"
-        onInteract={() => playVideo('https://example.com/video.mp4')}
-      >
-        <mesh>
-          <boxGeometry />
-          <meshStandardMaterial color="green" />
-        </mesh>
-      </Interactable>
-    </>
-  )
-}
-```
-
-#### 注意事項
-
-- 動画URLは直接アクセス可能なMP4などの動画ファイルである必要があります
-- CORSの制約により、クロスオリジンの動画を再生する場合は、動画サーバー側で適切なCORSヘッダーの設定が必要です
-- 再生位置の同期はVRChat方式（サーバータイム基準）を採用しており、約0.5秒の誤差で自動補正されます
-- ブラウザのautoplay policyのため、動画は初期状態でミュートされています
-- 物理コライダーは含まれていません。必要な場合は別途追加してください
-
-### ScreenShareDisplay コンポーネント
-
-画面共有の映像を3D空間内にスクリーンとして表示するコンポーネントです。`ScreenShareContext` から映像と状態を取得します。
-
-```tsx
-import { ScreenShareDisplay } from '@xrift/world-components'
-
-function MyWorld() {
-  return (
-    <>
-      {/* 基本的な使い方 */}
-      <ScreenShareDisplay id="screen-1" />
-
-      {/* 位置とサイズを指定 */}
-      <ScreenShareDisplay
-        id="screen-2"
-        position={[5, 2, -3]}
-        scale={[3, 3 * (9/16)]}
-      />
-    </>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `id` | `string` | ✓ | - | スクリーンの一意なID |
-| `position` | `[number, number, number]` | - | `[0, 2, -5]` | スクリーンの位置 |
-| `rotation` | `[number, number, number]` | - | `[0, 0, 0]` | スクリーンの回転 |
-| `scale` | `[number, number]` | - | `[4, 4 * (9/16)]` | スクリーンのサイズ [幅, 高さ] |
-
-#### ScreenShareContext
-
-画面共有の状態は `ScreenShareContext` を通じて提供されます。`XRiftProvider` に `screenShareImplementation` を渡すことで設定します。
-
-```tsx
-import { XRiftProvider, ScreenShareDisplay } from '@xrift/world-components'
-
-function App() {
-  const screenShareImpl = {
-    videoElement: myVideoElement,  // HTMLVideoElement
-    isSharing: false,
-    startScreenShare: () => { /* 共有開始処理 */ },
-    stopScreenShare: () => { /* 共有停止処理 */ },
-  }
-
-  return (
-    <XRiftProvider
-      baseUrl="https://..."
-      screenShareImplementation={screenShareImpl}
-    >
-      <MyWorld />
-    </XRiftProvider>
-  )
-}
-```
-
-#### useScreenShareContext フック
-
-コンポーネント内で画面共有の状態を取得するフックです。
-
-```tsx
-import { useScreenShareContext } from '@xrift/world-components'
-
-function MyComponent() {
-  const { videoElement, isSharing, startScreenShare, stopScreenShare } = useScreenShareContext()
-
-  return (
-    <button onClick={isSharing ? stopScreenShare : startScreenShare}>
-      {isSharing ? '共有を停止' : '共有を開始'}
-    </button>
-  )
-}
-```
-
-#### 注意事項
-
-- `XRiftProvider` に `screenShareImplementation` を渡すことが必須です
-- 映像がない場合は「クリックして画面共有」というガイドテキストが表示されます
-- スクリーンをクリックすると `startScreenShare` / `stopScreenShare` が呼び出されます
-
-### Skybox コンポーネント
-
-画像を使わずにグラデーションで空を表現するシンプルなskyboxコンポーネントです。
-
-```tsx
-import { Skybox } from '@xrift/world-components'
-
-function MyWorld() {
-  return (
-    <>
-      {/* 基本的な使い方（デフォルトは空色→白） */}
-      <Skybox />
-
-      {/* 夕焼け風 */}
-      <Skybox topColor={0xff6b35} bottomColor={0xffd93d} />
-
-      {/* 夜空風 */}
-      <Skybox topColor={0x000033} bottomColor={0x000011} />
-    </>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `topColor` | `number` | - | `0x87ceeb` | 上部の色（16進数カラー） |
-| `bottomColor` | `number` | - | `0xffffff` | 下部の色（16進数カラー） |
-| `offset` | `number` | - | `0` | グラデーションの開始位置 |
-| `exponent` | `number` | - | `1` | グラデーションの範囲 |
-
-#### 注意事項
-
-- シェーダーを使用した軽量な実装です
-- シーンの背景色も自動的に設定されます
-
-### SpawnPoint コンポーネント
-
-ワールド内のプレイヤーのスポーン（出現）地点を指定するコンポーネントです。開発時には位置と向きを視覚的に確認できるヘルパーが表示されます。
-
-```tsx
-import { SpawnPoint } from '@xrift/world-components'
-
-function MyWorld() {
-  return (
-    <>
-      {/* 原点にスポーン、正面向き */}
-      <SpawnPoint />
-
-      {/* 位置と向きを指定 */}
-      <SpawnPoint position={[0, 0, 5]} yaw={180} />
-    </>
-  )
-}
-```
-
-#### Props
-
-| プロパティ | 型 | 必須 | デフォルト | 説明 |
-|-----------|-----|------|-----------|------|
-| `position` | `[number, number, number]` | - | `[0, 0, 0]` | スポーン位置 |
-| `yaw` | `number` | - | `0` | スポーン時の向き（度数法 0-360） |
-
-#### 開発時ヘルパー
-
-開発環境（`import.meta.env.DEV === true`）では、スポーン位置と向きを視覚的に確認できるヘルパーが表示されます：
-
-- 半透明の円柱（下から上にかけて透明度が増すグラデーション）
-- 黄緑色の矢印でスポーン方向を表示
-
-本番ビルドではヘルパーは表示されず、コードも含まれません。
-
-#### useSpawnPoint フック
-
-プラットフォーム側で現在設定されているスポーン地点を取得するフックです。
-
-```tsx
-import { useSpawnPoint } from '@xrift/world-components'
-
-function PlayerSpawner() {
-  const spawnPoint = useSpawnPoint()
-
-  useEffect(() => {
-    if (spawnPoint) {
-      player.position.set(...spawnPoint.position)
-      player.rotation.y = THREE.MathUtils.degToRad(spawnPoint.yaw)
-    }
-  }, [spawnPoint])
-
-  return null
-}
-```
-
-#### 注意事項
-
-- 1つのワールドに複数のSpawnPointがある場合、最後に設定されたものが有効になります
-- `useSpawnPoint`は主にプラットフォーム側（xrift-frontend）での使用を想定しています
+- [Xrift 公式サイト](https://xrift.net/)
+- [xrift-world-template](https://github.com/WebXR-JP/xrift-world-template) - ワールド開発用テンプレート
+- [xrift-cli](https://github.com/WebXR-JP/xrift-cli) - Xrift CLI ツール
 
 ## 開発
 

package/dist/components/VideoScreen/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VideoScreen/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAc,MAAM,SAAS,CAAA;AAEtD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAwG3D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8BlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VideoScreen/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAc,MAAM,SAAS,CAAA;AAEtD,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAyG3D;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA8BlD"}

package/dist/components/VideoScreen/index.js

@@ -6,7 +6,7 @@ import { useInstanceState } from '../../hooks/useInstanceState';
  * 動画を表示する内部コンポーネント
  * useVideoTextureを使用するためSuspense内で使用する必要がある
  */
-function VideoScreenInner({ id, position = [0, 2, -5], rotation = [0, 0, 0], scale = [16 / 9 * 3, 3], url = '', playing = true, currentTime = 0, sync = 'global', }) {
+function VideoScreenInner({ id, position = [0, 2, -5], rotation = [0, 0, 0], scale = [16 / 9 * 3, 3], url = '', playing = true, currentTime = 0, sync = 'global', muted = false, }) {
     // グローバル同期用の状態
     const [globalState, setGlobalState] = useInstanceState(`video-${id}`, {
         url: url,
@@ -40,7 +40,7 @@ function VideoScreenInner({ id, position = [0, 2, -5], rotation = [0, 0, 0], sca
     }, [url, playing, currentTime, videoState, setVideoState]);
     // useVideoTextureで動画テクスチャを取得
     const texture = useVideoTexture(url || '', {
-        muted: true,
+        muted,
         loop: true,
         start: playing,
     });

package/dist/components/VideoScreen/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoScreen/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoScreen/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/VideoScreen/types.d.ts

@@ -15,6 +15,8 @@ export interface VideoScreenProps {
     currentTime?: number;
     /** 同期モード: "global" = インスタンス全体で同期, "local" = ローカルのみ（デフォルト: "global"） */
     sync?: 'global' | 'local';
+    /** ミュート状態（デフォルト: false）。ブラウザの自動再生ポリシーによりユーザー操作前は音声付き自動再生がブロックされる場合がある */
+    muted?: boolean;
 }
 /**
  * VideoScreenの状態

package/dist/components/VideoScreen/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/VideoScreen/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC1B;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,EAAE,MAAM,CAAA;IACX,cAAc;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/VideoScreen/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,wBAAwB;IACxB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACxB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uEAAuE;IACvE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,EAAE,MAAM,CAAA;IACX,cAAc;IACd,SAAS,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAA;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xrift/world-components",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "Shared components and utilities for Xrift worlds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",