gum-jsx 1.2.4 → 1.3.0

package/README.md

@@ -23,7 +23,7 @@ npm install gum-jsx
 Write some `gum.jsx` code:
 
 ```jsx
-<Plot xlim={[0, 2*pi]} ylim={[-1, 1]} grid margin={0.2} aspect={2}>
+<Plot xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} grid margin={[0.2, 0.1]} aspect={2}>
   <SymLine fy={sin} stroke={blue} stroke-width={2} />
 </Plot>
 ```
@@ -36,13 +36,17 @@ const elem = evaluateGum(jsx)
 const svg = elem.svg()
 ```
 
+Which will produce the following:
+
+<img src="image/plot.svg" alt="sine wave plot" width="750" />
+
 You can also use JavaScript directly:
 
 ```javascript
 import { Svg, Box, Text, Circle, Plot, SymLine, pi, sin } from 'gum'
 const elem = new Plot({
   children: new SymLine({ fy: sin, stroke: blue, stroke_width: 2 }),
-  xlim: [0, 2*pi], ylim: [-1, 1], grid: true, margin: 0.2, aspect: 2,
+  xlim: [0, 2*pi], ylim: [-1.5, 1.5], grid: true, margin: [0.2, 0.1], aspect: 2,
 })
 const svg = elem.svg()
 ```

package/docs/code/arrays.jsx

@@ -0,0 +1,6 @@
+// a scatter plot of points with emojis for: mount fuji, a rocket, a whale, a watermellon, and a donut
+<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>

package/docs/code/axis.jsx

@@ -0,0 +1,6 @@
+// a horizontal axis with 5 ticks labeled with emojis for: mount fuji, a rocket, a whale, a watermellon, and a donut
+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>

package/docs/code/barplot.jsx

@@ -0,0 +1,6 @@
+// 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.
+<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/docs/code/box.jsx

@@ -0,0 +1,4 @@
+// the text "hello!" in a frame with a dashed border and rounded corners
+<Box padding border rounded border-stroke-dasharray={5}>
+  <Text>hello!</Text>
+</Box>

package/docs/code/colors.jsx

@@ -0,0 +1,11 @@
+// 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".
+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/context.jsx

@@ -0,0 +1,7 @@
+// create a square context of radius 50 centered at 100 and map [0.3, 0.5] to pixel coordinates
+const prect = [ 50, 50, 150, 150 ]
+const ctx = <Context prect={prect} />
+const [fx, fy] = [0.3, 0.5]
+const [px, py] = ctx.mapPoint([fx, fy])
+const text = `[${fx}, ${fy}] → [${px}, ${py}]`
+return <Text>{text}</Text>

package/docs/code/edge.jsx

@@ -0,0 +1,6 @@
+// Two boxes with text in them that have black borders and gray interiors. The box in the upper left says "hello" and the box in the lower right says "world!". The arrowhead from "Hello" is filled in red and the arrowhead to "World!" is filled in blue.
+<Network aspect node-fill={gray} edge-arrow>
+  <Node id="hello" pos={[0.25, 0.25]}>Hello</Node>
+  <Node id="world" pos={[0.75, 0.75]}>World!</Node>
+  <Edge from="hello" to="world" from-fill={red} to-fill={blue} />
+</Network>

package/docs/code/element.jsx

@@ -0,0 +1,3 @@
+// create a custom triangle element called `Tri` and use it to create a triangle with a gray fill
+const Tri = ({ pos0, pos1, pos2, ...attr }) => <Shape {...attr}>{[pos0, pos1, pos2]}</Shape>
+return <Tri pos0={[0.5, 0.1]} pos1={[0.9, 0.9]} pos2={[0.1, 0.9]} fill={gray} />

package/docs/code/ellipse.jsx

@@ -0,0 +1,6 @@
+// two ellipses, one wider and one taller
+<Group>
+  <Ellipse pos={[0.3, 0.2]} rad={[0.2, 0.1]} />
+  <Ellipse pos={[0.6, 0.6]} rad={[0.2, 0.25]} />
+</Group>
+

package/docs/code/graph.jsx

@@ -0,0 +1,7 @@
+// a series of closely spaced squares rotating clockwise along a sinusoidal path
+<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>

package/docs/code/grid.jsx

@@ -0,0 +1,12 @@
+// draw a grid of square boxes filled in light gray. each box contains an arrow that is pointing in a particular direction. that direction rotates clockwise as we move through the grid.
+<Frame padding rounded>
+  <Grid rows={3} spacing>
+    { linspace(0, 360, 10).slice(0, 9).map(th =>
+      <Frame padding rounded fill>
+        <Group aspect={1} spin={th}>
+          <Arrow direc={0} tail={1} pos={[1, 0.5]} rad={0.5} />
+        </Group>
+      </Frame>
+    ) }
+  </Grid>
+</Frame>

package/docs/code/group.jsx

@@ -0,0 +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} />
+  <Ellipse pos={[0.7, 0.7]} rad={0.1} />
+</Group>

package/docs/code/gum.jsx

@@ -0,0 +1,4 @@
+// The text "GUM" in a simple frame
+<Frame padding rounded>
+  <Text>GUM</Text>
+</Frame>

package/docs/code/latex.jsx

@@ -0,0 +1,5 @@
+// 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".
+<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>

package/docs/code/line.jsx

@@ -0,0 +1,13 @@
+// draw a diagonal line in blue and a cup shaped line in red
+<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>

package/docs/code/math.jsx

@@ -0,0 +1,6 @@
+// plot the exponential of sin(x) over [0, 2π]
+<Box margin={0.15}>
+  <Plot aspect={phi} xlim={[0, 2*pi]} ylim={[0, 3]} grid>
+    <SymLine fy={x => exp(sin(x))} />
+  </Plot>
+</Box>

package/docs/code/network.jsx

@@ -0,0 +1,8 @@
+// A network with a node on the left saying "Hello world" and two nodes on the right, one saying "This is a test of wrapping capabilities" and the other containing a blue ellipse. There are arrows going from the left node to each of the right nodes. The nodes have gray backgrounds and rounded corners. The edges have white arrowheads.
+<Network aspect={1.5} node-yrad={0.15} node-rounded node-fill={gray} edge-fill={white}>
+  <Node id="hello" pos={[0.25, 0.5]} wrap={3}>Hello world</Node>
+  <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 from="hello" to="test" />
+  <Edge from="hello" to="ball" from-dir="s" curve={3} />
+</Network>

package/docs/code/node.jsx

@@ -0,0 +1,6 @@
+// Two boxes with text in them that have black borders and gray interiors. The box in the upper left says "hello" and the box in the lower right says "world!".
+<Network aspect node-fill={gray}>
+  <Node id="hello" pos={[0.25, 0.25]}>Hello</Node>
+  <Node id="world" pos={[0.75, 0.75]}>World!</Node>
+  <Edge from="hello" to="world" />
+</Network>

package/docs/code/plot.jsx

@@ -0,0 +1,5 @@
+// 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".
+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>

package/docs/code/points.jsx

@@ -0,0 +1,12 @@
+// A plot of three different increasing curves of varying steepness and multiple points spaced at regular intervals. The x-axis label is "time (seconds)", the y-axis label is "space (meters)", and the title is "Spacetime Vibes". There are axis ticks in both directions with assiated faint grid lines.
+<Plot xlim={[-1, 1]} ylim={[-1, 1]} grid margin={0.3} aspect xlabel="time (seconds)" ylabel="space (meters)" title="Spacetime Vibes">
+  <Points size={0.02}>{[
+    [0, 0.5], [0.5, 0], [-0.5, 0], [0, -0.5]
+  ]}
+  </Points>
+  <Rect 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)} />
+  )}
+</Plot>

package/docs/code/rect.jsx

@@ -0,0 +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]}/>

package/docs/code/shape.jsx

@@ -0,0 +1,14 @@
+// draw a blue triangle with a semi-transparent green square overlaid on top
+<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>

package/docs/code/slide.jsx

@@ -0,0 +1,8 @@
+// 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".
+<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/docs/code/spline.jsx

@@ -0,0 +1,13 @@
+// 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.
+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/docs/code/stack.jsx

@@ -0,0 +1,8 @@
+// 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} />
+  <HStack stack-size={0.5} spacing>
+    <Square rounded fill={red} />
+    <Square rounded fill={green} />
+  </HStack>
+</VStack>

package/docs/code/symfield.jsx

@@ -0,0 +1,4 @@
+// A vector field showing a function with gradient 100 * x * y. There should be a grid of 15 by 15 arrows. The stroke width should be 2.
+<Frame rounded={0.02} margin padding={0.075} border={2} fill>
+  <DataField func={(x, y) => 100 * x * y} xlim={[0, 1]} ylim={[0, 1]} N={15} stroke-width={2} />
+</Frame>

package/docs/code/symfill.jsx

@@ -0,0 +1,6 @@
+// a decaying sine wave filled in with blue
+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/docs/code/symline.jsx

@@ -0,0 +1,5 @@
+// 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)
+<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>

package/docs/code/sympoints.jsx

@@ -0,0 +1,6 @@
+// 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.
+const Pill = args => <Rect 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>

package/docs/code/symshape.jsx

@@ -0,0 +1,9 @@
+// Draw a rounded star shape with a blue fill. Wrap it in a rounded frame.
+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>

package/docs/code/symspline.jsx

@@ -0,0 +1,10 @@
+// smooth damped oscillation using sparse sampling (N=10)
+// 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>

package/docs/code/text.jsx

@@ -0,0 +1,4 @@
+// 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.
+<TextFrame rounded wrap={10}>
+  Hello World! You can mix text and <Square rounded fill={blue} /> other elements together.
+</TextFrame>

package/docs/code/textbox.jsx

@@ -0,0 +1,2 @@
+// draw the word "hello" in a rounded rectangular frame
+<TextBox border rounded margin>hello</TextBox>

package/docs/code/titleframe.jsx

@@ -0,0 +1,9 @@
+// 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.
+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>

package/docs/code/triangle.jsx

@@ -0,0 +1,7 @@
+// make a diamond shape with two triangles, the triangle on top is red and the triangle on the bottom is blue
+<Frame margin rounded padding fill>
+  <VStack>
+    <Triangle fill={red} aspect={1} stroke-width={0} />
+    <Triangle fill={blue} aspect={1} stroke-width={0} vflip />
+  </VStack>
+</Frame>

package/docs/code/unitline.jsx

@@ -0,0 +1,5 @@
+// draw a plus symbol in a frame and place it in the bottom left corner
+<Group pos={[0.3, 0.7]} rad={0.2}>
+  <VLine />
+  <HLine />
+</Group>

package/docs/gala/complex_plot.jsx

@@ -0,0 +1,21 @@
+const xlim = [ -4, 4 ]; const ylim = [ -2, 2 ]
+const Curve = ({ fx, stroke }) => <SymLine fx={fx} ylim={ylim} stroke={stroke} stroke-width={2} N={250} />
+const xlabel = <Latex>x = a + bi</Latex>
+const ylabel = <Latex>c</Latex>
+return <Plot aspect={2} margin={0.3} xlim={xlim} ylabel={ylabel} xlabel={xlabel} ylabel-offset={0.075} ylabel-size={0.02}>
+  <Mesh2D xlocs={41} ylocs={21} xlim={xlim} ylim={ylim} opacity={0.3} />
+  <HLine loc={0} lim={xlim} opacity={0.3} />
+  <VLine loc={0} lim={ylim} opacity={0.3} />
+  <Curve fx={y => -y + sqrt(max(0, y*y-1))} stroke={blue} />
+  <Curve fx={y => -y - sqrt(max(0, y*y-1))} stroke={blue} />
+  <Curve fx={y => +sqrt(max(0, 1-y*y))} stroke={red} />
+  <Curve fx={y => -sqrt(max(0, 1-y*y))} stroke={red} />
+  <Dot pos={[-1, 1]} rad={0.04} color={blue} />
+  <Dot pos={[1, -1]} rad={0.04} color={blue} />
+  <Dot pos={[0, -1]} rad={0.04} color={red} />
+  <Dot pos={[0, +1]} rad={0.04} color={red} />
+  <Dot pos={[0, 0]} rad={0.04} />
+  <Text color={blue} pos={[-2.5, 1.1]} yrad={0.2}>real</Text>
+  <Text color={red} pos={[1.6, -0.4]} yrad={0.2}>imag</Text>
+  <Latex pos={[2.3, 1.6]} yrad={0.2}>f(x) = x^2 + 2cx + 1</Latex>
+</Plot>

package/docs/gala/flux_capacitance.jsx

@@ -0,0 +1,5 @@
+<Plot grid margin={0.3} xlim={[0, 2*pi]} ylim={[-1.5, 1.5]} xlabel="Phase (radians)" ylabel="Interference" title="Flux Capacitance">
+  <SymFill fy1={sin} fy2={cos} fill={blue} opacity={0.25} />
+  <SymLine fy={sin} />
+  <SymLine fy={cos} />
+</Plot>

package/docs/gala/metal_grid.jsx

@@ -0,0 +1,17 @@
+const [ n, m ] = [ 9, 16 ]
+const pal = palette('#00d4ff', '#7c3aed', [0, m-1])
+const pts = [
+  [0.12, 0.55], [0.25, 0.20], [0.42, 0.78],
+  [0.60, 0.30], [0.78, 0.72], [0.88, 0.45],
+]
+return <Frame border={2} rounded={0.03} fill={darkgray} padding={0.03} margin>
+  <Frame rounded={0.02} fill={black} padding={0.025}>
+    <Grid rows={n} cols={m} opacity={0.7}>
+      {range(0, n*m).map(i => <Rect rounded={0.2} fill={pal(i%m)} /> )}
+    </Grid>
+    <Group stroke-linecap="round">
+      <Spline curve={0.65} stroke={gray} stroke-width={15} opacity={0.25}>{pts}</Spline>
+      <Spline curve={0.65} stroke={gray} stroke-width={5}>{pts}</Spline>
+    </Group>
+  </Frame>
+</Frame>

package/docs/gala/plot_manual.jsx

@@ -0,0 +1,11 @@
+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} />
+    <HAxis ticks={5} lim={[0, 2*pi]} pos={[pi, -1]} rad={[pi, 0.04]} />
+    <VAxis ticks={5} lim={[-1, 1]} pos={[0, 0]} rad={[0.04*ratio, 1]} />
+    <SymLine fy={sin} xlim={[0, 2*pi]} />
+  </Group>
+</Box>

package/docs/gala/polygon_slide.jsx

@@ -0,0 +1,30 @@
+const pal = palette(blue, purple, [3, 8])
+const shapes = [
+  [3, 'Triangle'], [4, 'Square'  ], [5, 'Pentagon'],
+  [6, 'Hexagon' ], [7, 'Heptagon'], [8, 'Octagon' ],
+]
+
+const RegularPolygon = ({ n, ...args }) =>
+  <SymShape {...args}
+    aspect spin={90*(n-2)/n}
+    xlim={[-1, 1]} ylim={[-1, 1]}
+    tvals={linspace(0, 2*pi, n+1)}
+    fx={cos} fy={sin}
+  />
+
+return <Slide title="Simple Regular Polygons" wrap={25}>
+  <Text>
+    A regular polygon has equal side lengths and equal interior angles. Below are examples for
+    <Latex>{"n \\in \\{3, \\ldots, 8\\}"}</Latex>
+  </Text>
+  <Grid rows={2} spacing={[0.05, 0.075]}>
+    { shapes.map(([n, s]) =>
+      <Frame rounded fill padding aspect>
+        <VStack spacing>
+          <RegularPolygon stack-size={0.8} n={n} fill={pal(n)} />
+          <Text stack-size={0.2}>{`${s} (${n})`}</Text>
+        </VStack>
+      </Frame>
+    ) }
+  </Grid>
+</Slide>

package/docs/gala/punk_rock.jsx

@@ -0,0 +1,7 @@
+<Frame rounded={0.15} padding margin fill={gray} rotate={-25}>
+  <HStack aspect={7.5} spacing={0.075}>
+    <TextFrame fill={red} padding rounded={[0.1, 0, 0, 0.1]}>Punk</TextFrame>
+    <TextFrame fill={blue} padding rounded={0}>Rock</TextFrame>
+    <TextFrame fill={green} padding rounded={[0, 0.1, 0.1, 0]} aspect>→</TextFrame>
+  </HStack>
+</Frame>

package/docs/gala/set_theory.jsx

@@ -0,0 +1,11 @@
+const Set = ({ label, label_pos, label_rad = 0.15, fill = "#C8CAE3", ...args }) =>
+  <Frame flex fill={fill} shape={<Ellipse/>} {...args}>
+    <Text pos={label_pos} rad={label_rad}>{label}</Text>
+  </Frame>
+return <TitleFrame rounded padding={0.2} margin={0.3} title="Set Theory">
+  <Group aspect>
+    <Set label="A" label-pos={[0.2, 0.7]} label-rad={0.07} fill-opacity={0.5} />
+    <Set label="B" pos={[0.60, 0.20]} rad={0.1} />
+    <Set label="C" pos={[0.55, 0.75]} rad={0.15} />
+  </Group>
+</TitleFrame>

package/docs/gala/slick_bars.jsx

@@ -0,0 +1,12 @@
+const [labs, vals] = zip(
+  ["GPT-4o", 0.4], ["OpenAI o1", 3.2], ["OpenAI o4-mini", 8.3], ["Gemini 3 Pro", 12.4],
+  ["OpenAI o3", 14.1], ["Grok 4", 15.9], ["Claude Opus 4.5", 17.5], ["GPT-5.2", 25.2],
+)
+return <Plot
+  aspect={1.6} margin={[0.2, 0.1, 0.2, 0.35]} ylim={[0, 30]} xanchor={-0.6} yanchor={-0.55}
+  xticks={enumerate(labs)} yticks={linspace(0, 30, 7)} axis-tick-side="outer" xaxis-line-lim={[0, 7]}
+  xaxis-label-spin={-45} xaxis-label-justify="right" xaxis-label-loc={0.7}
+>
+  <Bars rounded={0.1} width={0.85}>{vals}</Bars>
+  {vals.map((s, i) => <Span pos={[i, s+1.3]} yrad={0.75}>{`${s}%`}</Span> )}
+</Plot>

package/docs/gala/spline_star.jsx

@@ -0,0 +1,20 @@
+// parameters
+const n = 5
+const R = 0.7
+const c = 0.6
+
+// get inner/outer vertex angles
+const theta0 = linspace(0, 2 * pi, n + 1).slice(0, -1).map(t => t - pi / 2)
+const theta1 = theta0.map(t => t + pi / n)
+
+// get inner/outer point positions
+const polar = (r, t) => [ r * cos(t), r * sin(t) ]
+const points0 = theta0.map(t => polar(1, t))
+const points1 = theta1.map(t => polar(R, t))
+
+// return full spline
+return <Frame aspect margin padding rounded fill={gray}>
+  <Spline closed fill={blue} curve={c} coord={[-1, -1, 1, 1]}>
+    {zip(points0, points1).flat()}
+  </Spline>
+</Frame>

package/docs/gala/the_nexus.jsx

@@ -0,0 +1,14 @@
+<Frame border={2} rounded={0.02} clip margin>
+  <Plot
+    aspect={1.5} axis={false} xgrid={31} ygrid={21}
+    xlim={[-4*pi, 4*pi]} ylim={[-1.5, 1.5]}
+  >
+    { linspace(0, pi, 10).map(p =>
+      <SymSpline
+        fy={x => cos(x-p) * exp(-0.05*x*x)}
+        stroke={interp(red, blue, p/pi)}
+        stroke-width={2} N={50}
+      />
+    )}
+  </Plot>
+</Frame>

package/docs/meta.json

@@ -0,0 +1,50 @@
+{
+    "core": [
+        "gum",
+        "element",
+        "group",
+        "context"
+    ],
+    "layout": [
+        "box",
+        "stack",
+        "grid",
+        "points"
+    ],
+    "shapes": [
+        "rect",
+        "ellipse",
+        "line",
+        "shape",
+        "spline"
+    ],
+    "text": [
+        "text",
+        "latex",
+        "titleframe",
+        "slide"
+    ],
+    "symbolic": [
+        "sympoints",
+        "symline",
+        "symshape",
+        "symspline",
+        "symfill"
+    ],
+    "plotting": [
+        "graph",
+        "plot",
+        "axis",
+        "barplot"
+    ],
+    "networks": [
+        "node",
+        "edge",
+        "network"
+    ],
+    "utilities": [
+        "math",
+        "arrays",
+        "colors"
+    ]
+}

package/docs/text/arrays.md

@@ -0,0 +1,25 @@
+# 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`

package/docs/text/axis.md

@@ -0,0 +1,20 @@
+# Axis
+
+*Inherits*: [Group](/docs/Group) > [Element](/docs/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](/docs/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)