gum-jsx 1.6.0 → 1.6.2

package/docs/code/Arc.jsx

@@ -1,5 +1,5 @@
 // elliptical and circular arcs using start and end angles
 <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>
+  <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} />
+</Group>

package/docs/code/Axis.jsx

@@ -2,5 +2,5 @@
 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} />
+  <HAxis aspect={10} ticks={ticks} tick-side="outer" label-size={1} label-offset={0.25} />
 </Box>

package/docs/code/Element.jsx

@@ -1,3 +1,5 @@
-// 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} points={[pos0, pos1, pos2]} />
-return <Tri pos0={[0.5, 0.1]} pos1={[0.9, 0.9]} pos2={[0.1, 0.9]} fill={gray} />
+// draw a 2x1 rectangle in red with a blue square embedded within it
+<Group aspect={2}>
+  <Rect stroke={red} />
+  <Square stroke={blue} />
+</Group>

package/docs/code/Line.jsx

@@ -1,13 +1,8 @@
-// draw a diagonal line in blue and a cup shaped line in red
-<Group>
-  <Line stroke={blue} points={[
-    [0.2, 0.2],
-    [0.8, 0.8],
-  ]} />
-  <Line stroke={red} points={[
-    [0.3, 0.3],
-    [0.3, 0.7],
-    [0.7, 0.7],
-    [0.7, 0.3],
-  ]} />
-</Group>
+// draw a piecewise line spiraling outwards (with dots at vertices)
+const spiral = linspace(0, 5, 25).map(t => polar(360 * t, t/5))
+return <Box margin>
+  <Graph coord={[-1, -1, 1, 1]}>
+    <Line points={spiral} />
+    <Points points={spiral} point-size={0.03} />
+  </Graph>
+</Box>

package/docs/code/Math.jsx

@@ -1,14 +1,10 @@
-// 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)
+// embed a five point star in a circle. place red dots at its vertices.
+const verts = linspace(0, 360, 10, false).map((t, i) => {
+  const radius = i % 2 == 0 ? 1 : 0.5
+  return polar(90 + t, radius)
 })
-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>
+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>

package/docs/code/RoundedLine.jsx

@@ -1,15 +1,11 @@
 // a city-block route in blue with rounded corners, with the underlying
 // vertices marked as black dots to show how the corners are rounded
 const points = [
-  [0.10, 0.20],
-  [0.40, 0.20],
-  [0.40, 0.80],
-  [0.70, 0.80],
-  [0.70, 0.50],
-  [0.90, 0.50],
+  [-0.8,  0.6], [-0.2,  0.6], [-0.2, -0.6],
+  [ 0.4, -0.6], [ 0.4,  0.0], [ 0.8,  0.0],
 ]
-return <Frame margin>
-  <Line opacity={0.3} points={points} />
-  <RoundedLine stroke={blue} stroke-width={2} radius={0.08} points={points} />
-  <Points point-size={0.015} points={points} />
-</Frame>
+return <Graph aspect padding>
+  <Line points={points} opacity={0.3} />
+  <RoundedLine points={points} stroke={blue} stroke-width={2} radius={0.1} />
+  <Points points={points} point-size={0.03} />
+</Graph>

package/docs/code/Shape.jsx

@@ -1,14 +1,8 @@
-// draw a blue triangle with a semi-transparent green square overlaid on top
-<Group>
-  <Shape fill={blue} stroke={none} points={[
-    [0.5, 0.2],
-    [0.8, 0.8],
-    [0.2, 0.8]
-  ]} />
-  <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]
-  ]} />
-</Group>
+// draw a stop sign
+const hexagon = linspace(0, 360, 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} />
+    <Text pos={[0, 0]} xsize={1.5} color={white} font-weight={bold}>STOP</Text>
+  </Graph>
+</Box>

package/docs/code/Spline.jsx

@@ -7,7 +7,9 @@ const points = [
   [0.50, 0.50],
 ]
 return <Frame rounded margin>
