@codefrydev/svg-engine 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# `@codefrydev/svg-engine`
+
+React SVG diagram renderer and editor (library + optional web component bundle).
+
+## Install
+
+```bash
+npm install @codefrydev/svg-engine
+```
+
+Peers: `react` and `react-dom` ≥ 18.
+
+## Usage
+
+**Read-only**
+
+```tsx
+import { Renderer } from "@codefrydev/svg-engine";
+
+<Renderer elements={elements} className="w-full h-[400px]" />
+```
+
+**Editor**
+
+```tsx
+import { Editor } from "@codefrydev/svg-engine/editor";
+
+<Editor preset="mechanics" />
+```
+
+Presets include `mechanics`, `circuit`, `thermo`, `optical`, `magnetism`, `light`, `waves`, `waveOscillation`, `rotation`, `graph`, `electrostatics`, `chemistry`, `mechanical` (see `presets` export from `@codefrydev/svg-engine/editor`).
+
+**Custom element types**
+
+```tsx
+import { registerRenderer } from "@codefrydev/svg-engine";
+
+registerRenderer("my_box", (el) => (
+  <rect x={el.x1} y={el.y1} width={80} height={40} fill="#fde68a" stroke="#92400e" />
+));
+```
+
+## Tailwind
+
+Editor UI uses Tailwind classes. Point your Tailwind `content` at this package’s `dist` files (e.g. `./node_modules/@codefrydev/svg-engine/dist/**/*.{js,cjs,mjs}`) so utilities are generated.
+
+## Web component (`@codefrydev/svg-engine/wc`)
+
+Loads React-included IIFE/ESM; registers `<codefrydev-svg-engine>` (editor) and `<codefrydev-svg-engine-prev>` (preview). CDN: `https://unpkg.com/@codefrydev/svg-engine/dist/wc.iife.js`. Host page still needs Tailwind (or equivalent) for editor chrome.
+
+## Develop
+
+```bash
+npm run typecheck
+npm run build        # lib + wc
+cd examples/playground && npm run dev
+```