gum-jsx 1.1.4 → 1.2.1

package/README.md

@@ -10,12 +10,12 @@
 
 A language for creating visualizations using a React-like JSX dialect that evaluates to SVG. Designed for general graphics, plots, graphs, and network diagrams.
 
-Head to **[compendiumlabs.ai/gum](https://compendiumlabs.ai/gum)** for a live demo and documentation. For Python bindings, see **[gum.py](https://github.com/CompendiumLabs/gum.py)**.
+Head to **[compendiumlabs.ai/gum](https://compendiumlabs.ai/gum)** for a live demo and documentation. For Python bindings, see [gum.py](https://github.com/CompendiumLabs/gum.py).
 
 # Installation
 
 ```bash
-npm install gum
+npm install gum-jsx
 ```
 
 # Usage
@@ -73,6 +73,4 @@ CLI options:
 | Option | Description | Default |
 |--------|-------------|---------|
 | `-s, --size <size>` | Image size in pixels | 500 |
-| `-f, --format <format>` | Output format: `svg` or `png` | svg |
 | `-t, --theme <theme>` | Theme: `light` or `dark` | light |
-| `-b, --background <color>` | Background color | null |

package/index.d.ts

@@ -1219,42 +1219,6 @@ declare module 'gum-jsx/eval' {
   export function evaluateGum(code: string, options?: EvaluateOptions): Svg;
 }
 
-// =============================================================================
-// Rendering (from render.js)
-// =============================================================================
-
-declare module 'gum-jsx/render' {
-  /** A point in 2D space [x, y] */
-  export type point = [number, number];
-
-  export interface RenderOptions {
-    size?: number | point;
-    background?: string;
-  }
-
-  /** Render SVG to PNG (returns Buffer in Node, Blob in browser) */
-  export function renderPng(svg: string, options?: RenderOptions): Promise<Buffer | Blob>;
-
-  /** Node.js renderer class */
-  export class NodeRender {
-    fonts: string[];
-    Resvg: any;
-
-    init(): Promise<void>;
-    renderPng(svg: string, options?: RenderOptions): Buffer;
-  }
-
-  /** Browser renderer class */
-  export class BrowserRender {
-    canvas: HTMLCanvasElement;
-    ctx: CanvasRenderingContext2D;
-
-    init(): Promise<void>;
-    makeCanvas(size?: point, options?: { dpr?: number | null }): { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D };
-    renderPng(svg: string, options?: RenderOptions): Promise<Blob>;
-  }
-}
-
 // =============================================================================
 // Error Types (from error.js)
 // =============================================================================

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "gum-jsx",
-  "version": "1.1.4",
+  "version": "1.2.1",
   "description": "Language for vector graphics generation.",
   "type": "module",
   "author": "Douglas Hanley",
-  "homepage": "https://github.com/CompendiumLabs/gum.js",
+  "homepage": "https://github.com/CompendiumLabs/gum.jsx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CompendiumLabs/gum.js"
+    "url": "git+https://github.com/CompendiumLabs/gum.jsx"
   },
   "license": "MIT",
   "files": [
@@ -21,7 +21,6 @@
     },
     "./error": "./src/error.js",
     "./eval": "./src/eval.js",
-    "./render": "./src/render.js",
     "./docs/*": "./src/docs/*",
     "./fonts/*": "./src/fonts/*"
   },
@@ -43,12 +42,8 @@
   },
   "optionalDependencies": {
     "@mathjax/src": "^4.1.0",
-    "@modelcontextprotocol/sdk": "^1.25.2",
-    "@resvg/resvg-js": "^2.6.2",
     "commander": "^14.0.2",
     "express": "^5.2.1",
-    "katex": "^0.16.27",
-    "mathjax": "^4.1.0",
-    "zod": "^4.3.5"
+    "mathjax": "^4.1.0"
   }
 }

package/src/cli.js

@@ -3,32 +3,20 @@
 import { program } from 'commander'
 import { waitForStdin } from './node.js'
 import { evaluateGum } from './eval.js'
-import { renderPng } from './render.js'
 
 // get options from commander
 program
   .option('-s, --size <size>', 'size of the image', (value) => parseInt(value), 500)
