chore(release): Prepare for version 0.0.2

CHANGELOG.md

@@ -0,0 +1,37 @@
+# CHANGELOG
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+
+## Unreleased
+
+### Added
+
+### Changed
+
+### Deprecated
+
+### Removed
+
+### Fixed
+
+### Security
+
+## 0.0.2 - 2025-08-05
+
+### Added
+
+- Comprehensive project documentation (README.md, DEVELOPER.md, CONTRIBUTING.md).
+- Initial CHANGELOG.md.
+
+## 0.0.1 - 2025-08-05
+
+### Added
+
+- Initial release of `@interactive-video-labs/vue`.
+- Vue 3 wrapper for `@interactive-video-labs/core`.
+- Component for interactive video playback with cue point and translation support.
+- Basic analytics event handling.

CONTRIBUTING.md

@@ -0,0 +1,100 @@
+# CONTRIBUTING.md
+
+We welcome contributions to `@interactive-video-labs/vue`! Your help is greatly appreciated in making this project better.
+
+Before contributing, please take a moment to review this document. It outlines the guidelines for contributing to this repository.
+
+## Table of Contents
+
+- [Code of Conduct](#code-of-conduct)
+- [How Can I Contribute?](#how-can-i-contribute)
+  - [Reporting Bugs](#reporting-bugs)
+  - [Suggesting Enhancements](#suggesting-enhancements)
+  - [Your First Code Contribution](#your-first-code-contribution)
+  - [Pull Requests](#pull-requests)
+- [Development Setup](#development-setup)
+- [Styleguides](#styleguides)
+  - [Git Commit Messages](#git-commit-messages)
+  - [TypeScript Styleguide](#typescript-styleguide)
+- [License](#license)
+
+## Code of Conduct
+
+This project adheres to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [insert contact email or method here, e.g., `support@example.com`].
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+If you find a bug, please open an issue on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues). When reporting a bug, please include:
+
+-   A clear and concise description of the bug.
+-   Steps to reproduce the behavior.
+-   Expected behavior.
+-   Actual behavior.
+-   Screenshots or videos if applicable.
+-   Your environment (Vue version, browser, OS, etc.).
+
+### Suggesting Enhancements
+
+If you have an idea for a new feature or an improvement, please open an issue on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues). When suggesting an enhancement, please include:
+
+-   A clear and concise description of the proposed enhancement.
+-   The problem it solves or the benefit it provides.
+-   Any alternative solutions you've considered.
+
+### Your First Code Contribution
+
+If you're looking to make your first code contribution, look for issues labeled `good first issue` on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues).
+
+### Pull Requests
+
+1.  **Fork the repository** and clone it to your local machine.
+2.  **Create a new branch** from `main` for your changes:
+    ```bash
+    git checkout -b feature/your-feature-name
+    # or
+    git checkout -b bugfix/your-bug-fix-name
+    ```
+3.  **Make your changes** and ensure they adhere to the project's [Styleguides](#styleguides).
+4.  **Write tests** for your changes, if applicable. Ensure all existing tests pass.
+5.  **Run the build** to ensure everything compiles correctly:
+    ```bash
+    pnpm build
+    ```
+6.  **Commit your changes** using a descriptive commit message (see [Git Commit Messages](#git-commit-messages)).
+7.  **Push your branch** to your forked repository.
+8.  **Open a Pull Request** to the `main` branch of the original repository.
+
+In your pull request description, please:
+
+-   Reference any related issues (e.g., `Fixes #123`, `Closes #456`).
+-   Provide a clear explanation of your changes.
+-   Include screenshots or GIFs if your changes affect the UI.
+
+## Development Setup
+
+For detailed instructions on setting up your development environment, installing dependencies, and running tests, please refer to the [DEVELOPER.md](DEVELOPER.md) file.
+
+## Styleguides
+
+### Git Commit Messages
+
+We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification for our commit messages. This helps with automated changelog generation and semantic versioning. Examples:
+
+-   `feat: add new video playback controls`
+-   `fix: resolve autoplay issue on iOS`
+-   `docs: update installation instructions`
+-   `refactor: improve player initialization logic`
+-   `test: add unit tests for cue points`
+
+### TypeScript Styleguide
+
+-   Follow existing code style and formatting.
+-   Use clear and descriptive variable and function names.
+-   Ensure proper type annotations for all functions, variables, and parameters.
+-   Avoid `any` type unless absolutely necessary.
+
+## License
+
+By contributing to `@interactive-video-labs/vue`, you agree that your contributions will be licensed under its MIT License. See the [LICENSE](LICENSE) file for details.

DEVELOPER.md

@@ -0,0 +1,79 @@
+# DEVELOPER.md
+
+This document provides essential information for developers looking to contribute to or work on the `@interactive-video-labs/vue` project.
+
+## Project Setup
+
+To get started with local development, follow these steps:
+
+1.  **Clone the repository:**
+    ```bash
+    git clone https://github.com/interactive-video-labs/interactive-video-vue-wrapper.git
+    cd interactive-video-vue-wrapper
+    ```
+
+2.  **Install dependencies:**
+    This project uses `pnpm` as its package manager. If you don't have `pnpm` installed, you can install it globally:
+    ```bash
+    npm install -g pnpm
+    ```
+    Then, install the project dependencies:
+    ```bash
+    pnpm install
+    ```
+
+## Available Scripts
+
+Here are the common development scripts available:
+
+-   **`pnpm build`**: Compiles the TypeScript source code into JavaScript (ESM and CommonJS formats) and generates declaration files (`.d.ts`). This command is run before publishing.
+
+    ```bash
+    pnpm build
+    ```
+
+-   **`pnpm dev`**: Starts the TypeScript compiler in watch mode, recompiling files on changes. Useful for active development.
+
+    ```bash
+    pnpm dev
+    ```
+
+-   **`pnpm test`**: Runs the unit tests using Vitest.
+
+    ```bash
+    pnpm test
+    ```
+
+-   **`pnpm clean`**: Removes the `dist` directory, clearing all compiled output.
+
+    ```bash
+    pnpm clean
+    ```
+
+-   **`pnpm prepare`**: This script is typically run after `pnpm install` and before `pnpm publish`. In this project, it simply runs `pnpm build`.
+
+    ```bash
+    pnpm prepare
+    ```
+
+## Testing
+
+Tests are written using [Vitest](https://vitest.dev/). You can run all tests with:
+
+```bash
+pnpm test
+```
+
+Test files are located in the `test/` directory and follow the naming convention `*.test.ts`.
+
+## Code Style and Linting
+
+This project uses TypeScript. Ensure your code adheres to the existing style and type conventions. While there isn't an explicit linting script defined in `package.json`, it's good practice to follow consistent formatting and coding standards.
+
+## Release Process
+
+This project uses an automated release workflow via GitHub Actions (`.github/workflows/release.yml`). Releases are typically triggered by pushing tags or by manual dispatch. Refer to the workflow file for details on how new versions are published.
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) file for detailed guidelines on how to submit issues, propose features, and make pull requests.

README.md

@@ -5,7 +5,7 @@
 <p align="center">
   <img src="https://img.shields.io/npm/v/@interactive-video-labs/vue" alt="NPM Version" />
   <img src="https://img.shields.io/npm/l/@interactive-video-labs/vue" alt="NPM License" />
-  <img src="https://img.shields.io/npm/dm/@interactive-video-labs/vue?style=flat-square" alt="NPM Downloads" />
+  <img src="https://img.shields.io/npm/d18m/@interactive-video-labs/vue?style=flat-square" alt="NPM Downloads" />
   <a href="https://github.com/interactive-video-labs/interactive-video-vue-wrapper/actions">
     <img src="https://github.com/interactive-video-labs/interactive-video-vue-wrapper/actions/workflows/release.yml/badge.svg" alt="Build Status" />
   </a>
@@ -16,3 +16,155 @@ Welcome to `@interactive-video-labs/vue` — a lightweight Vue 3 wrapper around
 This wrapper enables seamless integration of interactive video players into Vue applications using idiomatic Vue components and bindings, while staying close to the underlying core engine API.
 
 ---
+
+## Features
+
+- **Declarative Props**: Control the player via reactive Vue props.
+- **Event Handling**: Listen to player events using a simple `onAnalyticsEvent` callback.
+- **Dynamic Content**: Update cue points and translations on the fly.
+- **Direct Player Access**: Get direct access to the underlying `@interactive-video-labs/core` player instance.
+- **TypeScript Support**: Fully typed for a better development experience.
+
+## Installation
+
+Install the package and its peer dependencies using your favorite package manager:
+
+```bash
+# With pnpm
+pnpm add @interactive-video-labs/vue @interactive-video-labs/core vue
+
+# With npm
+npm install @interactive-video-labs/vue @interactive-video-labs/core vue
+
+# With yarn
+yarn add @interactive-video-labs/vue @interactive-video-labs/core vue
+```
+
+## Basic Usage
+
+Here's a simple example of how to use the `InteractiveVideo` component in your Vue 3 application.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import InteractiveVideo from '@interactive-video-labs/vue';
+import '@interactive-video-labs/core/dist/style.css'; // Don't forget to import the styles
+
+const videoUrl = ref('https://example.com/my-video.mp4');
+const cues = ref([
+  {
+    time: 10,
+    payload: { type: 'text', content: 'This is a timed message!' },
+  },
+  {
+    time: 25,
+    payload: { type: 'quiz', question: 'What is Vue?' },
+  },
+]);
+
+function handleAnalyticsEvent(event, payload) {
+  console.log('Analytics Event:', event, payload);
+}
+</script>
+
+<template>
+  <InteractiveVideo
+    :video-url="videoUrl"
+    :cues="cues"
+    :on-analytics-event="handleAnalyticsEvent"
+    autoplay
+    loop
+  />
+</template>
+```
+
+## API Reference
+
+### Props
+
+The component accepts the following props:
+
+| Prop                 | Type                                                     | Required | Default     | Description                                                                                             |
+| -------------------- | -------------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------- |
+| `videoUrl`           | `string`                                                 | `true`   | -           | The URL of the video to be loaded.                                                                      |
+| `cues`               | `CuePoint[]`                                             | `false`  | `[]`        | An array of cue points for interactive events. Can be updated dynamically.                              |
+| `translations`       | `Translations`                                           | `false`  | `{}`        | An object containing translations for the player UI.                                                    |
+| `onAnalyticsEvent`   | `(event: AnalyticsEvent, payload?: AnalyticsPayload) => void` | `false`  | -           | Callback function for analytics events emitted by the player.                                           |
+| `autoplay`           | `boolean`                                                | `false`  | `false`     | Whether the video should start playing automatically.                                                   |
+| `loop`               | `boolean`                                                | `false`  | `false`     | Whether the video should loop.                                                                          |
+| `locale`             | `string`                                                 | `false`  | `'en'`      | The locale to be used for the player (e.g., 'en', 'es').                                                |
+
+Any additional attributes passed to the component will be forwarded to the underlying `@interactive-video-labs/core` player configuration.
+
+### Events
+
+Player events are emitted through the `onAnalyticsEvent` prop.
+
+**Available Events:**
+
+- `PLAYER_LOADED`
+- `VIDEO_STARTED`
+- `VIDEO_PAUSED`
+- `VIDEO_ENDED`
+- `CUE_TRIGGERED`
+- `INTERACTION_COMPLETED`
+- `ERROR`
+
+**Example:**
+
+```js
+function handleAnalyticsEvent(event, payload) {
+  switch (event) {
+    case 'CUE_TRIGGERED':
+      console.log('A cue was triggered at:', payload.cue.time);
+      break;
+    case 'ERROR':
+      console.error('Player error:', payload.error);
+      break;
+  }
+}
+```
+
+### Exposing the Player Instance
+
+If you need to call methods on the player instance directly, you can get a reference to it using a `ref` on the component.
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue';
+import InteractiveVideo from '@interactive-video-labs/vue';
+import '@interactive-video-labs/core/dist/style.css';
+
+const videoPlayer = ref(null);
+
+onMounted(() => {
+  // The player instance is available on videoPlayer.value.playerRef
+  if (videoPlayer.value) {
+    const corePlayer = videoPlayer.value.playerRef;
+    corePlayer.play();
+  }
+});
+</script>
+
+<template>
+  <InteractiveVideo
+    ref="videoPlayer"
+    video-url="https://example.com/my-video.mp4"
+  />
+</template>
+```
+
+---
+
+## 🧑‍💻 For Developers
+
+For detailed development setup, project structure, testing, build, and publishing instructions, please refer to our [Developer Guide](DEVELOPER.md).
+
+---
+## Contributing
+
+Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interactive-video-labs/vue",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "description": "Thin Vue wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Vue 3 applications.",
   "main": "dist/index.cjs",