@encarnage7/local-meet 1.0.0 → 1.0.1

package/README.md

@@ -7,42 +7,42 @@
 
 ---
 
-## ✨ Características
+## Características
 
-- 🚀 **Cero Dependencias en Runtime**: Ligera, rápida y empaquetada en ESM, CommonJS y Browser UMD.
-- 🌐 **Doble Arquitectura**: Funciona en modo **WebRTC P2P Mesh Ilimitado** (gratis, sin servidores de medios) y **Cloudflare Calls SFU** (1,000 GB/mes gratis).
-- 🛡️ **Señalización Ultrarresistente por HTTPS**: Supera firewalls restrictivos, NAT simétrico y redes móviles 4G/5G gracias a su bus de respaldo HTTPS `/api/room-sync`.
-- 🔒 **Cifrado de Extremo a Extremo (E2EE)**: Mensajería de datos, chat y reacciones cifradas con AES-GCM-256 mediante Web Crypto API.
-- 🖥️ **Pantalla Compartida Nativa**: Conexión directa y fluida sin pantallas negras.
-- 🚪 **Sala de Espera y Controles de Anfitrión**: Admitir, rechazar, silenciar micrófonos, expulsar y finalizar salas para todos.
-- 📦 **Soporte TypeScript Completo**: Definiciones de tipos `.d.ts` incluidas.
+- **Cero Dependencias en Runtime**: Ligera, rápida y empaquetada en ESM, CommonJS y Browser UMD.
+- **Doble Arquitectura**: Funciona en modo **WebRTC P2P Mesh Ilimitado** (gratis, sin servidores de medios) y **Cloudflare Calls SFU** (1,000 GB/mes gratis).
+- **Señalización Ultrarresistente por HTTPS**: Supera firewalls restrictivos, NAT simétrico y redes móviles 4G/5G gracias a su bus de respaldo HTTPS `/api/room-sync`.
+- **Cifrado de Extremo a Extremo (E2EE)**: Mensajería de datos, chat y reacciones cifradas con AES-GCM-256 mediante Web Crypto API.
+- **Pantalla Compartida Nativa**: Conexión directa y fluida sin pantallas negras.
+- **Sala de Espera y Controles de Anfitrión**: Admitir, rechazar, silenciar micrófonos, expulsar y finalizar salas para todos.
+- **Soporte TypeScript Completo**: Definiciones de tipos `.d.ts` incluidas.
 
 ---
 
-## 📦 Instalación
+## Instalación
 
-### Vía NPM (React, Next.js, Vue, Svelte, Vite)
+### Vía NPM (React, Next.js, Vue, Angular, Svelte, Vite)
 ```bash
-npm install local-meet
+npm install @encarnage7/local-meet
 ```
 
 ### Vía CDN (HTML directo sin bundler, igual que Axios)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/local-meet@1.0.0/dist/local-meet.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@encarnage7/local-meet@1.0.0/dist/local-meet.min.js"></script>
 ```
 *(O a través de unpkg)*:
 ```html
-<script src="https://unpkg.com/local-meet@1.0.0/dist/local-meet.min.js"></script>
+<script src="https://unpkg.com/@encarnage7/local-meet@1.0.0/dist/local-meet.min.js"></script>
 ```
 
 ---
 
-## 🚀 Inicio Rápido
+## Inicio Rápido
 
 ### 1. Unirse como Invitado (3 líneas)
 
 ```javascript