-  .option('-x, --pixels <pixels>', 'svg pixel coords', (value) => parseInt(value), 500)
-  .option('-f, --format <format>', 'format of the image', 'svg')
   .option('-t, --theme <theme>', 'theme to use', 'dark')
-  .option('-b, --background <color>', 'background color', null)
   .parse()
-const { size, pixels, format, theme, background } = program.opts()
+const { size, theme } = program.opts()
 
 // wait for stdin
 const code = await waitForStdin()
 
 // evaluate gum with size
-const elem = evaluateGum(code, { size: pixels, theme })
+const elem = evaluateGum(code, { size, theme })
 const svg = elem.svg()
 
-// output svg or png
-if (format == 'png') {
-  const png = renderPng(svg, { size, background })
-  process.stdout.write(png)
-} else if (format == 'svg') {
-  process.stdout.write(svg)
-} else {
-  console.error(`Invalid format: ${format}`)
-  process.exit(1)
-}
+// output svg
+process.stdout.write(svg)

package/src/gum.js

@@ -1000,7 +1000,7 @@ class Metadata {
 
 class Svg extends Group {
     constructor(args = {}) {
-        const { children: children0, size : size0, padding = 1, bare = false, dims = true, filters = null, aspect: aspect0 = 'auto', view: view0, style = null, xmlns = C.svgns, font_family = C.sans, font_weight = C.normal, size = D.size, prec = D.prec, ...attr } = THEME(args, 'Svg')
+        const { children: children0, size : size0 = D.size, padding = 1, bare = false, dims = true, filters = null, aspect: aspect0 = 'auto', view: view0, style = null, xmlns = C.svgns, font_family = C.sans, font_weight = C.normal, prec = D.prec, ...attr } = THEME(args, 'Svg')
         const children = ensure_array(children0)
         const size_base = ensure_vector(size0, 2)
 

package/src/server.js

@@ -3,25 +3,8 @@
 import express from 'express'
 import { program } from 'commander'
 import { evaluateGum } from './eval.js'
-import { canvas } from './canvas.js'
 import { ErrorNoCode, ErrorNoReturn, ErrorNoElement } from './eval.js'
 
-class ErrorGenerate extends Error {
-  constructor(error) {
-    super(error.message)
-    this.name = 'ErrorGenerate'
-    this.error = error
-  }
-}
-
-class ErrorRender extends Error {
-  constructor(error) {
-    super(error.message)
-    this.name = 'ErrorRender'
-    this.error = error
-  }
-}
-
 function parseError(error) {
   if (error instanceof ErrorNoCode) {
     return 'ERR_NOCODE: No code provided'
@@ -59,21 +42,17 @@ app.get('/', (req, res) => {
 })
 
 // eval gum jsx to svg
-app.post('/evaluate', (req, res) => {
+app.post('/', (req, res) => {
   // get params
   const code = req.body
-  const size0 = parseInt(req.query.size ?? 750)
+  const size0 = parseInt(req.query.size ?? 500)
   const theme = req.query.theme ?? 'light'
 
   // evaluate code and return svg
   let svg
   try {
     const elem = evaluateGum(code, { size: size0, theme })
-    try {
-      svg = elem.svg()
-    } catch (err) {
-      throw new ErrorGenerate(err)
-    }
+    svg = elem.svg()
   } catch (error) {
     const message = parseError(error)
     return res.status(500).send(message)
@@ -84,38 +63,6 @@ app.post('/evaluate', (req, res) => {
   res.send(svg)
 })
 
-// render gum jsx to png
-app.post('/render', async (req, res) => {
-  // get params
-  const code = req.body
-  const size0 = parseInt(req.query.size ?? 750)
-  const theme = req.query.theme ?? 'light'
-
-  // evaluate code and render to png
-  let png, svg
-  try {
-    const elem = evaluateGum(code, { size: size0, theme })
-    try {
-      svg = elem.svg()
-    } catch (err) {
-      throw new ErrorGenerate(err)
-    }
-    try {
-      const { size } = elem
-      png = await canvas.renderPng(svg, { size })
-    } catch (err) {
-      throw new ErrorRender(err)
-    }
-  } catch (error) {
-    const message = parseError(error)
-    return res.status(500).send(message)
-  }
-
-  // send png
-  res.setHeader('Content-Type', 'image/png')
-  res.send(png)
-})
-
 // start server
 app.listen(port, host, () => {
   // console.log(`Server running on http://${host}:${port}`)

package/src/test.js

@@ -3,15 +3,14 @@
 import { program } from 'commander'
 
 import { waitForStdin } from './node.js'
-import { CONSTANTS as C, setTheme } from './defaults.js'
-import { textSizer, splitWords, is_emoji, FONTS } from './text.js'
+import { setTheme } from './defaults.js'
+import { textSizer, splitWords } from './text.js'
 import { evaluateGum } from './eval.js'
 
 // evaluate command
 async function cmdEvaluate({ debug }) {
   const code = await waitForStdin()
-  setTheme('dark')
-  const elem = evaluateGum(code, { debug, size: 1000 })
+  const elem = evaluateGum(code, { debug, theme: 'dark', size: 1000 })
   const svg = elem.svg()
   console.log(svg)
 }

package/src/dynamic.js

@@ -1,136 +0,0 @@
-/**
- ** Interactive
- **/
-
-class Interactive {
-    constructor(vars, func) {
-        this.func = func;
-        this.vars = vars;
-    }
-
-    element() {
-        let vals = map_object(this.vars, v => v.value);
-        return this.func(vals);
-    }
-}
-
-class Variable {
-    constructor(init, args) {
-        args = args ?? {};
-        this.value = init;
-        this.attr = filter_object(args, v => v != null);
-    }
-
-    update(val) {
-        this.value = val;
-    }
-}
-
-class Slider extends Variable {
-    constructor(init, args) {
-        let {min, max, step, ...attr} = args ?? {};
-        min = min ?? 0;
-        max = max ?? 100;
-        step = step ?? 1;
-
-        let attr1 = {min, max, step, ...attr};
-        super(init, attr1);
-    }
-}
-
-class Toggle extends Variable {
-    constructor(init, args) {
-        init = init ?? true;
-        super(init, args);
-    }
-}
-
-class List extends Variable {
-    constructor(init, args) {
-        let {choices, ...attr} = args ?? {};
-        choices = choices ?? {};
-
-        if (is_array(choices)) {
-            choices = Object.fromEntries(choices.map(v => [v, v]));
-        }
-
-        let attr1 = {choices, ...attr};
-        super(init, attr1);
-    }
-}
-
-/**
- ** Animation
- **/
-
-class Transition {
-    constructor(args) {
-        let {tlim} = args ?? {};
-        this.tlim = tlim ?? [null, null];
-    }
-
-    frac(t, tlimf) {
-        let [t0, t1] = this.tlim;
-        let [t0f, t1f] = tlimf;
-        t0 = t0 ?? t0f;
-        t1 = t1 ?? t1f;
-        let f = (t - t0) / (t1 - t0);
-        return max(0, min(1, f));
-    }
-}
-
-class Continuous extends Transition {
-    constructor(lim, args) {
-        super(args);
-        this.lim = lim;
-    }
-
-    value(t, tlimf) {
-        let f = this.frac(t, tlimf);
-        let [lo, hi] = this.lim;
-        return lo + (hi - lo) * f;
-    }
-}
-
-class Discrete extends Transition {
-    constructor(vals, args) {
-        super(args);
-        this.vals = vals;
-    }
-
-    value(t, tlimf) {
-        let f = this.frac(t, tlimf);
-        let i0 = floor(f * this.vals.length);
-        let i = min(i0, this.vals.length - 1);
-        return this.vals[i];
-    }
-}
-
-class Animation {
-    constructor(vars, func, args) {
-        let {tlim, N} = args ?? {};
-        tlim = tlim ?? [0, 1];
-        N = N ?? 10;
-
-        // total frames
-        let [t0f, t1f] = tlim;
-        let time = linspace(t0f, t1f, N);
-
-        // animation state
-        this.frames = time.map(t => {
-            let vals = map_object(vars, v => v.value(t, tlim));
-            return func(vals);
-        });
-    }
-
-    frame(i) {
-        let frame = this.frames[i];
-        return renderElem(frame);
-    }
-
-    *animate() {
-        for (let i = 0; i < this.frames.length; i++) {
-            yield this.frame(i);
-        }
-    }
-}

package/src/render.js

@@ -1,146 +0,0 @@
-// png rendering
-
-import { CONSTANTS as C } from './defaults.js'
-import { getFontPaths } from './text.js'
-import { ensure_vector } from './utils.js'
-
-//
-// constants
-//
-
-const DEFAULT_SIZE = [500, 500]
-
-//
-// node render
-//
-
-class NodeRender {
-    async init() {
-        const { sans, mono, moji } = await getFontPaths()
-        this.fonts = [ sans, mono, moji ]
-        try {
-            const { Resvg } = await import(/* @vite-ignore */ '@resvg/resvg-js')
-            this.Resvg = Resvg
-        } catch {
-            this.Resvg = null
-        }
-    }
-
-    renderPng(svg, { size = DEFAULT_SIZE, background = 'white' }) {
-        const [ width, height ] = ensure_vector(size, 2)
-
-        const fontsArgs = {
-            fontFiles: this.fonts,
-            loadSystemFonts: false,
-            defaultFontFamily: C.sans,
-        }
-
-        const opts = {
-            background,
-            fitTo: {
-                mode: 'width',
-                value: width,
-            },
-            font: fontsArgs,
-        }
-
-        const resvg = new this.Resvg(svg, opts)
-        const data = resvg.render()
-        return data.asPng()
-    }
-}
-
-//
-// browser render
-//
-
-function loadImage(url) {
-    return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.onload = () => resolve(img)
-        img.onerror = () => reject(new Error('Failed to load image'))
-        img.src = url
-    })
-}
-
-function canvasToBlob(canvas) {
-    return new Promise((resolve, reject) => {
-        canvas.toBlob((blob) => {
-            if (blob) {
-                resolve(blob)
-            } else {
-                reject(new Error('Failed to convert canvas to blob'))
-            }
-        })
-    })
-}
-
-class BrowserRender {
-    async init() {
-        const { canvas, ctx } = this.makeCanvas()
-        this.canvas = canvas
-        this.ctx = ctx
-    }
-
-    makeCanvas(size = DEFAULT_SIZE, { dpr: dpr0 = null } = {}) {
-        const dpr = dpr0 ?? window.devicePixelRatio ?? 1
-        const [ width, height ] = size
-
-        // make canvas and ensize
-        const canvas = document.createElement('canvas')
-        canvas.width = Math.round(width * dpr)
-        canvas.height = Math.round(height * dpr)
-        canvas.style.width = `${Math.round(width)}px`
-        canvas.style.height = `${Math.round(height)}px`
-
-        // make context and scale
-        const ctx = canvas.getContext('2d')
-        ctx.scale(dpr, dpr)
-
-        // return canvas and context
-        return { canvas, ctx }
-    }
-
-    async renderPng(svg, { size = DEFAULT_SIZE, background = 'white' } = {}) {
-        const [ width, height ] = size
-
-        // make canvas and context
-        const { canvas, ctx } = this.makeCanvas(size)
-        const { canvas: exportCanvas, ctx: exportCtx } = this.makeCanvas(size, { dpr: 1 })
-
-        // load svg image
-        const svgBlob = new Blob([ svg ], { type: 'image/svg+xml' })
-        const svgUrl = URL.createObjectURL(svgBlob)
-        const svgImg = await loadImage(svgUrl)
-
-        // fill background
-        if (background != null) {
-            ctx.fillStyle = background
-            ctx.fillRect(0, 0, width, height)
-        }
-
-        // draw svg and export canvas
-        ctx.drawImage(svgImg, 0, 0, width, height)
-        exportCtx.drawImage(canvas, 0, 0, width, height)
-
-        // convert export canvas to blob
-        const pngBlob = await canvasToBlob(exportCanvas)
-        URL.revokeObjectURL(svgUrl)
-
-        // return png blob
-        return pngBlob
-    }
-}
-
-//
-// exports
-//
-
-// set up renderer
-const render = (typeof window == 'undefined') ? new NodeRender() : new BrowserRender()
-await render.init()
-function renderPng(svg, args) {
-    return render.renderPng(svg, args)
-}
-
-export { renderPng, NodeRender, BrowserRender }