@zebrash/core 0.1.0 → 0.1.4

package/dist/assets/fonts-browser.d.ts

@@ -11,5 +11,7 @@
  */
 export type FontKey = "HelveticaBold" | "DejavuSansMono" | "DejavuSansMonoBold" | "ZplGS";
 export declare function setFontBaseUrl(url: string): void;
+export declare function getFontBaseUrl(): string;
+export declare function getFontFilename(key: FontKey): string;
 export declare function getEmbeddedFont(key: FontKey): Promise<Uint8Array>;
 //# sourceMappingURL=fonts-browser.d.ts.map

package/dist/assets/fonts-browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts-browser.d.ts","sourceRoot":"","sources":["../../src/assets/fonts-browser.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,OAAO,CAAC;AAW1F,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAEhD;AAKD,wBAAsB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAoBvE"}
+{"version":3,"file":"fonts-browser.d.ts","sourceRoot":"","sources":["../../src/assets/fonts-browser.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,OAAO,CAAC;AAW1F,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAEhD;AAED,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAEpD;AAKD,wBAAsB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAoBvE"}

package/dist/assets/fonts-browser.js

@@ -19,6 +19,12 @@ let baseUrl = "https://cdn.jsdelivr.net/gh/Fountain-Bio/zebrash-ts@main/src/asse
 export function setFontBaseUrl(url) {
     baseUrl = url.endsWith("/") ? url : `${url}/`;
 }
+export function getFontBaseUrl() {
+    return baseUrl;
+}
+export function getFontFilename(key) {
+    return filenames[key];
+}
 const cache = new Map();
 const inflight = new Map();
 export async function getEmbeddedFont(key) {

package/dist/assets/fonts.d.ts

@@ -7,10 +7,7 @@
  */
 export type FontKey = "HelveticaBold" | "DejavuSansMono" | "DejavuSansMonoBold" | "ZplGS";
 export declare function getEmbeddedFont(key: FontKey): Promise<Uint8Array>;
-/**
- * No-op on the Node path — fonts are read from disk relative to the module
- * URL. Provided so the browser-platform-swapped equivalent has a parallel
- * API surface.
- */
-export declare function setFontBaseUrl(_url: string): void;
+export declare function setFontBaseUrl(url: string): void;
+export declare function getFontBaseUrl(): string;
+export declare function getFontFilename(key: FontKey): string;
 //# sourceMappingURL=fonts.d.ts.map

package/dist/assets/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/assets/fonts.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,OAAO,CAAC;AAqB1F,wBAAsB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAMvE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAEjD"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/assets/fonts.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,OAAO,CAAC;AAqB1F,wBAAsB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAMvE;AAYD,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAEhD;AAED,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAEpD"}

package/dist/assets/fonts.js

@@ -26,11 +26,21 @@ export async function getEmbeddedFont(key) {
     return data;
 }
 /**
- * No-op on the Node path — fonts are read from disk relative to the module
- * URL. Provided so the browser-platform-swapped equivalent has a parallel
- * API surface.
+ * URL where the bundled TTFs are mirrored. The Node loader reads fonts
+ * from disk for canvas rendering, but `drawLabelAsSvg` may emit
+ * `@font-face src: url(...)` references — those URLs need to resolve in
+ * whichever browser ultimately views the SVG. Defaults to the same
+ * jsdelivr URL the browser loader uses; override with `setFontBaseUrl` to
+ * point at a self-hosted mirror.
  */
-export function setFontBaseUrl(_url) {
-    // intentionally empty on Node
+let baseUrl = "https://cdn.jsdelivr.net/gh/Fountain-Bio/zebrash-ts@main/src/assets/fonts/";
+export function setFontBaseUrl(url) {
+    baseUrl = url.endsWith("/") ? url : `${url}/`;
+}
+export function getFontBaseUrl() {
+    return baseUrl;
+}
+export function getFontFilename(key) {
+    return filenames[key];
 }
 //# sourceMappingURL=fonts.js.map

package/dist/assets/index.d.ts

@@ -1,4 +1,4 @@
-export { type FontKey, getEmbeddedFont, setFontBaseUrl } from "./fonts.ts";
+export { type FontKey, getEmbeddedFont, getFontBaseUrl, getFontFilename, setFontBaseUrl, } from "./fonts.ts";
 export { EmbeddedFontFamilies, registerEmbeddedFonts } from "./register.ts";
 export type { EmbeddedFontFamily } from "./register.ts";
 export declare const FONT0_NAME = "ZebrashHelveticaBold";

package/dist/assets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC5E,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,eAAO,MAAM,UAAU,yBAAyB,CAAC;AACjD,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAElD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,uBAAuB,0BAA0B,CAAC;AAC/D,eAAO,MAAM,4BAA4B,8BAA8B,CAAC;AACxE,eAAO,MAAM,kBAAkB,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,OAAO,EACZ,eAAe,EACf,cAAc,EACd,eAAe,EACf,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC5E,YAAY,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,eAAO,MAAM,UAAU,yBAAyB,CAAC;AACjD,eAAO,MAAM,UAAU,0BAA0B,CAAC;AAElD,eAAO,MAAM,0BAA0B,yBAAyB,CAAC;AACjE,eAAO,MAAM,uBAAuB,0BAA0B,CAAC;AAC/D,eAAO,MAAM,4BAA4B,8BAA8B,CAAC;AACxE,eAAO,MAAM,kBAAkB,iBAAiB,CAAC"}

package/dist/assets/index.js

@@ -1,4 +1,4 @@
-export { getEmbeddedFont, setFontBaseUrl } from "./fonts.js";
+export { getEmbeddedFont, getFontBaseUrl, getFontFilename, setFontBaseUrl, } from "./fonts.js";
 export { EmbeddedFontFamilies, registerEmbeddedFonts } from "./register.js";
 export const FONT0_NAME = "ZebrashHelveticaBold";
 export const FONT1_NAME = "ZebrashDejavuSansMono";

package/dist/drawer-options.d.ts

@@ -1,3 +1,18 @@
+/**
+ * How `<text>` elements declare their font in `drawLabelAsSvg` output. Ignored
+ * by `drawLabelAsPng` which always uses platform-registered fonts.
+ *
+ * - `"url"` (default): emit `@font-face src: url("<cdn>/font.ttf")` so the
+ *   browser can fetch the same TTFs the runtime font loader uses. Smallest
+ *   SVGs; requires CDN access at view time.
+ * - `"embed"`: base64-inline the TTFs as `data:font/ttf;base64,…`. Fully
+ *   self-contained; adds ~54KB (Helvetica only) to ~900KB (DejaVu pair) per
+ *   SVG depending on which families the label references.
+ * - `"none"`: emit `font-family` only, no `@font-face` block. Renders only
+ *   where the host already has the font (system-installed or supplied to
+ *   the rasteriser directly, as in the test harness).
+ */
+export type SvgFontEmbedMode = "url" | "embed" | "none";
 /**
  * Public drawer options — mirrors Go `drawers.DrawerOptions`.
  *
@@ -9,13 +24,16 @@ export interface DrawerOptions {
     dpmm: number;
     /** Render labels with inverted orientation upside-down. */
     enableInvertedLabels: boolean;
-    /** Output 8-bit grayscale PNG preserving anti-aliasing instead of binary monochrome. */
+    /** Output 8-bit grayscale PNG preserving anti-aliasing instead of binary monochrome. PNG-only. */
     grayscaleOutput: boolean;
+    /** How fonts are referenced in SVG output. SVG-only. */
+    fontEmbed: SvgFontEmbedMode;
 }
 /**
  * Returns a copy of `options` with defaults applied for any zero/missing fields.
  *
- * Defaults: 101.6 mm × 203.2 mm at 8 dpmm, monochrome, no inversion.
+ * Defaults: 101.6 mm × 203.2 mm at 8 dpmm, monochrome, no inversion, SVG
+ * fonts referenced by URL.
  */
 export declare function withDefaults(options?: Partial<DrawerOptions>): DrawerOptions;
 //# sourceMappingURL=drawer-options.d.ts.map

package/dist/drawer-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-options.d.ts","sourceRoot":"","sources":["../src/drawer-options.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wFAAwF;IACxF,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,aAAa,CAQhF"}
+{"version":3,"file":"drawer-options.d.ts","sourceRoot":"","sources":["../src/drawer-options.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AAExD;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,oBAAoB,EAAE,OAAO,CAAC;IAC9B,kGAAkG;IAClG,eAAe,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,aAAa,CAShF"}

package/dist/drawer-options.js

@@ -1,7 +1,8 @@
 /**
  * Returns a copy of `options` with defaults applied for any zero/missing fields.
  *
- * Defaults: 101.6 mm × 203.2 mm at 8 dpmm, monochrome, no inversion.
+ * Defaults: 101.6 mm × 203.2 mm at 8 dpmm, monochrome, no inversion, SVG
+ * fonts referenced by URL.
  */
 export function withDefaults(options = {}) {
     return {
@@ -10,6 +11,7 @@ export function withDefaults(options = {}) {
         dpmm: options.dpmm || 8,
         enableInvertedLabels: options.enableInvertedLabels ?? false,
         grayscaleOutput: options.grayscaleOutput ?? false,
+        fontEmbed: options.fontEmbed ?? "url",
     };
 }
 //# sourceMappingURL=drawer-options.js.map

package/dist/drawer.d.ts

@@ -9,7 +9,10 @@ import { type DrawerOptions } from "./drawer-options.ts";
  */
 export declare class Drawer {
     private readonly elementDrawers;
+    private svgElementDrawers;
     constructor(elementDrawers?: ElementDrawer[]);
+    /** Lazy SVG drawer set — only constructed when `drawLabelAsSvg` is called. */
+    private getSvgElementDrawers;
     /**
      * Renders `label` to a PNG `Buffer` according to `options`.
      *
@@ -23,5 +26,29 @@ export declare class Drawer {
      *  - Encode as monochrome PNG by default, or 8-bit grayscale when requested.
      */
     drawLabelAsPng(label: LabelInfo, options?: Partial<DrawerOptions>): Promise<Uint8Array>;
+    /**
+     * Renders `label` to an SVG document string according to `options`.
+     *
+     * Behaviour parity with `drawLabelAsPng` for everything geometric:
+     *  - Apply `withDefaults` to the options.
+     *  - Compute `imageWidth = min(labelWidth, label.printWidth)`.
+     *  - Reverse-print elements are wrapped in a
+     *    `<g style="mix-blend-mode: difference">` group, which is
+     *    mathematically equivalent to the XOR composite the PNG path uses
+     *    when the canvas only holds black-on-white (the monochrome case).
+     *  - If the print width is narrower than the label, or the label is
+     *    inverted, content is centred and optionally rotated 180° via outer
+     *    `<g transform>` wrappers — same arithmetic as the canvas pipeline.
+     *
+     * SVG-specific behaviour (controlled by `options.fontEmbed`):
+     *  - `"url"` (default): emits one `@font-face url(...)` per used font,
+     *    pointing at the same CDN base the runtime font loader uses.
+     *  - `"embed"`: base64-inlines the TTF bytes (large, fully self-contained).
+     *  - `"none"`: omits `@font-face` entirely (caller supplies fonts to the
+     *    rasteriser, or the host has them installed).
+     *
+     * `grayscaleOutput` is ignored (PNG-only encoding concern).
+     */
+    drawLabelAsSvg(label: LabelInfo, options?: Partial<DrawerOptions>): Promise<string>;
 }
 //# sourceMappingURL=drawer.d.ts.map

package/dist/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../src/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,qBAAqB,CAAC;AAwCvE;;;;;GAKG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkB;gBAErC,cAAc,CAAC,EAAE,aAAa,EAAE;IAI5C;;;;;;;;;;;OAWG;IACG,cAAc,CAClB,KAAK,EAAE,SAAS,EAChB,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GACnC,OAAO,CAAC,UAAU,CAAC;CAuEvB"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../src/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,qBAAqB,CAAC;AA2CvE;;;;;GAKG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAkB;IACjD,OAAO,CAAC,iBAAiB,CAAmC;gBAEhD,cAAc,CAAC,EAAE,aAAa,EAAE;IAI5C,8EAA8E;IAC9E,OAAO,CAAC,oBAAoB;IAO5B;;;;;;;;;;;OAWG;IACG,cAAc,CAClB,KAAK,EAAE,SAAS,EAChB,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GACnC,OAAO,CAAC,UAAU,CAAC;IAwEtB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACG,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,GAAE,OAAO,CAAC,aAAa,CAAM,GAAG,OAAO,CAAC,MAAM,CAAC;CAkF9F"}

package/dist/drawer.js

@@ -3,6 +3,9 @@ import { DrawerState } from "./drawers/drawer_state.js";
 import { defaultElementDrawers as defaultElementDrawersLazy } from "./drawers/index.js";
 import { colorWhite, encodeGrayscale, encodeMonochrome, reversePrint, zerofill, } from "./images/index.js";
 import { platform } from "./platform.js";
+import { defaultSvgElementDrawers } from "./svg-drawers/index.js";
+import { SvgEmitter } from "./svg/emitter.js";
+import { buildFontFaceCss } from "./svg/font_embed.js";
 function isReversePrintable(element) {
     if (typeof element !== "object" || element === null)
         return false;
@@ -25,9 +28,17 @@ function fillWhite(ctx, width, height) {
  */
 export class Drawer {
     elementDrawers;
+    svgElementDrawers = null;
     constructor(elementDrawers) {
         this.elementDrawers = elementDrawers ?? defaultElementDrawersLazy();
     }
+    /** Lazy SVG drawer set — only constructed when `drawLabelAsSvg` is called. */
+    getSvgElementDrawers() {
+        if (this.svgElementDrawers === null) {
+            this.svgElementDrawers = defaultSvgElementDrawers();
+        }
+        return this.svgElementDrawers;
+    }
     /**
      * Renders `label` to a PNG `Buffer` according to `options`.
      *
@@ -98,5 +109,90 @@ export class Drawer {
             ? encodeGrayscale(finalCtx.canvas)
             : encodeMonochrome(finalCtx.canvas);
     }
+    /**
+     * Renders `label` to an SVG document string according to `options`.
+     *
+     * Behaviour parity with `drawLabelAsPng` for everything geometric:
+     *  - Apply `withDefaults` to the options.
+     *  - Compute `imageWidth = min(labelWidth, label.printWidth)`.
+     *  - Reverse-print elements are wrapped in a
+     *    `<g style="mix-blend-mode: difference">` group, which is
+     *    mathematically equivalent to the XOR composite the PNG path uses
+     *    when the canvas only holds black-on-white (the monochrome case).
+     *  - If the print width is narrower than the label, or the label is
+     *    inverted, content is centred and optionally rotated 180° via outer
+     *    `<g transform>` wrappers — same arithmetic as the canvas pipeline.
+     *
+     * SVG-specific behaviour (controlled by `options.fontEmbed`):
+     *  - `"url"` (default): emits one `@font-face url(...)` per used font,
+     *    pointing at the same CDN base the runtime font loader uses.
+     *  - `"embed"`: base64-inlines the TTF bytes (large, fully self-contained).
+     *  - `"none"`: omits `@font-face` entirely (caller supplies fonts to the
+     *    rasteriser, or the host has them installed).
+     *
+     * `grayscaleOutput` is ignored (PNG-only encoding concern).
+     */
+    async drawLabelAsSvg(label, options = {}) {
+        const opts = withDefaults(options);
+        const state = new DrawerState();
+        const labelWidth = Math.ceil(opts.labelWidthMm * opts.dpmm);
+        const imageHeight = Math.ceil(opts.labelHeightMm * opts.dpmm);
+        let imageWidth = labelWidth;
+        if (label.printWidth > 0) {
+            imageWidth = Math.min(labelWidth, label.printWidth);
+        }
+        const emitter = new SvgEmitter();
+        // White background. SVG needs an explicit rect — `<svg>` itself is
+        // transparent.
+        emitter.rect(0, 0, labelWidth, imageHeight, colorWhite);
+        // Mirror the PNG path's outer composition: if `imageWidth < labelWidth`
+        // or the label is inverted, wrap content in groups that translate /
+        // rotate the inner drawing into place.
+        const invertLabel = opts.enableInvertedLabels && label.inverted;
+        emitter.save();
+        if (invertLabel) {
+            // Rotate 180° about the canvas centre — equivalent to the canvas
+            // pipeline's `translate(W,H); scale(-1,-1)`.
+            emitter.translate(labelWidth, imageHeight);
+            emitter.scale(-1, -1);
+        }
+        if (imageWidth !== labelWidth) {
+            emitter.translate(Math.floor((labelWidth - imageWidth) / 2), 0);
+        }
+        const svgDrawers = this.getSvgElementDrawers();
+        let reverseFilterDefined = false;
+        for (const element of label.elements) {
+            const reverse = isReversePrintable(element) && isReversePrintActive(element);
+            if (reverse) {
+                if (!reverseFilterDefined) {
+                    // The canvas reverse-print operation is `dst = 255 - dst` wherever
+                    // the element drew (regardless of the colour the element drew in).
+                    // To replicate this with SVG blend modes, we map the element's
+                    // drawn pixels to white via `feFlood` masked by `SourceAlpha`, then
+                    // composite the result with `mix-blend-mode: difference`:
+                    //   white over black dst → |255 − 0|   = 255 (white)
+                    //   white over white dst → |255 − 255| =   0 (black)
+                    // i.e. inversion of dst wherever the element drew. The element
+                    // drawers continue to use black ink — the filter handles the
+                    // colour swap so no per-drawer change is required.
+                    emitter.defineFragment("zb-reverse", '<filter id="zb-reverse" x="0%" y="0%" width="100%" height="100%">' +
+                        '<feFlood flood-color="#ffffff" result="flood"/>' +
+                        '<feComposite in="flood" in2="SourceAlpha" operator="in"/>' +
+                        "</filter>");
+                    reverseFilterDefined = true;
+                }
+                emitter.pushGroup('filter="url(#zb-reverse)" style="mix-blend-mode:difference;isolation:auto"');
+            }
+            for (const drawer of svgDrawers) {
+                await drawer.draw(emitter, element, opts, state);
+            }
+            if (reverse) {
+                emitter.popGroup();
+            }
+        }
+        emitter.restore();
+        const fontFaceCss = await buildFontFaceCss(emitter.usedFonts, opts.fontEmbed);
+        return emitter.toSvg(labelWidth, imageHeight, fontFaceCss);
+    }
 }
 //# sourceMappingURL=drawer.js.map

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { Parser } from "./parser.ts";
 export { Drawer } from "./drawer.ts";
-export type { DrawerOptions } from "./drawer-options.ts";
+export type { DrawerOptions, SvgFontEmbedMode } from "./drawer-options.ts";
 export { withDefaults as drawerOptionsWithDefaults } from "./drawer-options.ts";
 export type { LabelInfo } from "./elements/index.ts";
+export { SvgEmitter } from "./svg/emitter.ts";
+export type { SvgElementDrawer } from "./svg-drawers/index.ts";
+export { defaultSvgElementDrawers } from "./svg-drawers/index.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,YAAY,IAAI,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChF,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC3E,OAAO,EAAE,YAAY,IAAI,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChF,YAAY,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -5,4 +5,8 @@
 export { Parser } from "./parser.js";
 export { Drawer } from "./drawer.js";
 export { withDefaults as drawerOptionsWithDefaults } from "./drawer-options.js";
+// SVG output surface — for advanced consumers who want to register custom
+// per-element SVG emitters.
+export { SvgEmitter } from "./svg/emitter.js";
+export { defaultSvgElementDrawers } from "./svg-drawers/index.js";
 //# sourceMappingURL=index.js.map

package/dist/svg/emitter.d.ts

@@ -0,0 +1,76 @@
+import type { FontKey } from "../assets/fonts.ts";
+/**
+ * SVG-side analog of `CanvasRenderingContext2D` used by the per-element SVG
+ * drawers. Pure string assembly — no platform dependency, identical
+ * behaviour on Node and browser.
+ *
+ * The transform model mirrors canvas: `save` snapshots the current state and
+ * `restore` rolls back to it. `translate`/`rotate`/`scale` and `pushGroup`
+ * each emit a `<g>` open whose matching close is deferred until the next
+ * `restore` (or `popGroup`). This lets the SVG drawers stay near
+ * line-for-line ports of their canvas siblings.
+ */
+export declare class SvgEmitter {
+    private body;
+    private defs;
+    private readonly definedSymbols;
+    private readonly saveStack;
+    private openGroups;
+    private readonly fonts;
+    save(): void;
+    restore(): void;
+    translate(tx: number, ty: number): void;
+    rotate(radians: number): void;
+    scale(sx: number, sy: number): void;
+    /** Open a group with arbitrary attributes (style, mask, etc.). */
+    pushGroup(attrs: string): void;
+    popGroup(): void;
+    rect(x: number, y: number, width: number, height: number, fill: string): void;
+    /**
+     * Stroked rectangle outline. Width and height are the outer extents; the
+     * stroke is centred on the path so the caller is responsible for any
+     * inset that mirrors the canvas drawer's `border / 2` adjustment.
+     */
+    rectStroke(x: number, y: number, width: number, height: number, stroke: string, strokeWidth: number): void;
+    /**
+     * Two-rect "donut" emitted as a single `<path>` with `fill-rule: evenodd`.
+     * Mirrors the canvas drawer's rounded-rect-with-inner-cutout pattern used
+     * by `^GB` (graphic box) when `cornerRounding > 0`.
+     */
+    roundedDonut(x: number, y: number, w: number, h: number, rOuter: number, innerX: number, innerY: number, innerW: number, innerH: number, rInner: number, fill: string): void;
+    roundedRect(x: number, y: number, w: number, h: number, r: number, fill: string): void;
+    polygon(points: ReadonlyArray<readonly [number, number]>, fill: string): void;
+    circleStroke(cx: number, cy: number, r: number, stroke: string, strokeWidth: number): void;
+    /** Reuse a previously-defined `<symbol id>` at (x, y). Used by maxicode. */
+    use(id: string, x: number, y: number): void;
+    /**
+     * Define a `<symbol>` once, by id, in the SVG `<defs>`. No-ops on repeat
+     * calls with the same id, so callers can lazily ensure a symbol exists.
+     */
+    defineSymbol(id: string, fragment: string): void;
+    /**
+     * Define a raw `<defs>` fragment once, by id. The `<defs>` body is kept
+     * unique by tracking ids in `definedSymbols` (despite the name —
+     * tracking-set is shared so any defs id is global to the document).
+     */
+    defineFragment(id: string, fragment: string): void;
+    text(x: number, y: number, str: string, opts: {
+        fontFamily: string;
+        fontSize: number;
+        fontKey?: FontKey | undefined;
+        anchor?: "start" | "middle" | "end";
+        baseline?: "alphabetic" | "hanging" | "middle" | "text-top";
+        fill?: string;
+    }): void;
+    image(href: string, x: number, y: number, width: number, height: number): void;
+    /** Set of `FontKey`s referenced by `text` calls so far. */
+    get usedFonts(): ReadonlySet<FontKey>;
+    /**
+     * Wrap the accumulated body in an `<svg>` root and return the document.
+     * `extraDefs` is interpolated inside `<defs>` (use it for `@font-face`).
+     * The internal `<symbol>` defs collected via `defineSymbol` are emitted
+     * unconditionally.
+     */
+    toSvg(width: number, height: number, extraDefs: string): string;
+}
+//# sourceMappingURL=emitter.d.ts.map

package/dist/svg/emitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emitter.d.ts","sourceRoot":"","sources":["../../src/svg/emitter.ts"],"names":[],"mappings":"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"}

package/dist/svg/emitter.js

@@ -0,0 +1,207 @@
+/**
+ * SVG-side analog of `CanvasRenderingContext2D` used by the per-element SVG
+ * drawers. Pure string assembly — no platform dependency, identical
+ * behaviour on Node and browser.
+ *
+ * The transform model mirrors canvas: `save` snapshots the current state and
+ * `restore` rolls back to it. `translate`/`rotate`/`scale` and `pushGroup`
+ * each emit a `<g>` open whose matching close is deferred until the next
+ * `restore` (or `popGroup`). This lets the SVG drawers stay near
+ * line-for-line ports of their canvas siblings.
+ */
+export class SvgEmitter {
+    body = "";
+    defs = "";
+    definedSymbols = new Set();
+    saveStack = [];
+    openGroups = 0;
+    fonts = new Set();
+    save() {
+        this.saveStack.push(this.openGroups);
+    }
+    restore() {
+        const target = this.saveStack.pop() ?? 0;
+        while (this.openGroups > target) {
+            this.body += "</g>";
+            this.openGroups -= 1;
+        }
+    }
+    translate(tx, ty) {
+        if (tx === 0 && ty === 0)
+            return;
+        this.body += `<g transform="translate(${n(tx)} ${n(ty)})">`;
+        this.openGroups += 1;
+    }
+    rotate(radians) {
+        if (radians === 0)
+            return;
+        const degrees = (radians * 180) / Math.PI;
+        this.body += `<g transform="rotate(${n(degrees)})">`;
+        this.openGroups += 1;
+    }
+    scale(sx, sy) {
+        if (sx === 1 && sy === 1)
+            return;
+        this.body += `<g transform="scale(${n(sx)} ${n(sy)})">`;
+        this.openGroups += 1;
+    }
+    /** Open a group with arbitrary attributes (style, mask, etc.). */
+    pushGroup(attrs) {
+        this.body += attrs.length > 0 ? `<g ${attrs}>` : "<g>";
+        this.openGroups += 1;
+    }
+    popGroup() {
+        if (this.openGroups === 0)
+            return;
+        this.body += "</g>";
+        this.openGroups -= 1;
+    }
+    rect(x, y, width, height, fill) {
+        if (width <= 0 || height <= 0)
+            return;
+        this.body += `<rect x="${n(x)}" y="${n(y)}" width="${n(width)}" height="${n(height)}" fill="${fill}"/>`;
+    }
+    /**
+     * Stroked rectangle outline. Width and height are the outer extents; the
+     * stroke is centred on the path so the caller is responsible for any
+     * inset that mirrors the canvas drawer's `border / 2` adjustment.
+     */
+    rectStroke(x, y, width, height, stroke, strokeWidth) {
+        this.body += `<rect x="${n(x)}" y="${n(y)}" width="${n(width)}" height="${n(height)}" fill="none" stroke="${stroke}" stroke-width="${n(strokeWidth)}"/>`;
+    }
+    /**
+     * Two-rect "donut" emitted as a single `<path>` with `fill-rule: evenodd`.
+     * Mirrors the canvas drawer's rounded-rect-with-inner-cutout pattern used
+     * by `^GB` (graphic box) when `cornerRounding > 0`.
+     */
+    roundedDonut(x, y, w, h, rOuter, innerX, innerY, innerW, innerH, rInner, fill) {
+        const outer = roundedRectPath(x, y, w, h, rOuter);
+        if (innerW <= 0 || innerH <= 0 || rInner <= 0) {
+            this.body += `<path d="${outer}" fill="${fill}"/>`;
+            return;
+        }
+        const inner = roundedRectPath(innerX, innerY, innerW, innerH, rInner);
+        this.body += `<path d="${outer} ${inner}" fill="${fill}" fill-rule="evenodd"/>`;
+    }
+    roundedRect(x, y, w, h, r, fill) {
+        this.body += `<path d="${roundedRectPath(x, y, w, h, r)}" fill="${fill}"/>`;
+    }
+    polygon(points, fill) {
+        if (points.length === 0)
+            return;
+        const pts = points.map(([x, y]) => `${n(x)},${n(y)}`).join(" ");
+        this.body += `<polygon points="${pts}" fill="${fill}"/>`;
+    }
+    circleStroke(cx, cy, r, stroke, strokeWidth) {
+        this.body += `<circle cx="${n(cx)}" cy="${n(cy)}" r="${n(r)}" fill="none" stroke="${stroke}" stroke-width="${n(strokeWidth)}"/>`;
+    }
+    /** Reuse a previously-defined `<symbol id>` at (x, y). Used by maxicode. */
+    use(id, x, y) {
+        this.body += `<use href="#${id}" x="${n(x)}" y="${n(y)}"/>`;
+    }
+    /**
+     * Define a `<symbol>` once, by id, in the SVG `<defs>`. No-ops on repeat
+     * calls with the same id, so callers can lazily ensure a symbol exists.
+     */
+    defineSymbol(id, fragment) {
+        if (this.definedSymbols.has(id))
+            return;
+        this.definedSymbols.add(id);
+        this.defs += `<symbol id="${id}" overflow="visible">${fragment}</symbol>`;
+    }
+    /**
+     * Define a raw `<defs>` fragment once, by id. The `<defs>` body is kept
+     * unique by tracking ids in `definedSymbols` (despite the name —
+     * tracking-set is shared so any defs id is global to the document).
+     */
+    defineFragment(id, fragment) {
+        if (this.definedSymbols.has(id))
+            return;
+        this.definedSymbols.add(id);
+        this.defs += fragment;
+    }
+    text(x, y, str, opts) {
+        if (opts.fontKey !== undefined)
+            this.fonts.add(opts.fontKey);
+        const anchor = opts.anchor ?? "start";
+        const fill = opts.fill ?? "#000000";
+        const baseline = opts.baseline ?? "alphabetic";
+        // SVG `dominant-baseline: alphabetic` is the canvas default; emit only
+        // when overridden so the attribute set stays terse.
+        const baselineAttr = baseline === "alphabetic" ? "" : ` dominant-baseline="${baseline}"`;
+        this.body += `<text x="${n(x)}" y="${n(y)}" font-family="${escapeAttr(opts.fontFamily)}" font-size="${n(opts.fontSize)}" fill="${fill}" text-anchor="${anchor}"${baselineAttr}>${escapeText(str)}</text>`;
+    }
+    image(href, x, y, width, height) {
+        if (width <= 0 || height <= 0)
+            return;
+        // `image-rendering: pixelated` keeps `^GF` bitmaps crisp when the SVG
+        // is scaled up — matches the nearest-neighbor look of the PNG path.
+        this.body += `<image href="${escapeAttr(href)}" x="${n(x)}" y="${n(y)}" width="${n(width)}" height="${n(height)}" preserveAspectRatio="none" style="image-rendering:pixelated"/>`;
+    }
+    /** Set of `FontKey`s referenced by `text` calls so far. */
+    get usedFonts() {
+        return this.fonts;
+    }
+    /**
+     * Wrap the accumulated body in an `<svg>` root and return the document.
+     * `extraDefs` is interpolated inside `<defs>` (use it for `@font-face`).
+     * The internal `<symbol>` defs collected via `defineSymbol` are emitted
+     * unconditionally.
+     */
+    toSvg(width, height, extraDefs) {
+        // Close any groups the caller forgot to balance — defensive, mirrors
+        // canvas's tolerance for unbalanced save/restore.
+        while (this.openGroups > 0) {
+            this.body += "</g>";
+            this.openGroups -= 1;
+        }
+        const defsBody = `${extraDefs}${this.defs}`;
+        const defsBlock = defsBody.length > 0 ? `<defs>${defsBody}</defs>` : "";
+        return (`<svg xmlns="http://www.w3.org/2000/svg" width="${n(width)}" height="${n(height)}" viewBox="0 0 ${n(width)} ${n(height)}">` +
+            defsBlock +
+            this.body +
+            "</svg>");
+    }
+}
+/**
+ * Format a number for SVG attribute output. Trims trailing zeros and emits
+ * integers without a decimal point. 3 decimal places balances precision
+ * (≤ 1/1000 of a pixel) against output size.
+ */
+function n(v) {
+    if (Number.isInteger(v))
+        return v.toString();
+    const s = v.toFixed(3);
+    // Trim trailing zeros and a dangling decimal point.
+    return s.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "");
+}
+function escapeText(s) {
+    return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeAttr(s) {
+    return s
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+function roundedRectPath(x, y, w, h, r) {
+    // Clamp r to half the smaller side, matching SVG's <rect rx ry> behaviour
+    // and the canvas drawer's intent.
+    const radius = Math.max(0, Math.min(r, Math.min(w, h) / 2));
+    if (radius === 0) {
+        return `M${n(x)} ${n(y)} h${n(w)} v${n(h)} h${n(-w)} Z`;
+    }
+    const x2 = x + w;
+    const y2 = y + h;
+    return (`M${n(x + radius)} ${n(y)} ` +
+        `H${n(x2 - radius)} ` +
+        `A${n(radius)} ${n(radius)} 0 0 1 ${n(x2)} ${n(y + radius)} ` +
+        `V${n(y2 - radius)} ` +
+        `A${n(radius)} ${n(radius)} 0 0 1 ${n(x2 - radius)} ${n(y2)} ` +
+        `H${n(x + radius)} ` +
+        `A${n(radius)} ${n(radius)} 0 0 1 ${n(x)} ${n(y2 - radius)} ` +
+        `V${n(y + radius)} ` +
+        `A${n(radius)} ${n(radius)} 0 0 1 ${n(x + radius)} ${n(y)} Z`);
+}
+//# sourceMappingURL=emitter.js.map