{"_id":"@aoles-gl/react","name":"@aoles-gl/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aoles-gl/react","version":"0.1.0","description":"React component library for Aoles GL video editor","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/style.css","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styled":{"import":"./dist/styled.js","require":"./dist/styled.cjs","types":"./dist/styled.d.ts"},"./unstyled":{"import":"./dist/unstyled.js","require":"./dist/unstyled.cjs","types":"./dist/unstyled.d.ts"},"./style.css":"./dist/style.css"},"publishConfig":{"access":"public"},"keywords":["video-editor","webgl","react"],"author":{"name":"laoleshisui"},"homepage":"https://www.pixoclip.com","bugs":{"url":"https://github.com/laoleshisui/aoles-gl-react-demo/issues"},"license":"SEE LICENSE IN LICENSE","dependencies":{"@ctrl/tinycolor":"^4.0.0","@floating-ui/react":"^0.26.0","lodash-es":"^4.17.21","opfs-tools":"^0.4.0","react-colorful":"^5.6.1","react-i18next":"^14.0.0","react-moveable":"^0.56.0","srt-parser-2":"^1.2.3","wavesurfer.js":"^7.0.0","zod":"^3.0.0 || ^4.0.0","zustand":"^4.5.0","@aoles-gl/theme":"0.1.0","@aoles-gl/effects":"0.1.0","@aoles-gl/core":"0.1.0","@aoles-gl/ui":"0.1.0"},"peerDependencies":{"@ant-design/icons":"^6.0.0","@webav/av-cliper":"^0.9.0","antd":"^6.0.0","i18next":"^23.0.0","react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@ant-design/icons":"^6.3.2","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/forms":"^0.5.11","@tailwindcss/line-clamp":"^0.4.4","@tailwindcss/typography":"^0.5.20","@types/lodash-es":"^4.17.12","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","antd":"^6.5.3","@vitejs/plugin-react":"^4.2.0","autoprefixer":"^10.5.4","cssnano":"^8.0.2","postcss":"^8.5.25","postcss-import":"^16.1.1","postcss-nesting":"^14.0.1","sass":"^1.102.0","tailwindcss":"^3.4.19","typescript":"~5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0"},"scripts":{"dev":"vite build --watch","build":"vite build","type-check":"tsc --noEmit"},"_id":"@aoles-gl/react@0.1.0","_integrity":"sha512-lULTnM69ZQav+sv7Ml7tD+mPVLmSHxbQARIpUZhC6F+REGLkNMNuevwbhpMjLNrVtzJxBGtDVC+9tr/2xTgmKQ==","_resolved":"/Users/yangxian/dev/aoles-gl-web-package/artifacts/release/aoles-gl-react-0.1.0.tgz","_from":"file:artifacts/release/aoles-gl-react-0.1.0.tgz","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lULTnM69ZQav+sv7Ml7tD+mPVLmSHxbQARIpUZhC6F+REGLkNMNuevwbhpMjLNrVtzJxBGtDVC+9tr/2xTgmKQ==","shasum":"33d17e709e9984cf58f7c4c08099b4331adb8780","tarball":"https://registry.npmjs.org/@aoles-gl/react/-/react-0.1.0.tgz","fileCount":15,"unpackedSize":665947,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCTuGEdul5h0zzbMbDllGoU+yKs3Mb0e1i3e/MNMpjHPQIhAOzXTtpqRt5WoTe7wRuMh5CcAtc00CrKcq/0UwbA1PD8"}]},"_npmUser":{"name":"laoleshisui","email":"1539807453@qq.com"},"directories":{},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1786277441931_0.45900913089069695"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T12:10:41.708Z","0.1.0":"2026-08-09T12:10:42.114Z","modified":"2026-08-09T12:10:42.407Z"},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"description":"React component library for Aoles GL video editor","homepage":"https://www.pixoclip.com","keywords":["video-editor","webgl","react"],"author":{"name":"laoleshisui"},"bugs":{"url":"https://github.com/laoleshisui/aoles-gl-react-demo/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# @aoles-gl/react\n\nReact component library for Aoles GL video editor.\n\n## ✨ 特性\n\n- 🎨 **一致 UI**：基于 Ant Design 的编辑器兼容层，对齐 Vue/Element Plus 版本\n- 🧩 **完整编辑器组件**：预览、时间轴、资源和属性面板可组合使用\n- 🎯 **TypeScript**：完整的类型支持\n- 🌗 **暗色模式**：开箱即用的暗色主题\n- ⚡ **高性能**：基于 WebGL 的实时渲染\n- 🔧 **易定制**：基于 Tailwind CSS，完全可控\n\n## Installation\n\n```bash\nnpm install @aoles-gl/react\n```\n\nInstall peer dependencies:\n\n```bash\nnpm install react@^18 react-dom@^18 antd@^6 @ant-design/icons@^6 i18next@^23\n```\n\n## WASM Setup\n\nUse Vite's `?url` import — no manual file copying needed:\n\n```typescript\nimport controllerJs   from '@aoles-gl/core/wasm/GLController.mjs?url'\nimport controllerWasm from '@aoles-gl/core/wasm/GLController.wasm?url'\n```\n\nYour Vite dev server also needs these headers for WASM threading:\n\n```typescript\n// vite.config.ts\nexport default defineConfig({\n  server: {\n    headers: {\n      'Cross-Origin-Opener-Policy': 'same-origin',\n      'Cross-Origin-Embedder-Policy': 'require-corp',\n    },\n  },\n})\n```\n\n## Usage\n\n```tsx\n// App.tsx\nimport { Engine, AolesProvider } from '@aoles-gl/react';\nimport controllerJs   from '@aoles-gl/core/wasm/GLController.mjs?url'\nimport controllerWasm from '@aoles-gl/core/wasm/GLController.wasm?url'\n\n// 1. Create engine with output resolution and frame rate\nconst engine = new Engine(undefined, undefined, {\n  width: 1920,\n  height: 1080,\n  fps: 30,\n});\n\n// 2. Set WASM paths\nengine.configure({ jsPath: controllerJs, wasmPath: controllerWasm });\n\n// 3. (Optional) Set static asset base paths\nengine.configAssetPath({\n  fontPath:  '/fonts/',\n  imagePath: '/image/',\n  glslPath:  '/glsl/',\n});\n\n// 4. Run logic after WASM is ready\nengine.onWasmReady(async () => {\n  console.log('Engine ready');\n});\n\nfunction App() {\n  return (\n    <AolesProvider\n      engine={engine}\n      theme=\"system\"\n      density=\"compact\"\n      tokens={{ colorPrimary: '#1677ff', panelRadius: 6 }}\n    >\n      <VideoEditor />\n    </AolesProvider>\n  );\n}\n```\n\n```tsx\n// VideoEditor.tsx\nimport { useEngine, useTrackStore, ControllerPreview } from '@aoles-gl/react';\n\nexport function VideoEditor() {\n  const engine = useEngine();\n  const { tracks } = useTrackStore();\n\n  return (\n    <div className=\"editor\">\n      <ControllerPreview />\n    </div>\n  );\n}\n```\n\n## UI Components\n\nThe package exports editor-level components. Ant Design is used internally and\nis configured automatically by `AolesProvider`. `EngineProvider` remains as a\nbackwards-compatible alias.\n\n### Theme and UI overrides\n\nBoth framework adapters use the same `--aoles-*` CSS variables. Provider\n`tokens` override variables for one editor instance without changing the host\ndocument. Frequently replaced primitives can be supplied through `components`.\n\n```tsx\n<AolesProvider\n  engine={engine}\n  components={{ Button: MyButton, IconButton: MyIconButton }}\n>\n  <EditorLayout />\n</AolesProvider>\n```\n\nThe default entry and `@aoles-gl/react/styled` load the packaged stylesheet.\nUse `@aoles-gl/react/unstyled` when the host application supplies every style.\n\n```tsx\nimport { PreviewContainer, ResourceContainer, TrackContainer, AttributeContainer } from '@aoles-gl/react';\n\nfunction EditorLayout() {\n  return (\n    <div className=\"flex h-screen overflow-hidden\">\n      <ResourceContainer />\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <PreviewContainer className=\"flex-1\" />\n        <TrackContainer />\n      </div>\n      <AttributeContainer />\n    </div>\n  );\n}\n```\n\n## Hooks\n\n- `useEngine()` — Access the Engine instance\n- `useTrackStore()` — Access track state management\n- `usePlayerState()` — Player state management\n- `usePreviewState()` — Preview state management\n- `usePageState()` — Page state management\n\n## Components\n\n### Layout Components\n- `ControllerPreview` — WebGL preview player\n- `PreviewContainer` — Preview container with controls\n- `TrackContainer` — Multi-track timeline\n- `ResourceContainer` — Resource management panel\n- `AttributeContainer` — Property editor panel\n\n- `PreviewControl` — Playback, resolution and fullscreen controls\n- `TrackControl` — Timeline editing toolbar\n- `FormItem` / `AttrContainer` — Schema-driven attribute controls\n- `ConfigDialog` — Effect and transition configuration\n- `GlobalConfigDialog` — Editor-wide settings\n\n### Utils\n- `cn()` — Utility for merging Tailwind classes\n\n## 🌗 暗色模式\n\n`EngineProvider` 会同步编辑器主题。可通过\n`usePageState().getState().setIsDark(value)` 切换。\n\n## 🎯 与 Vue 版本对比\n\n| 特性 | React | Vue |\n|------|-------|-----|\n| UI 库 | Ant Design 兼容层 | Element Plus |\n| 主题 | 编辑器共享 token | 编辑器共享 token |\n| 预览变换 | react-moveable | vue3-moveable |\n\n## Requirements\n\n- React 18+\n- Modern browser with WebGL 2 and WebAssembly support\n- Chrome 89+ / Firefox 89+ / Safari 15.2+\n\n## 📚 更多资源\n\n- [Core API 文档](https://www.npmjs.com/package/@aoles-gl/core)\n- [Ant Design](https://ant.design) - React UI 基础组件\n- [Tailwind CSS](https://tailwindcss.com) - CSS 框架\n\n## Product and Examples\n\n- Product website: [PixoClip](https://www.pixoclip.com)\n- Vue example and issues: [aoles-gl-vue-demo](https://github.com/laoleshisui/aoles-gl-vue-demo)\n- React example and issues: [aoles-gl-react-demo](https://github.com/laoleshisui/aoles-gl-react-demo)\n\n## License\n\nAoles GL is proprietary software, not open-source software. Evaluation and\nnon-production development are permitted under the\n[Aoles GL SDK License Agreement](./LICENSE). Production use, public deployment,\nand commercial use require a valid commercial license from Aoles GL.\n","readmeFilename":"README.md","_rev":"1-887368b4a4d4b0e077d8a4c00dc8b9b2"}