svgbridge 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+<div align="center">
+
+# svgbridge
+
+### Small adapters for rendering Artboards visual documents as SVG.
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Module](https://img.shields.io/badge/module-ESM-f7df1e?logo=javascript&logoColor=111827)](package.json) [![Status](https://img.shields.io/badge/status-pre--alpha-f5a623)](https://artboards.dev)
+
+[artboards.dev](https://artboards.dev)
+
+</div>
+
+`svgbridge` is a small, DOM-free SVG target for the portable visual document
+primitives exported by `artboards`. The same document can be sent to another
+renderer such as `canvasbridge`.
+
+## Install
+
+```sh
+npm i artboards svgbridge
+```
+
+```ts
+import { renderSvg } from "svgbridge";
+
+const svg = renderSvg({
+  width: 320,
+  height: 180,
+  children: [
+    { type: "rect", x: 10, y: 10, width: 80, height: 40, fill: "#06c" },
+  ],
+});
+```
+
+## Architecture
+
+```text
+                 artboards.dev
+                      │
+                      ▼
+                   artboards
+              portable visual model
+                      │
+                      ▼
+                  svgbridge
+                      │
+                      ▼
+                     SVG
+```
+
+Supported basics are groups, rectangles, ellipses, lines, portable path
+commands, text, image references, transforms, fill/stroke, opacity, and
+document sizing. Output is deterministic and requires no browser DOM. Advanced
+text shaping, gradients, clipping, masks, asset fetching, layout, and
+application UI are out of scope until Artboards defines portable equivalents.

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { PathCommand, Style, Transform, VisualDocument, VisualNode } from "artboards";
+export type SvgNode = VisualNode;
+export type SvgDocument = VisualDocument;
+/** Converts the shared portable transform into deterministic SVG syntax. */
+export declare function toSvgTransform(transform: Transform | undefined): string | undefined;
+/** Serializes shared portable path commands as SVG path data. */
+export declare function toSvgPath(commands?: readonly PathCommand[]): string;
+/** Maps portable style properties to SVG attributes. */
+export declare function toSvgPaint(style: Style): string;
+/** Renders one shared visual node without requiring a browser DOM. */
+export declare function renderSvgElement(node: SvgNode): string;
+/** Produces stable, DOM-free SVG markup for one Artboards visual document. */
+export declare function renderSvg(document: SvgDocument): string;
+export declare const serializeSvg: typeof renderSvg;

package/dist/index.js

@@ -0,0 +1 @@
+function r(t){return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function i(t,e){return e===void 0?"":` ${t}="${r(String(e))}"`}function p(t){if(!t)return;const e=[];return t.matrix&&e.push(`matrix(${t.matrix.join(" ")})`),t.translate&&e.push(`translate(${t.translate.x} ${t.translate.y})`),t.origin&&e.push(`translate(${t.origin.x} ${t.origin.y})`),t.rotate!==void 0&&e.push(`rotate(${t.rotate*180/Math.PI})`),t.scale&&e.push(`scale(${t.scale.x} ${t.scale.y})`),t.origin&&e.push(`translate(${-t.origin.x} ${-t.origin.y})`),e.length?e.join(" "):void 0}function s(t=[]){return t.map(e=>{switch(e.type){case"moveTo":return`M ${e.x} ${e.y}`;case"lineTo":return`L ${e.x} ${e.y}`;case"quadraticCurveTo":return`Q ${e.cpx} ${e.cpy} ${e.x} ${e.y}`;case"bezierCurveTo":return`C ${e.cp1x} ${e.cp1y} ${e.cp2x} ${e.cp2y} ${e.x} ${e.y}`;case"arc":{const h=Math.abs(e.endAngle-e.startAngle)%(Math.PI*2),u=e.x+e.radius*Math.cos(e.endAngle),g=e.y+e.radius*Math.sin(e.endAngle);return`A ${e.radius} ${e.radius} 0 ${h>Math.PI?1:0} ${e.counterclockwise?0:1} ${u} ${g}`}case"closePath":return"Z"}}).join(" ")}function x(t){return[i("fill",t.fill),i("stroke",t.stroke),i("stroke-width",t.strokeWidth),i("opacity",t.opacity)].join("")}function l(t){return[i("x",t.x),i("y",t.y),i("width",t.width),i("height",t.height),i("cx",t.cx),i("cy",t.cy),i("rx",t.rx),i("ry",t.ry),i("x1",t.x1),i("y1",t.y1),i("x2",t.x2),i("y2",t.y2),i("href",t.href),i("transform",p(t.transform)),x(t)].join("")}function $(t){const e=l(t);return t.type==="group"?`<g${e}>${(t.children??[]).map($).join("")}</g>`:t.type==="path"?`<path${e}${i("d",s(t.path))}/>`:t.type==="text"?`<text${e}>${r(t.text??"")}</text>`:`<${t.type}${e}/>`}function a(t){const e=t.background===void 0?"":`<rect width="${t.width}" height="${t.height}" fill="${r(t.background)}"/>`;return`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${t.width} ${t.height}" width="${t.width}" height="${t.height}">${e}${(t.children??[]).map($).join("")}</svg>`}const n=a;export{a as renderSvg,$ as renderSvgElement,n as serializeSvg,x as toSvgPaint,s as toSvgPath,p as toSvgTransform};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "svgbridge",
+  "version": "0.1.0",
+  "description": "Small adapters for rendering Artboards visual documents as SVG.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js", "default": "./dist/index.js" } },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": { "build": "tsc --project tsconfig.json", "postbuild": "npm run dist --prefix \"$npm_config_local_prefix\" -- \"$PWD\"", "prepack": "npm run build", "pretest": "npm run build", "test": "node --test test/*.test.mjs" },
+  "keywords": ["artboards", "svg", "renderer"],
+  "homepage": "https://artboards.dev",
+  "license": "MIT",
+  "engines": { "node": ">=20" },
+  "publishConfig": { "access": "public" },
+  "dependencies": { "artboards": "^0.0.1" },
+  "devDependencies": { "typescript": "^5.9.3" }
+}