@draftably/runtime 0.1.0 → 0.3.0

package/README.md

@@ -1,57 +1,42 @@
 # @draftably/runtime
 
-Render `.draft` source to SVG in Node or a browser. The package has no runtime dependencies, DOM shim, or install scripts.
+Render `.draft` diagrams to SVG in Node or a browser, or show them in an interactive
+`<draft-diagram>` element. No runtime dependencies, DOM shim or install scripts. Needs Node 22.21
+or later.
 
-Start with [Use Draftably in your project](https://github.com/byronwall/draftably/blob/main/docs/integrations/README.md)
-for package installation and complete element, SVG, and Markdown examples.
+```sh
+pnpm add @draftably/runtime
+```
 
 ```ts
-import { renderSvg, validate } from '@draftably/runtime';
+import { renderSvg } from '@draftably/runtime';
 
-const result = await renderSvg('node api "API"\n');
+const result = await renderSvg('node api "API"');
 if (result.ok) console.log(result.value.svg);
-else console.error(result.diagnostics);
-
-await validate('node api "API"\n');
 ```
 
-Image output embeds its used fonts. Links and source metadata are disabled by default. Inline output needs a unique `idPrefix`:
-
 ```ts
-const result = await renderSvg(source, {
-  target: 'inline',
-  idPrefix: 'checkout-one',
-  description: 'The web app calls the API and saves an order.',
+import { layout } from '@draftably/runtime/graph';
+
+// Positions, routed lines and label boxes for a graph your app draws.
+const placed = await layout({
+  nodes: [{ id: 'a' }, { id: 'b' }],
+  edges: [{ source: 'a', target: 'b' }],
 });
 ```
 
-To use exact host fonts, import `@draftably/runtime/fonts.css` and set `fonts: 'host'` with inline output. Copy the full `dist` directory for a no-bundler browser module; its font chunk and CSS font files use relative paths.
-
-## Interactive viewer
-
-For automatic setup, import `@draftably/runtime/element` once and use
-`<draft-diagram source='node api "API"'></draft-diagram>`. It supplies styles,
-default sizing, updates, and cleanup. Put an image inside it for a static
-fallback. See the [element guide](https://github.com/byronwall/draftably/blob/main/docs/integrations/element.md)
-for the complete Vite configuration and source update example.
-
-The optional `/viewer` entry mounts an independent, read-only viewer. Its default module worker and embedded fonts keep compilation off the main thread and visuals self-contained:
-
 ```ts
-import { mountViewer } from '@draftably/runtime/viewer';
-import '@draftably/runtime/viewer.css';
-
-const viewer = mountViewer(document.querySelector('#diagram')!, { label: 'Checkout flow' });
-void viewer.update(source).then(result => {
-  if (result.status === 'error') console.error(result.error.diagnostics);
-});
-// Call viewer.destroy() when the host is removed.
+import '@draftably/runtime/element';
+// <draft-diagram source='node api "API"' label="API diagram"></draft-diagram>
 ```
 
-Give the host a height. The viewer requires an empty host and owns its children. Worker startup, timeout, and font failures return an error and preserve the last good drawing. The viewer does not fall back to main-thread compilation. Select `execution: { mode: 'main' }` for known small inputs or a host-provided link resolver. To use host fonts, import `@draftably/runtime/fonts.css` and set `render: { fonts: 'host' }`.
-
-Read the [viewer integration guide](https://github.com/byronwall/draftably/blob/main/docs/integrations/viewer.md) for lifecycle, accessibility, framework, and SSR recipes.
-
-Requires Node 22.21 or later. Browser ESM is checked in Chromium. Cancellation on the calling thread is cooperative. A host must choose worker or process isolation for an enforced deadline.
+## Docs
 
-See the [runtime guide](https://github.com/byronwall/draftably/blob/main/docs/integrations/runtime.md) and [consumer examples](https://github.com/byronwall/draftably/tree/main/integration-examples).
+- [Render SVG](https://draftably.dev/docs/render-svg): options, validation, inline output, links
+  and limits
+- [Layout API](https://draftably.dev/docs/layout-api): lay out and route a graph your app draws
+- [Drop in your graph layout](https://draftably.dev/docs/layout-drop-in): replace the layout in
+  React Flow, Svelte Flow, elkjs, dagre or Cytoscape.js with one changed call
+- [Element and viewer](https://draftably.dev/docs/element): the element, `mountViewer`, fallback
+  images and SSR
+- [Embed diagrams](https://draftably.dev/docs/embed): every route, including framework components