gum-jsx 1.4.0 → 1.5.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 Compendium Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img src="image/logo.svg" alt="logo" width="500" />
+<img src="image/logo.png" alt="logo" width="500" />
 <br/>
 </div>
 
@@ -38,7 +38,7 @@ const svg = elem.svg()
 
 Which will produce the following:
 
-<img src="image/plot.svg" alt="sine wave plot" width="750" />
+<img src="image/plot.png" alt="sine wave plot" width="750" />
 
 You can also use JavaScript directly:
 

package/docs/code/Arc.jsx

@@ -0,0 +1,5 @@
+// elliptical and circular arcs using degree ranges
+<Group>
+  <Arc pos={[0.32, 0.5]} size={[0.44, 0.32]} start={-45} end={210} stroke={blue} stroke-width={2} />
+  <Arc pos={[0.72, 0.5]} size={0.32} start={90} end={-150} stroke={red} stroke-width={2} />
+</Group>

package/docs/code/{arrays.jsx → Arrays.jsx}

@@ -1,6 +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>
+    <Text pos={[i+1, i+1]} size={0.8}>{e}</Text>
   ) }
 </Plot>

package/docs/code/Arrow.jsx

@@ -0,0 +1,8 @@
+// the text "Blue Square" on the left with an arrow pointing to a blue square on the right
+<Frame rounded>
+  <Group aspect={2}>
+    <Text pos={[0.2, 0.5]} ysize={0.2} wrap={4} justify="center">Blue Square</Text>
+    <Arrow points={[[0.3, 0.5], [0.6, 0.5]]} />
+    <Square pos={[0.75, 0.5]} ysize={0.5} rounded fill={blue} />
+  </Group>
+</Frame>

package/docs/code/{barplot.jsx → BarPlot.jsx}

@@ -1,6 +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} />
+  <Bar label="A" value={3} fill={red} />
+  <Bar label="B" value={8.5} fill={blue} />
+  <Bar label="C" value={6.5} fill={green} />
 </BarPlot>

package/docs/code/Bracket.jsx

@@ -0,0 +1,7 @@
+// the ratio of alpha to beta enclosed in parentheses
+<Bracket>
+  <Frac>
+    <MathSymbol>\alpha</MathSymbol>
+    <MathSymbol>\beta</MathSymbol>
+  </Frac>
+</Bracket>

package/docs/code/{colors.jsx → Colors.jsx}

@@ -1,11 +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 size = (x, y) => 0.2 * (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 fy={func} point-size={size} point-shape={shape} N={21}>
   </SymPoints>
 </Plot>

package/docs/code/{edge.jsx → Edge.jsx}

@@ -2,5 +2,5 @@
 <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} />
+  <Edge start="hello" end="world" start-fill={red} end-fill={blue} />
 </Network>

package/docs/code/{element.jsx → Element.jsx}

@@ -1,3 +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>
+const Tri = ({ pos0, pos1, pos2, ...attr }) => <Shape {...attr} points={[pos0, pos1, pos2]} />
 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,5 @@
+// two ellipses, one wider and one taller
+<Group>
+  <Ellipse pos={[0.3, 0.2]} size={[0.4, 0.2]} />
+  <Ellipse pos={[0.6, 0.6]} size={[0.4, 0.5]} />
+</Group>

package/docs/code/Fill.jsx

@@ -0,0 +1,6 @@
+// shade the area between a zigzag curve and the x-axis
+const curve = [[0, 1], [2, 3], [4, 2], [6, 5], [8, 4], [10, 6]]
+return <Graph xlim={[0, 10]} ylim={[0, 7]} aspect={phi}>
+  <VFill points1={curve} points2={0} fill={blue} fill-opacity={0.4} />
+  <Line points={curve} stroke={blue} />
+</Graph>

package/docs/code/Frac.jsx

@@ -0,0 +1,13 @@
+// a fraction with x + 1 over y - 1
+<Frac>
+  <MathText>
+    <MathSymbol>x</MathSymbol>
+    <MathSymbol>{'+'}</MathSymbol>
+    <MathSymbol>1</MathSymbol>
+  </MathText>
+  <MathText>
+    <MathSymbol>y</MathSymbol>
+    <MathSymbol>{'-'}</MathSymbol>
+    <MathSymbol>1</MathSymbol>
+  </MathText>
+</Frac>

