@xrift/world-components 0.3.0 → 0.5.0

package/README.md

@@ -48,6 +48,59 @@ function MyWorld() {
 }
 ```
 
+### 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オブジェクトをインタラクション可能にするラッパーコンポーネントです。

package/dist/contexts/InstanceStateContext.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+/**
+ * インスタンス状態を管理するためのインターフェース
+ * プラットフォーム側（xrift-frontend）がWebSocket実装を注入する
+ */
+export interface InstanceStateContextValue {
+    /**
+     * 全ての状態を保持するMap
+     * stateId -> 状態の値
+     */
+    states: Map<string, unknown>;
+    /**
+     * 状態を送信する関数
+     * @param stateId 状態の一意識別子
+     * @param payload 送信する状態
+     */
+    sendState: (stateId: string, payload: unknown) => void;
+}
+/**
+ * インスタンス状態を管理するContext
+ * ワールド作成者はこのContextを通じてインスタンス全体で同期される状態にアクセスする
+ */
+export declare const InstanceStateContext: import("react").Context<InstanceStateContextValue>;
+interface Props {
+    /**
+     * プラットフォーム側が提供する実装（WebSocket同期など）
+     * 未指定の場合はデフォルト実装（ローカルstate）が使用される
+     */
+    implementation?: InstanceStateContextValue;
+    children: ReactNode;
+}
+/**
+ * インスタンス状態を提供するContextProvider
+ * プラットフォーム側（xrift-frontend）がWebSocket実装を注入するために使用
+ *
+ * @example
+ * // プラットフォーム側での使用例
+ * <InstanceStateProvider implementation={webSocketImplementation}>
+ *   <WorldComponent />
+ * </InstanceStateProvider>
+ */
+export declare const InstanceStateProvider: ({ implementation, children }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * インスタンス状態のContextを取得するhook
+ * 通常、ワールド作成者は直接このhookを使用せず、useInstanceStateを使用する
+ */
+export declare const useInstanceStateContext: () => InstanceStateContextValue;
+export {};
+//# sourceMappingURL=InstanceStateContext.d.ts.map

package/dist/contexts/InstanceStateContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstanceStateContext.d.ts","sourceRoot":"","sources":["../../src/contexts/InstanceStateContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAA;AAEjE;;;GAGG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC5B;;;;OAIG;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CACvD;AAiBD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,oDAEhC,CAAA;AAED,UAAU,KAAK;IACb;;;OAGG;IACH,cAAc,CAAC,EAAE,yBAAyB,CAAA;IAC1C,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,GAAI,8BAA8B,KAAK,4CASxE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAAO,yBAE1C,CAAA"}

package/dist/contexts/InstanceStateContext.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * デフォルト実装: Context未設定時はローカル状態として動作
+ * 開発時やテスト時に使用される
+ */
+const createDefaultImplementation = () => {
+    const states = new Map();
+    return {
+        states,
+        sendState: (stateId, payload) => {
+            states.set(stateId, payload);
+        },
+    };
+};
+/**
+ * インスタンス状態を管理するContext
+ * ワールド作成者はこのContextを通じてインスタンス全体で同期される状態にアクセスする
+ */
+export const InstanceStateContext = createContext(createDefaultImplementation());
+/**
+ * インスタンス状態を提供するContextProvider
+ * プラットフォーム側（xrift-frontend）がWebSocket実装を注入するために使用
+ *
+ * @example
+ * // プラットフォーム側での使用例
+ * <InstanceStateProvider implementation={webSocketImplementation}>
+ *   <WorldComponent />
+ * </InstanceStateProvider>
+ */
+export const InstanceStateProvider = ({ implementation, children }) => {
+    const defaultImplementation = createDefaultImplementation();
+    const value = implementation || defaultImplementation;
+    return (_jsx(InstanceStateContext.Provider, { value: value, children: children }));
+};
+/**
+ * インスタンス状態のContextを取得するhook
+ * 通常、ワールド作成者は直接このhookを使用せず、useInstanceStateを使用する
+ */
+export const useInstanceStateContext = () => {
+    return useContext(InstanceStateContext);
+};
+//# sourceMappingURL=InstanceStateContext.js.map

package/dist/contexts/InstanceStateContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstanceStateContext.js","sourceRoot":"","sources":["../../src/contexts/InstanceStateContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAA;AAoBjE;;;GAGG;AACH,MAAM,2BAA2B,GAAG,GAA8B,EAAE;IAClE,MAAM,MAAM,GAAG,IAAI,GAAG,EAAmB,CAAA;IAEzC,OAAO;QACL,MAAM;QACN,SAAS,EAAE,CAAC,OAAe,EAAE,OAAgB,EAAE,EAAE;YAC/C,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC;KACF,CAAA;AACH,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAC/C,2BAA2B,EAAE,CAC9B,CAAA;AAWD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC3E,MAAM,qBAAqB,GAAG,2BAA2B,EAAE,CAAA;IAC3D,MAAM,KAAK,GAAG,cAAc,IAAI,qBAAqB,CAAA;IAErD,OAAO,CACL,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,QAAQ,GACqB,CACjC,CAAA;AACH,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAA8B,EAAE;IACrE,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAA;AACzC,CAAC,CAAA"}

package/dist/contexts/XRiftContext.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { Object3D } from 'three';
+import { type InstanceStateContextValue } from './InstanceStateContext';
 export interface XRiftContextValue {
     /**
      * ワールドのベースURL（CDNのディレクトリパス）
@@ -33,6 +34,11 @@ export declare const XRiftContext: import("react").Context<XRiftContextValue | n
 interface Props {
     baseUrl: string;
     currentTarget?: Object3D | null;
+    /**
+     * インスタンス状態管理の実装（オプション）
+     * 指定しない場合はデフォルト実装（ローカルstate）が使用される
+     */
+    instanceStateImplementation?: InstanceStateContextValue;
     children: ReactNode;
 }
 /**
@@ -40,7 +46,7 @@ interface Props {
  * Module Federationで動的にロードされたワールドコンポーネントに
  * 必要な情報を注入するために使用
  */
-export declare const XRiftProvider: ({ baseUrl, currentTarget, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const XRiftProvider: ({ baseUrl, currentTarget, instanceStateImplementation, children }: Props) => import("react/jsx-runtime").JSX.Element;
 /**
  * XRift ワールドの情報を取得するhook
  * ワールドプロジェクト側でアセットの相対パスを絶対パスに変換する際に使用

package/dist/contexts/XRiftContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAA;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IAClC;;OAEG;IACH,oBAAoB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD;;OAEG;IACH,sBAAsB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;CAKnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,sCAA6C,KAAK,4CA2B/E,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}
+{"version":3,"file":"XRiftContext.d.ts","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAqC,MAAM,OAAO,CAAA;AACxF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAyB,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AAE9F,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,aAAa,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IAClC;;OAEG;IACH,oBAAoB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD;;OAEG;IACH,sBAAsB,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAA;CAKnD;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAA;AAEzE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,2BAA2B,CAAC,EAAE,yBAAyB,CAAA;IACvD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,mEAK3B,KAAK,4CA6BP,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,QAAO,iBAQ3B,CAAA"}

package/dist/contexts/XRiftContext.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useState } from 'react';
+import { InstanceStateProvider } from './InstanceStateContext';
 /**
  * XRift ワールドの情報を提供するContext
  * ワールド側でこのContextを直接参照して情報を取得できる
@@ -10,7 +11,7 @@ export const XRiftContext = createContext(null);
  * Module Federationで動的にロードされたワールドコンポーネントに
  * 必要な情報を注入するために使用
  */
-export const XRiftProvider = ({ baseUrl, currentTarget = null, children }) => {
+export const XRiftProvider = ({ baseUrl, currentTarget = null, instanceStateImplementation, children }) => {
     // インタラクト可能なオブジェクトの管理
     const [interactableObjects] = useState(() => new Set());
     // オブジェクトの登録
@@ -27,7 +28,7 @@ export const XRiftProvider = ({ baseUrl, currentTarget = null, children }) => {
             interactableObjects,
             registerInteractable,
             unregisterInteractable,
-        }, children: children }));
+        }, children: _jsx(InstanceStateProvider, { implementation: instanceStateImplementation, children: children }) }));
 };
 /**
  * XRift ワールドの情報を取得するhook

package/dist/contexts/XRiftContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAiCxF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAQzE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAClF,qBAAqB;IACrB,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAY,CAAC,CAAA;IAEjE,YAAY;IACZ,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC5D,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,cAAc;IACd,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC9D,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,OAAO;YACP,aAAa;YACb,mBAAmB;YACnB,oBAAoB;YACpB,sBAAsB;SACvB,YAEA,QAAQ,GACa,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
+{"version":3,"file":"XRiftContext.js","sourceRoot":"","sources":["../../src/contexts/XRiftContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAkB,WAAW,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAExF,OAAO,EAAE,qBAAqB,EAAkC,MAAM,wBAAwB,CAAA;AAgC9F;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAA;AAazE;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,2BAA2B,EAC3B,QAAQ,EACF,EAAE,EAAE;IACV,qBAAqB;IACrB,MAAM,CAAC,mBAAmB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAY,CAAC,CAAA;IAEjE,YAAY;IACZ,MAAM,oBAAoB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC5D,mBAAmB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IACjC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,cAAc;IACd,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,MAAgB,EAAE,EAAE;QAC9D,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,OAAO;YACP,aAAa;YACb,mBAAmB;YACnB,oBAAoB;YACpB,sBAAsB;SACvB,YAED,KAAC,qBAAqB,IAAC,cAAc,EAAE,2BAA2B,YAC/D,QAAQ,GACa,GACF,CACzB,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAsB,EAAE;IAC9C,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/hooks/useInstanceState.d.ts

@@ -0,0 +1,38 @@
+/**
+ * インスタンス全体で同期される状態を管理するhook
+ *
+ * React の useState と同じAPIを提供します。
+ * Context未設定時はローカルstateとして動作し、
+ * プラットフォーム側が実装を注入することでWebSocket同期などが可能になります。
+ *
+ * @param stateId 状態の一意識別子（インスタンス内で一意である必要があります）
+ * @param initialState 初期状態
+ * @returns [現在の状態, 状態更新関数]
+ *
+ * @example
+ * // ボタンの有効/無効状態を管理
+ * const [buttonState, setButtonState] = useInstanceState('button-1', { enabled: false })
+ *
+ * // 直接値を設定
+ * setButtonState({ enabled: true })
+ *
+ * // 関数型アップデート
+ * setButtonState(prev => ({ enabled: !prev.enabled }))
+ *
+ * @example
+ * // より複雑な状態の管理
+ * interface DoorState {
+ *   isOpen: boolean
+ *   openedBy: string | null
+ * }
+ *
+ * const [doorState, setDoorState] = useInstanceState<DoorState>('main-door', {
+ *   isOpen: false,
+ *   openedBy: null
+ * })
+ *
+ * // ドアを開く
+ * setDoorState({ isOpen: true, openedBy: 'player-123' })
+ */
+export declare function useInstanceState<T>(stateId: string, initialState: T): [T, (state: T | ((prevState: T) => T)) => void];
+//# sourceMappingURL=useInstanceState.d.ts.map

package/dist/hooks/useInstanceState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstanceState.d.ts","sourceRoot":"","sources":["../../src/hooks/useInstanceState.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAgCjD"}

package/dist/hooks/useInstanceState.js

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { useInstanceStateContext } from '../contexts/InstanceStateContext';
+/**
+ * インスタンス全体で同期される状態を管理するhook
+ *
+ * React の useState と同じAPIを提供します。
+ * Context未設定時はローカルstateとして動作し、
+ * プラットフォーム側が実装を注入することでWebSocket同期などが可能になります。
+ *
+ * @param stateId 状態の一意識別子（インスタンス内で一意である必要があります）
+ * @param initialState 初期状態
+ * @returns [現在の状態, 状態更新関数]
+ *
+ * @example
+ * // ボタンの有効/無効状態を管理
+ * const [buttonState, setButtonState] = useInstanceState('button-1', { enabled: false })
+ *
+ * // 直接値を設定
+ * setButtonState({ enabled: true })
+ *
+ * // 関数型アップデート
+ * setButtonState(prev => ({ enabled: !prev.enabled }))
+ *
+ * @example
+ * // より複雑な状態の管理
+ * interface DoorState {
+ *   isOpen: boolean
+ *   openedBy: string | null
+ * }
+ *
+ * const [doorState, setDoorState] = useInstanceState<DoorState>('main-door', {
+ *   isOpen: false,
+ *   openedBy: null
+ * })
+ *
+ * // ドアを開く
+ * setDoorState({ isOpen: true, openedBy: 'player-123' })
+ */
+export function useInstanceState(stateId, initialState) {
+    const { states, sendState } = useInstanceStateContext();
+    // ローカル状態を保持して即座に更新を反映
+    const [localState, setLocalState] = useState(() => {
+        return states.get(stateId) ?? initialState;
+    });
+    // グローバル状態が変更されたらローカル状態を更新
+    useEffect(() => {
+        const globalState = states.get(stateId);
+        if (globalState !== undefined) {
+            setLocalState(globalState);
+        }
+    }, [states, stateId]);
+    // 関数型setStateをサポート（React の useState と同じAPI）
+    const setState = (newStateOrUpdater) => {
+        setLocalState(prev => {
+            // 関数の場合は前の状態を渡して新しい状態を計算
+            const newState = typeof newStateOrUpdater === 'function'
+                ? newStateOrUpdater(prev)
+                : newStateOrUpdater;
+            // グローバルに送信
+            sendState(stateId, newState);
+            return newState;
+        });
+    };
+    return [localState, setState];
+}
+//# sourceMappingURL=useInstanceState.js.map

package/dist/hooks/useInstanceState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstanceState.js","sourceRoot":"","sources":["../../src/hooks/useInstanceState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAE1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,gBAAgB,CAC9B,OAAe,EACf,YAAe;IAEf,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,uBAAuB,EAAE,CAAA;IAEvD,sBAAsB;IACtB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAI,GAAG,EAAE;QACnD,OAAQ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAmB,IAAI,YAAY,CAAA;IAC/D,CAAC,CAAC,CAAA;IAEF,0BAA0B;IAC1B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAkB,CAAA;QACxD,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,aAAa,CAAC,WAAW,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAErB,4CAA4C;IAC5C,MAAM,QAAQ,GAAG,CAAC,iBAA4C,EAAE,EAAE;QAChE,aAAa,CAAC,IAAI,CAAC,EAAE;YACnB,yBAAyB;YACzB,MAAM,QAAQ,GAAG,OAAO,iBAAiB,KAAK,UAAU;gBACtD,CAAC,CAAE,iBAAyC,CAAC,IAAI,CAAC;gBAClD,CAAC,CAAC,iBAAiB,CAAA;YAErB,WAAW;YACX,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;YAE5B,OAAO,QAAQ,CAAA;QACjB,CAAC,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;AAC/B,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export { XRiftContext, XRiftProvider, useXRift, type XRiftContextValue, } from './contexts/XRiftContext';
+export { InstanceStateContext, useInstanceStateContext, type InstanceStateContextValue, } from './contexts/InstanceStateContext';
 export { Interactable, type InteractableProps, } from './components/Interactable';
+export { useInstanceState } from './hooks/useInstanceState';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAA;AAGhC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,KAAK,iBAAiB,GACvB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,KAAK,yBAAyB,GAC/B,MAAM,iCAAiC,CAAA;AAGxC,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,2BAA2B,CAAA;AAGlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -1,5 +1,8 @@
 // Contexts
 export { XRiftContext, XRiftProvider, useXRift, } from './contexts/XRiftContext';
+export { InstanceStateContext, useInstanceStateContext, } from './contexts/InstanceStateContext';
 // Components
 export { Interactable, } from './components/Interactable';
+// Hooks
+export { useInstanceState } from './hooks/useInstanceState';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,GAET,MAAM,yBAAyB,CAAA;AAEhC,aAAa;AACb,OAAO,EACL,YAAY,GAEb,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,WAAW;AACX,OAAO,EACL,YAAY,EACZ,aAAa,EACb,QAAQ,GAET,MAAM,yBAAyB,CAAA;AAEhC,OAAO,EACL,oBAAoB,EACpB,uBAAuB,GAExB,MAAM,iCAAiC,CAAA;AAExC,aAAa;AACb,OAAO,EACL,YAAY,GAEb,MAAM,2BAA2B,CAAA;AAElC,QAAQ;AACR,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA"}

package/package.json

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