gum-jsx 1.6.2 → 1.6.3

package/skills/gum-jsx/references/gala/pendulum_physics.md

@@ -29,9 +29,9 @@ const arcRad = 0.25
 // Computed positions
 const rodRot = 90 - rodAng
 const eqnY = pivotY + rodLen
-const [ bobX, bobY ] = polar(rodRot, rodLen, [pivotX, pivotY])
-const [ midX, midY ] = polar(rodRot, 0.50 * rodLen, [pivotX, pivotY])
-const [ tenX, tenY ] = polar(rodRot, 0.75 * rodLen, [pivotX, pivotY])
+const [ bobX, bobY ] = polard(rodRot, rodLen, [pivotX, pivotY])
+const [ midX, midY ] = polard(rodRot, 0.50 * rodLen, [pivotX, pivotY])
+const [ tenX, tenY ] = polard(rodRot, 0.75 * rodLen, [pivotX, pivotY])
 
 return <Box margin={0.06}>
   <VStack spacing={0.05}>

package/skills/gum-jsx/references/gala/plot_manual.md

@@ -11,8 +11,8 @@ const aspect = 2
 const ratio = pi / aspect
 return <Box margin={0.3}>
   <Group coord={[0, 1, 2*pi, -1]} aspect={aspect}>
-    <HMesh locs={5} lim={[0, 2*pi]} opacity={0.3} />
-    <VMesh locs={5} lim={[-1, 1]} opacity={0.3} />
+    <HMesh locs={5} opacity={0.15} />
+    <VMesh locs={5} opacity={0.15} />
     <HAxis ticks={5} lim={[0, 2*pi]} pos={[pi, -1]} size={[2*pi, 0.08]} />
     <VAxis ticks={5} lim={[-1, 1]} pos={[0, 0]} size={[0.08*ratio, 2]} />
     <SymLine fy={sin} xlim={[0, 2*pi]} />

package/skills/gum-jsx/references/gala/polygon_slide.md

@@ -16,11 +16,10 @@ const shapes = [
 ]
 
 const RegularPolygon = ({ n, ...args }) =>
-  <SymShape {...args}
-    aspect spin={90*(n-2)/n}
+  <SymShape {...args} aspect
     xlim={[-1, 1]} ylim={[-1, 1]}
-    tvals={linspace(0, 2*pi, n+1)}
-    fx={cos} fy={sin}
+    tvals={linspace(0, 2*pi, n, false)}
+    f={t => polar(t+pi/2*(n-2)/n)}
   />
 
 return <Slide title="Simple Regular Polygons" wrap={25}>

package/skills/gum-jsx/references/gala/spline_star.md

@@ -19,8 +19,8 @@ const theta0 = linspace(0, 2 * pi, n, false).map(t => t - pi / 2)
 const theta1 = theta0.map(t => t + pi / n)
 
 // get inner/outer point positions
-const points0 = theta0.map(t => polar(t * r2d))
-const points1 = theta1.map(t => polar(t * r2d, R))
+const points0 = theta0.map(t => polar(t))
+const points1 = theta1.map(t => polar(t, R))
 const points = zip(points0, points1).flat()
 
 // return full spline

package/skills/gum-jsx/references/geometry.md

@@ -33,8 +33,8 @@ Prompt: two ellipses, one wider and one taller
 Generated code:
 ```jsx
 <Group>
-  <Ellipse pos={[0.3, 0.2]} size={[0.4, 0.2]} />
-  <Ellipse pos={[0.6, 0.6]} size={[0.4, 0.5]} />
+  <Ellipse pos={[0.3, 0.2]} rad={[0.2, 0.1]} />
+  <Ellipse pos={[0.6, 0.6]} rad={[0.2, 0.25]} />
 </Group>
 ```
 
@@ -57,8 +57,8 @@ Prompt: elliptical and circular arcs using start and end angles
 Generated code:
 ```jsx
 <Group>
-  <Arc pos={[0.3, 0.5]} size={[0.4, 0.3]} start={-45} end={210} stroke={blue} stroke-width={2} />
-  <Arc pos={[0.7, 0.5]} size={0.3} start={90} end={-150} stroke={red} stroke-width={2} />
+  <Arc pos={[0.3, 0.5]} rad={[0.2, 0.15]} start={-45} end={210} stroke={blue} stroke-width={2} />
+  <Arc pos={[0.7, 0.5]} rad={0.15} start={90} end={-150} stroke={red} stroke-width={2} />
 </Group>
 ```
 
@@ -81,7 +81,7 @@ Prompt: draw a piecewise line spiraling outwards (with dots at vertices)
 
 Generated code:
 ```jsx
-const spiral = linspace(0, 5, 25).map(t => polar(360 * t, t/5))
+const spiral = linspace(0, 5, 25).map(t => polar(2*pi * t, t/5))
 return <Box margin>
   <Graph coord={[-1, -1, 1, 1]}>
     <Line points={spiral} />
@@ -107,7 +107,7 @@ Prompt: draw a stop sign
 
 Generated code:
 ```jsx