package/docs/code/{graph.jsx → Graph.jsx}

@@ -1,7 +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} />}
+    fy={sin} xlim={[0, 2*pi]} point-size={1} N={100}
+    point-shape={x => <Square rounded spin={r2d*x} />}
   />
-</Graph>
+</Graph>

package/docs/code/{grid.jsx → Grid.jsx}

@@ -2,9 +2,9 @@
 <Frame padding rounded>
   <Grid rows={3} spacing>
     { linspace(0, 360, 10).slice(0, 9).map(th =>
-      <Frame padding rounded fill>
+      <Frame padding rounded>
         <Group aspect={1} spin={th}>
-          <Arrow direc={0} tail={1} pos={[1, 0.5]} rad={0.5} />
+          <Arrow points={[[0, 0.5], [1, 0.5]]} arrow-size={0.4} />
         </Group>
       </Frame>
     ) }

package/docs/code/Group.jsx

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

package/docs/code/Images.jsx

@@ -0,0 +1,6 @@
+// load "image.png" and display a 2x1 clip from the center
+<Box rounded clip>
+  <Group aspect={2}>
+    <LoadImage id="image.png" xsize={1} />
+  </Group>
+</Box>

package/docs/code/{latex.jsx → Latex.jsx}

@@ -1,5 +1,9 @@
 // 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>
+  <TextFrame rounded border={2}>
+    <Latex>{"\\int_0^{\\infty} \\exp(-x^2) dx = \\sqrt{\\pi}"}</Latex>
+  </TextFrame>
+  <TextFrame rounded border={2}>
+    <Latex>{"\\sin^2(\\theta) + \\cos^2(\\theta) = 1"}</Latex>
+  </TextFrame>
 </VStack>

package/docs/code/{line.jsx → Line.jsx}

@@ -1,13 +1,13 @@
 // draw a diagonal line in blue and a cup shaped line in red
 <Group>
