@codefluss/threejs-shared 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,124 @@
+# @codefluss/threejs-shared
+
+Shared ThreeJS components and utilities for multi-instance canvas-based plugins.
+
+## Features
+
+- ✅ **Instance Context** - Isolated store per plugin instance
+- ✅ **Resource Manager** - Shared geometries/materials across instances
+- ✅ **Performance Monitor** - Global FPS tracking with adaptive quality
+- ✅ **POI System** - Points of Interest with 3D markers
+
+## Installation
+
+```bash
+pnpm add @codefluss/threejs-shared
+```
+
+## Usage
+
+### Instance Context
+
+```tsx
+import { InstanceProvider, useInstanceState } from '@codefluss/threejs-shared';
+import { createBackgroundStore } from './store';
+
+function Background3D({ elementId, data }) {
+  return (
+    <InstanceProvider
+      instanceId={elementId}
+      createStore={createBackgroundStore}
+    >
+      <Scene data={data} />
+    </InstanceProvider>
+  );
+}
+
+function Scene({ data }) {
+  const isPlaying = useInstanceState(s => s.isPlaying);
+  // ...
+}
+```
+
+### Resource Manager
+
+```tsx
+import { resourceManager } from '@codefluss/threejs-shared';
+
+// Register instance
+resourceManager.registerInstance('bg-1');
+
+// Get shared geometry (created once, reused by all instances)
+const starGeo = resourceManager.getSharedGeometry(
+  'star-sphere',
+  () => new THREE.SphereGeometry(0.05, 8, 8)
+);
+
+// Cleanup
+resourceManager.unregisterInstance('bg-1');
+```
+
+### Performance Monitor
+
+```tsx
+import { globalPerfMonitor } from '@codefluss/threejs-shared';
+import { useFrame } from '@react-three/fiber';
+
+// Register canvas
+useEffect(() => {
+  globalPerfMonitor.registerCanvas(instanceId);
+  return () => globalPerfMonitor.unregisterCanvas(instanceId);
+}, [instanceId]);
+
+// Track FPS
+useFrame((state, delta) => {
+  const fps = 1 / delta;
+  globalPerfMonitor.updateMetrics(instanceId, fps);
+});
+
+// Listen for quality changes
+useEffect(() => {
+  const handler = (e: CustomEvent) => {
+    if (e.detail.instanceId === instanceId) {
+      setQuality(e.detail.quality);
+    }
+  };
+
+  window.addEventListener('performance:quality-change', handler);
+  return () => window.removeEventListener('performance:quality-change', handler);
+}, [instanceId]);
+```
+
+### POI System
+
+```tsx
+import { createPOIManager, POIMarker } from '@codefluss/threejs-shared';
+
+// Create POI store
+const poiStore = createPOIManager('conf-1');
+
+// Add POI
+const id = poiStore.getState().addPOI({
+  position: [1, 0.5, 0],
+  label: 'Feature A',
+  description: 'Main product feature',
+  color: '#4CAF50'
+});
+
+// Render POI markers
+function POIMarkers() {
+  const pois = poiStore(s => s.pois);
+
+  return (
+    <>
+      {pois.map(poi => (
+        <POIMarker key={poi.id} {...poi} />
+      ))}
+    </>
+  );
+}
+```
+
+## License
+
+MIT

package/dist/context/instance-context.d.ts

