{"_id":"@amiriel/react","_rev":"3-d7c08e61d29283484dae5c5c08216d93","name":"@amiriel/react","dist-tags":{"latest":"0.0.1","beta":"0.0.1-beta.8"},"versions":{"0.0.1-beta.6":{"name":"@amiriel/react","version":"0.0.1-beta.6","keywords":["amiriel","react","react-component","editor","letter-editor","typescript"],"license":"MIT","_id":"@amiriel/react@0.0.1-beta.6","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"homepage":"https://amiriel.com","bugs":{"url":"https://github.com/Amirieljs/Amiriel-React/issues"},"dist":{"shasum":"bf40719d230330b423ae0d593df659c8a808c548","tarball":"https://registry.npmjs.org/@amiriel/react/-/react-0.0.1-beta.6.tgz","fileCount":24,"integrity":"sha512-YdQ6QfR3Od9YM9pj+DKFdwmNzNaidEdmZFxrCqTPX/2Bau+sz7IAciYNI1xDBqd9z2iDKyPUxyQzY25hUekrhA==","signatures":[{"sig":"MEUCIQD/sl1XwPBc4dyAVSH6ERESONefI9Dssfj2u1JL4kTBeQIgXPCBwYf5fHAkJzbR6vRPhG4cKMuaHaYTk1Rvexmq96A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":94396},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./style.css":"./dist/style.css"},"gitHead":"b90338fd67a041fc6f8b76e2ad624eb616bd8d98","scripts":{"build":"tsc -p tsconfig.json && node scripts/copy-style.mjs","typecheck":"tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"repository":{"url":"git+https://github.com/Amirieljs/Amiriel-React.git","type":"git"},"_npmVersion":"11.12.1","description":"React components for Amiriel letter documents.","directories":{},"sideEffects":["./dist/style.css","./src/style.css"],"_nodeVersion":"22.22.0","dependencies":{"amiriel":"^0.0.1-beta.6"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.7.0","devDependencies":{"react":"^19.2.3","typescript":"^5.9.3","@types/react":"^19.2.7"},"peerDependencies":{"react":">=18.2.0 || >=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.1-beta.6_1783005733717_0.13921293624956044","host":"s3://npm-registry-packages-npm-production"}},"0.0.1-beta.8":{"name":"@amiriel/react","version":"0.0.1-beta.8","keywords":["amiriel","react","react-component","editor","letter-editor","typescript"],"license":"MIT","_id":"@amiriel/react@0.0.1-beta.8","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"homepage":"https://amiriel.com","bugs":{"url":"https://github.com/Amirieljs/Amiriel-React/issues"},"dist":{"shasum":"8881f8251ea019740e31357b843992e54e4f60d5","tarball":"https://registry.npmjs.org/@amiriel/react/-/react-0.0.1-beta.8.tgz","fileCount":28,"integrity":"sha512-gkEB2Xc7FC+Y/fNttV+l4ZzTGI4evT8JJdFgVvk4eGAAuaAhpOlnrbqLFSUP96FWvIZ9gBTWokBTwSgVFTftUw==","signatures":[{"sig":"MEUCIQCptL5ralwc41xW/oRbNyAlnUMYNNxzPyknp3+/8aZ9CAIgUjzTlat0BTrw4X9Ai/kutBYfuxbLM9X2CD1G+COvDN8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amiriel%2freact@0.0.1-beta.8","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":99864},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./style.css":"./dist/style.css"},"gitHead":"08129d899ee3366747b293f124c02416d6d734e8","scripts":{"build":"tsc -p tsconfig.json && node scripts/copy-style.mjs","typecheck":"tsc -p tsconfig.json --noEmit"},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"repository":{"url":"git+https://github.com/Amirieljs/Amiriel-React.git","type":"git"},"_npmVersion":"10.9.8","description":"React components for Amiriel letter documents.","directories":{},"sideEffects":["./dist/style.css","./src/style.css"],"_nodeVersion":"22.23.1","dependencies":{"@amiriel/core":"^0.0.1-beta.7"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.7.0","readmeFilename":"README.md","devDependencies":{"react":"^19.2.3","typescript":"^5.9.3","@types/react":"^19.2.7"},"peerDependencies":{"react":">=18.2.0 || >=19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.0.1-beta.8_1783048882116_0.36530581784576044","host":"s3://npm-registry-packages-npm-production"}},"0.0.1":{"name":"@amiriel/react","version":"0.0.1","description":"React components for Amiriel letter documents.","type":"module","license":"MIT","homepage":"https://amiriel.com","packageManager":"pnpm@11.7.0","repository":{"type":"git","url":"git+https://github.com/Amirieljs/Amiriel-React.git"},"bugs":{"url":"https://github.com/Amirieljs/Amiriel-React/issues"},"keywords":["amiriel","react","react-component","editor","letter-editor","typescript"],"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./style.css":"./dist/style.css"},"scripts":{"build":"tsc -p tsconfig.json && node scripts/copy-style.mjs","typecheck":"tsc -p tsconfig.json --noEmit"},"sideEffects":["./dist/style.css","./src/style.css"],"dependencies":{"@amiriel/core":"^0.0.1"},"peerDependencies":{"react":">=18.2.0 || >=19.0.0"},"devDependencies":{"@types/react":"^19.2.7","react":"^19.2.3","typescript":"^5.9.3"},"_id":"@amiriel/react@0.0.1","gitHead":"ce16da311fcd44763d7e71b723781bf19213680f","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-v8N7jEt6+A39wnG/viGbD+Vykd0JKn3HCVCFSeJdAkP/hT/UmKWCbMacVx731ORcE+MQezG7C+lNZXpA5aTeyA==","shasum":"5fb23c838cfb2169183b913694a3343622c26dcc","tarball":"https://registry.npmjs.org/@amiriel/react/-/react-0.0.1.tgz","fileCount":28,"unpackedSize":99850,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amiriel%2freact@0.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCyVooMm36ASPocD1NpMiBnO9fOJ1484tOJV9LBRs3+aAIhAImOJrOl1AvneCbsw26BuSS61Op7oS0B5ZhtXPyRT/1q"}]},"_npmUser":{"name":"dingdangdog","email":"dingdangdogx@outlook.com"},"directories":{},"maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.0.1_1785989502783_0.4917933606741305"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T15:22:13.509Z","modified":"2026-08-06T04:11:43.314Z","0.0.1-beta.6":"2026-07-02T15:22:13.870Z","0.0.1-beta.8":"2026-07-03T03:21:22.243Z","0.0.1":"2026-08-06T04:11:42.929Z"},"bugs":{"url":"https://github.com/Amirieljs/Amiriel-React/issues"},"license":"MIT","homepage":"https://amiriel.com","keywords":["amiriel","react","react-component","editor","letter-editor","typescript"],"repository":{"type":"git","url":"git+https://github.com/Amirieljs/Amiriel-React.git"},"description":"React components for Amiriel letter documents.","maintainers":[{"name":"dingdangdog","email":"dingdangdogx@outlook.com"}],"readme":"

\n \"Amiriel\n

\n\n

Amiriel React

\n\n

\n React components for Amiriel letter documents.\n

\n\n`@amiriel/react` provides a React implementation of the Amiriel document\nrenderer and a controlled editor shell. It is built on `@amiriel/core`, so the\ndocument model, themes, labels, and normalization rules stay aligned with the\nVue package.\n\n[![npm version (beta)](https://img.shields.io/npm/v/@amiriel/react/beta?style=flat-square)](https://www.npmjs.com/package/@amiriel/react)\n[![license](https://img.shields.io/npm/l/@amiriel/react?style=flat-square)](https://www.npmjs.com/package/@amiriel/react)\n[![React](https://img.shields.io/badge/react-18%2B%20%7C%2019+-61DAFB?style=flat-square&logo=react&logoColor=white)](https://react.dev/)\n[![TypeScript](https://img.shields.io/badge/typescript-ready-3178C6?style=flat-square&logo=typescript&logoColor=white)]()\n\nThe full hosted product lives at [amiriel.com](https://amiriel.com).\n\n## Features\n\n- React read-only renderer for Amiriel documents\n- Controlled React editor shell for pages, themes, text blocks, paper size, and media list\n- Image/video media lightbox\n- Inline video component with duration badge\n- Shared document model from `@amiriel/core`\n- TypeScript declarations\n\nThe current React editor is a usable foundation. Advanced parity with the Vue\neditor, such as drag-and-drop placement, resize handles, upload retry UI, and\ntext overflow inspection, should be added incrementally.\n\n## Install\n\n```bash\nnpm install @amiriel/react@beta react\npnpm add @amiriel/react@beta react\nyarn add @amiriel/react@beta react\nbun add @amiriel/react@beta react\n```\n\nImport the stylesheet once:\n\n```tsx\nimport \"@amiriel/react/style.css\";\n```\n\nThe package depends on `@amiriel/core` for the shared document model and declares\n`react` as a peer dependency.\n\n## Usage\n\n```tsx\nimport { useState } from \"react\";\nimport {\n AmirielBodyEditor,\n AmirielBodyRenderer,\n type AmirielDocument,\n type AmirielMediaRequest,\n} from \"@amiriel/react\";\nimport \"@amiriel/react/style.css\";\n\nconst initialDocument: AmirielDocument = {\n theme: \"midnight\",\n media: [],\n pages: [],\n};\n\nexport function LetterComposer() {\n const [document, setDocument] = useState(initialDocument);\n\n async function onMediaRequest(request: AmirielMediaRequest) {\n request.handled = true;\n try {\n const media = await uploadMediaSomewhere(request.file);\n request.resolve(media);\n } catch (error) {\n request.reject(error instanceof Error ? error.message : \"Upload failed\");\n }\n }\n\n return (\n <>\n \n\n \n \n );\n}\n```\n\nHost applications own media upload and pass the resulting media object back\nthrough `request.resolve(media)`. The package does not include storage,\nauthentication, routing, database, or delivery workflows.\n\n## Main Exports\n\n| Export | Description |\n| --- | --- |\n| `AmirielBodyEditor` | Controlled React editor shell |\n| `AmirielBodyRenderer` | Read-only React renderer |\n| `AmirielMediaLightbox` | Image/video lightbox |\n| `AmirielMediaVideo` | Inline video component |\n| Core types and helpers | Re-exported from `@amiriel/core` |\n\n## Editor Props\n\n| Prop | Default | Description |\n| --- | --- | --- |\n| `value` | required | Controlled document value |\n| `onChange` | required | Called when the document changes |\n| `readOnly` | `false` | Render the editor shell without editing controls |\n| `locale` | `\"en\"` | Built-in label locale: `en` or `zh` |\n| `labels` | none | Partial override for UI labels |\n| `themes` | none | Override built-in themes or register custom paper themes |\n| `showGithubLink` | `true` | Show GitHub link on the text-block toolbar |\n| `githubUrl` | `https://github.com/Amirieljs/Amiriel-React` | Target URL for the GitHub button |\n| `defaultPaperSize` | `{ width: 720, height: 520 }` | Fallback paper size |\n| `paperSizeLimits` | `{ minWidth: 320, maxWidth: 1600, minHeight: 240, maxHeight: 2200 }` | Paper resizing bounds |\n| `paperResizable` | `true` | Allow users to edit paper width and height |\n| `onMediaRequest` | none | Host-controlled upload hook for new media files |\n| `onMediaRemoved` | none | Called when the user removes media from the document |\n\n`AmirielBodyRenderer` accepts the same theme, label, and paper-size props so\nread-only rendering can match the editor.\n\n## Themes\n\nBuilt-in themes: `midnight`, `paper`, `memorial`.\n\n```tsx\nimport {\n AmirielBodyEditor,\n type AmirielDocument,\n type AmirielThemeDefinition,\n} from \"@amiriel/react\";\n\nconst customThemes: AmirielThemeDefinition[] = [\n {\n id: \"ocean\",\n label: \"Ocean dusk\",\n swatch: \"linear-gradient(135deg, #1e3a5f, #0a1628)\",\n defaultTextColor: \"white\",\n vars: {\n paperBorder: \"rgba(96, 165, 250, 0.28)\",\n paperBg: \"linear-gradient(180deg, #1a2f4a 0%, #0d1824 100%)\",\n paperText: \"#dbeafe\",\n paperDivider: \"rgba(96, 165, 250, 0.2)\",\n paperAccent: \"rgba(147, 197, 253, 0.88)\",\n },\n },\n];\n\nfunction Editor({ document, onChange }: {\n document: AmirielDocument;\n onChange: (value: AmirielDocument) => void;\n}) {\n return (\n \n );\n}\n```\n\n## Package Architecture\n\nThis repository is the React implementation. The shared framework-agnostic core\nlives in [`@amiriel/core`](https://github.com/Amirieljs/Amiriel-Core), the meta package\n[`amiriel`](https://github.com/Amirieljs/Amiriel) re-exports it, and the Vue\nimplementation lives in [`@amiriel/vue`](https://github.com/Amirieljs/Amiriel-Vue).\n\n## License\n\nMIT. The React editor package is open source and can be used commercially. The\nofficial hosted Amiriel product at [amiriel.com](https://amiriel.com) may still\nprovide paid services around storage, accounts, delivery, hosting, collaboration,\nor other product workflows.\n","readmeFilename":"README.md"}