-  <Spline closed stroke={blue} fill={gray} points={points} />
-  <Shape stroke={red} points={points} />
-  <Points point-size={0.02} points={points} />
+  <Group>
+    <Spline closed stroke={blue} fill={gray} points={points} />
+    <Shape stroke={red} points={points} />
+    <Points point-size={0.02} points={points} />
+  </Group>
 </Frame>

package/docs/text/Arrays.md

@@ -16,7 +16,7 @@ There are a number of functions designed to make working with arrays easier. The
 - `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`
+- `linspace(x0, x1, n, end=false)` — generate an array of `n` evenly spaced values between `x0` and `x1` (including `x1` if `end` is true)
 - `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`

package/docs/text/Graph.md

@@ -2,11 +2,12 @@
 
 *Inherits*: [Group](/docs/Group) > [Element](/docs/Element)
 
-This is the core graphing functionality used in [Plot](/docs/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.
+This is the core graphing functionality used in [Plot](/docs/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`/`coord` 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).
+Unlike [Group](/docs/Group), **Graph** will automatically pass the given `coord` to all children, so they can express their position and size information in this new coordinate system. This is very useful for elements like [Line](/docs/Line) or [Points](/docs/Points), which evaluate their `points` values based on their own coordinate system, not that of the container.
+
+You'll often want to use **Graph** (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`)
+- `xlim`/`ylim`/`coord` = `'auto'` — the coordinate system to use for the graph
+- `padding` = `0` — proportional padding to add when limits are auto-detected from children

package/docs/text/Group.md

@@ -4,10 +4,15 @@
 
 This is the main container class that all compound elements are derived from. It accepts a list of child elements and attempts to place them according to their declared properties. Child placement positions are specified in the group's internal coordinates (`coord`), which defaults to the unit square. The coordinate space is specified in `[left, top, right, bottom]` format.
 
-The child's `aspect` is an important determinant of its placement. When it has a `null` aspect, it will fit exactly in the given `rect`. However, when it does have an aspect, it needs to be adjusted in the case that the given `rect` does not have the same aspect. The `expand` and `align` specification arguments govern how this adjustment is made.
+The child's `aspect` is an important determinant of its placement. When the child does not have an aspect, it will fit exactly in the given `rect`. When it does have an aspect, it will be made as large as possible while still fitting in the given `rect`. The `align` argument governs the exact placement in this case, while the `expand` flag makes it as small as possible while still covering the given `rect`.
+
+One common pitfall: using `coord` will affect that placement of child elements. But for graphing elements like [Line](/docs/Line) or [Points](/docs/Points), their `points` values are evaluate based on their own coordinate system, not the containing **Group**'s. You must either give them their own `coord` or use [Graph](/docs/Graph), which automatically propagates the coordinate system to all children.
+
+To help with debugging, a `debug` flag can be passed to show stencil lines indicating the childrens' placement. The allocated space is shown in dashed blue, while the realized position (accounting for aspect and alignment) is shown in dashed red.
 
 Parameters:
 - `children` = `[]` — a list of child elements
 - `aspect` = `null` — the aspect ratio of the group's rectangle (can pass `'auto'` to infer from the children)
 - `coord` = `[0, 0, 1, 1]` — the internal coordinate space to use for child elements (can pass `'auto'` to contain children's rects)
 - `clip` = `false` — clip children to the group's rectangle if `true` (or a custom shape if specified)
+- `debug` = `false` — show debug boxes for the children

package/docs/text/Math.md

@@ -27,6 +27,6 @@ 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([radius, angle], center=[0, 0])` — convert polar coordinates to a 2D point
+- `polar(angle, radius=1, center=[0, 0])` — convert polar coordinates (`angle` in degrees, `radius` scalar or size vector) to a 2D point around `center`
 
 Angles use gum's usual screen-space convention: `0` points right and `90` points down.

package/docs/text/Plot.md

@@ -4,6 +4,8 @@
 
 Uses [Graph](/docs/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](/docs/Axis) for more details on how to customize the axes, ticks, and labels.
 
+By default, the extent of **Plot** only includes the graphing area itself, not the axes, labels, or title. To include these, you can set the `margin` parameter to a non-zero value. However, it many cases it makes more sense to enclose **Plot** in a [Frame](/docs/Frame)  or [Box](/docs/Box) element and set the `margin` parameter on that instead. This is useful if you want to add border that exactly encloses the graphing area.
+
 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`
@@ -21,3 +23,13 @@ Subunits:
 - `grid`/`xgrid`/`ygrid` — the grid lines arrayed under the graph
 - `label`/`xlabel`/`ylabel` — the axis label elements
 - `title` — the plot title element
+
+Title:
+- `title-size` = `0.075` — the size of the title element
+- `title-offset` = `0.05` — the offset of the title element from the top of the plot
+
+Labels:
+- `label-size` = `0.05` — the size of the label elements
+- `label-offset` = `0.125` — the offset of the label elements from the axis
+- `xlabel-size`/`ylabel-size` — the size of the x/y label element (overrides `label-size`)
+- `xlabel-offset`/`ylabel-offset` — the offset of the x/y label element from the axis (overrides `label-offset`)

package/docs/text/Rect.md

@@ -4,7 +4,7 @@
 
 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.
+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. Rounding is expressed as a fractional value between 0 and 1, where 0 means no rounding and 1 will essentially render an ellipse. Values much greater than 0.1 will start to look a little goofy.
 
 Parameters:
 - `rounded` = `null` — proportional border rounding, accepts either scalar or pair of scalars

package/docs/text/Stack.md

@@ -6,7 +6,7 @@ Stack one or more **Element** either vertically or horizontally. There are speci
 
 The simplest case is when all children have aspect ratios. In the **HStack** case, the overall aspect ratio of the stack is the sum of the child aspect ratios. Children are allocated space in proportion to their aspect ratios. The **VStack** case is similar, but we need to deal in inverse aspect ratio terms.
 
-When some children lack aspect ratios, they will be allocated any remaining space evenly. Regardless of whether a child has an aspect ratio or not, it can be given a fixed size with the `stack-size` parameter. This is specified as a fraction between 0 and 1, independent of spacing.
+When some children lack aspect ratios, they will be allocated any remaining space evenly. Regardless of whether a child has an aspect ratio or not, it can be given a fixed size with the `stack-size` parameter. This is specified as a fraction between 0 and 1, independent of spacing. Be warned though, if you specify `stack-size` for a child with an aspect ratio, it will be ignored. If you specify `stack-size` for every child, the resulting stack will have no aspect ratio.
 
 Whenever possible, the aspect ratio of the overall stack is set so that all elements with defined aspect ratios will reach full width (in the **VStack** case) or full height (in the **HStack** case).
 

package/docs/text/Text.md

@@ -6,11 +6,11 @@ Displays text and other elements. Note that you will typically not set the font
 
 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:
 
-There are two default fonts that are always provided: `sans = 'IBM Plex Sans'` and `mono ='IBM Plex Mono'`. You can use these global variables anywhere.
-
 - [TextBox](/docs/TextBox) / **TextFrame** can handle text with a border and background
 - **TextStack** can handle multiple lines of text that are passed in as an array
 
+There are two default fonts that are always provided: `sans = 'IBM Plex Sans'` and `mono ='IBM Plex Mono'`. There are three availabe font weights: `light = 300`, `regular = 400`, and `bold = 700`. The default weight is `light`. You can use these global variables anywhere.
+
 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)
@@ -18,4 +18,4 @@ Parameters:
 - `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` = `sans` — the font family (for display and size calculations)
-- `font-weight` = `100` — the font weight (for display and size calculations)
+- `font-weight` = `300` — the font weight (for display and size calculations)

package/gala/code/pendulum_physics.jsx

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

package/gala/code/spline_star.jsx

@@ -8,8 +8,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([1, t * r2d]))
-const points1 = theta1.map(t => polar([R, t * r2d]))
+const points0 = theta0.map(t => polar(t * r2d))
+const points1 = theta1.map(t => polar(t * r2d, R))
 const points = zip(points0, points1).flat()
 
 // return full spline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gum-jsx",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Language for vector graphics generation.",
   "type": "module",
   "author": "Douglas Hanley",
