{"_id":"@aphexcms/visual-editing","_rev":"5-a014d8002ab67e3db473ecfba05e1269","name":"@aphexcms/visual-editing","dist-tags":{"latest":"0.3.1"},"versions":{"0.1.1":{"name":"@aphexcms/visual-editing","version":"0.1.1","license":"MIT","_id":"@aphexcms/visual-editing@0.1.1","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"homepage":"https://github.com/IcelandicIcecream/aphex#readme","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"83bec4402084c5323d7c570530062cf61ef51f5c","tarball":"https://registry.npmjs.org/@aphexcms/visual-editing/-/visual-editing-0.1.1.tgz","fileCount":25,"integrity":"sha512-zZ+bIigEjKDfORDtcBUf6uuhzqrPFU8pPrxc4aI79LRyg03PzOCR9PT5i+99fOh3yMU4A4drW7G8RRb0H+0Hdg==","signatures":[{"sig":"MEQCICBLc6q0iZ+/jicNyw+dJBZYxzCN8z+BFRxpmhULgWXbAiAewQ2OPxrEzme8ATpIrU76vFfPDrRMVsLy7LosB8/1mQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26722},"main":"./src/lib/index.js","type":"module","types":"./src/lib/index.d.ts","svelte":"./src/lib/index.js","exports":{".":{"types":"./src/lib/index.d.ts","svelte":"./src/lib/index.js","default":"./src/lib/index.js"}},"gitHead":"3168dfc6e1c14b1b64e469bc3bb625c301e44174","scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","prepack":"node ../../scripts/swap-package-paths.js ./package.json dist lib","postpack":"node ../../scripts/swap-package-paths.js ./package.json src lib","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_npmUser":{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"},"repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"_npmVersion":"11.12.1","description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","directories":{},"_nodeVersion":"26.0.0","dependencies":{"@vercel/stega":"^1.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/visual-editing_0.1.1_1781614443552_0.14971128278145662","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@aphexcms/visual-editing","version":"0.1.2","license":"MIT","_id":"@aphexcms/visual-editing@0.1.2","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"homepage":"https://github.com/IcelandicIcecream/aphex#readme","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"2c34490ba36c3735181317f4e8543f1460a55696","tarball":"https://registry.npmjs.org/@aphexcms/visual-editing/-/visual-editing-0.1.2.tgz","fileCount":26,"integrity":"sha512-VipGTBN6/z0f1pARrjab4TjaTbrqwTCIEA5rAIL9oJoX4B9F9kOJaUPOJBj3vKnYa0lhW50369sO8Z9aJ3Nm5Q==","signatures":[{"sig":"MEUCIQCTldw296AQ13MJ3bPNyJ/RMYinJUGUy2yT0C4k2B3SggIgDd9IlxmP97l5A6CDqRuNPcoXcn66CDgX8Oa8vm+Mu6I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aphexcms%2fvisual-editing@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":27740},"main":"./dist/index.js","type":"module","_from":"file:aphexcms-visual-editing-0.1.2.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d9820a1c-d3d9-40db-9aaa-a93f65d4cc17"}},"_resolved":"/tmp/5f3b365476de69addf4ee8f3f2cec257/aphexcms-visual-editing-0.1.2.tgz","_integrity":"sha512-VipGTBN6/z0f1pARrjab4TjaTbrqwTCIEA5rAIL9oJoX4B9F9kOJaUPOJBj3vKnYa0lhW50369sO8Z9aJ3Nm5Q==","repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"_npmVersion":"11.13.0","description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","directories":{},"_nodeVersion":"24.17.0","dependencies":{"@vercel/stega":"^1.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/visual-editing_0.1.2_1782927315772_0.6790154388947076","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@aphexcms/visual-editing","version":"0.2.0","license":"MIT","_id":"@aphexcms/visual-editing@0.2.0","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"homepage":"https://github.com/IcelandicIcecream/aphex#readme","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"64d68289ed684a701f82c38c5430dfd13a9d9de6","tarball":"https://registry.npmjs.org/@aphexcms/visual-editing/-/visual-editing-0.2.0.tgz","fileCount":26,"integrity":"sha512-EFQQPyVL6Itigi+tqKmjekUQ4UzcGrPdAmeS7iDTkS0Uw4F4eIU3vXvjX0M5+2q+7dVNN/dEIQikDaBP1BITmQ==","signatures":[{"sig":"MEQCIAsyrGZBlkLZA8LoF4k3Exz0P6Y3kQ7Yq7oNx5Xv6hKbAiBFOM8fdOSGOLhvGvseUHia7HVb7+cJLHgzR2UDoAfU1g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aphexcms%2fvisual-editing@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":33863},"main":"./dist/index.js","type":"module","_from":"file:aphexcms-visual-editing-0.2.0.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d9820a1c-d3d9-40db-9aaa-a93f65d4cc17"}},"_resolved":"/tmp/475dd34bb6f1caff3543af802ca9d6bc/aphexcms-visual-editing-0.2.0.tgz","_integrity":"sha512-EFQQPyVL6Itigi+tqKmjekUQ4UzcGrPdAmeS7iDTkS0Uw4F4eIU3vXvjX0M5+2q+7dVNN/dEIQikDaBP1BITmQ==","repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"_npmVersion":"11.16.0","description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@vercel/stega":"^1.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/kit":"^2.59.1","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/visual-editing_0.2.0_1784275328400_0.1255936132763933","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@aphexcms/visual-editing","version":"0.3.0","license":"MIT","_id":"@aphexcms/visual-editing@0.3.0","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"homepage":"https://github.com/IcelandicIcecream/aphex#readme","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"26f26b7bf4c21a7afc21da38b2417c223904e9b3","tarball":"https://registry.npmjs.org/@aphexcms/visual-editing/-/visual-editing-0.3.0.tgz","fileCount":26,"integrity":"sha512-QI4Kj71xZwUfw2uioKnQG4rjKGK8WIpE8+AHCydlBTuj2FJpFdEyqmWgBIaW/NJA6TT0h5g+9VSfGUpKQK89cw==","signatures":[{"sig":"MEUCIQDxPIxAJDSw5Cjsz2n1KIGZOVLiTyqzI6QLB+3A4EOsfgIgLexkz62Nw8+7UWguRGZHfb3lvhYDrQk4YQKv0dKTwbg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aphexcms%2fvisual-editing@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":35788},"main":"./dist/index.js","type":"module","_from":"file:aphexcms-visual-editing-0.3.0.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d9820a1c-d3d9-40db-9aaa-a93f65d4cc17"}},"_resolved":"/tmp/d8829663594cd55b1ebcb7b245391e18/aphexcms-visual-editing-0.3.0.tgz","_integrity":"sha512-QI4Kj71xZwUfw2uioKnQG4rjKGK8WIpE8+AHCydlBTuj2FJpFdEyqmWgBIaW/NJA6TT0h5g+9VSfGUpKQK89cw==","repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"_npmVersion":"11.16.0","description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@vercel/stega":"^1.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/kit":"^2.59.1","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/visual-editing_0.3.0_1785602470877_0.3077693449601604","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"_id":"@aphexcms/visual-editing@0.3.1","bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"dist":{"shasum":"e102a0debe48ba3dc09d7f3260cd687d7a29bd98","tarball":"https://registry.npmjs.org/@aphexcms/visual-editing/-/visual-editing-0.3.1.tgz","fileCount":30,"integrity":"sha512-a9nMGg8OBgu7uunn5Ux2Jk1SiSyTON/g35vM5vm+uFap8zWMVopMZWIdI3+UkSnekN8H1B/ACaUHq+mpG+WwXA==","signatures":[{"sig":"MEUCIQC/fLh85rpmMtl1xWl4UjCeGbMtgMx+A7Aw/+0D+qk1CwIgWKbB9GCOxT1Fde8qo1HQxAyizGPT1gC9bWeExH2L0+o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDekTHX7fPiFgprgNt15UTiEyxxTotfHI+6q9bEOtsC3AiAYiHoqjq0GSG/M7y/76MkczriFprrqYype6Byt5rVGjg=="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aphexcms%2fvisual-editing@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":48174},"main":"./dist/index.js","name":"@aphexcms/visual-editing","type":"module","_from":"file:aphexcms-visual-editing-0.3.1.tgz","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"}},"license":"MIT","scripts":{"dev":"tsc --watch --preserveWatchOutput","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json","dev:local":"node ../../scripts/swap-package-paths.js ./package.json src lib"},"version":"0.3.1","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:d9820a1c-d3d9-40db-9aaa-a93f65d4cc17"}},"homepage":"https://github.com/IcelandicIcecream/aphex#readme","_resolved":"/tmp/100f9a0ee66f52fb2ccdf533f11e7784/aphexcms-visual-editing-0.3.1.tgz","_integrity":"sha512-a9nMGg8OBgu7uunn5Ux2Jk1SiSyTON/g35vM5vm+uFap8zWMVopMZWIdI3+UkSnekN8H1B/ACaUHq+mpG+WwXA==","repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"_npmVersion":"11.19.1","description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","directories":{},"maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"_nodeVersion":"24.20.0","dependencies":{"@vercel/stega":"^1.1.0"},"publishConfig":{"access":"public","provenance":true},"_hasShrinkwrap":false,"devDependencies":{"svelte":"^5.0.0","typescript":"^5.9.3","svelte-check":"^4.0.0","@sveltejs/kit":"^2.70.2","@sveltejs/package":"^2.5.6"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/visual-editing_0.3.1_1788806111380_0.5888293973442902"}}},"time":{"created":"2026-06-16T12:54:03.374Z","modified":"2026-09-07T18:35:11.807Z","0.1.1":"2026-06-16T12:54:03.710Z","0.1.2":"2026-07-01T17:35:15.927Z","0.2.0":"2026-07-17T08:02:08.558Z","0.3.0":"2026-08-01T16:41:11.021Z","0.3.1":"2026-09-07T18:35:11.457Z"},"bugs":{"url":"https://github.com/IcelandicIcecream/aphex/issues"},"license":"MIT","homepage":"https://github.com/IcelandicIcecream/aphex#readme","repository":{"url":"git+https://github.com/IcelandicIcecream/aphex.git","type":"git","directory":"packages/visual-editing"},"description":"Visual editing overlay for AphexCMS — add click-to-edit overlays to your frontend","maintainers":[{"name":"rainbowasian96","email":"benjaminsinidol@gmail.com"}],"readme":"# @aphexcms/visual-editing\n\nClick-to-edit visual editing for [AphexCMS](https://github.com/IcelandicIcecream/aphex).\n\nRenders your real site in the studio's preview pane and makes the content in it clickable: an author clicks a heading on the page and lands on that field in the editor, with edits streaming back live.\n\n📚 **Documentation: [docs.getaphex.com/visual-editing](https://docs.getaphex.com/visual-editing)**\n\n## Install\n\n```bash\npnpm add @aphexcms/visual-editing\n```\n\n## Setup is two things\n\n**1. Wrap your public layout.** The overlay is a no-op unless the URL carries the `?aphex-preview` marker the editor's iframe adds, so it costs real visitors nothing:\n\n```svelte title=\"src/routes/(site)/+layout.svelte\"\n<script lang=\"ts\">\n\timport { AphexVisualOverlay } from '@aphexcms/visual-editing';\n\tlet { children } = $props();\n</script>\n\n<AphexVisualOverlay>\n\t{@render children()}\n</AphexVisualOverlay>\n```\n\n**2. Give the schema a `previewUrl`** so the CMS knows which route renders a document:\n\n```ts\npreviewUrl: (doc) => (doc.slug ? `/blog/${doc.slug}?aphex-preview=1` : null);\n```\n\nThat's the whole setup. Plain text fields become click-to-edit automatically — the CMS encodes them with invisible [stega](https://github.com/vercel/stega) markers, so the string carries its own field address.\n\n## `usePreview()` — the one helper\n\nEverything else is one call, once per component:\n\n```svelte\n<script lang=\"ts\">\n\timport { usePreview } from '@aphexcms/visual-editing';\n\tconst ve = usePreview();\n\tlet { data } = $props();\n\tconst page = $derived(ve.live(data.page));\n</script>\n```\n\n| Method     | For                                                                    |\n| ---------- | ---------------------------------------------------------------------- |\n| `live()`   | Merge the editor's in-flight document over your `load` data            |\n| `edit()`   | Mark an element as the target for a field — required for arrays/images |\n| `image()`  | The same, for an image that has no string to carry a marker            |\n| `encode()` | Add markers to a string you derived yourself                           |\n\n## Four things that are easy to get wrong\n\nEach produces breakage that only appears in preview, which is why they're worth reading before you debug one:\n\n- **A repeated block must reveal its own row.** Spread `{...ve.edit({ field: 'layout', arrayIndex: index })}` onto its root element. Text is clickable on its own, but the surrounding chrome, buttons and empty states are inert without an explicit target — and a block that ignores its index sends the author to the top of the array instead of to their block.\n- **Images always need `edit()`/`image()`.** A string can carry stega inside itself; an image has no string to carry.\n- **`live()` merges, it doesn't replace.** It preserves underscore-prefixed keys (`_posts`, `_form`) that your `load` derived and the editor's document can't know about.\n- **Clean any value you branch on.** A stega-marked `'center'` matches no `===`, and the branch silently takes the wrong arm. `stegaClean(value)` before comparing; leave display strings marked, because that's what makes them clickable.\n\nA block that renders a _different_ document needs its own `live()`, gated on type and id — otherwise editing that document does nothing until a reload.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}