-import { LocalMeet, RoomEvents } from "local-meet";
+import { LocalMeet, RoomEvents } from "@encarnage7/local-meet";
 
 // 1. Conectar a la sala
 const room = await LocalMeet.join({
@@ -67,7 +67,7 @@ await room.enableCameraAndMicrophone();
 ### 2. Crear una Sala como Anfitrión
 
 ```javascript
-import { LocalMeet, RoomEvents, EngineModes } from "local-meet";
+import { LocalMeet, RoomEvents, EngineModes } from "@encarnage7/local-meet";
 
 const room = await LocalMeet.createRoom({
   serverUrl: "https://tu-worker.workers.dev",
@@ -91,11 +91,166 @@ await room.enableCameraAndMicrophone();
 
 ---
 
-### 3. Ejemplo con React / Next.js
+### 3. Ejemplo con Vue 3 (Composition API / `<script setup>`)
+
+```vue
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { LocalMeet, RoomEvents } from "@encarnage7/local-meet";
+
+const props = defineProps({
+  roomHash: { type: String, required: true },
+  userName: { type: String, default: "Invitado" },
+  serverUrl: { type: String, default: "https://tu-worker.workers.dev" }
+});
+
+const videoContainer = ref(null);
+let room = null;
+
+onMounted(async () => {
+  room = await LocalMeet.join({
+    serverUrl: props.serverUrl,
+    roomHash: props.roomHash,
+    guestName: props.userName,
+  });
+
+  room.on(RoomEvents.TrackSubscribed, (track) => {
+    const el = track.attach();
+    videoContainer.value?.appendChild(el);
+  });
+
+  room.on(RoomEvents.TrackUnsubscribed, (track) => {
+    track.detach().forEach((el) => el.remove());
+  });
+
+  await room.connect();
+  await room.enableCameraAndMicrophone();
+});
+
+onUnmounted(() => {
+  room?.disconnect();
+});
+
+const toggleMic = () => room?.setMicrophoneEnabled(false);
+const toggleScreen = () => room?.startScreenShare();
+const leave = () => room?.disconnect();
+</script>
+
+<template>
+  <div class="meeting-room">
+    <div ref="videoContainer" class="video-grid"></div>
+    <div class="controls">
+      <button @click="toggleMic">Silenciar Micrófono</button>
+      <button @click="toggleScreen">Compartir Pantalla</button>
+      <button @click="leave">Salir de la Reunión</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.video-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+}
+.controls {
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+}
+</style>
+```
+
+---
+
+### 4. Ejemplo con Angular (Standalone Component / TypeScript)
+
+```typescript
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LocalMeet, LocalMeetRoom, RoomEvents } from '@encarnage7/local-meet';
+
+@Component({
+  selector: 'app-video-meeting',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="meeting-room">
+      <div #videoContainer class="video-grid"></div>
+      <div class="controls">
+        <button (click)="toggleScreen()">Compartir Pantalla</button>
+        <button (click)="toggleMic()">Silenciar</button>
+        <button (click)="leave()">Salir</button>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .video-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 12px;
+    }
+    .controls {
+      margin-top: 16px;
+      display: flex;
+      gap: 8px;
+    }
+  `]
+})
+export class VideoMeetingComponent implements OnInit, OnDestroy {
+  @Input() roomHash!: string;
+  @Input() userName: string = 'Invitado';
+  @Input() serverUrl: string = 'https://tu-worker.workers.dev';
+
+  @ViewChild('videoContainer', { static: true }) videoContainer!: ElementRef<HTMLDivElement>;
+
+  private room?: LocalMeetRoom;
+
+  async ngOnInit() {
+    this.room = await LocalMeet.join({
+      serverUrl: this.serverUrl,
+      roomHash: this.roomHash,
+      guestName: this.userName,
+    });
+
+    this.room.on(RoomEvents.TrackSubscribed, (track) => {
+      const el = track.attach();
+      this.videoContainer.nativeElement.appendChild(el);
+    });
+
+    this.room.on(RoomEvents.TrackUnsubscribed, (track) => {
+      track.detach().forEach((el) => el.remove());
+    });
+
+    await this.room.connect();
+    await this.room.enableCameraAndMicrophone();
+  }
+
+  ngOnDestroy() {
+    this.room?.disconnect();
+  }
+
+  toggleMic() {
+    this.room?.setMicrophoneEnabled(false);
+  }
+
+  toggleScreen() {
+    this.room?.startScreenShare();
+  }
+
+  leave() {
+    this.room?.disconnect();
+  }
+}
+```
+
+---
+
+### 5. Ejemplo con React / Next.js
 
 ```jsx
 import React, { useEffect, useRef, useState } from "react";
-import { LocalMeet, RoomEvents } from "local-meet";
+import { LocalMeet, RoomEvents } from "@encarnage7/local-meet";
 
 export function VideoMeeting({ roomHash, userName }) {
   const [room, setRoom] = useState(null);
@@ -187,7 +342,7 @@ export function VideoMeeting({ roomHash, userName }) {
 
 ---
 
-## 📖 Referencia de API
+## Referencia de API
 
 ### `LocalMeet`
 - `LocalMeet.createRoom(options)`: Petición a `/api/host-join` y retorno de instancia `LocalMeetRoom`.
@@ -218,7 +373,7 @@ export function VideoMeeting({ roomHash, userName }) {
 
 ---
 
-## 🚢 ¿Cómo Publicar esta Librería en NPM?
+## ¿Cómo Publicar esta Librería en NPM?
 
 Si deseas publicar tu paquete bajo tu cuenta de npm (ej: `mi-libreria` o `@mi-usuario/local-meet`):
 
@@ -244,6 +399,6 @@ Si deseas publicar tu paquete bajo tu cuenta de npm (ej: `mi-libreria` o `@mi-us
 
 ---
 
-## 📄 Licencia
+## Licencia
 
 MIT © Local Meet Contributors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@encarnage7/local-meet",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Zero-trust WebRTC P2P Mesh & Cloudflare Calls SFU client library with E2EE and resilient HTTPS signaling.",
   "type": "module",
   "main": "./dist/index.cjs",