-const hexagon = linspace(0, 360, 8, false).map(t => polar(t))
+const hexagon = linspace(0, 2*pi, 8, false).map(t => polar(t))
 return <Box fill="#bbb" rounded padding margin>
   <Graph xlim={[-1, 1]} ylim={[-1, 1]} aspect={1}>
     <Shape points={hexagon} fill="#CC0202" stroke={white} stroke_width={20} spin={180/8} />

package/skills/gum-jsx/references/layout.md

@@ -6,7 +6,7 @@
 
 This is a simple container class allowing you to add padding, margins, and a border to a single **Element**. It's pretty versatile and is often used to set up the outermost positioning of a figure. Mirroring the standard CSS definitions, padding is space inside the border and margin is space outside the border. This has no border by default, but there is a specialized subclass of this called **Frame** that defaults to `border = 1`.
 
-**Box** can be pretty handly in various situations. It is differentiated from **Group** in that it will adopt the `aspect` of the child element. This is useful if you want to do something like shift an element up or down by a certain amount while maintaining its aspect ratio. Simply wrap it in a **Box** and set child's `pos` to the desired offset.
+**Box** can be pretty handly in various situations. It is differentiated from **Group** in that it will adopt the `aspect` of the first child element. This is useful if you want to do something like shift an element up or down by a certain amount while maintaining its aspect ratio. Simply wrap it in a **Box** and set child's `pos` to the desired offset.
 
 There are multiple ways to specify padding and margins. If given as a scalar, it is constant across all sides. If two values are given, they correspond to the horizontal and vertical sides. If four values are given, they correspond to `[left, top, right, bottom]`.
 
@@ -124,7 +124,10 @@ Prompt: A plot of three different increasing curves of varying steepness and mul
 
 Generated code:
 ```jsx
-<Plot xlim={[-1, 1]} ylim={[-1, 1]} grid margin={0.3} aspect xlabel="time (seconds)" ylabel="space (meters)" title="Spacetime Vibes">
+<Plot coord={[-1, -1, 1, 1]} margin={0.2} grid
+  xlabel="time (seconds)" ylabel="space (meters)"
+  title="Spacetime Vibes"
+>
   <Points point-size={0.04} points={[
     [0, 0.5], [0.5, 0], [-0.5, 0], [0, -0.5]
   ]} />

package/skills/gum-jsx/references/networks.md

@@ -103,6 +103,6 @@ Generated code:
   <Node id="test" pos={[0.75, 0.25]} wrap={6}>This is a test of wrapping capabilities</Node>
   <Node id="ball" pos={[0.75, 0.75]}><Ellipse aspect={1.5} fill={blue}/></Node>
   <Edge start="hello" end="test" />
-  <Edge start="hello" end="ball" start-side="s" curve={3} />
+  <Edge start="hello" end="ball" start-side="s" />
 </Network>
 ```

package/skills/gum-jsx/references/symbolic.md

@@ -4,11 +4,12 @@
 
 *Inherits*: **Group** > **Element**
 
-Flexible interface to generate sets of points symbolically or in combination with fixed inputs. The most common usage is to specify the range for x-values with `xlim` and a function to plot with `fy`. But you can specify the transpose with `ylim`/`fx`, or do a fully parametric path using `tlim`/`fx`/`fy`.
+Flexible interface to generate sets of points symbolically or in combination with fixed inputs. The most common usage is to specify the range for x-values with `xlim` and a function to plot with `fy`. But you can specify the transpose with `ylim`/`fx`, or do a fully parametric path using `tlim` with either `f` or `fx`/`fy`.
 
 You can also specify point size functionally with `point-size` and the shape with `point-shape`. Both of these functions take `(x, y, t, i)` values as inputs and return the desired value for each point. As with other groups, the **SymPoints** element itself can still be laid out with the normal `size`/`xsize`/`ysize` element parameters.
 
 Parameters:
+- `f` — a function mapping t-values to `[x, y]` points
 - `fx`/`fy` — a function mapping from x-values, y-values, or t-values
 - `point-size` = `0.05` — a size or a function mapping from `(x, y, t, i)` values to a size
 - `point-shape` = `Dot` — a shape or function mapping from `(x, y, t, i)` values to a shape