@@ -41,7 +41,7 @@
   "scripts": {
     "cli": "bun ./scripts/gum.ts",
     "test": "bun ./scripts/test.ts",
-    "skill": "bun ./scripts/skill.ts && cd skills/gum-jsx && zip -r gum-jsx.skill * && mv gum-jsx.skill ..",
+    "skill": "bun ./scripts/skill.ts && cd skills && rm -f gum-jsx.skill && zip -r gum-jsx.skill gum-jsx",
     "claude": "bun run skill && bun ./scripts/claude.ts"
   },
   "bin": {

package/prompt/intro.md

@@ -115,11 +115,10 @@ Without specifying `stack-size`, the `Text` element would be quite large (it has
 Here are the handy array functions provided by the library. All of these mimic the behavior of their counterparts in Python and `numpy`. This can be useful for generating `Element` objects from arrays:
 ```typescript
 function zip(...arrs: any[]): any[]
-function range(start: number, end: number, step: number): number[]
-function linspace(start: number, end: number, num: number): number[]
+function range(ia: number, ib?: number, step?: number = 1): number[]
+function linspace(x0: number, x1: number, num: number, end?: boolean = false): number[]
 function enumerate(x: any[]): any[]
 function repeat(x: any, n: number): any[]
-function lingrid(xlim: range, ylim: range, N: number): number[][]
 ```
 
 Some of the most commonly used mathematical constants are pre-defined in the global scope:

package/scripts/skill.ts

@@ -20,13 +20,6 @@ const { tags: docs_tags, cats, text: docs_text, code: docs_code } = getDocs('doc
 const { tags: gala_tags, text: gala_text, code: gala_code } = getGala('gala')
 
 // make reference pages
-const docs_pages = Object.fromEntries(docs_tags.map(tag =>
-   [ tag, prepareDocsPage(docs_text[tag], docs_code[tag]) ]
-))
-
-const gala_pages = Object.fromEntries(gala_tags.map(tag =>
-    [ tag, prepareGalaPage(gala_text[tag], gala_code[tag]) ]
-))
 
 // load prompt files
 const head = readFileSync('prompt/head.md', 'utf8').trim()
@@ -43,11 +36,11 @@ ${intro}
 
 ${docs}
 
-${docs_pages['Element']}
+${prepareDocsPage(docs_text['Element'], docs_code['Element'], true)}
 
-${docs_pages['Group']}
+${prepareDocsPage(docs_text['Group'], docs_code['Group'], true)}
 
-${docs_pages['Box']}
+${prepareDocsPage(docs_text['Box'], docs_code['Box'], true)}
 
 ${refs}
 
@@ -62,7 +55,9 @@ writeFileSync(`${output}/SKILL.md`, skill + '\n')
 mkdirSync(`${output}/references`, { recursive: true })
 Object.entries(cats).forEach(([c, ps]) => {
     if (c == 'core') return
-    const content = ps.map(p => docs_pages[p]).join('\n\n')
+    const content = ps.map(p =>
+        prepareDocsPage(docs_text[p], docs_code[p], true)
+    ).join('\n\n')
     const entry = `# ${capitalize(c)} Elements\n\n${content}\n`
     writeFileSync(`${output}/references/${c}.md`, entry)
 })
@@ -70,6 +65,6 @@ Object.entries(cats).forEach(([c, ps]) => {
 // write gala pages
 mkdirSync(`${output}/references/gala`, { recursive: true })
 gala_tags.forEach(t => {
-    const entry = gala_pages[t]
+    const entry = prepareGalaPage(gala_text[t], gala_code[t])
     writeFileSync(`${output}/references/gala/${t}.md`, entry)
 })

package/skills/gum-jsx/SKILL.md

@@ -120,11 +120,10 @@ Without specifying `stack-size`, the `Text` element would be quite large (it has
 Here are the handy array functions provided by the library. All of these mimic the behavior of their counterparts in Python and `numpy`. This can be useful for generating `Element` objects from arrays:
 ```typescript
 function zip(...arrs: any[]): any[]
-function range(start: number, end: number, step: number): number[]
-function linspace(start: number, end: number, num: number): number[]
+function range(ia: number, ib?: number, step?: number = 1): number[]
+function linspace(x0: number, x1: number, num: number, end?: boolean = false): number[]
 function enumerate(x: any[]): any[]
 function repeat(x: any, n: number): any[]
-function lingrid(xlim: range, ylim: range, N: number): number[][]
 ```
 
 Some of the most commonly used mathematical constants are pre-defined in the global scope:
@@ -188,12 +187,14 @@ Methods:
 
 **Example**
 
-Prompt: create a custom triangle element called `Tri` and use it to create a triangle with a gray fill
+Prompt: draw a 2x1 rectangle in red with a blue square embedded within it
 
 Generated code:
 ```jsx
-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} />
+<Group aspect={2}>
+  <Rect stroke={red} />
+  <Square stroke={blue} />
+</Group>
 ```
 
 ## Group
@@ -202,13 +203,18 @@ return <Tri pos0={[0.5, 0.1]} pos1={[0.9, 0.9]} pos2={[0.1, 0.9]} fill={gray} />
 
 This is the main container class that all compound elements are derived from. It accepts a list of child elements and attempts to place them according to their declared properties. Child placement positions are specified in the group's internal coordinates (`coord`), which defaults to the unit square. The coordinate space is specified in `[left, top, right, bottom]` format.
 
-The child's `aspect` is an important determinant of its placement. When it has a `null` aspect, it will fit exactly in the given `rect`. However, when it does have an aspect, it needs to be adjusted in the case that the given `rect` does not have the same aspect. The `expand` and `align` specification arguments govern how this adjustment is made.
+The child's `aspect` is an important determinant of its placement. When the child does not have an aspect, it will fit exactly in the given `rect`. When it does have an aspect, it will be made as large as possible while still fitting in the given `rect`. The `align` argument governs the exact placement in this case, while the `expand` flag makes it as small as possible while still covering the given `rect`.
+
+One common pitfall: using `coord` will affect that placement of child elements. But for graphing elements like **Line** or **Points**, their `points` values are evaluate based on their own coordinate system, not the containing **Group**'s. You must either give them their own `coord` or use **Graph**, which automatically propagates the coordinate system to all children.
+
+To help with debugging, a `debug` flag can be passed to show stencil lines indicating the childrens' placement. The allocated space is shown in dashed blue, while the realized position (accounting for aspect and alignment) is shown in dashed red.
 
 Parameters:
 - `children` = `[]` — a list of child elements
 - `aspect` = `null` — the aspect ratio of the group's rectangle (can pass `'auto'` to infer from the children)
 - `coord` = `[0, 0, 1, 1]` — the internal coordinate space to use for child elements (can pass `'auto'` to contain children's rects)
 - `clip` = `false` — clip children to the group's rectangle if `true` (or a custom shape if specified)
+- `debug` = `false` — show debug boxes for the children
 
 **Example**
 

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([rodLen, rodRot], [pivotX, pivotY])
-const [ midX, midY ] = polar([0.50 * rodLen, rodRot], [pivotX, pivotY])
-const [ tenX, tenY ] = polar([0.75 * rodLen, rodRot], [pivotX, pivotY])
+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])
 
 return <Box margin={0.06}>
   <VStack spacing={0.05}>

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([1, t * r2d]))
-const points1 = theta1.map(t => polar([R, t * r2d]))
+const points0 = theta0.map(t => polar(t * r2d))
+const points1 = theta1.map(t => polar(t * r2d, R))
 const points = zip(points0, points1).flat()
 
 // return full spline

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

@@ -6,7 +6,7 @@
 
 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.
+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. Rounding is expressed as a fractional value between 0 and 1, where 0 means no rounding and 1 will essentially render an ellipse. Values much greater than 0.1 will start to look a little goofy.
 
 Parameters:
 - `rounded` = `null` — proportional border rounding, accepts either scalar or pair of scalars
@@ -57,8 +57,8 @@ Prompt: elliptical and circular arcs using start and end angles
 Generated code:
 ```jsx
 <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} />
+  <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} />
 </Group>
 ```
 
@@ -77,22 +77,17 @@ Parameters:
 
 **Example**
 
-Prompt: draw a diagonal line in blue and a cup shaped line in red
+Prompt: draw a piecewise line spiraling outwards (with dots at vertices)
 
 Generated code:
 ```jsx
-<Group>
-  <Line stroke={blue} points={[
-    [0.2, 0.2],
-    [0.8, 0.8],
-  ]} />
-  <Line stroke={red} points={[
-    [0.3, 0.3],
-    [0.3, 0.7],
-    [0.7, 0.7],
-    [0.7, 0.3],
-  ]} />
-</Group>
+const spiral = linspace(0, 5, 25).map(t => polar(360 * t, t/5))
+return <Box margin>
+  <Graph coord={[-1, -1, 1, 1]}>
+    <Line points={spiral} />
+    <Points points={spiral} point-size={0.03} />
+  </Graph>
+</Box>
 ```
 
 ## Shape
@@ -108,23 +103,17 @@ Parameters:
 
 **Example**
 
-Prompt: draw a blue triangle with a semi-transparent green square overlaid on top
+Prompt: draw a stop sign
 
 Generated code:
 ```jsx
-<Group>
-  <Shape fill={blue} stroke={none} points={[
-    [0.5, 0.2],
-    [0.8, 0.8],
-    [0.2, 0.8]
-  ]} />
-  <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]
-  ]} />
-</Group>
+const hexagon = linspace(0, 360, 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} />
+    <Text pos={[0, 0]} xsize={1.5} color={white} font-weight={bold}>STOP</Text>
+  </Graph>
+</Box>
 ```
 
 ## Fill
@@ -187,9 +176,11 @@ const points = [
   [0.50, 0.50],
 ]
 return <Frame rounded margin>
-  <Spline closed stroke={blue} fill={gray} points={points} />
-  <Shape stroke={red} points={points} />
-  <Points point-size={0.02} points={points} />
+  <Group>
+    <Spline closed stroke={blue} fill={gray} points={points} />
+    <Shape stroke={red} points={points} />
+    <Points point-size={0.02} points={points} />
+  </Group>
 </Frame>
 ```
 
@@ -253,16 +244,12 @@ Generated code:
 ```jsx
 // vertices marked as black dots to show how the corners are rounded
 const points = [
-  [0.10, 0.20],
-  [0.40, 0.20],
-  [0.40, 0.80],
-  [0.70, 0.80],
-  [0.70, 0.50],
-  [0.90, 0.50],
+  [-0.8,  0.6], [-0.2,  0.6], [-0.2, -0.6],
+  [ 0.4, -0.6], [ 0.4,  0.0], [ 0.8,  0.0],
 ]
-return <Frame margin>
-  <Line opacity={0.3} points={points} />
-  <RoundedLine stroke={blue} stroke-width={2} radius={0.08} points={points} />
-  <Points point-size={0.015} points={points} />
-</Frame>
+return <Graph aspect padding>
+  <Line points={points} opacity={0.3} />
+  <RoundedLine points={points} stroke={blue} stroke-width={2} radius={0.1} />
+  <Points points={points} point-size={0.03} />
+</Graph>
 ```

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

@@ -44,7 +44,7 @@ Stack one or more **Element** either vertically or horizontally. There are speci
 
 The simplest case is when all children have aspect ratios. In the **HStack** case, the overall aspect ratio of the stack is the sum of the child aspect ratios. Children are allocated space in proportion to their aspect ratios. The **VStack** case is similar, but we need to deal in inverse aspect ratio terms.
 
-When some children lack aspect ratios, they will be allocated any remaining space evenly. Regardless of whether a child has an aspect ratio or not, it can be given a fixed size with the `stack-size` parameter. This is specified as a fraction between 0 and 1, independent of spacing.
+When some children lack aspect ratios, they will be allocated any remaining space evenly. Regardless of whether a child has an aspect ratio or not, it can be given a fixed size with the `stack-size` parameter. This is specified as a fraction between 0 and 1, independent of spacing. Be warned though, if you specify `stack-size` for a child with an aspect ratio, it will be ignored. If you specify `stack-size` for every child, the resulting stack will have no aspect ratio.
 
 Whenever possible, the aspect ratio of the overall stack is set so that all elements with defined aspect ratios will reach full width (in the **VStack** case) or full height (in the **HStack** case).