-  <Line stroke={blue}>{[
+  <Line stroke={blue} points={[
     [0.2, 0.2],
     [0.8, 0.8],
-  ]}</Line>
-  <Line stroke={red}>{[
+  ]} />
+  <Line stroke={red} points={[
     [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,14 @@
+// use polar to place points around a circle
+const center = [0.5, 0.5]
+const ring = range(10).map(i => {
+  const radius = i % 2 == 0 ? 0.32 : 0.16
+  return polar([radius, -90 + 36 * i], center)
+})
+const spokes = range(5).map(i => polar([0.32, -90 + 72 * i], center))
+
+return <Group aspect={1}>
+  <Circle pos={center} size={0.64} stroke={darkgray} />
+  <Shape points={ring} stroke={blue} stroke-width={2} />
+  {spokes.map(pos => <Line points={[center, pos]} stroke={red} stroke-width={1.5} />)}
+  {ring.map(pos => <Dot pos={pos} size={0.03} fill={blue} />)}
+</Group>

package/docs/code/MathText.jsx

@@ -0,0 +1,10 @@
+// a MathText row expressing "alpha = blue x red" where blue and red are represented by squares
+<TextFrame rounded>
+  <MathText>
+    <MathSymbol>\alpha</MathSymbol>
+    <MathSymbol>=</MathSymbol>
+    <Square rounded fill={blue} />
+    <MathSymbol>\times</MathSymbol>
+    <Square rounded fill={red} />
+  </MathText>
+</TextFrame>

package/docs/code/{network.jsx → Network.jsx}

@@ -1,8 +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}>
+<Network aspect={1.5} node-ysize={0.3} 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} />
+  <Edge start="hello" end="test" />
+  <Edge start="hello" end="ball" start-side="s" curve={3} />
 </Network>

package/docs/code/{node.jsx → Node.jsx}

@@ -2,5 +2,5 @@
 <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" />
+  <Edge start="hello" end="world" />
 </Network>

package/docs/code/{points.jsx → Points.jsx}

@@ -1,11 +1,10 @@
 // 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}>{[
+  <Points point-size={0.04} points={[
     [0, 0.5], [0.5, 0], [-0.5, 0], [0, -0.5]
-  ]}
-  </Points>
-  <Rectangle pos={[0.5, 0.5]} rad={0.1} />
-  <Circle pos={[-0.5, -0.5]} rad={0.1} />
+  ]} />
+  <Rectangle pos={[0.5, 0.5]} size={0.2} />
+  <Circle pos={[-0.5, -0.5]} size={0.2} />
   {[0.5, 0.9, 1.5].map(a =>
     <SymLine fy={x => sin(a*x)} />
   )}

package/docs/code/{rect.jsx → Rect.jsx}

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

package/docs/code/{shape.jsx → Shape.jsx}

@@ -1,14 +1,14 @@
 // draw a blue triangle with a semi-transparent green square overlaid on top
 <Group>
-  <Shape fill={blue} stroke={none}>{[
+  <Shape fill={blue} stroke={none} points={[
     [0.5, 0.2],
     [0.8, 0.8],
     [0.2, 0.8]
-  ]}</Shape>
-  <Shape fill={green} stroke={none} opacity={0.5}>{[
+  ]} />
+  <Shape fill={green} stroke={none} opacity={0.5} points={[
     [0.3, 0.3],
     [0.7, 0.3],
     [0.7, 0.7],
     [0.3, 0.7]
-  ]}</Shape>
+  ]} />
 </Group>

package/docs/code/{spline.jsx → Spline.jsx}

@@ -7,7 +7,7 @@ const points = [
   [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>
+  <Spline closed stroke={blue} fill={gray} points={points} />
+  <Shape stroke={red} points={points} />
+  <Points point-size={0.02} points={points} />
 </Frame>

package/docs/code/{stack.jsx → Stack.jsx}

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

package/docs/code/SupSub.jsx

@@ -0,0 +1,8 @@
+// x squared with an i subscript
+<TextFrame rounded border={10} fill={gray} margin>
+  <MathText>
+    <SupSub sup="2" sub="i">
+      <MathSymbol>x</MathSymbol>
+    </SupSub>
+  </MathText>
+</TextFrame>

package/docs/code/{symfield.jsx → SymField.jsx}

@@ -1,4 +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>
-  <SymField func={(x, y) => 100 * x * y} xlim={[0, 1]} ylim={[0, 1]} N={15} stroke-width={2} />
+<Frame rounded={0.02} margin padding={0.075}>
+  <SymField func={(x, y) => 100 * x * y} xlim={[0, 1]} ylim={[0, 1]} N={15} />
 </Frame>

package/docs/code/{sympoints.jsx → SymPoints.jsx}

@@ -2,5 +2,5 @@
 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))}/>} />
+  <SymPoints fy={sin} N={11} point-size={0.25} point-shape={x => <Pill spin={-r2d*atan(cos(x))}/>} />
 </Plot>

package/docs/code/{symspline.jsx → SymSpline.jsx}

@@ -6,5 +6,5 @@ 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} />
+  <SymPoints fy={decay} N={10} point-size={0.1} fill={red} />
 </Plot>

package/docs/code/Tables.jsx

@@ -0,0 +1,6 @@
+// load "data.csv" and plot each row as a blue dot
+return <Graph xlim={[0, 10]} ylim={[0, 10]}>
+  {loadTable('data.csv').map(({ x, y }) =>
+    <Dot pos={[x, y]} rad={0.1} fill={blue} />
+  )}
+</Graph>

package/docs/code/{text.jsx → Text.jsx}

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

package/docs/code/{unitline.jsx → UnitLine.jsx}

@@ -1,5 +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}>
+<Group pos={[0.3, 0.7]} size={0.4}>
   <VLine />
   <HLine />
 </Group>

package/docs/data/data.csv

@@ -0,0 +1,7 @@
+x,y
+1,2
+2.5,7.5
+4,4
+6,8
+8,3
+9,6

package/docs/meta.json