@@ -35,9 +36,10 @@ return <Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} grid fill={lightgray} margin={[
 
 Flexible interface to generate two-dimensional paths symbolically or in combination with fixed inputs. There are variety of acceptable input combinations, but the most common usage is to specify the range to use for x-values with `xlim` and a function to plot with `fy`. To plot a polygon instead of a line, use **SymShape**.
 
-Alternatively, you can specify the transpose with `ylim`/`fx`, or even do a fully parametric path using `tlim`/`fx`/`fy`. In any of these cases, one can either specify limits with `xlim`/`ylim`/`tlim` or specific values with `xvals`/`yvals`/`tvals`.
+Alternatively, you can specify the transpose with `ylim`/`fx`, or do a fully parametric path using `tlim` with either `f` or `fx`/`fy`. In any of these cases, one can either specify limits with `xlim`/`ylim`/`tlim` or specific values with `xvals`/`yvals`/`tvals`.
 
 Parameters:
+- `f` — a function mapping t-values to `[x, y]` points
 - `fx`/`fy` — a function mapping from x-values, y-values, or t-values
 - `xlim`/`ylim`/`tlim` — a pair of numbers specifying variable limits
 - `xvals`/`yvals`/`tvals` — a list of x-values, y-values, or t-values to use
@@ -59,9 +61,10 @@ Generated code:
 
 *Inherits*: **Shape** > **Pointstring** > **Element**
 
-Flexible interface to generate shapes symbolically or in combination with fixed inputs. Operates similarly to **Shape**, but generates a shape from the points generated by `fx`/`fy`.
+Flexible interface to generate shapes symbolically or in combination with fixed inputs. Operates similarly to **Shape**, but generates a shape from points generated by `f` or `fx`/`fy`.
 
 Parameters:
+- `f` — a function mapping t-values to `[x, y]` points
 - `fx`/`fy` — a function mapping from x-values, y-values, or t-values
 - `xlim`/`ylim`/`tlim` — a pair of numbers specifying variable limits
 - `xvals`/`yvals`/`tvals` — a list of x-values, y-values, or t-values to use
@@ -73,12 +76,11 @@ Prompt: Draw a rounded star shape with a blue fill. Wrap it in a rounded frame.
 
 Generated code:
 ```jsx
-const rad = t => 1 - 0.3 * cos(2.5 * t)**2
+const rad = t => 1 - 0.2 * cos(5 * (t - pi/2))
 return <Frame rounded padding margin>
   <SymShape aspect fill={blue}
     tlim={[0, 2*pi]} N={200}
-    fx={t => rad(t) * sin(t)}
-    fy={t => rad(t) * cos(t)}
+    f={t => polar(t, rad(t))}
   />
 </Frame>
 ```
@@ -91,6 +93,7 @@ Flexible interface to generate smooth two-dimensional spline curves symbolically
 
 
 Parameters:
+- `f` — a function mapping t-values to `[x, y]` points
 - `fx`/`fy` — a function mapping from x-values, y-values, or t-values
 - `xlim`/`ylim`/`tlim` — a pair of numbers specifying variable limits
 - `xvals`/`yvals`/`tvals` — a list of x-values, y-values, or t-values to use
@@ -118,9 +121,10 @@ return <Plot xlim={[0, 2*pi]} ylim={[-1, 1]} grid margin={0.15} aspect={phi}>
 
 *Inherits*: **Fill** > **Shape**  > **Pointstring** > **Element**
 
-Flexible interface to generate filled in paths symbolically or in combination with fixed inputs. This generates a polygon by running through the points generated by `fx1`/`fy1` and then backwards through the points generated by `fx2`/`fy2`. To generate a simple filled curve, pass your function to `fy1` and let `fy2` be `0`.
+Flexible interface to generate filled in paths symbolically or in combination with fixed inputs. This generates a polygon by running through the points generated by `f1` or `fx1`/`fy1` and then backwards through the points generated by `f2` or `fx2`/`fy2`. To generate a simple filled curve, pass your function to `fy1` and let `fy2` be `0`.
 
 Parameters:
+- `f1`/`f2` — functions mapping t-values to `[x, y]` points for either bound
 - `fx1`/`fy1` — a function generating one of the bounds for the fill (or a constant)
 - `fx2`/`fy2` — a function generating the other bound for the fill (or a constant)
 - `xlim`/`ylim`/`tlim` — a pair of numbers specifying variable limits
@@ -135,7 +139,7 @@ Generated code:
 ```jsx
 const decay = x => exp(-0.1*x) * sin(x)
 return <Graph xlim={[0, 6*pi]} ylim={[-1, 1]} aspect={phi}>
-  <SymFill fy1={decay} fy2={0} fill={blue} fill-opacity={0.5} N={250} />
+  <SymFill f1={t => [t, decay(t)]} f2={t => [t, 0]} tlim={[0, 6*pi]} fill={blue} fill-opacity={0.5} N={250} />
   <SymLine fy={decay} N={250} />
 </Graph>
 ```

package/skills/gum-jsx/references/utilities.md

@@ -29,25 +29,28 @@ Here we collect a variety of global mathematical functions and constants. You ca
 - `round(x)` — the rounding function
 - `clamp(x, lim=[0, 1])` — clamp `x` to the range `lim`
 - `rescale(x, lim=[0, 1])` — linearly rescale `x` to the range `lim`
-- `polar(angle, radius=1, center=[0, 0])` — convert polar coordinates (`angle` in degrees, `radius` scalar or size vector) to a 2D point around `center`
+- `polar(theta, radius=1, center=[0, 0])` — convert polar coordinates (`theta` in radians, `radius` scalar or size vector) to a 2D point around `center`
+- `polard(angle, radius=1, center=[0, 0])` — same as `polar` but takes `angle` in degrees
 
 Angles use gum's usual screen-space convention: `0` points right and `90` points down.
 
 **Example**
 
-Prompt: embed a five point star in a circle. place red dots at its vertices.
+Prompt: draw a spirograph in a box for a set of example parameters
 
 Generated code:
 ```jsx
-const verts = linspace(0, 360, 10, false).map((t, i) => {
-  const radius = i % 2 == 0 ? 1 : 0.5
-  return polar(90 + t, radius)
-})
-return <Graph aspect coord={[-1, -1, 1, 1]}>
-  <Circle pos={[0, 0]} size={2} stroke={darkgray} />
-  <Shape points={verts} stroke={blue} stroke-width={2} />
-  {verts.map(pos => <Dot pos={pos} size={0.05} fill={red} />)}
-</Graph>
+const [R, r, d, k] = [10, 7, 4, 7]
+const fx = t => (R - r) * cos(t) + d * cos(((R - r) / r) * t)
+const fy = t => (R - r) * sin(t) - d * sin(((R - r) / r) * t)
+return <TitleFrame title="Spirograph" padding={0.2} margin rounded>
+  <Graph aspect coord={[-R, -R, R, R]}>
+    <Circle pos={[0, 0]} rad={R} stroke={darkgray} stroke-dasharray={10} />
+    <Circle pos={[0, 0]} rad={R - r} stroke-dasharray={5} />
+    <SymSpline fx={fx} fy={fy} tlim={[0, 2*pi*k]} stroke={blue} stroke-width={2} />
+  </Graph>
+  <Span pos={[0.5, 1.1]} ysize={0.05} font-family={mono}>R = 10 | r = 7 | d = 4</Span>
+</TitleFrame>
 ```
 
 ## Arrays
@@ -146,9 +149,10 @@ Prompt: load "data.csv" and plot each row as a blue dot
 
 Generated code:
 ```jsx
-return <Graph xlim={[0, 10]} ylim={[0, 10]}>
+return <Graph aspect coord={[0, 0, 10, 10]}>
+  <Mesh2D xlocs={10} ylocs={10} opacity={0.25} />
   {loadTable('data.csv').map(({ x, y }) =>
-    <Dot pos={[x, y]} rad={0.1} fill={blue} />
+    <Dot pos={[x, y]} size={0.5} fill={blue} />
   )}
 </Graph>
 ```
@@ -171,7 +175,7 @@ Generated code:
 ```jsx
 <Box rounded clip>
   <Group aspect={2}>
-    <LoadImage id="image.png" xsize={1} />
+    <LoadImage id="image.png" xrect={[0, 1]} />
   </Group>
 </Box>
 ```

package/src/elems/core.ts

@@ -2,10 +2,10 @@
 
 import { THEME } from '../lib/theme'
 import { DEFAULTS as D, svgns, sans, light, blue, red, d2r } from '../lib/const'
-import { is_scalar, abs, cos, sin, tan, cot, mul2, div2, filter_object, expand_rect, rect_box, cbox_rect, rect_cbox, merge_points, merge_rects, ensure_vector, broadcast_point, rounder, heavisign, abs_min, abs_max, rect_radial, rotate_aspect, remap_rect, rescaler, resizer, rect_size, vector_angle, polar, upright_rect } from '../lib/utils'
+import { is_scalar, abs, cos, sin, tan, cot, mul2, div2, filter_object, expand_rect, rect_box, cbox_rect, rect_cbox, merge_points, merge_rects, join_limits, ensure_pair, rounder, heavisign, abs_min, abs_max, rect_radial, rotate_aspect, remap_rect, rescaler, resizer, rect_size, vector_angle, polard, upright_rect } from '../lib/utils'
 import { random } from '../lib/rng'
 
-import type { Point, Rect, Size, AlignValue, Align, Side, Attrs, MNumber, MPoint, Spec } from '../lib/types'
+import type { Point, Rect, Size, AlignValue, Align, Side, Attrs, MNumber, MPoint, Spec, Limit } from '../lib/types'
 
 //
 // rect embedding
@@ -118,7 +118,7 @@ function adjust_rotate(rotate: number, prect: Rect, coord: Rect): number {
     const csize = rect_size(coord)
     const psize = rect_size(prect)
     const proj = div2(psize, csize)
-    const vec = polar(rotate, proj)
+    const vec = polard(rotate, proj)
     return vector_angle(vec)
 }
 
@@ -217,7 +217,7 @@ class Context {
         const transform = rotate1 ? rotate_repr(rotate1, [ x0, y0 ], this.prec) : undefined
 
         // broadcast align into [ halign, valign ] components
-        const [ hafrac, vafrac ] = ensure_vector(align, 2).map(align_frac)
+        const [ hafrac, vafrac ] = ensure_pair(align).map(align_frac)
         const [ x, y ] = [
             x0 + (0.5 - hafrac) * (w - w0),
             y0 + (0.5 - vafrac) * (h - h0),
@@ -259,7 +259,7 @@ function props_repr(d: Attrs, prec: number): string {
 
 // reserved keys
 const SPEC_KEYS = [ 'rect', 'coord', 'aspect', 'aspect0', 'expand', 'align', 'upright', 'offset', 'rotate', 'rotate_adjust', 'rotate_invar' ]
-const HELP_KEYS = [ 'pos', 'size', 'xsize', 'ysize', 'flex', 'spin', 'orient' ]
+const HELP_KEYS = [ 'pos', 'size', 'xsize', 'ysize', 'rad', 'xrad', 'yrad', 'xrect', 'yrect', 'flex', 'spin', 'orient' ]
 const EXTR_KEYS = [ 'stack_size' ]
 const RESERVED_KEYS = [ ...SPEC_KEYS, ...HELP_KEYS, ...EXTR_KEYS ]
 
@@ -300,6 +300,11 @@ interface ElementArgs extends SpecArgs {
     size?: number | Size
     xsize?: number
     ysize?: number
+    rad?: number | Size
+    xrad?: number
+    yrad?: number
+    xrect?: number | Limit
+    yrect?: number | Limit
     flex?: boolean
     spin?: number
     orient?: number
@@ -316,7 +321,7 @@ class Element {
     attr: Attrs
 
     constructor(args: ElementArgs = {}) {
-        const { tag, unary, children, pos, size, xsize, ysize, flex, spin, orient, ...attr0 } = args
+        const { tag, unary, children, pos, size: size0, xsize: xsize0, ysize: ysize0, rad, xrad, yrad, xrect, yrect, flex, spin, orient, ...attr0 } = args
         const [ spec, attr ] = spec_split(attr0, false)
         this.args = args
 
@@ -332,12 +337,27 @@ class Element {
         this.spec = spec
         this.attr = attr
 
-        // handle pos/size conveniences
-        if (pos != null || size != null || xsize != null || ysize != null) {
-            const has_xy = xsize != null || ysize != null
-            const size1 = has_xy ? [ xsize ?? 0, ysize ?? 0 ] as Point : undefined
-            this.spec.rect ??= cbox_rect([ ...(pos ?? D.pos), ...(broadcast_point(size ?? size1 ?? D.size)) ])
-            if (has_xy) this.spec.expand = true
+        // handle pos/rad/xrad/yrad conveniences
+        const [ x, y ] = pos ?? D.pos
+        const size = rad != null ? mul2(rad, 2) : size0
+        const xsize = xrad != null ? 2 * xrad : xsize0
+        const ysize = yrad != null ? 2 * yrad : ysize0
+
+        // handle rect conveniences
+        if (this.spec.rect != null) {
+            // already have a rect
+        } else if (size != null) {
+            const [ w, h ] = ensure_pair(size)
+            this.spec.rect = cbox_rect([ x, y, w, h ])
+        } else if (xrect != null || yrect != null) {
+            const xrect1 = ensure_pair(xrect ?? x)
+            const yrect1 = ensure_pair(yrect ?? y)
+            this.spec.rect = join_limits({ h: xrect1, v: yrect1 })
+            if (xrect == null || yrect == null) this.spec.expand = true
+        } else if (xsize != null || ysize != null) {
+            const [ w, h ] = ensure_pair([ xsize ?? 0, ysize ?? 0 ])
+            this.spec.rect = cbox_rect([ x, y, w, h ])
+            if (xsize == null || ysize == null) this.spec.expand = true
         }
 
         // various convenience conversions
@@ -642,7 +662,7 @@ class Svg extends Group {
     constructor(args: SvgArgs = {}) {
         const { children: children0, size : size0 = D.svg_size, padding = 1, bare = false, dims = true, filters, aspect: aspect0 = 'auto', view: view0, style, xmlns = svgns, font_family = sans, font_weight = light, prec = D.prec, ...attr } = THEME(args, 'Svg')
         const children = ensure_children(children0)
-        const size_base = broadcast_point(size0)
+        const size_base = ensure_pair(size0)
 
         // precompute aspect info
         const aspect = aspect0 == 'auto' ? children_aspect(children) : aspect0

package/src/elems/geometry.ts

@@ -1,9 +1,9 @@
 // geometry elements
 
 import { THEME } from '../lib/theme'
-import { DEFAULTS as D, d2r, none, gray } from '../lib/const'
-import { is_boolean, is_scalar, is_array, ensure_vector, ensure_point, check_array, upright_limits, rounder, abs, rect_radial, make_mpoint, squeeze_mpoint, merge_points, broadcast_point, sub2m, add2, sub2, mul2, div2, norm, angle_direc, unit_direc, vector_angle, polar, prefix_split} from '../lib/utils'
-import { cubic_spline_data } from '../lib/interp'
+import { DEFAULTS as D, none, gray } from '../lib/const'
+import { is_boolean, is_scalar, is_array, ensure_vector, ensure_point, check_array, upright_limits, rounder, abs, rect_radial, make_mpoint, merge_points, ensure_pair, add2, sub2, mul2, div2, norm, angle_direc, unit_direc, vector_angle, polard, prefix_split} from '../lib/utils'
+import { cubic_spline_data, cubic_spline_tangent } from '../lib/interp'
 import { Context, Element, Group, Rectangle } from './core'
 
 import type { Point, Rect, Limit, Grad, Attrs, MPoint, Orient, Rounded, Direc } from '../lib/types'
@@ -186,12 +186,11 @@ interface RayArgs extends LineArgs {
 class Ray extends Line {
     constructor(args: RayArgs = {}) {
         const { angle = 0, loc = D.pos, size = 0.5, ...attr } = THEME(args, 'Ray')
-        const theta = angle * d2r
         const [ x, y ] = loc
         const [ rx, ry ] = ensure_vector(size, 2)
         const points: Point[] = [
             [ x, y ],
-            polar(theta, [ rx, ry ], [ x, y ])
+            polard(angle, [ rx, ry ], [ x, y ])
         ]
         super({ points, ...attr })
         this.args = args
@@ -553,9 +552,8 @@ class CubicSplineCmd extends Command {
 
     args(ctx: Context): string {
         // use dir if provided, otherwise use tan
-        const dist = squeeze_mpoint(sub2m(this.pos2, this.pos1)).map(abs) as Point
-        const tan1 = this.dir1 != null ? mul2(this.dir1, dist) : this.tan1
-        const tan2 = this.dir2 != null ? mul2(this.dir2, dist) : this.tan2
+        const tan1 = cubic_spline_tangent(this.pos1, this.pos2, this.dir1, this.tan1)
+        const tan2 = cubic_spline_tangent(this.pos1, this.pos2, this.dir2, this.tan2)
         if (tan1 == null || tan2 == null) throw new Error('Spline tangent must be defined')
 
         // compute scaled tangents
@@ -624,7 +622,7 @@ function parse_rounded(rounded: Rounded): Point[] {
         const [ rx, ry ] = rounded
         rounded = [[rx, ry], [rx, ry], [rx, ry], [rx, ry]]
     }
-    return rounded.map(broadcast_point)
+    return rounded.map(ensure_pair)
 }
 
 interface RoundedRectArgs extends ElementArgs {
@@ -717,9 +715,9 @@ class Arc extends Path {
     constructor(args: ArcArgs = {}) {
         const { start, end, upright = true, ...attr } = THEME(args, 'Arc')
         if (start == null || end == null) throw new Error('Must provide `start` and `end` angles')
-        const [ theta0, theta1 ] = upright_limits([ start, end ])
-        const large = (theta1 - theta0) > 180
-        const [ point0, point1 ] = [ theta0, theta1 ].map(t => polar(t, 0.5, [0.5, 0.5]))
+        const [ angle0, angle1 ] = upright_limits([ start, end ])
+        const large = (angle1 - angle0) > 180
+        const [ point0, point1 ] = [ angle0, angle1 ].map(t => polard(t, 0.5, [0.5, 0.5]))
         const children = [ new MoveCmd(point0), new ArcCmd(point1, 0.5, true, large) ]
         super({ children, upright, ...attr })
         this.args = args

package/src/elems/layout.ts

@@ -2,7 +2,7 @@
 
 import { THEME } from '../lib/theme'
 import { DEFAULTS as D, none } from '../lib/const'
-import { is_scalar, ensure_vector, broadcast_point, log, exp, max, sum, zip, div2, cumsum, reshape, repeat, meshgrid, padvec, normalize, mean, identity, invert, aspect_invariant, check_singleton, check_array, rect_center, rect_radius, join_limits, radial_rect, norm_side, intersperse, prefix_split, merge_points } from '../lib/utils'
+import { is_scalar, ensure_vector, ensure_pair, log, exp, max, sum, zip, div2, cumsum, reshape, repeat, meshgrid, padvec, normalize, mean, identity, invert, aspect_invariant, check_singleton, check_array, rect_center, rect_radius, join_limits, radial_rect, norm_side, intersperse, prefix_split, merge_points } from '../lib/utils'
 import { wrapWidths } from '../lib/wrap'
 
 import { Context, Group, Element, Rectangle, Spacer, spec_split, align_frac, ensure_children } from './core'
@@ -328,7 +328,7 @@ function computeGridLayout(children: Element[][], rows: number, cols: number, {
     const aspect_ideal = exp(log_mu - mean(widths.map(log)) + mean(heights.map(log)))
 
     // adjust widths and heights to account for spacing
-    const [spacex, spacey] = broadcast_point(spacing)
+    const [spacex, spacey] = ensure_pair(spacing)
     const [scalex, scaley] = [1 - spacex * (cols-1), 1 - spacey * (rows-1)]
     widths = widths.map(w => scalex * w)
     heights = heights.map(h => scaley * h)
@@ -382,11 +382,9 @@ class Grid extends Group {
         const aspect = aspect0 ?? aspect_ideal
 
         // make grid
-        const rects = meshgrid(rranges, cranges).map(([ ylim, xlim ]) =>
-            join_limits({ h: xlim, v: ylim })
-        )
-        const items = zip(children, rects).map(([ child, rect ]) =>
-            child.clone({ rect })
+        const mesh = meshgrid(rranges, cranges)
+        const items = zip(children, mesh).map(([ child, [ ylim, xlim ] ]) =>
+            child.clone({ xrect: xlim, yrect: ylim })
         )
 
         // pass to Group

package/src/elems/network.ts

@@ -1,14 +1,14 @@
 // network elements
 
 import { THEME } from '../lib/theme'
-import { abs, sub2, mul2, check_singleton, is_string, rect_center, side_direc, prefix_split } from '../lib/utils'
+import { abs, sub2, mul2, check_singleton, is_string, rect_center, side_direc, prefix_split, join_limits } from '../lib/utils'
 
 import { Context, Element, Group, ensure_children } from './core'
-import type { ElementArgs, GroupArgs } from './core'
 import { Frame } from './layout'
 import { Arrow } from './geometry'
 import { Text } from './text'
 
+import type { ElementArgs, GroupArgs } from './core'
 import type { AlignValue, Point, Side } from '../lib/types'
 
 //
@@ -135,8 +135,9 @@ class Edge extends Element {
 
 class Network extends Group {
     constructor(args: GroupArgs = {}) {
-        const { children: children0, coord, ...attr0 } = THEME(args, 'Network')
+        const { children: children0, xlim, ylim, coord: coord0, ...attr0 } = THEME(args, 'Network')
         const [ node_attr, edge_attr, attr ] = prefix_split([ 'node', 'edge' ], attr0)
+        const coord = coord0 ?? join_limits({ h: xlim, v: ylim })
         const children = ensure_children(children0)
 
         // process nodes and make label map

package/src/elems/plot.ts

@@ -2,7 +2,7 @@
 
 import { THEME } from '../lib/theme'
 import { DEFAULTS as D, none, blue, white } from '../lib/const'
-import { sign, abs, linspace, invert_orient, join_limits, ensure_vector, is_scalar, is_string, is_object, ensure_singleton, check_singleton, rounder, enumerate, aspect_invariant, rect_aspect, merge_rects, expand_limits, flip_rect, resolve_limits, smoothstep, prefix_split, prefix_join } from '../lib/utils'
+import { sign, abs, linspace, invert_orient, join_limits, split_limits, ensure_vector, is_scalar, is_string, is_object, ensure_singleton, check_singleton, rounder, enumerate, aspect_invariant, rect_aspect, merge_rects, expand_limits, flip_rect, resolve_limits, smoothstep, prefix_split, prefix_join } from '../lib/utils'
 import { Span } from './text'
 
 import { Element, Group, Spacer, spec_split, is_element, ensure_children } from './core'
@@ -416,10 +416,10 @@ interface LegendArgs extends ElementArgs {
 
 class Mesh extends Scale {
     constructor(args: MeshArgs = {}) {
-        const { children: children0, locs: locs0, direc = 'h', lim = D.lim, span = D.lim, ...attr } = THEME(args, 'Mesh')
-        const locs = auto_array(locs0, lim)
-        const coord = join_limits({ [direc]: lim, [invert_orient(direc)]: span })
-        super({ locs, direc, coord, span, ...attr })
+        const { children: children0, locs: locs0 = 10, direc = 'h', xlim, ylim, coord, ...attr } = THEME(args, 'Mesh')
+        const { [direc]: lim, [invert_orient(direc)]: span } = resolve_limits(xlim, ylim, coord as Rect)
+        const locs = auto_array(locs0, lim ?? D.lim)
+        super({ locs, direc, span, xlim, ylim, coord, ...attr })
         this.args = args
     }
 }
@@ -442,23 +442,9 @@ class VMesh extends Mesh {
 
 class Mesh2D extends Group {
     constructor(args: Mesh2DArgs = {}) {
-        let { children: children0, locs, xlocs, ylocs, direc = 'h', xlim = D.lim, ylim = D.lim, xspan, yspan, ...attr } = THEME(args, 'Mesh2D')
-
-        // set default values
-        xlocs ??= locs
-        ylocs ??= locs
-        xspan ??= xlim
-        yspan ??= ylim
-
-        // convert locs to arrays
-        xlocs = auto_array(xlocs, xlim)
-        ylocs = auto_array(ylocs, ylim)
-
-        // create meshes
-        const hmesh = new HMesh({ locs: xlocs, span: yspan, lim: xlim, ...attr })
-        const vmesh = new VMesh({ locs: ylocs, span: xspan, lim: ylim, ...attr })
-
-        // pass to Group
+        let { children: children0, locs, xlocs, ylocs, direc = 'h', xlim, ylim, coord, ...attr } = THEME(args, 'Mesh2D')
+        const hmesh = new HMesh({ locs: xlocs ?? locs, xlim, ylim, coord })
+        const vmesh = new VMesh({ locs: ylocs ?? locs, xlim, ylim, coord })
         super({ children: [ hmesh, vmesh ], ...attr })
         this.args = args
     }
@@ -527,8 +513,8 @@ function outer_limits(children: Element[], { xlim, ylim, padding = 0 }: { xlim?:
     if (children.length == 0) return
 
     // pull in child coordinate system
-    const coord0 = merge_rects(children.map((c: Element) => c.graphCoord()))
-    const { xlim: xlim0, ylim: ylim0 } = resolve_limits(xlim, ylim, coord0)
+    const coord = merge_rects(children.map((c: Element) => c.graphCoord()))
+    const { h: xlim0, v: ylim0 } = resolve_limits(xlim, ylim, coord)
 
     // expand with padding
     const [ xpad, ypad ] = ensure_vector(padding, 2)
@@ -607,13 +593,13 @@ interface PlotArgs extends BoxArgs {
 class Plot extends Box {
     constructor(args: PlotArgs = {}) {
         let {
-            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = 0.125, title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding, margin, aspect: aspect0 = 'auto', clip, debug = false, ...attr0
+            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = 0.125, title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding, margin, coord: coord0 = 'auto', aspect: aspect0 = 'auto', clip, debug = false, ...attr0
         } = THEME(args, 'Plot')
         const children = ensure_children(children0)
 
         // determine coordinate system and aspect
-        const coord = outer_limits(children, { xlim, ylim, padding }) as Rect
-        const [ xmin, ymin, xmax, ymax ] = coord
+        const coord = coord0 == 'auto' ? outer_limits(children, { xlim, ylim, padding }) : coord0
+        const [ xmin, ymin, xmax, ymax ] = coord ?? D.coord
         xlim = [ xmin, xmax ]
         ylim = [ ymin, ymax ]
 
@@ -666,9 +652,8 @@ class Plot extends Box {
         if (xaxis === true) xaxis = new HAxis({ ticks: xticks, lim: xlim })
         if (xaxis != null && xaxis !== false) {
             const xtick_size1 = xtick_size * (ymax - ymin)
-            const xaxis_ylim: Limit = [ xanchor - xtick_size1, xanchor + xtick_size1 ]
-            const xaxis_rect = join_limits({ h: xlim, v: xaxis_ylim })
-            xaxis = xaxis.clone({ rect: xaxis_rect, ...xaxis_attr }) as HAxis
+            const xaxis_ylim = [ xanchor - xtick_size1, xanchor + xtick_size1 ]
+            xaxis = xaxis.clone({ xrect: xlim, yrect: xaxis_ylim, ...xaxis_attr }) as HAxis
             fg_elems.push(xaxis)
         }
 
@@ -676,16 +661,15 @@ class Plot extends Box {
         if (yaxis === true) yaxis = new VAxis({ ticks: yticks, lim: ylim })
         if (yaxis != null && yaxis !== false) {
             const ytick_size1 = ytick_size * (xmax - xmin)
-            const yaxis_xlim: Limit = [ yanchor - ytick_size1, yanchor + ytick_size1 ]
-            const yaxis_rect = join_limits({ h: yaxis_xlim, v: ylim })
-            yaxis = yaxis.clone({ rect: yaxis_rect, ...yaxis_attr }) as VAxis
+            const yaxis_xlim = [ yanchor - ytick_size1, yanchor + ytick_size1 ]
+            yaxis = yaxis.clone({ xrect: yaxis_xlim, yrect: ylim, ...yaxis_attr }) as VAxis
             fg_elems.push(yaxis)
         }
 
         // automatic xgrid generation
         if (xgrid != null && xgrid !== false) {
             const locs = (xgrid === true && xaxis != null && xaxis !== false) ? xaxis.locs : xgrid
-            const xgrid_elem = new HMesh({ locs: locs as number[], lim: xlim, rect: coord, ...xgrid_attr })
+            const xgrid_elem = new HMesh({ locs: locs as number[], ...xgrid_attr })
             bg_elems.unshift(xgrid_elem)
         } else {
             xgrid = undefined
@@ -694,7 +678,7 @@ class Plot extends Box {
         // automatic ygrid generation
         if (ygrid != null && ygrid !== false) {
             const locs = (ygrid === true && yaxis != null && yaxis !== false) ? yaxis.locs : ygrid
-            const ygrid_elem = new VMesh({ locs: locs as number[], lim: ylim, rect: coord, ...ygrid_attr })
+            const ygrid_elem = new VMesh({ locs: locs as number[], ...ygrid_attr })
             bg_elems.unshift(ygrid_elem)
         } else {
             ygrid = undefined