@vctrl/hooks 0.9.5 → 0.16.2

package/README.md

@@ -1,444 +1,263 @@
-# vctrl/hooks
-
-[![Version and release packages to NPM](https://img.shields.io/github/actions/workflow/status/vectreal/vectreal-core/version-release.yaml?logo=github&logoColor=%23fc6c18&label=Version%20and%20release%20packages%20to%20NPM&color=%23fc6c18)
-](https://github.com/Vectreal/vectreal-core/actions/workflows/version-release.yaml)
-[![@vctrl/hooks | NPM Downloads](https://img.shields.io/npm/dm/%40vctrl%2Fhooks?logo=npm&logoColor=%23fc6c18&label=%40vctrl%2Fhooks%20%7C%20NPM%20Downloads&color=%23fc6c18)](https://www.npmjs.com/package/@vctrl/hooks)
-
-> **Note**: This library is still undergoing heavy development until the first major version is released. This may lead to breaking changes in upcoming updates.
-
-## Overview
-
-`@vctrl/hooks` is a React hooks package designed to simplify 3D model loading, optimization, and exporting within React applications. It's part of the [vectreal-core](https://github.com/vectreal/vectreal-core) ecosystem and is fully integrated into the [official website application](https://core.vectreal.com).
-
-The package provides powerful hooks for:
-
-- **Loading various 3D model file formats** (`useLoadModel`)
-- **Optimizing 3D models** (`useOptimizeModel`)
-- **Exporting 3D models from Three.js scenes** (`useExportModel`)
-
-It also includes a React context (`ModelContext`) for easy state management and an event system for handling different stages of the model loading process.
-
-### Table of Contents
-
-- [vctrl/hooks](#vctrlhooks)
-  - [Overview](#overview)
-    - [Table of Contents](#table-of-contents)
-  - [Installation](#installation)
-  - [Hooks](#hooks)
-    - [useLoadModel](#useloadmodel)
-      - [Overview](#overview-1)
-      - [Features](#features)
-      - [Usage](#usage)
-      - [API Reference](#api-reference)
-      - [Optimization Integration](#optimization-integration)
-    - [useOptimizeModel](#useoptimizemodel)
-      - [Overview](#overview-2)
-      - [Features](#features-1)
-      - [Usage](#usage-1)
-      - [API Reference](#api-reference-1)
-    - [useExportModel](#useexportmodel)
-      - [Overview](#overview-3)
-      - [Features](#features-2)
-      - [Usage](#usage-2)
-      - [API Reference](#api-reference-2)
-    - [ModelContext](#modelcontext)
-  - [Common Concepts](#common-concepts)
-    - [Supported File Types](#supported-file-types)
-    - [File Loading Process](#file-loading-process)
-    - [State Management](#state-management)
-    - [Integration with Three.js](#integration-with-threejs)
-  - [Development](#development)
-  - [License](#license)
-  - [Contributing](#contributing)
-  - [Support](#support)
+# @vctrl/hooks
 
-## Installation
+[![NPM Downloads](https://img.shields.io/npm/dm/%40vctrl%2Fhooks?logo=npm&logoColor=%23fc6c18&label=%40vctrl%2Fhooks%20%7C%20NPM%20Downloads&color=%23fc6c18)](https://www.npmjs.com/package/@vctrl/hooks)
+
+Browser-side React hooks for loading, optimizing, and exporting 3D models. The runtime counterpart to [`@vctrl/core`](https://vectreal.com/docs/packages/core), built for React apps that need to handle 3D files directly in the browser.
 
-To install the package, use npm or yarn:
+---
+
+## Installation
 
 ```bash
 npm install @vctrl/hooks
 # or
-yarn add @vctrl/hooks
+pnpm add @vctrl/hooks
 ```
 
-## Hooks
-
-### useLoadModel
+---
 
-#### Overview
+## Hooks overview
 
-`useLoadModel` is a React hook for loading and managing 3D model files in your application. It supports various file formats and integrates with Three.js for rendering.
+| Hook               | Import path                       | Description                                                                     |
+| ------------------ | --------------------------------- | ------------------------------------------------------------------------------- |
+| `useLoadModel`     | `@vctrl/hooks/use-load-model`     | Load and parse GLTF, GLB, and USDZ files from file lists or dropped directories |
+| `useOptimizeModel` | `@vctrl/hooks/use-optimize-model` | Run glTF-Transform optimizations on loaded models                               |
+| `useExportModel`   | `@vctrl/hooks/use-export-model`   | Export the current scene to GLB or glTF                                         |
 
-#### Features
+---
 
-- Supports direct 3D model file loading (GLTF, GLB, USDZ)
-- Provides loading progress updates
-- Emits events during the loading process
-- Integrates with Three.js
-- Supports multiple file uploads (e.g., `.gltf` with associated `.bin` and texture files)
-- Integrates with `useOptimizeModel` for model optimization
-- TypeScript support
+## `useLoadModel`
 
-#### Usage
+Loads 3D files and exposes the parsed Three.js `Object3D` scene.
 
-Here's a basic example of how to use `useLoadModel`:
+```tsx
+import { ModelProvider, useLoadModel } from '@vctrl/hooks/use-load-model'
 
-```jsx
-import React from 'react';
-import { useLoadModel } from '@vctrl/hooks/use-load-model';
+function Uploader() {
+	const { load, file, isFileLoading } = useLoadModel()
 
-function ModelLoader() {
-  const { load, file, progress, isLoading } = useLoadModel();
+	const handleDrop = (e: React.DragEvent) => {
+		e.preventDefault()
+		void load(Array.from(e.dataTransfer.files))
+	}
 
-  const onFileChange = (event) => {
-    const files = Array.from(event.target.files);
-    load(files);
-  };
+	if (isFileLoading) return <p>Loading...</p>
+	if (file?.model) return <p>Model loaded: {file.name}</p>
 
-  return (
-    <div>
-      <input type="file" onChange={onFileChange} multiple />
-      {isLoading && <p>Loading: {progress}%</p>}
-      {file && <p>Model loaded: {file.name}</p>}
-    </div>
-  );
+	return (
+		<div onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+			Drop a file
+		</div>
+	)
 }
-```
-
-> **Note**: Multiple files can be handled, e.g., when uploading a `.gltf` model along with its `.bin` file and relevant texture files (e.g., `.jpeg`, `.png`).
-
-You can also use the `ModelProvider` and `useModelContext` to access the model state across your application:
 
-```jsx
-// App.jsx
-import React from 'react';
-import { ModelProvider } from '@vctrl/hooks/use-load-model';
-import ModelConsumer from './ModelConsumer';
-
-function App() {
-  return (
-    <ModelProvider>
-      <ModelConsumer />
-    </ModelProvider>
-  );
-}
-
-// ModelConsumer.jsx
-import React from 'react';
-import { useModelContext } from '@vctrl/hooks/use-load-model';
-
-function ModelConsumer() {
-  const { file, isLoading, progress, load } = useModelContext();
-
-  // Use the context values
-  return (
-    // ... your component logic
-  );
+export default function App() {
+	return (
+		<ModelProvider>
+			<Uploader />
+		</ModelProvider>
+	)
 }
 ```
 
-> **Note**: When using the React context, load models using the `useModelContext` hook.
-
-#### API Reference
-
-The `useLoadModel` hook returns the following:
-
-- `file`: The loaded file object (`ModelFile | null`).
-- `isLoading`: A boolean indicating whether a file is currently being loaded.
-- `progress`: A number between 0 and 100 representing the loading progress.
-- `load(files)`: A function to handle file uploads. It accepts an array of `File` objects or a mixed array of `File` objects and directory entries.
-- `reset()`: A function to reset the internal state back to its initial values.
-- `on(event, handler)`: A function to subscribe to events.
-- `off(event, handler)`: A function to unsubscribe from events.
-- `optimize`: An object populated by the `useOptimizeModel` hook integration, providing optimization functions (see below).
-
-#### Optimization Integration
-
-If you pass an instance of `useOptimizeModel` to `useLoadModel`, it will integrate optimization functions into the `optimize` object:
-
-```jsx
-import React from 'react';
-import { useLoadModel } from '@vctrl/hooks/use-load-model';
-import { useOptimizeModel } from '@vctrl/hooks/use-optimize-model';
-
-function ModelLoader() {
-  const optimizer = useOptimizeModel();
-  const { load, file, optimize } = useLoadModel(optimizer);
-
-  const handleSimplify = async () => {
-    await optimize.simplifyOptimization();
-    // The optimized model is now in file.model
-  };
-
-  return (
-    // ... your component logic
-  );
+### Context and direct usage
+
+`useLoadModel` can be used in two ways:
+
+1. Context mode: wrap your app with `ModelProvider`, then consume with `useModelContext()` anywhere in that tree.
+2. Direct mode: call `useLoadModel()` outside a provider to manage a local model state.
+
+### Return values
+
+| Value                      | Type                                 | Description                                                 |
+| -------------------------- | ------------------------------------ | ----------------------------------------------------------- |
+| `file`                     | `ModelFile \| null`                  | Loaded file metadata and Three.js model                     |
+| `isFileLoading`            | `boolean`                            | True while loading and parsing                              |
+| `progress`                 | `number`                             | Progress value from 0 to 100                                |
+| `load(filesOrDirectories)` | `Promise<void>`                      | Load files or dropped `FileSystemDirectoryHandle` entries   |
+| `loadFromData(options)`    | `Promise<SceneLoadResult>`           | Load already-resolved server scene payload                  |
+| `loadFromServer(options)`  | `Promise<SceneLoadResult>`           | Fetch and load scene from an API endpoint                   |
+| `reset`                    | `() => void`                         | Clear the current model                                     |
+| `on` / `off`               | Event helpers                        | Subscribe and unsubscribe to loader lifecycle events        |
+| `optimizer`                | `OptimizerIntegrationReturn \| null` | Populated when the hook is called with `useOptimizeModel()` |
+
+### `useLoadModel` events
+
+`on` and `off` support these typed events:
+
+| Event                  | Payload             |
+| ---------------------- | ------------------- |
+| `multiple-models`      | `File[]`            |
+| `not-loaded-files`     | `File[]`            |
+| `load-start`           | `null`              |
+| `load-progress`        | `number`            |
+| `load-complete`        | `ModelFile \| null` |
+| `load-reset`           | `null`              |
+| `load-error`           | `Error \| unknown`  |
+| `server-load-start`    | `string`            |
+| `server-load-complete` | `SceneLoadResult`   |
+| `server-load-error`    | `Error \| unknown`  |
+
+### Scene loading option types
+
+`loadFromServer(options)` uses:
+
+| Field           | Type            | Description                                   |
+| --------------- | --------------- | --------------------------------------------- |
+| `sceneId`       | `string`        | Scene identifier to fetch                     |
+| `serverOptions` | `ServerOptions` | Endpoint, auth, and header configuration      |
+| `applySettings` | `boolean`       | Whether scene settings are applied after load |
+
+`loadFromData(options)` uses:
+
+| Field           | Type                  | Description                                                    |
+| --------------- | --------------------- | -------------------------------------------------------------- |
+| `sceneId`       | `string \| undefined` | Optional scene identifier                                      |
+| `sceneData`     | `ServerSceneData`     | Already-resolved payload containing glTF, settings, and assets |
+| `applySettings` | `boolean`             | Whether scene settings are applied after load                  |
+
+---
+
+## `useOptimizeModel`
+
+Runs mesh simplification and texture compression using [glTF-Transform](https://gltf-transform.dev) in a Web Worker.
+
+```tsx
+import { useOptimizeModel } from '@vctrl/hooks/use-optimize-model'
+import { useLoadModel } from '@vctrl/hooks/use-load-model'
+
+function Optimizer() {
+	const optimizer = useOptimizeModel()
+	const { file, optimizer: integrated } = useLoadModel(optimizer)
+
+	const handleOptimize = async () => {
+		if (!file?.model || !integrated) return
+		await integrated.applyOptimization(integrated.simplifyOptimization, {
+			ratio: 0.6,
+			error: 0.001
+		})
+	}
+
+	return (
+		<button onClick={handleOptimize} disabled={optimizer.loading}>
+			{optimizer.loading ? 'Optimizing...' : 'Optimize model'}
+		</button>
+	)
 }
 ```
 
-The `optimize` object includes quick access optimization:
-
-- `simplifyOptimization(options)`: Simplifies the model using mesh simplification.
-- `dedupOptimization(options)`: Removes duplicate vertices and meshes.
-- `quantizeOptimization(options)`: Reduces the precision of vertex attributes.
-- `normalsOptimization(options)`: Overrides the normals of each object in the scene.
-- `texturesCompressionOptimization(options)`: Compresses the relevant textures in the model file using texture compression.
-
-### useOptimizeModel
-
-#### Overview
-
-`useOptimizeModel` is a React hook used to optimize 3D models, particularly GLTF-based scenes. It can be used in conjunction with `useLoadModel` or independently.
-
-#### Features
-
-- Simplifies 3D models using mesh optimization algorithms
-- Provides deduplication and quantization optimizations
-- Integrates with `useLoadModel` and `ModelContext`
-- TypeScript support
-
-#### Usage
-
-There are two ways to use the `useOptimizeModel` hook:
-
-1. **Directly with `useLoadModel`**
-
-   ```jsx
-   import React from 'react';
-   import { useLoadModel } from '@vctrl/hooks/use-load-model';
-   import { useOptimizeModel } from '@vctrl/hooks/use-optimize-model';
-
-   function ModelLoader() {
-     const optimizer = useOptimizeModel();
-     const { load, file, optimize } = useLoadModel(optimizer);
-
-     const handleSimplify = async () => {
-       await optimize.simplifyOptimization();
-       // The optimized model is now in file.model
-     };
+### Key API surface
 
-     const handleDedup = async () => {
-       await optimize.dedupOptimization();
-     };
+| Method / State                       | Type                                                               | Description                                                            |
+| ------------------------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------- |
+| `load(model)`                        | `(model: Object3D) => Promise<void>`                               | Load a Three.js scene into the optimizer                               |
+| `loadFromServerSceneData(sceneData)` | `Promise<void>`                                                    | Initialize optimizer from a server scene payload                       |
+| `applyOptimization(fn, opts?)`       | `<T>(fn?: (opts?: T) => Promise<void>, opts?: T) => Promise<void>` | Apply optimization and sync the optimized model back into loader state |
+| `simplifyOptimization(options?)`     | `Promise<void>`                                                    | Simplify mesh geometry                                                 |
+| `dedupOptimization(options?)`        | `Promise<void>`                                                    | Deduplicate model data                                                 |
+| `quantizeOptimization(options?)`     | `Promise<void>`                                                    | Quantize vertex attributes                                             |
+| `normalsOptimization(options?)`      | `Promise<void>`                                                    | Recompute or normalize normals                                         |
+| `texturesOptimization(options?)`     | `Promise<void>`                                                    | Run texture compression flow                                           |
+| `getModel()`                         | `Promise<Uint8Array \| null>`                                      | Export the current optimized model as GLB binary                       |
+| `report` / `info`                    | Objects                                                            | Optimization metrics and derived stats                                 |
+| `loading` / `error`                  | State                                                              | Optimization status                                                    |
 
-     const handleQuantize = async () => {
-       await optimize.quantizeOptimization();
-     };
+### Optimization option types
 
-     return (
-       <div>
-         <input
-           type="file"
-           onChange={(e) => load(Array.from(e.target.files))}
-           multiple
-         />
-         <button onClick={handleSimplify}>Simplify Model</button>
-         <button onClick={handleDedup}>Deduplicate Model</button>
-         <button onClick={handleQuantize}>Quantize Model</button>
-       </div>
-     );
-   }
-   ```
+`useOptimizeModel` methods map directly to `@vctrl/core/model-optimizer` option types:
 
-   > **Note**: Changes are applied to the `file.model` field from `useLoadModel` automatically when using optimizations.
+| Method                 | Option fields                                                                                                                                                                                                                                        |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `simplifyOptimization` | `ratio?: number`, `error?: number`                                                                                                                                                                                                                   |
+| `dedupOptimization`    | `textures?: boolean`, `materials?: boolean`, `meshes?: boolean`, `accessors?: boolean`                                                                                                                                                               |
+| `quantizeOptimization` | `quantizePosition?: number`, `quantizeNormal?: number`, `quantizeColor?: number`, `quantizeTexcoord?: number`                                                                                                                                        |
+| `normalsOptimization`  | `overwrite?: boolean`                                                                                                                                                                                                                                |
+| `texturesOptimization` | `resize?: [number, number]`, `targetFormat?: 'webp' \| 'jpeg' \| 'png'`, `quality?: number`, `requestTimeoutMs?: number`, `maxTextureUploadBytes?: number`, `maxRetries?: number`, `maxConcurrentRequests?: number`, `serverOptions?: ServerOptions` |
 
-2. **With `ModelProvider` and `useModelContext`**
-
-   ```jsx
-   // App.jsx
-   import React from 'react';
-   import { ModelProvider } from '@vctrl/hooks/use-load-model';
-   import { useOptimizeModel } from '@vctrl/hooks/use-optimize-model';
-   import Scene from './Scene';
-
-   function App() {
-     const optimizer = useOptimizeModel();
-
-     return (
-       <ModelProvider optimizer={optimizer}>
-         <Scene />
-       </ModelProvider>
-     );
-   }
-
-   // Scene.jsx
-   import React from 'react';
-   import { useModelContext } from '@vctrl/hooks/use-load-model';
-
-   function Scene() {
-     const { optimize } = useModelContext();
-
-     const handleSimplify = async () => {
-       await optimize.simplifyOptimization();
-     };
-
-     const handleDedup = async () => {
-       await optimize.dedupOptimization();
-     };
-
-     const handleQuantize = async () => {
-       await optimize.quantizeOptimization();
-     };
-
-     return (
-       <div>
-         <button onClick={handleSimplify}>Simplify Model</button>
-         <button onClick={handleDedup}>Deduplicate Model</button>
-         <button onClick={handleQuantize}>Quantize Model</button>
-       </div>
-     );
-   }
-   ```
-
-#### API Reference
-
-The `useOptimizeModel` hook returns the following:
-
-- `load(model)`: Loads a Three.js `Object3D` model into the optimizer.
-- `getModel()`: Retrieves the optimized model as a binary array buffer.
-- `simplifyOptimization(options)`: Simplifies the current model using the `MeshoptSimplifier`.
-- `dedupOptimization(options)`: Removes duplicate vertices and meshes.
-- `quantizeOptimization(options)`: Reduces the precision of vertex attributes.
-- `normalsOptimization`: Overrides normals
-- `texturesOptimization(options)`: Compresses related textures.
-- `getSize()`: Object with byte size of gltf scene and a formatted megabyte string
-- `reset()`: Resets the current optimizer model and report state.
-- `report`: @gltf-transform gltf report object with relevant details about a gltf scene
-- `error`: Stores any possible optimization errors
-- `loading`: Boolean for when the model is being loaded
-
-### useExportModel
-
-#### Overview
-
-`useExportModel` is a React hook for exporting 3D models from a Three.js scene.
-
-#### Features
-
-- Exports models in GLTF or GLB format
-- Handles embedded resources and textures
-- Integrates with Three.js scenes
-- TypeScript support
-
-#### Usage
-
-```jsx
-import React from 'react';
-import { useExportModel } from '@vctrl/hooks/use-export-model';
-
-function ExportButton({ file }) {
-  const { handleGltfExport } = useExportModel(
-    () => console.log('Export complete'),
-    (error) => console.error('Export error:', error),
-  );
-
-  const exportAsGlb = () => {
-    handleGltfExport(file, true); // Export as GLB (binary)
-  };
-
-  const exportAsGltf = () => {
-    handleGltfExport(file, false); // Export as GLTF
-  };
-
-  return (
-    <div>
-      <button onClick={exportAsGlb}>Export as GLB</button>
-      <button onClick={exportAsGltf}>Export as GLTF</button>
-    </div>
-  );
-}
-```
-
-#### API Reference
+`serverOptions` is provided by `@vctrl/core` and supports endpoint, API key, and headers.
 
-The `useExportModel` hook returns the following:
+---
 
-- `handleGltfExport(file, binary)`: Function to handle exporting the model.
-  - `file`: The `ModelFile` object to export.
-  - `binary`: A boolean indicating whether to export in binary format (`true` for GLB, `false` for GLTF).
-  - The function exports the model and triggers file download.
+## `useExportModel`
 
-### ModelContext
+Exports the current scene from `ModelProvider` context to a downloadable file.
 
-`ModelContext` is a React context that provides the state and functions from `useLoadModel` (and optionally `useOptimizeModel`) to child components.
+```tsx
+import { useExportModel } from '@vctrl/hooks/use-export-model'
+import type { ModelFile } from '@vctrl/hooks/use-load-model'
 
-```jsx
-import { ModelProvider, useModelContext } from '@vctrl/hooks/use-load-model';
-
-function App() {
-  return (
-    <ModelProvider>
-      <ModelConsumer />
-    </ModelProvider>
-  );
-}
+function ExportButton({ file }: { file: ModelFile | null }) {
+	const { handleThreeGltfExport } = useExportModel()
 
-function ModelConsumer() {
-  const { file, isLoading, progress, load, optimize } = useModelContext();
-  // Use the context values
+	return (
+		<button onClick={() => void handleThreeGltfExport(file, true)}>
+			Download GLB
+		</button>
+	)
 }
 ```
 
-> **Note**: When using the React context, load models using the `useModelContext` hook.
+### Methods
 
-## Common Concepts
+| Method                                                         | Description                                                         |
+| -------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `handleThreeGltfExport(file, binary)`                          | Export a loaded Three.js model to `.glb` or a zipped `.gltf` bundle |
+| `handleDocumentGltfExport(document, file, binary?, download?)` | Export from a glTF-Transform `Document`                             |
 
-### Supported File Types
+`binary = true` writes `.glb`; `binary = false` writes a zipped `.gltf` package.
 
-The package currently supports the following 3D model file formats:
+---
 
-- GLTF (`.gltf`)
-- GLB (`.glb`)
-- USDZ (`.usdz`)
+## Additional exports
 
-These are defined in the `ModelFileTypes` enum in `types.ts`.
+- `ServerCommunicationService` from `@vctrl/hooks`
+- `reconstructGltfFiles` from `@vctrl/hooks`
+- `ModelProvider` and `useModelContext` from `@vctrl/hooks/use-load-model`
+- Shared types such as `ModelFile`, `SceneLoadResult`, and `ServerSceneData`
 
-### File Loading Process
+`ServerCommunicationService` methods:
 
-The file loading process, particularly for GLTF files, is handled internally by the hooks. The process includes:
+| Method                                             | Description               |
+| -------------------------------------------------- | ------------------------- |
+| `request(config)`                                  | Generic request helper    |
+| `get(endpoint, serverOptions?)`                    | Convenience GET           |
+| `post(endpoint, body, serverOptions?)`             | Convenience JSON POST     |
+| `postFormData(endpoint, formData, serverOptions?)` | Convenience FormData POST |
 
-1. Parsing the GLTF file content.
-2. Embedding external resources (buffers and images) into the GLTF content.
-3. Using Three.js `GLTFLoader` to parse the modified GLTF content.
-4. Updating the state with the loaded model.
-5. Integrating with the optimizer if provided.
+`ServerRequestConfig` fields:
 
-The loading process includes progress updates, which are communicated through the event system.
+| Field           | Type                                              |
+| --------------- | ------------------------------------------------- |
+| `endpoint`      | `string`                                          |
+| `method`        | `'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH'` |
+| `body`          | `FormData \| Record<string, unknown> \| string`   |
+| `serverOptions` | `ServerOptions`                                   |
+| `contentType`   | `string`                                          |
 
-### State Management
+---
 
-The package uses a reducer pattern for state management. The state includes:
+## Peer dependencies
 
-- `file`: The currently loaded model file.
-- `isLoading`: A boolean indicating if a file is being loaded.
-- `progress`: The current loading progress.
-- `supportedFileTypes`: An array of supported file types.
+| Package              | Version        |
+| -------------------- | -------------- |
+| `react`              | `^18 \|\| ^19` |
+| `three`              | `^0.170`       |
+| `@react-three/fiber` | `^9`           |
 
-Actions for updating the state are defined in the `Action` type in `types.ts`.
+---
 
-### Integration with Three.js
+## Related docs
 
-The package integrates with Three.js for handling 3D model rendering and manipulation. The loaded models are compatible with Three.js scenes, with the model stored as a Three.js `Object3D` in the `ModelFile` interface.
+- [Uploading Models](https://vectreal.com/docs/guides/upload)
+- [Optimizing & Configuring](https://vectreal.com/docs/guides/optimize)
+- [@vctrl/viewer](https://vectreal.com/docs/packages/viewer)
 
-## Development
+---
 
-This package is part of a monorepo workspace managed with Nx. To contribute or modify the package:
+## Source
 
-1. Clone the monorepo from [vectreal-core](https://github.com/vectreal/vectreal-core).
-2. Install dependencies: `npm install` or `yarn install`.
-3. Make your changes.
-4. Build the package: `nx build vctrl/hooks`.
-5. Test your changes: `nx test vctrl/hooks`.
+The full source and README live in [packages/hooks](https://github.com/Vectreal/vectreal-platform/tree/main/packages/hooks).
 
 ## License
 
-This project is licensed under the **GNU Affero General Public License v3.0**. Please refer to the [LICENSE](https://github.com/vectreal/vectreal-core/blob/main/LICENSE) file in the package root for licensing information.
-
-## Contributing
-
-Contributions are welcome! Please read the contributing guidelines in the [vectreal-core](https://github.com/vectreal/vectreal-core) monorepo before submitting pull requests.
-
-## Support
-
-For issues, feature requests, or questions, please file an issue in the [GitHub repository](https://github.com/vectreal/vectreal-core/issues).
+AGPL-3.0-only. See [LICENSE.md](https://github.com/Vectreal/vectreal-platform/blob/main/packages/hooks/LICENSE.md).