gum-jsx 1.3.0 → 1.4.0

package/claude/skills/gum-jsx/references/plotting.md

@@ -0,0 +1,129 @@
+# Plotting Elements
+
+## Graph
+
+*Inherits*: **Group** > **Element**
+
+This is the core graphing functionality used in **Plot** without the axes and labels. By default, the coordinate system is automatically inferred from the limits of child elements. This can be overridden with custom `xlim`/`ylim` specifications. The Elements that are passed to **Graph** can express their position and size information in this new coordinate system.
+
+You'll often want to use this (directly or indirectly) to display mathematical curves, as they might otherwise come out looking upside down relative to what you expect (as higher y-values mean "down" in raw SVG).
+
+Parameters:
+- `xlim`/`ylim` = `[0, 1]` — the range over which to graph
+- `padding` = `0` — limit padding to add when auto-detected from `elems`
+- `coord` = `'auto'` — the coordinate system to use for the graph (overrides `xlim`/`ylim`)
+
+**Example**
+
+Prompt: a series of closely spaced squares rotating clockwise along a sinusoidal path
+
+Generated code:
+```jsx
+<Graph ylim={[-1.5, 1.5]} padding={0.2} aspect={2}>
+  <SymPoints
+    fy={sin} xlim={[0, 2*pi]} size={0.5} N={100}
+    shape={x => <Square rounded spin={r2d*x} />}
+  />
+</Graph>
+```
+
+## Plot
+
+*Inherits*: **Group** > **Element**
+
+Uses **Graph** to plot one or more elements over the desired limits and frame them with axes. If not specified by `xlim` and `ylim`, the limits of the plot will be computed from the bounding box of the constituent elements. By default, the `aspect` will be the ratio of the range of the `xlim` and `ylim`. See **Axis** for more details on how to customize the axes, ticks, and labels.
+
+Parameters:
+- `xlim`/`ylim` = `[0, 1]` — the range over which to graph
+- `xanchor`/`yanchor` — the value at which to place the respective axis. Note that the `xanchor` is a y-value and vice versa. Defaults to `xmin`/`ymin`
+- `xticks`/`yticks` = `5` — either an integer for evenly spaced ticks, a list of tick locations, or list of tick `**location, label]` pairs (see [Axis** for more details)
+- `grid`/`xgrid`/`ygrid` = `false` — whether to show a grid in the background. If `true`, the grid lines match the specified ticks. Alternatively, you can pass a list of positions to override this
+- `xlabel`/`ylabel` — a string or **Element** to use as the respective label
+- `title` — a string or **Element** to use as the title
+- `padding` = `0` ­— additional padding to add to auto-detected coordinate limits
+- `margin` = `0` — margin to add around the plot (needed to include labels and title)
+- `border` = `0` — border width to use
+- `clip` = `false` — clip graph contents to specified coordinates
+
+Subunits:
+- `axis`/`xaxis`/`yaxis` — the axes, including lines, ticks, and tick labels
+- `grid`/`xgrid`/`ygrid` — the grid lines arrayed under the graph
+- `label`/`xlabel`/`ylabel` — the axis label elements
+- `title` — the plot title element
+
+**Example**
+
+Prompt: plot an inverted sine wave with ticks labeled in multiples of π. There is a faint dashed grid. The x-axis is labeled "phase" and the y-axis is labeled "amplitude". The title is "Inverted Sine Wave".
+
+Generated code:
+```jsx
+const xticks = linspace(0, 2, 6).slice(1).map(x => [x*pi, `${rounder(x, 1)} π`])
+return <Plot aspect={phi} margin={0.25} xanchor={0} xticks={xticks} xlabel="phase" ylabel="amplitude" title="Inverted Sine Wave" xaxis-tick-side="both" grid grid-stroke-dasharray={3}>
+  <SymLine fy={x => -sin(x)} xlim={[0, 2*pi]} />
+</Plot>
+```
+
+## Axis
+
+*Inherits*: **Group** > **Element**
+
+A single vertical or horizontal axis for plotting. This includes the central line, the perpendicual ticks, and their associated tick labels. Note that the proper bounds encompass only the central line and ticks, while the tick labels may fall well outside of them. Use **HAxis** and **VAxis** for specific directions.
+
+Because `Axis` is used primarily for **Plot**, the `tick-side` parameter is inverted for `VAxis`, meaning `outer` points up and `inner` points down. Meanwhile, for `HAxis`, `outer` points to the left and `inner` points to the right.
+
+Parameters:
+- `direc` — the orientation of the axis, either `v` (vertical) or `h` (horizontal)
+- `ticks` — a list of tick `[location, label]` pairs. The label can either be an `Element` or a string
+- `lim` = `[0, 1]` — the extent of the element along the main axis
+- `tick-side` = `'both'` — one of `'inner'` / `'outer'` / `'both'` / `'none'` , or a pair representing a numerical range in `[0, 1]`, where zero is oriented in the inner direction
+- `label-side` = same as `tick-side` but for the labels
+- `children` = a list of `Element`s to use as the tick labels instead of `ticks`. These must have a `loc` to tell `Axis` where to place the label and associated tick.
+
+Subunits:
+- `line`: the central line along the main axis
+- `tick`: the perpendicular tick marks (collectively)
+- `label`: the labels annotating the tick marks (collectively)
+
+**Example**
+
+Prompt: a horizontal axis with 5 ticks labeled with emojis for: mount fuji, a rocket, a whale, a watermellon, and a donut
+
+Generated code:
+```jsx
+const emoji = ['🗻', '🚀', '🐳', '🍉', '🍩']
+const ticks = zip(linspace(0, 1, emoji.length), emoji)
+return <Box padding={[0.5, 1]}>
+  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} />
+</Box>
+```
+
+## BarPlot
+
+*Inherits*: **Plot** > **Group** > **Element**
+
+Makes a plot featuring a bar graph. This largely wraps the functionality of **Plot** but takes care of labelling and arranging the `xaxis` information. You can provide `label` and `size` attributes to the child elements. The **Bar**/**VBar**/**HBar** elements are just very thin wrappers around **Rect** elements, and you can use other elements in their place if you wish.
+
+To layout just the bars without axes, use the **Bars** element directly, which this wraps using **Plot**. This way, you can plot other elements alongside the bars, such as labels or error bars. By default, the bars will be placed at `[0, ..., N-1]` along the x-axis.
+
+Child parameters:
+- `label` — the label for the bar
+- `size` — the height of the bar
+
+Parameters:
+- `direc` = `v` — the orientation of the bars in the plot
+
+Subunit names:
+- `bar` — keywords to pass to the underlying **Bars** element
+
+**Example**
+
+Prompt: A plot with three bars with black borders at "A", "B", and "C". The first bar is red and is the shortest, the second bar is blue and is the tallest, while the third bar is green and its height is in between.
+
+Generated code:
+```jsx
+<BarPlot ylim={[0, 10]} yticks={6} ygrid title="Example BarPlot" xlabel="Category" ylabel="Value" margin={0.25}>
+  <Bar label="A" size={3} fill={red} />
+  <Bar label="B" size={8.5} fill={blue} />
+  <Bar label="C" size={6.5} fill={green} />
+</BarPlot>
+```

package/claude/skills/gum-jsx/references/shapes.md

@@ -0,0 +1,138 @@
+# Shapes Elements
+
+## Rect
+
+*Inherits*: **Element**
+
+This makes a rectangle. Without any arguments it will fill its entire allocated space. Unless otherwise specified, it has a `null` aspect. Use **Square** for a square with a unit aspect.
+
+Specifying a `rounded` argument will round the borders by the same amount for each corner. This can be either a scalar or a pair of scalars corresponding to the x and y radii of the corners. To specify different roundings for each corner, use the **RoundedRect** element.
+
+Parameters:
+- `rounded` = `null` — proportional border rounding, accepts either scalar or pair of scalars
+
+**Example**
+
+Prompt: a rectangle on the left side of the figure with an aspect of roughly 1/2
+
+Generated code:
+```jsx
+<Rectangle pos={[0.25, 0.5]} rad={[0.1, 0.2]}/>
+```
+
+## Ellipse
+
+*Inherits*: **Element**
+
+This makes an ellipse. Without any arguments it will inscribe its allocated space. Use **Circle** for a circle with a unit aspect.
+
+**Example**
+
+Prompt: two ellipses, one wider and one taller
+
+Generated code:
+```jsx
+<Group>
+  <Ellipse pos={[0.3, 0.2]} rad={[0.2, 0.1]} />
+  <Ellipse pos={[0.6, 0.6]} rad={[0.2, 0.25]} />
+</Group>
+```
+
+## Line
+
+*Inherits*: **Element**
+
+The `Line` element draws line segments through a series of points. It accepts a list of two or more points and connects them with straight line segments.
+
+There are specialized variants for vertical and horizontal lines called **VLine** and **HLine**, which allow you to specify the position of the line (`loc`) and the range of the line (`lim`). See **UnitLine** for more details.
+
+For smooth curves through points, use **Spline** instead.
+
+Parameters:
+- `children` — array of point coordinates (minimum of 2 required)
+
+**Example**
+
+Prompt: draw a diagonal line in blue and a cup shaped line in red
+
+Generated code:
+```jsx
+<Group>
+  <Line stroke={blue}>{[
+    [0.2, 0.2],
+    [0.8, 0.8],
+  ]}</Line>
+  <Line stroke={red}>{[
+    [0.3, 0.3],
+    [0.3, 0.7],
+    [0.7, 0.7],
+    [0.7, 0.3],
+  ]}</Line>
+</Group>
+```
+
+## Shape
+
+*Inherits*: **Pointstring** > **Element**
+
+The `Shape` element draws a closed polygon through a series of points. It accepts a list of two or more points and connects them with straight line segments, automatically closing the shape by connecting the last point back to the first.
+
+For open multiple-segment paths, use **Line** instead.
+
+Parameters:
+- `children` — array of point coordinates (minimum of 2 required)
+
+**Example**
+
+Prompt: draw a blue triangle with a semi-transparent green square overlaid on top
+
+Generated code:
+```jsx
+<Group>
+  <Shape fill={blue} stroke={none}>{[
+    [0.5, 0.2],
+    [0.8, 0.8],
+    [0.2, 0.8]
+  ]}</Shape>
+  <Shape fill={green} stroke={none} opacity={0.5}>{[
+    [0.3, 0.3],
+    [0.7, 0.3],
+    [0.7, 0.7],
+    [0.3, 0.7]
+  ]}</Shape>
+</Group>
+```
+
+## Spline
+
+*Inherits*: **Path** > **Element**
+
+This creates a smooth cardinal spline curve through a series of points. The tangent at each interior point is computed as the central difference between its neighbors, while endpoints use forward/backward differences. This produces a smooth, natural-looking curve that passes through all specified points.
+
+The `curve` parameter controls the tension of the spline. Lower values (e.g., 0.5) create tighter curves with less overshoot, while higher values (e.g., 1.5) create looser, more flowing curves. The default value of 0.5 produces the canonical *Catmull-Rom* spline.
+
+Parameters:
+- `children` — array of point coordinates (minimum of 2 required)
+- `curve` = `0.5` — tension parameter that scales the tangent vectors
+- `closed` = `false` — toggles whether to make it a closed loop
+- `tan1`/`tan2` — the tangent vectors at the first and last points
+
+**Example**
+
+Prompt: draw a blue cubic spline path filled with gray that looks like a pacman facing left, using 5 vertices. label the vertices with black dots and connect them with straight red lines. place the whole thing in a rounded frame.
+
+Generated code:
+```jsx
+const points = [
+  [0.25, 0.25],
+  [0.75, 0.25],
+  [0.75, 0.75],
+  [0.25, 0.75],
+  [0.50, 0.50],
+]
+return <Frame rounded margin>
+  <Spline closed stroke={blue} fill={gray}>{points}</Spline>
+  <Shape stroke={red}>{points}</Shape>
+  <Points size={0.0075}>{points}</Points>
+</Frame>
+```

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

@@ -0,0 +1,141 @@
+# Symbolic Elements
+
+## SymPoints
+
+*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`.
+
+You can also specify the radius of the points functionally with `size` and the shape with `shape`. Both of these functions take `(x, y, t, i)` values as inputs and return the desired value for each point.
+
+Parameters:
+- `fx`/`fy` — a function mapping from x-values, y-values, or t-values
+- `size` = `0.025` — a size or a function mapping from `(x, y, t, i)` values to a size
+- `shape` = `Dot` — a shape or function mapping from `(x, y, t, i)` values to a shape
+- `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
+- `N` — number of data points to generate when using limits
+
+**Example**
+
+Prompt: A plot of a sine wave in blue. There are white pill shaped line markers along the sine wave that are rotated to follow the slope of the curve.
+
+Generated code:
+```jsx
+const Pill = args => <Rectangle fill={white} rounded={0.3} aspect={2} {...args} />
+return <Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} grid fill={lightgray} margin={[0.25, 0.1]} aspect="auto">
+  <SymLine fy={sin} stroke={blue} stroke-width={2} />
+  <SymPoints fy={sin} size={0.125} N={11} shape={x => <Pill spin={-r2d*atan(cos(x))}/>} />
+</Plot>
+```
+
+## SymLine
+
+*Inherits*: **Line** > **Element**
+
+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`.
+
+Parameters:
+- `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
+- `N` — number of data points to generate when using limits
+
+**Example**
+
+Prompt: plot two lines: (1) a sine wave in red; (2) the same sine wave with a lower amplitude higher frequency sine wave added on top (in blue)
+
+Generated code:
+```jsx
+<Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} aspect={phi} margin={0.2} grid>
+  <SymLine fy={sin} stroke={red} stroke-width={2} />
+  <SymLine fy={x => sin(x) + 0.2*sin(5*x)} stroke={blue} stroke-width={2} />
+</Plot>
+```
+
+## SymShape
+
+*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`.
+
+Parameters:
+- `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
+- `N` — number of data points to generate when using limits
+
+**Example**
+
+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
+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)}
+  />
+</Frame>
+```
+
+## SymSpline
+
+*Inherits*: **Spline** > **Path** > **Element**
+
+Flexible interface to generate smooth two-dimensional spline curves symbolically or in combination with fixed inputs. Similar to **SymLine**, but produces smooth cardinal splines instead of straight line segments. See **Spline** for more details on the `curve` parameter.
+
+
+Parameters:
+- `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
+- `N` — number of data points to generate when using limits
+- `curve` = `0.5` — tension parameter that scales the tangent vectors
+
+**Example**
+
+Prompt: smooth damped oscillation using sparse sampling (N=10)
+
+Generated code:
+```jsx
+// shows how spline interpolates between discrete function samples
+// display the true function in gray with low opacity
+const decay = x => exp(-x/2) * sin(3*x)
+
+return <Plot xlim={[0, 2*pi]} ylim={[-1, 1]} grid margin={0.15} aspect={phi}>
+  <SymLine fy={decay} opacity={0.25} N={200} />
+  <SymSpline fy={decay} N={10} stroke={blue} stroke-width={2} />
+  <SymPoints fy={decay} N={10} size={0.05} fill={red} />
+</Plot>
+```
+
+## SymFill
+
+*Inherits*: **Polygon** > **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`.
+
+Parameters:
+- `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
+- `xvals`/`yvals`/`tvals` — a list of x-values, y-values, or t-values to use
+- `N` — number of data points to generate when using limits
+
+**Example**
+
+Prompt: a decaying sine wave filled in with blue
+
+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} />
+  <SymLine fy={decay} N={250} />
+</Graph>
+```

package/claude/skills/gum-jsx/references/text.md

@@ -0,0 +1,114 @@
+# Text Elements
+
+## Text
+
+*Inherits*: **VStack** > **Element**
+
+Displays text and other elements. Uses built-in browser facilities when available to calculate font size and aspect ratio. Note that you will typically not set the font size of the text here, as this will fill the entire space with the provided text.
+
+If `wrap` is specified, the text will be wrapped to the specified width. In either case, single newlines will be respected, though whitespace will be compressed. There are two wrapper elements related to text:
+
+- **TextBox** / **TextFrame** can handle text with a border and background
+- **TextStack** can handle multiple lines of text that are passed in as an array
+
+Parameters:
+- `children` — the text to display
+- `wrap` = `null` — the width (in ems) to wrap the text at (if `null`, the text will not be wrapped)
+- `spacing` = `0.2` — the spacing between lines of text
+- `justify` = `'left'` — the horizontal justification of the text
+- `color` = `black` — sets the text color using both stroke and fill (this is the usual way)
+- `font-family` = `'IBMPlexSans'` — the font family (for display and size calculations)
+- `font-weight` = `100` — the font weight (for display and size calculations)
+
+**Example**
+
+Prompt: The text "Hello World! You can mix text and other elements together." with a blue square between "and" and "other". Put it in a rounded frame with padding.
+
+Generated code:
+```jsx
+<TextFrame rounded wrap={10}>
+  Hello World! You can mix text and <Square rounded fill={blue} /> other elements together.
+</TextFrame>
+```
+
+## Latex
+
+*Inherits*: **Text** > **Element**
+
+Creates a new `Math` math element from LaTeX source. Uses `MathJax` when available to render in SVG and calculate aspect ratio. As seen in the example, you will probably need to wrap the LaTeX in `{"..."}` to prevent syntax errors.
+
+Parameters:
+- `offset` — the position of the center of the element
+- `scale` — the proportional size of the element
+
+**Example**
+
+Prompt: There are two latex equations framed by rounded borders arranged vertically. The top one shows a Gaussian integral and the bottom one shows a trigonometric identity. They are framed by a square with the title "Facts".
+
+Generated code:
+```jsx
+<VStack spacing>
+  <TextFrame><Equation>{"\\int_0^{\\infty} \\exp(-x^2) dx = \\sqrt{\\pi}"}</Equation></TextFrame>
+  <TextFrame><Equation>{"\\sin^2(\\theta) + \\cos^2(\\theta) = 1"}</Equation></TextFrame>
+</VStack>
+```
+
+## TitleFrame
+
+*Inherits*: **Frame** > **Element**
+
+A special type of **Frame** that places a title element in a box centered on the line at the top of the frame. The title element can be either a proper Element or a string, in which case it will be wrapped in a **Text** element.
+
+Parameters:
+- `title` — the text or element to use as the title
+- `title-size` = `0.05` — the size of the title element
+- `adjust` = `true` — whether to adjust the padding and margin to account for the title element
+- `border` = `1` — the outer frame border width to use
+
+Subunits:
+- `title` — the title element
+
+**Example**
+
+Prompt: Various food emojis are arrnaged in a spaced out grid and framed with the title "Fruits & Veggies". Each emoji is framed by a rounded square with a gray background.
+
+Generated code:
+```jsx
+const emoji = [ '🍇', '🥦', '🍔', '🍉', '🍍', '🌽', '🍩', '🥝', '🍟' ]
+return <TitleFrame title="Fruits & Veggies" margin padding rounded>
+  <Grid rows={3} spacing={0.05}>
+    {emoji.map(e =>
+      <Frame aspect rounded fill padding><Text>{e}</Text></Frame>
+    )}
+  </Grid>
+</TitleFrame>
+```
+
+## Slide
+
+*Inherits*: **TitleFrame** > **Frame** > **Group** > **Element**
+
+Create a presentation slide with a title and some content. This stacks various `Text` elements and other `Element`s vertically. It will automatically apply the specified `wrap` value to the text elements. It defaults to using a `TitleFrame` for the title and a light gray rounded border.
+
+Parameters:
+- `children` = `[]` — a list of strings or `Element`s to array vertically
+- `wrap` = `25` — the width (in ems) to wrap the text at (if `null`, the text will not be wrapped)
+
+Subunits:
+- `title` — the title element
+- `text` — the text elements
+
+**Example**
+
+Prompt: A slide with a title, a plot of a sine wave, and some text describing the plot. Let the title be "The Art of the Sine Wave".
+
+Generated code:
+```jsx
+<Slide title="The Art of the Sine Wave">
+  <Text>Here's a plot of a sine wave below. It has to be the right size to fit in with the figure correctly.</Text>
+  <Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} grid fill={lightgray} margin={[0.25, 0.05]} aspect={2}>
+    <SymLine fy={sin} stroke={blue} stroke-width={2} />
+  </Plot>
+  <Text>It ranges from low to high and has some extra vertical space to allow us to see the full curve.</Text>
+</Slide>
+```

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

@@ -0,0 +1,123 @@
+# Utilities Elements
+
+## Math
+
+Here we collect a variety of global mathematical functions and constants. You can still use the core JavaScript `Math` library as well.
+
+## Constants
+
+- `e` — the base of the natural logarithm (e)
+- `pi` — the geometric constant (π)
+- `phi` — the golden ratio (φ)
+- `r2d` — the conversion factor between radians and degrees (180/π)
+- `d2r` — the conversion factor between degrees and radians (π/180)
+
+## Functions
+
+- `exp(x)` — the exponential function
+- `log(x)` — the natural logarithm
+- `sin(x)` — the sine function
+- `cos(x)` — the cosine function
+- `tan(x)` — the tangent function
+- `abs(x)` — the absolute value
+- `pow(x, y)` — the power function
+- `sqrt(x)` — the square root function
+- `sign(x)` — the sign function
+- `floor(x)` — the floor function
+- `ceil(x)` — the ceiling function
+- `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`
+
+**Example**
+
+Prompt: plot the exponential of sin(x) over [0, 2π]
+
+Generated code:
+```jsx
+<Box margin={0.15}>
+  <Plot aspect={phi} xlim={[0, 2*pi]} ylim={[0, 3]} grid>
+    <SymLine fy={x => exp(sin(x))} />
+  </Plot>
+</Box>
+```
+
+## Arrays
+
+There are a number of functions designed to make working with arrays easier. They largely mimic similar functions found in core Python or the `numpy` library.
+
+## Functions
+
+- `zip(...arrs)` — combine arrays `arrs` element-wise
+- `min(arrs)` — the minimum of arrays `arrs`
+- `max(arrs)` — the maximum of arrays `arrs`
+- `reshape(arr, shape)` — reshape array `arr` to given dimensions `shape`
+- `split(arr, len)` — split array `arr` into subarrays of length `len`
+- `sum(arr)` — sum the elements of array `arr`
+- `all(arr)` — check if all elements of array `arr` are true
+- `any(arr)` — check if any element of array `arr` is true
+- `add(arr1, arr2)` — add arrays `arr1` and `arr2` element-wise
+- `mul(arr1, arr2)` — multiply arrays `arr1` and `arr2` element-wise
+- `cumsum(arr, first=true)` — compute the cumulative sum of array `arr` with the option to start at zero
+- `norm(arr, degree=1)` — compute the `degree`-norm of array `arr`
+- `normalize(arr, degree=1)` — normalize array `arr` to have `degree`-norm one
+- `range(i0, i1, step=1)` — generate an array of evenly spaced values from `i0` to `i1` with spacing `step`
+- `linspace(x0, x1, n=50)` — generate an array of `n` evenly spaced values between `x0` and `x1`
+- `enumerate(arr)` — pair each element of array `arr` with its index
+- `repeat(x, n)` — repeat array `x` a total of `n` times
+- `meshgrid(x, y)` — create a mesh grid from arrays `x` and `y`
+- `lingrid(xlim, ylim, N)` — create a 2D grid of `N = [Nx, Ny]` points over the ranges `xlim` and `ylim`
+
+**Example**
+
+Prompt: a scatter plot of points with emojis for: mount fuji, a rocket, a whale, a watermellon, and a donut
+
+Generated code:
+```jsx
+<Plot xlim={[0, 6]} ylim={[0, 6]} xticks={7} yticks={7} margin={0.15}>
+  { [ '🗻', '🚀', '🐋', '🍉', '🍩' ].map((e, i) =>
+    <Text pos={[i+1, i+1]} rad={0.4}>{e}</Text>
+  ) }
+</Plot>
+```
+
+## Colors
+
+There are a few functions designed to manipulate colors in HEX, RGB, and HSL formats.
+
+**Constants**
+
+- `none` = `'none'` — a transparent color
+- `white` = `'#ffffff'` — a white color
+- `black` = `'#000000'` — a black color
+- `blue`= `'#1e88e5'` — a neon blue color
+- `red`= `'#ff0d57'` — a neon red color
+- `green`= `'#4caf50'` — a neon green color
+- `yellow`= `'#ffb300'` — a neon yellow color
+- `purple`= `'#9c27b0'` — a neon purple color
+- `gray`= `'#f0f0f0'` — a light gray color
+
+**Functions**
+
+- `hex2rgb(hex)` — convert a HEX color string to an RGB array
+- `rgb2hex(rgb)` — convert an RGB array to a HEX color string
+- `rgb2hsl(rgb)` — convert an RGB array to an HSL array
+- `palette(beg, end, lim=[0, 1])` — create a palette function that interpolates between two colors
+
+**Example**
+
+Prompt: A plot of an inverted sine wave where the line markers are sized in proportion to the amplitude and the color ranges from blue to red depending on the phase. The x-axis ticks are labeled with multiples of π. The x-axis is labeled "phase" and the y-axis is labeled "amplitude". The title is "Inverted Sine Wave".
+
+Generated code:
+```jsx
+const func = x => -sin(x)
+const pal = palette(blue, red, [-1, 1])
+const size = (x, y) => 0.1 * (1+abs(y))/2
+const shape = (x, y) => <Circle fill={pal(y)} />
+const xticks = linspace(0, 2, 6).slice(1).map(x => [x*pi, `${rounder(x, 1)} π`])
+return <Plot xlim={[0, 2*pi]} ylim={[-1, 1]} aspect={1.5} xanchor={0} xaxis-tick-side="both" xticks={xticks} grid xlabel="phase" ylabel="amplitude" title="Inverted Sine Wave" margin={0.25}>
+  <SymLine fy={func} />
+  <SymPoints fy={func} size={size} shape={shape} N={21}>
+  </SymPoints>
+</Plot>
+```

package/docs/code/group.jsx

@@ -1,5 +1,5 @@
 // a square in the top left and a circle in the bottom right
 <Group>
-  <Rect pos={[0.3, 0.3]} rad={0.1} spin={15} />
+  <Rectangle pos={[0.3, 0.3]} rad={0.1} spin={15} />
   <Ellipse pos={[0.7, 0.7]} rad={0.1} />
 </Group>

package/docs/code/points.jsx

@@ -4,7 +4,7 @@
     [0, 0.5], [0.5, 0], [-0.5, 0], [0, -0.5]
   ]}
   </Points>
-  <Rect pos={[0.5, 0.5]} rad={0.1} />
+  <Rectangle pos={[0.5, 0.5]} rad={0.1} />
   <Circle pos={[-0.5, -0.5]} rad={0.1} />
   {[0.5, 0.9, 1.5].map(a =>
     <SymLine fy={x => sin(a*x)} />

package/docs/code/rect.jsx

@@ -1,2 +1,2 @@
 // a rectangle on the left side of the figure with an aspect of roughly 1/2
-<Rect pos={[0.25, 0.5]} rad={[0.1, 0.2]}/>
+<Rectangle pos={[0.25, 0.5]} rad={[0.1, 0.2]}/>

package/docs/code/stack.jsx

@@ -1,6 +1,6 @@
 // a wide blue rectangle on top, with red and green squares side by side on the bottom. each one has rounded corners.
 <VStack spacing>
-  <Rect rounded fill={blue} />
+  <Rectangle rounded fill={blue} />
   <HStack stack-size={0.5} spacing>
     <Square rounded fill={red} />
     <Square rounded fill={green} />