{"_id":"@alexguha/rplib-viewer","_rev":"4-f0913af49acae7e758a22c2b532c046d","name":"@alexguha/rplib-viewer","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@alexguha/rplib-viewer","version":"0.1.0","keywords":["diagram","viewer","rplib","svg","d3","visualization"],"license":"ISC","_id":"@alexguha/rplib-viewer@0.1.0","maintainers":[{"name":"alexguha","email":"alexandersguha@gmail.com"}],"homepage":"https://github.com/Alex-Guha/rplib#readme","bugs":{"url":"https://github.com/Alex-Guha/rplib/issues"},"dist":{"shasum":"9f4df440345f457e73a5a714c090e50a99af3e2e","tarball":"https://registry.npmjs.org/@alexguha/rplib-viewer/-/rplib-viewer-0.1.0.tgz","fileCount":21,"integrity":"sha512-67HAjzB5fT1bG9znjLuYTdra0H/Ud7keIMD2bdR2tUQQvLk85X080ocJ/2PYzRtL9znqkRvBdB6V9j76wRQ2yA==","signatures":[{"sig":"MEUCIE6gmoah87BLkGrYl6ZJN3ONx1zkc62Iu5UQt+j9s5W4AiEAtOIQ3N+wPuf8kGtt2cOByjOCC8QyF3lmkt4jtF0uNXg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64206},"main":"index.js","type":"module","engines":{"node":">=18"},"exports":{".":"./index.js","./styles.css":"./styles.css"},"gitHead":"649560143b4ef431e8d7dd7875cc7b5696e58def","scripts":{"test":"node --test"},"_npmUser":{"name":"alexguha","email":"alexandersguha@gmail.com"},"repository":{"url":"git+https://github.com/Alex-Guha/rplib.git","type":"git","directory":"viewer"},"_npmVersion":"11.11.1","description":"Lightweight read-only viewer UI for rplib diagrams. Same canvas + sidebar + navigation as rplib-editor, with all authoring features stripped out.","directories":{},"_nodeVersion":"25.8.2","_hasShrinkwrap":false,"peerDependencies":{"d3":"^7.0.0","katex":"^0.16.0","@alexguha/rplib":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/rplib-viewer_0.1.0_1779992896029_0.5456017111927354","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@alexguha/rplib-viewer","version":"0.1.1","keywords":["diagram","viewer","rplib","svg","d3","visualization"],"license":"ISC","_id":"@alexguha/rplib-viewer@0.1.1","maintainers":[{"name":"alexguha","email":"alexandersguha@gmail.com"}],"homepage":"https://github.com/Alex-Guha/rplib#readme","bugs":{"url":"https://github.com/Alex-Guha/rplib/issues"},"dist":{"shasum":"1933602494f1f5fad407ac66451c65d197dd7a07","tarball":"https://registry.npmjs.org/@alexguha/rplib-viewer/-/rplib-viewer-0.1.1.tgz","fileCount":21,"integrity":"sha512-U0S/ry9SuVIMrfLjgg2hFMTetSNCm3RtbdSlLtlmViW6t6/WJb/iWHAmK1rHlTZxM8CQ9updLu+aW+NAjx9wRw==","signatures":[{"sig":"MEQCIAhmLkgwUw5ogqxzk66PMk5ashQAnP7qbLhhK6Hm1l3sAiBxRizGuAuklsnmoanqE/z29VaGHSwxzNARFkkqvoslUw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64200},"main":"index.js","type":"module","engines":{"node":">=18"},"exports":{".":"./index.js","./styles.css":"./styles.css"},"gitHead":"d4a23729c4a075fb70a98a61ef1fefaa363f2d56","scripts":{"test":"node --test"},"_npmUser":{"name":"alexguha","email":"alexandersguha@gmail.com"},"repository":{"url":"git+https://github.com/Alex-Guha/rplib.git","type":"git","directory":"viewer"},"_npmVersion":"10.8.2","description":"Lightweight read-only viewer UI for rplib diagrams. Same canvas + sidebar + navigation as rplib-editor, with all authoring features stripped out.","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"peerDependencies":{"d3":"^7.0.0","katex":"^0.16.0","@alexguha/rplib":"^0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/rplib-viewer_0.1.1_1779995779302_0.272017131242801","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@alexguha/rplib-viewer","version":"0.2.0","keywords":["diagram","viewer","rplib","svg","d3","visualization"],"license":"ISC","_id":"@alexguha/rplib-viewer@0.2.0","maintainers":[{"name":"alexguha","email":"alexandersguha@gmail.com"}],"homepage":"https://github.com/Alex-Guha/rplib#readme","bugs":{"url":"https://github.com/Alex-Guha/rplib/issues"},"dist":{"shasum":"c634015ef9d4e4cbd2e299e5605802db187e09cf","tarball":"https://registry.npmjs.org/@alexguha/rplib-viewer/-/rplib-viewer-0.2.0.tgz","fileCount":21,"integrity":"sha512-3yWmhKkXftmVMBIVMSg9fMaOM4CQ8m1+rCxte28Le061fCFKogI933t6dqXJ8tuY43LPeJPXI/5EcwaljOT9DQ==","signatures":[{"sig":"MEUCIQDjwvUwxFxiQWKpKIT1Lr/F3QP57L1M373e52CFhUAaRgIgSyelHGf/Yl1MBK3Ztnun2KAT0VZ61NhsSB9O5BJ3mJg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":67038},"main":"index.js","type":"module","engines":{"node":">=18"},"exports":{".":"./index.js","./styles.css":"./styles.css"},"gitHead":"ee63f535efad9995192b16e65f5e34ff4e139224","scripts":{"test":"node --test"},"_npmUser":{"name":"alexguha","email":"alexandersguha@gmail.com"},"repository":{"url":"git+https://github.com/Alex-Guha/rplib.git","type":"git","directory":"viewer"},"_npmVersion":"10.8.2","description":"Lightweight read-only viewer UI for rplib diagrams. Same canvas + sidebar + navigation as rplib-editor, with all authoring features stripped out.","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"peerDependencies":{"d3":"^7.0.0","katex":"^0.16.0","@alexguha/rplib":"^0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/rplib-viewer_0.2.0_1780869594826_0.9986885453392496","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@alexguha/rplib-viewer","version":"0.3.0","description":"Lightweight read-only viewer UI for rplib diagrams. Same canvas + sidebar + navigation as rplib-editor, with all authoring features stripped out.","type":"module","main":"index.js","scripts":{"test":"node --test"},"exports":{".":"./index.js","./styles.css":"./styles.css"},"keywords":["diagram","viewer","rplib","svg","d3","visualization"],"repository":{"type":"git","url":"git+https://github.com/Alex-Guha/rplib.git","directory":"viewer"},"homepage":"https://github.com/Alex-Guha/rplib#readme","bugs":{"url":"https://github.com/Alex-Guha/rplib/issues"},"engines":{"node":">=18"},"peerDependencies":{"d3":"^7.0.0","katex":"^0.16.0","@alexguha/rplib":"^0.3.0"},"license":"ISC","gitHead":"3a15d9c28c2d74c5ce41012b5da76dfc567b503e","_id":"@alexguha/rplib-viewer@0.3.0","_nodeVersion":"25.8.2","_npmVersion":"11.11.1","dist":{"integrity":"sha512-QMBBU0qTaF9hVSJIcddlqkEmcfp1jLSwq06rZT2sb39jlkWUEO+qUjsWq/GkuOJJrnX7q9uJ1h58H5lBAMnVww==","shasum":"db0732fa4a694635ea8b9106c68fe11b83cce1b8","tarball":"https://registry.npmjs.org/@alexguha/rplib-viewer/-/rplib-viewer-0.3.0.tgz","fileCount":21,"unpackedSize":68005,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB+xj167XFqUSo4v41gKn1IteDApRsmUlZ3XuAY9BTEFAiEAlCmIbME6VF0WUYb6SAXTYNp30yRJphTyEvkbD+httKY="}]},"_npmUser":{"name":"alexguha","email":"alexandersguha@gmail.com"},"directories":{},"maintainers":[{"name":"alexguha","email":"alexandersguha@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rplib-viewer_0.3.0_1780963139645_0.550796293348309"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-28T18:28:15.888Z","modified":"2026-06-08T23:58:59.883Z","0.1.0":"2026-05-28T18:28:16.164Z","0.1.1":"2026-05-28T19:16:19.441Z","0.2.0":"2026-06-07T21:59:54.960Z","0.3.0":"2026-06-08T23:58:59.778Z"},"bugs":{"url":"https://github.com/Alex-Guha/rplib/issues"},"license":"ISC","homepage":"https://github.com/Alex-Guha/rplib#readme","keywords":["diagram","viewer","rplib","svg","d3","visualization"],"repository":{"type":"git","url":"git+https://github.com/Alex-Guha/rplib.git","directory":"viewer"},"description":"Lightweight read-only viewer UI for rplib diagrams. Same canvas + sidebar + navigation as rplib-editor, with all authoring features stripped out.","maintainers":[{"name":"alexguha","email":"alexandersguha@gmail.com"}],"readme":"# @alexguha/rplib-viewer\n\nA read-only diagram-viewer UI built on top of [`@alexguha/rplib`](../core/). Same canvas, sidebar, navigation, theming, and info overlay as [`@alexguha/rplib-editor`](../editor/) — without the authoring features.\n\nUse when you want to publish or embed static diagrams without exposing the abstract / component editors, advanced import-export settings, or any of the editor's dependencies (e.g. CodeMirror).\n\n## Install\n\n```sh\nnpm install @alexguha/rplib @alexguha/rplib-viewer d3 katex\n```\n\n`@alexguha/rplib`, `d3`, and `katex` are peer dependencies.\n\n## Quickstart\n\nLay out your data as:\n\n```\ndata/\n  abstracts/   # any number of *.txt files (rplib-DSL), any names\n  components/  # any number of *.json / *.js files, nested freely\n```\n\nGenerate the runtime manifest before serving:\n\n```sh\nnpx rplib-build-data ./data\n```\n\nThen boot:\n\n```js\nimport { createViewer } from '@alexguha/rplib-viewer';\n\nconst manager = await createViewer({\n  dataDir: './data',\n  labels: {\n    abstract: { singular: 'Architecture', plural: 'Architectures' },\n  },\n});\n\nmanager.restoreView('default_view');         // fallback if no saved view in localStorage\n```\n\nSee [`@alexguha/rplib-editor` README](../editor/README.md#data-directory-layout) for the full data-directory contract (it's identical between the two packages). Bundler users can pass pre-aggregated `data: { abstractDefinitions, components }` instead of `dataDir`.\n\nThe consumer also needs to:\n\n1. Load `@alexguha/rplib-viewer/styles.css` somewhere in the page.\n2. Provide an `#svg` element and a `#sidebar` container holding an `#info` and a `#panels` child — the viewer mounts into these by id. (`#info` is the description pane; `#panels` is the configurable panel region.)\n3. If running directly in the browser (no bundler), declare an importmap so bare specifiers resolve:\n\n   ```html\n   <script type=\"importmap\">\n   {\n     \"imports\": {\n       \"d3\": \"./node_modules/d3/.../d3.js\",\n       \"katex\": \"./node_modules/katex/dist/katex.mjs\",\n       \"@alexguha/rplib\": \"./node_modules/@alexguha/rplib/index.js\",\n       \"@alexguha/rplib/\": \"./node_modules/@alexguha/rplib/\",\n       \"@alexguha/rplib-viewer\": \"./node_modules/@alexguha/rplib-viewer/index.js\",\n       \"@alexguha/rplib-viewer/\": \"./node_modules/@alexguha/rplib-viewer/\"\n     }\n   }\n   </script>\n   ```\n\n## `createViewer(config)`\n\n| Field | Type | Required | Description |\n| --- | --- | --- | --- |\n| `dataDir` | string | one of | URL/path to a `data/` directory containing `abstracts/`, `components/`, and a `manifest.json` produced by `rplib-build-data`. |\n| `data` | object | one of | Pre-aggregated `{ abstractDefinitions, components }`. Escape hatch for bundler users. |\n| `labels` | object | no | Terminology overrides, e.g. `{ abstract: { singular: 'Architecture', plural: 'Architectures' } }`. Used in the views menu. |\n| `themes` | object | no | Extra named theme palettes merged on top of the built-ins (`default`, `dark`, `light`). Host-supplied themes win on name collisions. |\n| `repoUrl` | string | no | URL the GitHub button in the lower-left links to. Omit to leave the button inert. Reassignable at runtime via `manager.setRepoUrl(url)`. |\n| `storage` | Storage | no | `{ getItem, setItem, removeItem }` adapter for persisting the user's theme + toggle preferences. Defaults to global `localStorage` in browser hosts. |\n| `reporter` | `{error, warn}` | no | Diagnostics sink. Defaults to `console`. |\n| `panels` | array | no | Ordered [panel definitions](#panels) rendered into the sidebar content region. Defaults to `[]` (empty region). **References is no longer built in** — supply a references panel to render it. |\n\nReturns an `AppManager` exposing:\n\n- `restoreView(fallbackView)` — restore the previously-viewed abstract, falling back to `fallbackView` if none saved.\n- `setRepoUrl(url)` — reassign the lower-left GitHub button.\n- `canvas` — the underlying `RPCanvas` instance.\n\n## Panels\n\nThe sidebar content region renders an ordered array of **panel** definitions you\nsupply via `panels`. References is no longer special — it's just a panel keyed to\nthe `references` property, built from\n[`@alexguha/rplib/panel`](../core/README.md#panels-alexguharplibpanel). Omit\n`panels` and the region is empty (errors still take it over transiently).\n\nThe viewer is read-only, so only the display half of a panel def matters (`name`,\n`title`, `property`/`resolve`, `render`, `showWhen`, `theme`); editability fields\n(`itemFields` / `renderEditor`) are ignored. The editor README has the canonical\n[references recipe](../editor/README.md#getting-references-back-canonical-recipe)\n— the same `definePanel({...})` works here. Panels use `PANEL_BACKGROUND`\n(`--panel-background-color`) by default; a panel may declare\n`theme: { background: '<THEME_KEY>' }` to use a different palette key. The\nsidebar content region is the host-supplied `#panels` element.\n\n## Differences vs `@alexguha/rplib-editor`\n\n- No edit button, no abstract / component editors, no edit-history undo/redo.\n- No advanced settings (no custom-abstract import/export, no custom-component management, no mass import).\n- No CodeMirror or related dependencies — viewer bundle is materially smaller.\n- Persistence is limited to display preferences (theme, view-level toggles, last-viewed root) — user-authored content is not stored.\n\n## License\n\nISC\n","readmeFilename":"README.md"}