@@ -1,50 +1,60 @@
 {
     "core": [
-        "gum",
-        "element",
-        "group",
-        "context"
+        "Gum",
+        "Element",
+        "Group"
     ],
     "layout": [
-        "box",
-        "stack",
-        "grid",
-        "points"
-    ],
-    "shapes": [
-        "rect",
-        "ellipse",
-        "line",
-        "shape",
-        "spline"
+        "Box",
+        "Stack",
+        "Grid",
+        "Points"
+    ],
+    "geometry": [
+        "Rect",
+        "Ellipse",
+        "Arc",
+        "Line",
+        "Shape",
+        "Fill",
+        "Spline",
+        "Arrow"
     ],
     "text": [
-        "text",
-        "latex",
-        "titleframe",
-        "slide"
+        "Text",
+        "TitleFrame",
+        "Slide"
+    ],
+    "math": [
+        "Latex",
+        "MathText",
+        "SupSub",
+        "Frac",
+        "Bracket"
     ],
     "symbolic": [
-        "sympoints",
-        "symline",
-        "symshape",
-        "symspline",
-        "symfill"
+        "SymPoints",
+        "SymLine",
+        "SymShape",
+        "SymSpline",
+        "SymFill"
     ],
     "plotting": [
-        "graph",
-        "plot",
-        "axis",
-        "barplot"
+        "Graph",
+        "Plot",
+        "Axis",
+        "BarPlot"
     ],
     "networks": [
-        "node",
-        "edge",
-        "network"
+        "Node",
+        "Edge",
+        "Network"
     ],
     "utilities": [
-        "math",
-        "arrays",
-        "colors"
+        "Math",
+        "Arrays",
+        "Colors",
+        "Tables",
+        "Images"
     ]
 }

package/docs/text/Arc.md

@@ -0,0 +1,11 @@
+# Arc
+
+*Inherits*: [Element](/docs/Element)
+
+This draws an elliptical arc that inscribes its allocated rectangle, like [Ellipse](/docs/Ellipse), but only over a selected angular interval.
+
+Parameters:
+- `degrees` = `[0, 360]` — start and end angle in degrees
+- `range` — alias for `degrees`
+
+Angles follow gum's usual screen-space convention: `0` points right and `90` points down.

package/docs/text/{arrays.md → Arrays.md}