@@ -0,0 +1,39 @@
+import { StoreApi } from 'zustand';
+import { InstanceProviderProps } from '../types';
+/**
+ * Instance Provider - Creates isolated store per plugin instance
+ *
+ * @example
+ * ```tsx
+ * <InstanceProvider
+ *   instanceId={elementId}
+ *   createStore={createBackgroundInstance}
+ * >
+ *   <InteractiveBackground />
+ * </InstanceProvider>
+ * ```
+ */
+export declare function InstanceProvider<T>({ instanceId, createStore, children }: InstanceProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the instance store
+ *
+ * @throws Error if used outside InstanceProvider
+ *
+ * @example
+ * ```tsx
+ * const instance = useInstance();
+ * const isPlaying = instance((state) => state.isPlaying);
+ * ```
+ */
+export declare function useInstance<T = any>(): StoreApi<T>;
+/**
+ * Hook to select state from instance store
+ *
+ * @example
+ * ```tsx
+ * const isPlaying = useInstanceState(s => s.isPlaying);
+ * const camera = useInstanceState(s => s.camera);
+ * ```
+ */
+export declare function useInstanceState<T, R>(selector: (state: T) => R): R;
+//# sourceMappingURL=instance-context.d.ts.map

package/dist/context/instance-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instance-context.d.ts","sourceRoot":"","sources":["../../src/context/instance-context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAItD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,UAAU,EACV,WAAW,EACX,QAAQ,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAuB1B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,CAAC,GAAG,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,CAMlD;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,EACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GACxB,CAAC,CAKH"}

package/dist/core/ResourceManager.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Resource Manager - Singleton for sharing geometries, materials, and textures
+ * across multiple ThreeJS instances
+ *
+ * Benefits:
+ * - Reduces memory usage by sharing resources
+ * - Automatic cleanup when last instance is removed
+ * - Debug tracking of active instances
+ *
+ * @example
+ * ```ts
+ * import { resourceManager } from '@codefluss/threejs-shared';
+ *
+ * // Register instance
+ * resourceManager.registerInstance('bg-1');
+ *
+ * // Get shared geometry
+ * const starGeo = resourceManager.getSharedGeometry(
+ *   'star-sphere',
+ *   () => new THREE.SphereGeometry(0.05, 8, 8)
+ * );
+ *
+ * // Cleanup
+ * resourceManager.unregisterInstance('bg-1');
+ * ```
+ */
+declare class ResourceManager {
+    private static instance;
+    private geometries;
+    private materials;
+    private textures;
+    private activeInstances;
+    private constructor();
+    static getInstance(): ResourceManager;
+    /**
+     * Get or create shared geometry
+     * Multiple instances can use the same geometry
+     */
+    getSharedGeometry(key: string, create: () => any): any;
+    /**
+     * Get or create shared material
+     * Multiple instances can use the same material
+     */
+    getSharedMaterial(key: string, create: () => any): any;
+    /**
+     * Get or create shared texture
+     * Multiple instances can use the same texture
+     */
+    getSharedTexture(key: string, create: () => any): any;
+    /**
+     * Register a new instance
+     * Tracks active instances for cleanup
+     */
+    registerInstance(instanceId: string): void;
+    /**
+     * Unregister instance
+     * Triggers cleanup if last instance
+     */
+    unregisterInstance(instanceId: string): void;
+    /**
+     * Get list of active instance IDs
+     */
+    getActiveInstances(): string[];
+    /**
+     * Get resource statistics
+     */
+    getStats(): {
+        geometries: number;
+        materials: number;
+        textures: number;
+        activeInstances: number;
+    };
+    /**
+     * Force cleanup all resources
+     * Called automatically when last instance is removed
+     */
+    private cleanup;
+    /**
+     * Manual cleanup (for testing)
+     */
+    forceCleanup(): void;
+}
+export declare const resourceManager: ResourceManager;
+export {};
+//# sourceMappingURL=ResourceManager.d.ts.map

package/dist/core/ResourceManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceManager.d.ts","sourceRoot":"","sources":["../../src/core/ResourceManager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,cAAM,eAAe;IACnB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAkB;IAEzC,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,eAAe,CAAqB;IAE5C,OAAO;IAIP,MAAM,CAAC,WAAW,IAAI,eAAe;IAOrC;;;OAGG;IACH,iBAAiB,CACf,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GAAG,GAChB,GAAG;IASN;;;OAGG;IACH,iBAAiB,CACf,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GAAG,GAChB,GAAG;IASN;;;OAGG;IACH,gBAAgB,CACd,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,GAAG,GAChB,GAAG;IASN;;;OAGG;IACH,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAO1C;;;OAGG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAY5C;;OAEG;IACH,kBAAkB,IAAI,MAAM,EAAE;IAI9B;;OAEG;IACH,QAAQ;;;;;;IASR;;;OAGG;IACH,OAAO,CAAC,OAAO;IA4Bf;;OAEG;IACH,YAAY,IAAI,IAAI;CAIrB;AAGD,eAAO,MAAM,eAAe,iBAAgC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @codefluss/threejs-shared
+ *
+ * Shared ThreeJS components and utilities for canvas-based plugins
+ */
+export { InstanceProvider, useInstance, useInstanceState } from './context/instance-context';
+export { resourceManager } from './core/ResourceManager';
+export { globalPerfMonitor } from './performance/PerformanceMonitor';
+export { createPOIManager } from './poi/POIManager';
+export { POIMarker } from './poi/POIMarker';
+export type { QualityLevel, PerformanceMetrics, BaseThreeStore, POI, POIStore, SharedResource, PerformanceEvent, InstanceProviderProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAG7F,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAGrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,GAAG,EACH,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,SAAS,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{createContext as s,useRef as n,useEffect as a,useContext as i,useState as r}from"react";import{createStore as o}from"zustand";import{Html as c}from"@react-three/drei";import{useSpring as l}from"@react-spring/three";const u=s(null);function g({instanceId:t,createStore:s,children:i}){const r=n(void 0);return r.current||(r.current=s(t)),a(()=>()=>{const e=r.current?.getState();"function"==typeof e?.dispose&&e.dispose()},[]),/* @__PURE__ */e(u.Provider,{value:r.current,children:i})}function h(){const e=i(u);if(!e)throw new Error("useInstance must be used within InstanceProvider");return e}function d(e){return h()(e)}class p{static instance;geometries=/* @__PURE__ */new Map;materials=/* @__PURE__ */new Map;textures=/* @__PURE__ */new Map;activeInstances=/* @__PURE__ */new Set;constructor(){}static getInstance(){return p.instance||(p.instance=new p),p.instance}getSharedGeometry(e,t){if(!this.geometries.has(e)){const s=t();this.geometries.set(e,s),console.log(`[ResourceManager] Created geometry: ${e}`)}return this.geometries.get(e)}getSharedMaterial(e,t){if(!this.materials.has(e)){const s=t();this.materials.set(e,s),console.log(`[ResourceManager] Created material: ${e}`)}return this.materials.get(e)}getSharedTexture(e,t){if(!this.textures.has(e)){const s=t();this.textures.set(e,s),console.log(`[ResourceManager] Created texture: ${e}`)}return this.textures.get(e)}registerInstance(e){this.activeInstances.add(e),console.log(`[ResourceManager] Registered instance: ${e} (${this.activeInstances.size} total)`)}unregisterInstance(e){this.activeInstances.delete(e),console.log(`[ResourceManager] Unregistered instance: ${e} (${this.activeInstances.size} remaining)`),0===this.activeInstances.size&&this.cleanup()}getActiveInstances(){return Array.from(this.activeInstances)}getStats(){return{geometries:this.geometries.size,materials:this.materials.size,textures:this.textures.size,activeInstances:this.activeInstances.size}}cleanup(){console.log("[ResourceManager] Cleaning up all resources"),this.geometries.forEach((e,t)=>{e.dispose(),console.log(`[ResourceManager] Disposed geometry: ${t}`)}),this.materials.forEach((e,t)=>{e.dispose(),console.log(`[ResourceManager] Disposed material: ${t}`)}),this.textures.forEach((e,t)=>{e.dispose(),console.log(`[ResourceManager] Disposed texture: ${t}`)}),this.geometries.clear(),this.materials.clear(),this.textures.clear(),console.log("[ResourceManager] Cleanup complete")}forceCleanup(){this.cleanup(),this.activeInstances.clear()}}const m=p.getInstance();class I{static instance;canvasInstances=/* @__PURE__ */new Map;globalFPS=60;updateInterval=null;CHECK_INTERVAL=1e3;LOW_FPS_THRESHOLD=30;HIGH_FPS_THRESHOLD=50;constructor(){}static getInstance(){return I.instance||(I.instance=new I),I.instance}registerCanvas(e){this.canvasInstances.set(e,{fps:60,quality:"high",particleCount:0}),console.log(`[PerformanceMonitor] Registered canvas: ${e} (${this.canvasInstances.size} total)`),1===this.canvasInstances.size&&this.startMonitoring()}unregisterCanvas(e){this.canvasInstances.delete(e),console.log(`[PerformanceMonitor] Unregistered canvas: ${e} (${this.canvasInstances.size} remaining)`),0===this.canvasInstances.size&&this.stopMonitoring()}updateMetrics(e,t){const s=this.canvasInstances.get(e);s&&(s.fps=t)}updateParticleCount(e,t){const s=this.canvasInstances.get(e);s&&(s.particleCount=t)}getGlobalMetrics(){return{globalFPS:this.globalFPS,instanceCount:this.canvasInstances.size,instances:Array.from(this.canvasInstances.entries()).map(([e,t])=>({id:e,...t}))}}startMonitoring(){console.log("[PerformanceMonitor] Starting monitoring"),this.updateInterval=setInterval(()=>{this.globalFPS=this.calculateAverageFPS(),this.globalFPS<this.LOW_FPS_THRESHOLD?this.adjustQualityAcrossAll("reduce"):this.globalFPS>this.HIGH_FPS_THRESHOLD&&this.canAnyIncrease()&&this.adjustQualityAcrossAll("increase")},this.CHECK_INTERVAL)}stopMonitoring(){console.log("[PerformanceMonitor] Stopping monitoring"),this.updateInterval&&(clearInterval(this.updateInterval),this.updateInterval=null)}calculateAverageFPS(){if(0===this.canvasInstances.size)return 60;const e=Array.from(this.canvasInstances.values()).map(e=>e.fps),t=e.reduce((e,t)=>e+t,0)/e.length;return Math.round(t)}canAnyIncrease(){return Array.from(this.canvasInstances.values()).some(e=>"high"!==e.quality)}adjustQualityAcrossAll(e){let t=0;this.canvasInstances.forEach((s,n)=>{let a=s.quality;"reduce"===e?"high"===s.quality?a="medium":"medium"===s.quality&&(a="low"):"low"===s.quality?a="medium":"medium"===s.quality&&(a="high"),a!==s.quality&&(s.quality=a,this.notifyInstance(n,a),t++)}),t>0&&console.log(`[PerformanceMonitor] Adjusted quality for ${t} instances (${e})`)}notifyInstance(e,t){"undefined"!=typeof window&&window.dispatchEvent(new CustomEvent("performance:quality-change",{detail:{instanceId:e,quality:t}}))}forceCleanup(){this.stopMonitoring(),this.canvasInstances.clear(),this.globalFPS=60}}const v=I.getInstance();function f(e){return o()((t,s)=>({instanceId:e,pois:[],activePOI:null,addPOI:s=>{const n=`poi-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,a={...s,id:n};return t(e=>({pois:[...e.pois,a]})),console.log(`[POIManager:${e}] Added POI: ${n}`),n},updatePOI:(s,n)=>{t(e=>({pois:e.pois.map(e=>e.id===s?{...e,...n}:e)})),console.log(`[POIManager:${e}] Updated POI: ${s}`)},removePOI:s=>{t(e=>({pois:e.pois.filter(e=>e.id!==s),activePOI:e.activePOI===s?null:e.activePOI})),console.log(`[POIManager:${e}] Removed POI: ${s}`)},setActivePOI:s=>{t({activePOI:s}),s&&console.log(`[POIManager:${e}] Set active POI: ${s}`)},getPOI:e=>s().pois.find(t=>t.id===e),clearAll:()=>{t({pois:[],activePOI:null}),console.log(`[POIManager:${e}] Cleared all POIs`)}}))}const P="mesh";function y({id:s,position:n,label:a,description:i,color:o="#4CAF50",onClick:u}){const[g,h]=r(!1),{scale:d}=l({scale:g?1.3:1,config:{tension:300,friction:20}});/* @__PURE__ */
+return t("group",{position:n,children:[
+/* @__PURE__ */t(P,{scale:d,onClick:()=>{u&&u(s)},onPointerOver:()=>h(!0),onPointerOut:()=>h(!1),children:[
+/* @__PURE__ */e("sphereGeometry",{args:[.1,16,16]}),
+/* @__PURE__ */e("meshStandardMaterial",{color:o,emissive:o,emissiveIntensity:g?.5:.2})]}),g&&/* @__PURE__ */t(P,{rotation:[Math.PI/2,0,0],children:[
+/* @__PURE__ */e("ringGeometry",{args:[.12,.15,32]}),
+/* @__PURE__ */e("meshBasicMaterial",{color:o,transparent:!0,opacity:.6})]}),
+/* @__PURE__ */e(c,{position:[0,.3,0],center:!0,distanceFactor:10,style:{transition:"opacity 0.2s, transform 0.2s",opacity:g?1:.8,transform:g?"scale(1.05)":"scale(1)",pointerEvents:"none"},children:/* @__PURE__ */t("div",{style:{background:"rgba(0, 0, 0, 0.8)",color:"white",padding:"8px 12px",borderRadius:"4px",fontSize:"14px",whiteSpace:"nowrap",border:`2px solid ${o}`,boxShadow:"0 4px 12px rgba(0,0,0,0.3)"},children:[
+/* @__PURE__ */e("div",{style:{fontWeight:"bold"},children:a}),g&&i&&/* @__PURE__ */e("div",{style:{fontSize:"12px",opacity:.8,marginTop:"4px",maxWidth:"200px",whiteSpace:"normal"},children:i})]})})]})}export{g as InstanceProvider,y as POIMarker,f as createPOIManager,v as globalPerfMonitor,m as resourceManager,h as useInstance,d as useInstanceState};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/context/instance-context.tsx","../src/core/ResourceManager.ts","../src/performance/PerformanceMonitor.ts","../src/poi/POIManager.ts","../src/poi/POIMarker.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useRef, useEffect } from 'react';\nimport type { StoreApi } from 'zustand';\nimport type { InstanceProviderProps } from '../types';\n\nconst InstanceContext = createContext<StoreApi<any> | null>(null);\n\n/**\n * Instance Provider - Creates isolated store per plugin instance\n *\n * @example\n * ```tsx\n * <InstanceProvider\n *   instanceId={elementId}\n *   createStore={createBackgroundInstance}\n * >\n *   <InteractiveBackground />\n * </InstanceProvider>\n * ```\n */\nexport function InstanceProvider<T>({\n  instanceId,\n  createStore,\n  children\n}: InstanceProviderProps<T>) {\n  const storeRef = useRef<StoreApi<T> | undefined>(undefined);\n\n  // Create store only once\n  if (!storeRef.current) {\n    storeRef.current = createStore(instanceId);\n  }\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      const state = storeRef.current?.getState() as any;\n      if (typeof state?.dispose === 'function') {\n        state.dispose();\n      }\n    };\n  }, []);\n\n  return (\n    <InstanceContext.Provider value={storeRef.current}>\n      {children}\n    </InstanceContext.Provider>\n  );\n}\n\n/**\n * Hook to access the instance store\n *\n * @throws Error if used outside InstanceProvider\n *\n * @example\n * ```tsx\n * const instance = useInstance();\n * const isPlaying = instance((state) => state.isPlaying);\n * ```\n */\nexport function useInstance<T = any>(): StoreApi<T> {\n  const store = useContext(InstanceContext);\n  if (!store) {\n    throw new Error('useInstance must be used within InstanceProvider');\n  }\n  return store as StoreApi<T>;\n}\n\n/**\n * Hook to select state from instance store\n *\n * @example\n * ```tsx\n * const isPlaying = useInstanceState(s => s.isPlaying);\n * const camera = useInstanceState(s => s.camera);\n * ```\n */\nexport function useInstanceState<T, R>(\n  selector: (state: T) => R\n): R {\n  const store = useInstance<T>();\n\n  // Use the store as a hook\n  return (store as any)(selector);\n}\n","/**\n * Resource Manager - Singleton for sharing geometries, materials, and textures\n * across multiple ThreeJS instances\n *\n * Benefits:\n * - Reduces memory usage by sharing resources\n * - Automatic cleanup when last instance is removed\n * - Debug tracking of active instances\n *\n * @example\n * ```ts\n * import { resourceManager } from '@codefluss/threejs-shared';\n *\n * // Register instance\n * resourceManager.registerInstance('bg-1');\n *\n * // Get shared geometry\n * const starGeo = resourceManager.getSharedGeometry(\n *   'star-sphere',\n *   () => new THREE.SphereGeometry(0.05, 8, 8)\n * );\n *\n * // Cleanup\n * resourceManager.unregisterInstance('bg-1');\n * ```\n */\nclass ResourceManager {\n  private static instance: ResourceManager;\n\n  private geometries = new Map<string, any>();\n  private materials = new Map<string, any>();\n  private textures = new Map<string, any>();\n  private activeInstances = new Set<string>();\n\n  private constructor() {\n    // Singleton - private constructor\n  }\n\n  static getInstance(): ResourceManager {\n    if (!ResourceManager.instance) {\n      ResourceManager.instance = new ResourceManager();\n    }\n    return ResourceManager.instance;\n  }\n\n  /**\n   * Get or create shared geometry\n   * Multiple instances can use the same geometry\n   */\n  getSharedGeometry(\n    key: string,\n    create: () => any\n  ): any {\n    if (!this.geometries.has(key)) {\n      const geometry = create();\n      this.geometries.set(key, geometry);\n      console.log(`[ResourceManager] Created geometry: ${key}`);\n    }\n    return this.geometries.get(key)!;\n  }\n\n  /**\n   * Get or create shared material\n   * Multiple instances can use the same material\n   */\n  getSharedMaterial(\n    key: string,\n    create: () => any\n  ): any {\n    if (!this.materials.has(key)) {\n      const material = create();\n      this.materials.set(key, material);\n      console.log(`[ResourceManager] Created material: ${key}`);\n    }\n    return this.materials.get(key)!;\n  }\n\n  /**\n   * Get or create shared texture\n   * Multiple instances can use the same texture\n   */\n  getSharedTexture(\n    key: string,\n    create: () => any\n  ): any {\n    if (!this.textures.has(key)) {\n      const texture = create();\n      this.textures.set(key, texture);\n      console.log(`[ResourceManager] Created texture: ${key}`);\n    }\n    return this.textures.get(key)!;\n  }\n\n  /**\n   * Register a new instance\n   * Tracks active instances for cleanup\n   */\n  registerInstance(instanceId: string): void {\n    this.activeInstances.add(instanceId);\n    console.log(\n      `[ResourceManager] Registered instance: ${instanceId} (${this.activeInstances.size} total)`\n    );\n  }\n\n  /**\n   * Unregister instance\n   * Triggers cleanup if last instance\n   */\n  unregisterInstance(instanceId: string): void {\n    this.activeInstances.delete(instanceId);\n    console.log(\n      `[ResourceManager] Unregistered instance: ${instanceId} (${this.activeInstances.size} remaining)`\n    );\n\n    // Cleanup wenn keine Instanzen mehr\n    if (this.activeInstances.size === 0) {\n      this.cleanup();\n    }\n  }\n\n  /**\n   * Get list of active instance IDs\n   */\n  getActiveInstances(): string[] {\n    return Array.from(this.activeInstances);\n  }\n\n  /**\n   * Get resource statistics\n   */\n  getStats() {\n    return {\n      geometries: this.geometries.size,\n      materials: this.materials.size,\n      textures: this.textures.size,\n      activeInstances: this.activeInstances.size\n    };\n  }\n\n  /**\n   * Force cleanup all resources\n   * Called automatically when last instance is removed\n   */\n  private cleanup(): void {\n    console.log('[ResourceManager] Cleaning up all resources');\n\n    // Dispose geometries\n    this.geometries.forEach((geo, key) => {\n      geo.dispose();\n      console.log(`[ResourceManager] Disposed geometry: ${key}`);\n    });\n\n    // Dispose materials\n    this.materials.forEach((mat, key) => {\n      mat.dispose();\n      console.log(`[ResourceManager] Disposed material: ${key}`);\n    });\n\n    // Dispose textures\n    this.textures.forEach((tex, key) => {\n      tex.dispose();\n      console.log(`[ResourceManager] Disposed texture: ${key}`);\n    });\n\n    this.geometries.clear();\n    this.materials.clear();\n    this.textures.clear();\n\n    console.log('[ResourceManager] Cleanup complete');\n  }\n\n  /**\n   * Manual cleanup (for testing)\n   */\n  forceCleanup(): void {\n    this.cleanup();\n    this.activeInstances.clear();\n  }\n}\n\n// Export singleton instance\nexport const resourceManager = ResourceManager.getInstance();\n","import type { QualityLevel, PerformanceMetrics } from '../types';\n\n/**\n * Global Performance Monitor - Singleton for tracking FPS across all instances\n * and coordinating adaptive quality adjustments\n *\n * Features:\n * - Track FPS per instance\n * - Calculate global average FPS\n * - Automatic quality adjustment when performance drops\n * - Event-based quality change notifications\n *\n * @example\n * ```ts\n * import { globalPerfMonitor } from '@codefluss/threejs-shared';\n *\n * // Register canvas\n * globalPerfMonitor.registerCanvas('bg-1');\n *\n * // Update FPS in render loop\n * useFrame((state, delta) => {\n *   const fps = 1 / delta;\n *   globalPerfMonitor.updateMetrics('bg-1', fps);\n * });\n *\n * // Listen for quality changes\n * useEffect(() => {\n *   const handler = (e: CustomEvent) => {\n *     if (e.detail.instanceId === 'bg-1') {\n *       setQuality(e.detail.quality);\n *     }\n *   };\n *   window.addEventListener('performance:quality-change', handler);\n *   return () => window.removeEventListener('performance:quality-change', handler);\n * }, []);\n * ```\n */\nclass GlobalPerformanceMonitor {\n  private static instance: GlobalPerformanceMonitor;\n\n  private canvasInstances = new Map<string, PerformanceMetrics>();\n  private globalFPS = 60;\n  private updateInterval: ReturnType<typeof setInterval> | null = null;\n  private readonly CHECK_INTERVAL = 1000; // 1 second\n  private readonly LOW_FPS_THRESHOLD = 30;\n  private readonly HIGH_FPS_THRESHOLD = 50;\n\n  private constructor() {\n    // Singleton - private constructor\n  }\n\n  static getInstance(): GlobalPerformanceMonitor {\n    if (!GlobalPerformanceMonitor.instance) {\n      GlobalPerformanceMonitor.instance = new GlobalPerformanceMonitor();\n    }\n    return GlobalPerformanceMonitor.instance;\n  }\n\n  /**\n   * Register a new canvas instance\n   */\n  registerCanvas(instanceId: string): void {\n    this.canvasInstances.set(instanceId, {\n      fps: 60,\n      quality: 'high',\n      particleCount: 0\n    });\n\n    console.log(\n      `[PerformanceMonitor] Registered canvas: ${instanceId} (${this.canvasInstances.size} total)`\n    );\n\n    // Start monitoring if first instance\n    if (this.canvasInstances.size === 1) {\n      this.startMonitoring();\n    }\n  }\n\n  /**\n   * Unregister canvas instance\n   */\n  unregisterCanvas(instanceId: string): void {\n    this.canvasInstances.delete(instanceId);\n\n    console.log(\n      `[PerformanceMonitor] Unregistered canvas: ${instanceId} (${this.canvasInstances.size} remaining)`\n    );\n\n    // Stop monitoring if no instances\n    if (this.canvasInstances.size === 0) {\n      this.stopMonitoring();\n    }\n  }\n\n  /**\n   * Update FPS for specific instance\n   * Call this in your render loop (useFrame)\n   */\n  updateMetrics(instanceId: string, fps: number): void {\n    const metrics = this.canvasInstances.get(instanceId);\n    if (!metrics) return;\n\n    metrics.fps = fps;\n  }\n\n  /**\n   * Update particle count for specific instance\n   */\n  updateParticleCount(instanceId: string, count: number): void {\n    const metrics = this.canvasInstances.get(instanceId);\n    if (!metrics) return;\n\n    metrics.particleCount = count;\n  }\n\n  /**\n   * Get global performance metrics\n   */\n  getGlobalMetrics() {\n    return {\n      globalFPS: this.globalFPS,\n      instanceCount: this.canvasInstances.size,\n      instances: Array.from(this.canvasInstances.entries()).map(([id, metrics]) => ({\n        id,\n        ...metrics\n      }))\n    };\n  }\n\n  /**\n   * Start monitoring performance\n   */\n  private startMonitoring(): void {\n    console.log('[PerformanceMonitor] Starting monitoring');\n\n    this.updateInterval = setInterval(() => {\n      this.globalFPS = this.calculateAverageFPS();\n\n      // Adaptive Quality basierend auf Global FPS\n      if (this.globalFPS < this.LOW_FPS_THRESHOLD) {\n        this.adjustQualityAcrossAll('reduce');\n      } else if (this.globalFPS > this.HIGH_FPS_THRESHOLD && this.canAnyIncrease()) {\n        this.adjustQualityAcrossAll('increase');\n      }\n    }, this.CHECK_INTERVAL);\n  }\n\n  /**\n   * Stop monitoring\n   */\n  private stopMonitoring(): void {\n    console.log('[PerformanceMonitor] Stopping monitoring');\n\n    if (this.updateInterval) {\n      clearInterval(this.updateInterval);\n      this.updateInterval = null;\n    }\n  }\n\n  /**\n   * Calculate average FPS across all instances\n   */\n  private calculateAverageFPS(): number {\n    if (this.canvasInstances.size === 0) return 60;\n\n    const fpsList = Array.from(this.canvasInstances.values()).map(m => m.fps);\n    const average = fpsList.reduce((a, b) => a + b, 0) / fpsList.length;\n\n    return Math.round(average);\n  }\n\n  /**\n   * Check if any instance can increase quality\n   */\n  private canAnyIncrease(): boolean {\n    return Array.from(this.canvasInstances.values()).some(\n      m => m.quality !== 'high'\n    );\n  }\n\n  /**\n   * Adjust quality across all instances\n   */\n  private adjustQualityAcrossAll(direction: 'reduce' | 'increase'): void {\n    let changedCount = 0;\n\n    this.canvasInstances.forEach((metrics, instanceId) => {\n      let newQuality = metrics.quality;\n\n      if (direction === 'reduce') {\n        if (metrics.quality === 'high') {\n          newQuality = 'medium';\n        } else if (metrics.quality === 'medium') {\n          newQuality = 'low';\n        }\n      } else {\n        if (metrics.quality === 'low') {\n          newQuality = 'medium';\n        } else if (metrics.quality === 'medium') {\n          newQuality = 'high';\n        }\n      }\n\n      if (newQuality !== metrics.quality) {\n        metrics.quality = newQuality;\n        this.notifyInstance(instanceId, newQuality);\n        changedCount++;\n      }\n    });\n\n    if (changedCount > 0) {\n      console.log(\n        `[PerformanceMonitor] Adjusted quality for ${changedCount} instances (${direction})`\n      );\n    }\n  }\n\n  /**\n   * Notify instance of quality change via CustomEvent\n   */\n  private notifyInstance(instanceId: string, quality: QualityLevel): void {\n    if (typeof window === 'undefined') return;\n\n    window.dispatchEvent(\n      new CustomEvent('performance:quality-change', {\n        detail: { instanceId, quality }\n      })\n    );\n  }\n\n  /**\n   * Force cleanup (for testing)\n   */\n  forceCleanup(): void {\n    this.stopMonitoring();\n    this.canvasInstances.clear();\n    this.globalFPS = 60;\n  }\n}\n\n// Export singleton instance\nexport const globalPerfMonitor = GlobalPerformanceMonitor.getInstance();\n","import { createStore } from 'zustand';\nimport type { POI, POIStore } from '../types';\n\n/**\n * POI Manager Factory - Creates instance-based POI stores\n *\n * POI = Points of Interest (3D markers with labels)\n *\n * Features:\n * - Add/update/remove POI markers\n * - Track active POI\n * - Instance-based isolation\n *\n * @example\n * ```tsx\n * const poiStore = createPOIManager('conf-1');\n *\n * // Add POI\n * const id = poiStore.getState().addPOI({\n *   position: [1, 0.5, 0],\n *   label: 'Feature A',\n *   description: 'Main product feature',\n *   color: '#4CAF50'\n * });\n *\n * // Set active\n * poiStore.getState().setActivePOI(id);\n * ```\n */\nexport function createPOIManager(instanceId: string) {\n  return createStore<POIStore>()((set, get) => ({\n    instanceId,\n    pois: [],\n    activePOI: null,\n\n    /**\n     * Add new POI marker\n     * @returns Generated POI ID\n     */\n    addPOI: (poi: Omit<POI, 'id'>) => {\n      const id = `poi-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newPOI: POI = { ...poi, id };\n\n      set(state => ({\n        pois: [...state.pois, newPOI]\n      }));\n\n      console.log(`[POIManager:${instanceId}] Added POI: ${id}`);\n      return id;\n    },\n\n    /**\n     * Update existing POI\n     */\n    updatePOI: (id: string, updates: Partial<POI>) => {\n      set(state => ({\n        pois: state.pois.map(p =>\n          p.id === id ? { ...p, ...updates } : p\n        )\n      }));\n\n      console.log(`[POIManager:${instanceId}] Updated POI: ${id}`);\n    },\n\n    /**\n     * Remove POI by ID\n     */\n    removePOI: (id: string) => {\n      set(state => ({\n        pois: state.pois.filter(p => p.id !== id),\n        activePOI: state.activePOI === id ? null : state.activePOI\n      }));\n\n      console.log(`[POIManager:${instanceId}] Removed POI: ${id}`);\n    },\n\n    /**\n     * Set active POI (highlighted)\n     */\n    setActivePOI: (id: string | null) => {\n      set({ activePOI: id });\n\n      if (id) {\n        console.log(`[POIManager:${instanceId}] Set active POI: ${id}`);\n      }\n    },\n\n    /**\n     * Get POI by ID\n     */\n    getPOI: (id: string) => {\n      return get().pois.find(p => p.id === id);\n    },\n\n    /**\n     * Clear all POIs\n     */\n    clearAll: () => {\n      set({ pois: [], activePOI: null });\n      console.log(`[POIManager:${instanceId}] Cleared all POIs`);\n    }\n  }));\n}\n","\"use client\";\n\nimport { Html } from '@react-three/drei';\nimport { useSpring } from '@react-spring/three';\nimport { useState } from 'react';\nimport type { POI } from '../types';\n\nconst Group: any = 'group';\nconst Mesh: any = 'mesh';\nconst SphereGeometry: any = 'sphereGeometry';\nconst RingGeometry: any = 'ringGeometry';\nconst MeshStandardMaterial: any = 'meshStandardMaterial';\nconst MeshBasicMaterial: any = 'meshBasicMaterial';\n\n/**\n * POI Marker Component - 3D sphere with HTML label overlay\n *\n * Features:\n * - Animated hover effect\n * - Clickable interaction\n * - HTML label with description\n * - Custom color\n *\n * @example\n * ```tsx\n * <POIMarker\n *   id=\"poi-1\"\n *   position={[1, 0.5, 0]}\n *   label=\"Feature A\"\n *   description=\"Main product feature\"\n *   color=\"#4CAF50\"\n *   onClick={(id) => console.log('Clicked:', id)}\n * />\n * ```\n */\nexport function POIMarker({\n  id,\n  position,\n  label,\n  description,\n  color = '#4CAF50',\n  onClick\n}: POI) {\n  const [hovered, setHovered] = useState(false);\n\n  // Animated scale on hover\n  const { scale } = useSpring({\n    scale: hovered ? 1.3 : 1,\n    config: { tension: 300, friction: 20 }\n  });\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick(id);\n    }\n  };\n\n  return (\n    <Group position={position}>\n      {/* 3D Marker Sphere */}\n      <Mesh\n        // @ts-ignore - animated scale is valid but types are incompatible\n        scale={scale}\n        onClick={handleClick}\n        onPointerOver={() => setHovered(true)}\n        onPointerOut={() => setHovered(false)}\n      >\n        <SphereGeometry args={[0.1, 16, 16]} />\n        <MeshStandardMaterial\n          color={color}\n          emissive={color}\n          emissiveIntensity={hovered ? 0.5 : 0.2}\n        />\n      </Mesh>\n\n      {/* Pulsing ring effect */}\n      {hovered && (\n        <Mesh rotation={[Math.PI / 2, 0, 0]}>\n          <RingGeometry args={[0.12, 0.15, 32]} />\n          <MeshBasicMaterial color={color} transparent opacity={0.6} />\n        </Mesh>\n      )}\n\n      {/* HTML Label Overlay */}\n      <Html\n        position={[0, 0.3, 0]}\n        center\n        distanceFactor={10}\n        style={{\n          transition: 'opacity 0.2s, transform 0.2s',\n          opacity: hovered ? 1 : 0.8,\n          transform: hovered ? 'scale(1.05)' : 'scale(1)',\n          pointerEvents: 'none'\n        }}\n      >\n        <div\n          style={{\n            background: 'rgba(0, 0, 0, 0.8)',\n            color: 'white',\n            padding: '8px 12px',\n            borderRadius: '4px',\n            fontSize: '14px',\n            whiteSpace: 'nowrap',\n            border: `2px solid ${color}`,\n            boxShadow: '0 4px 12px rgba(0,0,0,0.3)'\n          }}\n        >\n          <div style={{ fontWeight: 'bold' }}>{label}</div>\n          {hovered && description && (\n            <div\n              style={{\n                fontSize: '12px',\n                opacity: 0.8,\n                marginTop: '4px',\n                maxWidth: '200px',\n                whiteSpace: 'normal'\n              }}\n            >\n              {description}\n            </div>\n          )}\n        </div>\n      </Html>\n    </Group>\n  );\n}\n"],"names":["InstanceContext","createContext","InstanceProvider","instanceId","createStore","children","storeRef","useRef","current","useEffect","state","getState","dispose","Provider","value","useInstance","store","useContext","Error","useInstanceState","selector","ResourceManager","static","geometries","Map","materials","textures","activeInstances","Set","constructor","getInstance","instance","getSharedGeometry","key","create","this","has","geometry","set","console","log","get","getSharedMaterial","material","getSharedTexture","texture","registerInstance","add","size","unregisterInstance","delete","cleanup","getActiveInstances","Array","from","getStats","forEach","geo","mat","tex","clear","forceCleanup","resourceManager","GlobalPerformanceMonitor","canvasInstances","globalFPS","updateInterval","CHECK_INTERVAL","LOW_FPS_THRESHOLD","HIGH_FPS_THRESHOLD","registerCanvas","fps","quality","particleCount","startMonitoring","unregisterCanvas","stopMonitoring","updateMetrics","metrics","updateParticleCount","count","getGlobalMetrics","instanceCount","instances","entries","map","id","setInterval","calculateAverageFPS","adjustQualityAcrossAll","canAnyIncrease","clearInterval","fpsList","values","m","average","reduce","a","b","length","Math","round","some","direction","changedCount","newQuality","notifyInstance","window","dispatchEvent","CustomEvent","detail","globalPerfMonitor","createPOIManager","pois","activePOI","addPOI","poi","Date","now","random","toString","substr","newPOI","updatePOI","updates","p","removePOI","filter","setActivePOI","getPOI","find","clearAll","Mesh","POIMarker","position","label","description","color","onClick","hovered","setHovered","useState","scale","useSpring","config","tension","friction","jsxs","onPointerOver","onPointerOut","jsx","args","emissive","emissiveIntensity","rotation","PI","transparent","opacity","Html","center","distanceFactor","style","transition","transform","pointerEvents","background","padding","borderRadius","fontSize","whiteSpace","border","boxShadow","fontWeight","marginTop","maxWidth"],"mappings":"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"}

package/dist/performance/PerformanceMonitor.d.ts

@@ -0,0 +1,110 @@
+import { QualityLevel } from '../types';
+/**
+ * Global Performance Monitor - Singleton for tracking FPS across all instances
+ * and coordinating adaptive quality adjustments
+ *
+ * Features:
+ * - Track FPS per instance
+ * - Calculate global average FPS
+ * - Automatic quality adjustment when performance drops
+ * - Event-based quality change notifications
+ *
+ * @example
+ * ```ts
+ * import { globalPerfMonitor } from '@codefluss/threejs-shared';
+ *
+ * // Register canvas
+ * globalPerfMonitor.registerCanvas('bg-1');
+ *
+ * // Update FPS in render loop
+ * useFrame((state, delta) => {
+ *   const fps = 1 / delta;
+ *   globalPerfMonitor.updateMetrics('bg-1', fps);
+ * });
+ *
+ * // Listen for quality changes
+ * useEffect(() => {
+ *   const handler = (e: CustomEvent) => {
+ *     if (e.detail.instanceId === 'bg-1') {
+ *       setQuality(e.detail.quality);
+ *     }
+ *   };
+ *   window.addEventListener('performance:quality-change', handler);
+ *   return () => window.removeEventListener('performance:quality-change', handler);
+ * }, []);
+ * ```
+ */
+declare class GlobalPerformanceMonitor {
+    private static instance;
+    private canvasInstances;
+    private globalFPS;
+    private updateInterval;
+    private readonly CHECK_INTERVAL;
+    private readonly LOW_FPS_THRESHOLD;
+    private readonly HIGH_FPS_THRESHOLD;
+    private constructor();
+    static getInstance(): GlobalPerformanceMonitor;
+    /**
+     * Register a new canvas instance
+     */
+    registerCanvas(instanceId: string): void;
+    /**
+     * Unregister canvas instance
+     */
+    unregisterCanvas(instanceId: string): void;
+    /**
+     * Update FPS for specific instance
+     * Call this in your render loop (useFrame)
+     */
+    updateMetrics(instanceId: string, fps: number): void;
+    /**
+     * Update particle count for specific instance
+     */
+    updateParticleCount(instanceId: string, count: number): void;
+    /**
+     * Get global performance metrics
+     */
+    getGlobalMetrics(): {
+        globalFPS: number;
+        instanceCount: number;
+        instances: {
+            fps: number;
+            quality: QualityLevel;
+            particleCount: number;
+            drawCalls?: number;
+            triangles?: number;
+            id: string;
+        }[];
+    };
+    /**
+     * Start monitoring performance
+     */
+    private startMonitoring;
+    /**
+     * Stop monitoring
+     */
+    private stopMonitoring;
+    /**
+     * Calculate average FPS across all instances
+     */
+    private calculateAverageFPS;
+    /**
+     * Check if any instance can increase quality
+     */
+    private canAnyIncrease;
+    /**
+     * Adjust quality across all instances
+     */
+    private adjustQualityAcrossAll;
+    /**
+     * Notify instance of quality change via CustomEvent
+     */
+    private notifyInstance;
+    /**
+     * Force cleanup (for testing)
+     */
+    forceCleanup(): void;
+}
+export declare const globalPerfMonitor: GlobalPerformanceMonitor;
+export {};
+//# sourceMappingURL=PerformanceMonitor.d.ts.map

package/dist/performance/PerformanceMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceMonitor.d.ts","sourceRoot":"","sources":["../../src/performance/PerformanceMonitor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAsB,MAAM,UAAU,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,cAAM,wBAAwB;IAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAElD,OAAO,CAAC,eAAe,CAAyC;IAChE,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,cAAc,CAA+C;IACrE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAM;IACxC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAM;IAEzC,OAAO;IAIP,MAAM,CAAC,WAAW,IAAI,wBAAwB;IAO9C;;OAEG;IACH,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAiBxC;;OAEG;IACH,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAa1C;;;OAGG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAOpD;;OAEG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAO5D;;OAEG;IACH,gBAAgB;;;;;;;;;;;;IAWhB;;OAEG;IACH,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAS3B;;OAEG;IACH,OAAO,CAAC,cAAc;IAMtB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAkC9B;;OAEG;IACH,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,YAAY,IAAI,IAAI;CAKrB;AAGD,eAAO,MAAM,iBAAiB,0BAAyC,CAAC"}

package/dist/poi/POIManager.d.ts

@@ -0,0 +1,29 @@
+import { POIStore } from '../types';
+/**
+ * POI Manager Factory - Creates instance-based POI stores
+ *
+ * POI = Points of Interest (3D markers with labels)
+ *
+ * Features:
+ * - Add/update/remove POI markers
+ * - Track active POI
+ * - Instance-based isolation
+ *
+ * @example
+ * ```tsx
+ * const poiStore = createPOIManager('conf-1');
+ *
+ * // Add POI
+ * const id = poiStore.getState().addPOI({
+ *   position: [1, 0.5, 0],
+ *   label: 'Feature A',
+ *   description: 'Main product feature',
+ *   color: '#4CAF50'
+ * });
+ *
+ * // Set active
+ * poiStore.getState().setActivePOI(id);
+ * ```
+ */
+export declare function createPOIManager(instanceId: string): import('zustand').StoreApi<POIStore>;
+//# sourceMappingURL=POIManager.d.ts.map

package/dist/poi/POIManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POIManager.d.ts","sourceRoot":"","sources":["../../src/poi/POIManager.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAO,QAAQ,EAAE,MAAM,UAAU,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,wCAyElD"}

package/dist/poi/POIMarker.d.ts

@@ -0,0 +1,24 @@
+import { POI } from '../types';
+/**
+ * POI Marker Component - 3D sphere with HTML label overlay
+ *
+ * Features:
+ * - Animated hover effect
+ * - Clickable interaction
+ * - HTML label with description
+ * - Custom color
+ *
+ * @example
+ * ```tsx
+ * <POIMarker
+ *   id="poi-1"
+ *   position={[1, 0.5, 0]}
+ *   label="Feature A"
+ *   description="Main product feature"
+ *   color="#4CAF50"
+ *   onClick={(id) => console.log('Clicked:', id)}
+ * />
+ * ```
+ */
+export declare function POIMarker({ id, position, label, description, color, onClick }: POI): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=POIMarker.d.ts.map

package/dist/poi/POIMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"POIMarker.d.ts","sourceRoot":"","sources":["../../src/poi/POIMarker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AASpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAiB,EACjB,OAAO,EACR,EAAE,GAAG,2CAmFL"}

package/dist/types/index.d.ts

@@ -0,0 +1,55 @@
+import { StoreApi } from 'zustand';
+export type QualityLevel = 'high' | 'medium' | 'low';
+export interface PerformanceMetrics {
+    fps: number;
+    quality: QualityLevel;
+    particleCount: number;
+    drawCalls?: number;
+    triangles?: number;
+}
+export interface BaseThreeStore {
+    instanceId: string;
+    scene: any;
+    camera: any;
+    renderer: any;
+    isReady: boolean;
+    init: (canvasElement: HTMLCanvasElement) => void;
+    dispose: () => void;
+}
+export interface POI {
+    id: string;
+    position: [number, number, number];
+    label: string;
+    description?: string;
+    icon?: string;
+    color?: string;
+    metadata?: Record<string, unknown>;
+    onClick?: (id: string) => void;
+}
+export interface POIStore {
+    instanceId: string;
+    pois: POI[];
+    activePOI: string | null;
+    addPOI: (poi: Omit<POI, 'id'>) => string;
+    updatePOI: (id: string, updates: Partial<POI>) => void;
+    removePOI: (id: string) => void;
+    setActivePOI: (id: string | null) => void;
+    getPOI: (id: string) => POI | undefined;
+    clearAll: () => void;
+}
+export interface SharedResource {
+    key: string;
+    refCount: number;
+    resource: any;
+}
+export interface PerformanceEvent {
+    instanceId: string;
+    quality: QualityLevel;
+    fps?: number;
+}
+export interface InstanceProviderProps<T> {
+    instanceId: string;
+    createStore: (id: string) => StoreApi<T>;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGxC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAGrD,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,YAAY,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IAEjB,IAAI,EAAE,CAAC,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,MAAM,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,MAAM,CAAC;IACzC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,GAAG,SAAS,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,GAAG,CAAC;CACf;AAGD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@codefluss/threejs-shared",
+  "version": "0.0.1-alpha.1",
+  "type": "module",
+  "description": "Shared ThreeJS components and utilities for canvas-based plugins",
+  "keywords": [
+    "codefluss",
+    "threejs",
+    "3d",
+    "canvas",
+    "shared"
+  ],
+  "author": "Codefluss",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@react-spring/three": "^10.0.3",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.4.2",
+    "@react-three/rapier": "^2.2.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "three": "^0.181.2",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.4",
+    "@types/react-dom": "^19.2.3",
+    "@types/three": "^0.181.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.7",
+    "vite-plugin-dts": "^4.5.4",
+    "@codefluss/vite-config-lib": "0.0.1-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  }
+}