@@ -12,8 +12,6 @@ There are a number of functions designed to make working with arrays easier. The
 - `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

package/docs/text/Arrow.md

@@ -0,0 +1,21 @@
+# Arrow
+
+*Inherits*: [Group](/docs/Group) > [Element](/docs/Element)
+
+Draws a straight arrow between two points. This is the straight-line counterpart to [ArrowSpline](/docs/ArrowSpline): it uses `from` and `to` endpoints, but renders a simple [Line](/docs/Line) shaft instead of a curved spline.
+
+The line and arrowhead can be styled separately using prefixed parameters. The head is built from **ArrowHead**-style geometry, while the shaft is a simple [Line](/docs/Line).
+
+The arrow direction is inferred automatically from `from` to `to`.
+
+Parameters:
+- `points` — the points to draw the arrow between (can include intermediate points)
+- `start-dir` / `end-dir` — the direction of the arrowheads at the start and end
+- `arrow` / `arrow-start` / `arrow-end` — toggles whether the respective arrowheads are included. Defaults to `true` for `arrow-end` and `false` for `arrow-start`, meaning a directed graph edge
+- `arrow-size` = `0.04` — size of the arrowhead
+- `curve` = `null` — curvature factor forwarded to the spline (`null` or zero means straight line)
+
+Subunit names:
+- `line` — forwarded to the shaft line
+- `arrow` — forwarded to the arrowhead
+- `start` / `end` — forwarded to the start and end arrowheads respectively

package/docs/text/Axis.md

@@ -0,0 +1,29 @@
+# Axis
+
+*Inherits*: [Group](/docs/Group) > [Element](/docs/Element)
+
+A single vertical or horizontal axis for plotting. This includes the central line, the perpendicular 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` — either an integer for evenly spaced ticks, a list of tick locations, or a list of tick `[location, label]` pairs
+- `lim` = `[0, 1]` — the extent of the element along the main axis
+- `tick-side` = `'inner'` — 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` = `'outer'` — same as `tick-side` but for the labels
+- `label-size` = `1.5` — the cross-axis extent allocated for labels
+- `label-offset` = `0.75` — the gap between the ticks and the labels
+- `label-justify` — horizontal justification for labels (defaults to `'right'` for `VAxis` outer labels)
+- `prec` — the number of significant digits for auto-generated tick labels
+- `children` — a list of elements to use instead of those generated by `ticks`. Each label must have a `loc` to place it and its associated tick. Labels can optionally carry a `tick` element and `tick-size` to customize their tick marks (see below).
+
+Child parameters:
+- `loc` — the position along the axis at which to place the tick and label
+- `tick` — an optional custom **Element** to use as the tick mark instead of the default line
+- `tick-size` = `1` — a fraction controlling the length of the tick mark relative to the full tick extent, respecting `tick-side`
+
+Subunits:
+- `line`: the central line along the main axis
+- `tick`: the perpendicular tick marks
+- `label`: the labels annotating the tick marks

package/docs/text/{barplot.md → BarPlot.md}

@@ -2,13 +2,13 @@
 
 *Inherits*: [Plot](/docs/Plot) > [Group](/docs/Group) > [Element](/docs/Element)
 
-Makes a plot featuring a bar graph. This largely wraps the functionality of [Plot](/docs/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.
+Makes a plot featuring a bar graph. This largely wraps the functionality of [Plot](/docs/plot) but takes care of labelling and arranging the `xaxis` information. You can provide `label` and `value` 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
+- `value` — the height of the bar
 
 Parameters:
 - `direc` = `v` — the orientation of the bars in the plot

package/docs/text/{box.md → Box.md}

@@ -15,6 +15,7 @@ Parameters:
 - `margin` = `0` / `0.1` — the margin to be added (outside border)
 - `border` = `0` / `1` — the border width to use (stroke in pixels)
 - `rounded` = `0` / `0.1` — the border rounding to use (proportional to the box size)
+- `fill` = `null` — the background color to use (default is no fill)
 - `adjust` = `true` — whether to adjust values for aspect ratio
 - `shape` = `Rect` — the shape class to use for the border
 - `clip` = `false` — whether to clip the contents to the border shape

package/docs/text/Bracket.md

@@ -0,0 +1,12 @@
+# Bracket
+
+*Inherits*: [HStack](/docs/HStack) > [Group](/docs/Group) > [Element](/docs/Element)
+
+Wraps a single child in a matched pair of delimiters. The delimiter can be chosen from a preset name or given as a pair to mix left and right shapes.
+
+Parameters:
+- `children` — a single element to enclose
+- `delim` = `'round'` — one of `'round'`, `'square'`, `'curly'`, `'angle'`, or a `[left, right]` pair of those values
+
+Subunit names:
+- `delim` — forwarded to the generated delimiter symbols, for example `delim-level`

package/docs/text/Edge.md

@@ -0,0 +1,16 @@
+# Edge
+
+*Inherits*: [Arrow](/docs/Arrow) > [Group](/docs/Group) > [Element](/docs/Element)
+
+This creates a cubic spline path from one element (typically a [Node](/docs/Node)) to another with optional arrowheads at either or both ends. It is named **Edge** because of its usage in network diagrams with [Network](/docs/Network). The emanation directions are automatically inferred from the relative node positions but can be overriden as well.
+
+Use [Arrow](/docs/Arrow) for creating edges between arbitrary points and for details on options for the path and arrowheads.
+
+Parameters:
+- `start`/`end` — the beginning and ending element for the path
+- `start-side`/`end-side` — the attachment side of the arrowheads (cardinal strings)
+- `start-loc`/`end-loc` — the attachment location of the arrowheads (a number between 0 and 1)
+- `points` — the intermediate points to draw the spline between
+- `arrow` / `arrow-start` / `arrow-end` — toggles whether the respective arrowheads are included. Defaults to `true` for `arrow-end` and `false` for `arrow-start`, meaning a directed graph edge
+- `arrow-size` = `0.04` — the arrowhead size to use for both arrows
+- `curve` = `2` — curvature factor forwarded to the spline