gum-jsx 1.6.0 → 1.6.1

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gum-jsx",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "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/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

@@ -202,13 +202,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/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

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).
 

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

@@ -4,14 +4,15 @@
 
 *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.
+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`/`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**, **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** or **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
 
 **Example**
 
@@ -33,6 +34,8 @@ Generated code:
 
 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.
 
+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**  or **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`
@@ -51,6 +54,16 @@ Subunits:
 - `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`)
+
 **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".

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

@@ -8,11 +8,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** / **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)
@@ -20,7 +20,7 @@ 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)
 
 **Example**
 

package/src/elems/core.ts

@@ -258,7 +258,7 @@ function props_repr(d: Attrs, prec: number): string {
 }
 
 // reserved keys
-const SPEC_KEYS = [ 'rect', 'aspect', 'expand', 'align', 'upright', 'rotate', 'rotate_adjust', 'invar', 'coord' ]
+const SPEC_KEYS = [ 'rect', 'coord', 'aspect', 'aspect0', 'expand', 'align', 'upright', 'offset', 'rotate', 'rotate_adjust', 'rotate_invar' ]
 const HELP_KEYS = [ 'pos', 'size', 'xsize', 'ysize', 'flex', 'spin', 'orient' ]
 const EXTR_KEYS = [ 'stack_size' ]
 const RESERVED_KEYS = [ ...SPEC_KEYS, ...HELP_KEYS, ...EXTR_KEYS ]
@@ -282,6 +282,7 @@ interface SpecArgs {
     rect?: Rect
     coord?: Rect | 'auto'
     aspect?: number | 'auto'
+    aspect0?: number
     expand?: boolean
     align?: Align
     upright?: boolean
@@ -345,8 +346,8 @@ class Element {
         if (flex === true) this.spec.aspect = undefined
 
         // adjust aspect for rotation
-        this.spec.aspect0 = this.spec.aspect
-        this.spec.aspect = this.spec.rotate_invar ? this.spec.aspect0 : rotate_aspect(this.spec.aspect, this.spec.rotate)
+        this.spec.aspect0 ??= this.spec.aspect
+        this.spec.aspect = this.spec.rotate_invar ? this.spec.aspect0 : rotate_aspect(this.spec.aspect0, this.spec.rotate)
 
         // warn if children are passed
         if (children != null) console.error(`Got children in ${this.constructor.name}`)
@@ -493,16 +494,16 @@ class Group extends Element {
             children.push(...irects, ...orects)
         }
 
-        // make actual clip mask
+        // make clip path
         let clip_path: string | undefined
         if (clip != null) {
             const clip_id = makeUID('clip')
             clip_path = `url(#${clip_id})`
-            const mask = new ClipPath({ children: [ clip ], id: clip_id })
-            children.push(mask)
+            const clip_elem = new ClipPath({ children: [ clip ], id: clip_id })
+            children.push(clip_elem)
         }
 
-        // handle mask
+        // make mask
         let mask: string | undefined
         if (mask0 != null) {
             const mask_id = makeUID('mask')

package/src/elems/layout.ts

@@ -150,8 +150,7 @@ function computeStackLayout(direc: string, children: Element[], { spacing = 0, e
     // adjust for direction (invert aspect if horizontal)
     const items = children.map(c => {
         const size = c.attr.stack_size ?? (even ? 1 / children.length : null)
-        const expd = c.attr.stack_size == null
-        const aspect = expd ? c.spec.aspect : undefined
+        const aspect = c.attr.stack_size == null ? c.spec.aspect : null
         return { size, aspect } as StackChild
     })
 

package/src/elems/plot.ts

@@ -599,15 +599,15 @@ interface PlotArgs extends BoxArgs {
     ylabel_offset?: number
     xtick_size?: number
     ytick_size?: number
-    padding?: number
     margin?: number
+    padding?: number
     debug?: boolean
 }
 
 class Plot extends Box {
     constructor(args: PlotArgs = {}) {
         let {
-            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = [ 0.11, 0.18 ], title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding = 0, margin = 0, aspect: aspect0 = 'auto', clip, debug = false, ...attr0
+            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = 0.125, title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding, margin, aspect: aspect0 = 'auto', clip, debug = false, ...attr0
         } = THEME(args, 'Plot')
         const children = ensure_children(children0)
 

package/src/elems/text.ts

@@ -223,7 +223,7 @@ class Text extends VStack {
         )
 
         // pass to VStack
-        super({ children: lines, spacing, even: true, debug, ...spec })
+        super({ children: lines, spacing, even: true, ...spec })
         this.args = args
 
         // additional props
@@ -236,11 +236,7 @@ class Text extends VStack {
 //
 
 interface TextStackArgs extends StackArgs {
-    wrap?: number | null
-    font_family?: string
-    font_weight?: number
-    text_wrap?: number
-    text_justify?: string
+    wrap?: number
 }
 
 class TextStack extends VStack {
@@ -268,11 +264,11 @@ interface TextBoxArgs extends BoxArgs {
 
 class TextBox extends Box {
     constructor(args: TextBoxArgs = {}) {
-        const { children, padding = 0.1, justify, wrap, debug, ...attr0 } = THEME(args, 'TextBox')
+        const { children, padding = 0.1, justify, wrap, ...attr0 } = THEME(args, 'TextBox')
         const [ font_attr0, text_attr, attr ] = prefix_split([ 'font', 'text' ], attr0)
         const font_attr = prefix_join('font', font_attr0)
-        const text = new Text({ children, justify, wrap, debug, ...text_attr, ...font_attr })
-        super({ children: [ text ], padding, debug, ...attr })
+        const text = new Text({ children, justify, wrap, ...text_attr, ...font_attr })
+        super({ children: [ text ], padding, ...attr })
         this.args = args
     }
 }

package/src/fonts/fonts.ts

@@ -1,11 +1,37 @@
 import { parse as parseFont, type Font } from 'opentype.js'
-import { is_browser, map_object, map_object_async } from '../lib/utils'
+import { is_browser, is_string } from '../lib/utils'
 import { sans, mono, moji } from '../lib/const'
 
+//
+// object utils
+//
+
+function map_object<T, U>(obj: Record<string, T>, fn: (v: T) => U): Record<string, U> {
+    return Object.fromEntries(
+        Object.entries(obj).map(([ k, v ]) => [ k, fn(v) ])
+    )
+}
+
+async function map_object_async<T, U>(obj: Record<string, T>, fn: (v: T) => Promise<U>): Promise<Record<string, U>> {
+    return Object.fromEntries(
+        await Promise.all(
+            Object.entries(obj).map(
+                async ([ k, v ]) => [ k, await fn(v) ]
+            )
+        )
+    )
+}
+
 //
 // load font data as arraybuffer
 //
 
+type FontWeight = 'light' | 'regular' | 'bold'
+type FontPath = string | Record<FontWeight, string>
+type FontData = ArrayBuffer | Record<FontWeight, ArrayBuffer>
+type FontSet = Record<FontWeight, Font>
+type FontEntry = Font | FontSet
+
 async function loadFont(path: string): Promise<ArrayBuffer> {
     if (is_browser()) {
         const response = await fetch(path)
@@ -18,15 +44,51 @@ async function loadFont(path: string): Promise<ArrayBuffer> {
     }
 }
 
+async function loadFontFamily(path: FontPath): Promise<FontData> {
+    if (is_string(path)) {
+        return await loadFont(path)
+    } else {
+        return {
+            light: await loadFont(path.light),
+            regular: await loadFont(path.regular),
+            bold: await loadFont(path.bold),
+        }
+    }
+}
+
+function parseFontFamily(data: FontData): FontEntry {
+    if (data instanceof ArrayBuffer) {
+        return parseFont(data)
+    } else {
+        return {
+            light: parseFont(data.light),
+            regular: parseFont(data.regular),
+            bold: parseFont(data.bold),
+        }
+    }
+}
+
 //
 // load core fonts (vite resolves these as assets via static string analysis)
 //
 
-const FONT_PATHS: Record<string, string> = {
-    // @ts-ignore
-    [sans]: (await import('./IBMPlexSans-Variable.ttf')).default,
-    // @ts-ignore
-    [mono]: (await import('./IBMPlexMono-Regular.ttf')).default,
+const FONT_PATHS: Record<string, FontPath> = {
+    [sans]: {
+        // @ts-ignore
+        light: (await import('./IBMPlexSans-Light.ttf')).default,
+        // @ts-ignore
+        regular: (await import('./IBMPlexSans-Regular.ttf')).default,
+        // @ts-ignore
+        bold: (await import('./IBMPlexSans-Bold.ttf')).default,
+    },
+    [mono]: {
+        // @ts-ignore
+        light: (await import('./IBMPlexMono-Light.ttf')).default,
+        // @ts-ignore
+        regular: (await import('./IBMPlexMono-Regular.ttf')).default,
+        // @ts-ignore
+        bold: (await import('./IBMPlexMono-Bold.ttf')).default,
+    },
     // @ts-ignore
     [moji]: (await import('./NotoEmoji-Variable.ttf')).default,
     // @ts-ignore
@@ -45,13 +107,9 @@ const FONT_PATHS: Record<string, string> = {
     'KaTeX_Size4': (await import('katex/dist/fonts/KaTeX_Size4-Regular.ttf')).default,
 }
 
-const FONT_DATA: Record<string, ArrayBuffer> = await map_object_async(FONT_PATHS,
-    async (_name: string, path: string) => await loadFont(path)
-)
-
-const FONTS: Record<string, Font> = map_object(FONT_DATA,
-    (_name, data) => parseFont(data)
-)
+// load and parse font data
+const FONT_DATA: Record<string, FontData> = await map_object_async(FONT_PATHS, loadFontFamily)
+const FONTS: Record<string, FontEntry> = map_object(FONT_DATA, parseFontFamily)
 
 //
 // allow additional fonts to be loaded
@@ -59,12 +117,12 @@ const FONTS: Record<string, Font> = map_object(FONT_DATA,
 
 async function registerFont(name: string, path: string) {
     FONT_PATHS[name] = path
-    FONT_DATA[name] = await loadFont(path)
-    FONTS[name] = parseFont(FONT_DATA[name])
+    FONT_DATA[name] = await loadFontFamily(path)
+    FONTS[name] = parseFontFamily(FONT_DATA[name])
 }
 
 //
 // exports
 //
 
-export { FONT_PATHS, FONT_DATA, FONTS, registerFont }
+export { FONT_PATHS, FONT_DATA, FONTS, registerFont, FontWeight, FontSet, FontEntry }

package/src/gum.ts

@@ -5,7 +5,7 @@ import './types/linebreak.d.ts'
 import './types/katex.d.ts'
 
 import { setTheme } from './lib/theme'
-import { sans, mono, moji, cmoji, light, bold, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r } from './lib/const'
+import { sans, mono, moji, cmoji, light, regular, bold, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r } from './lib/const'
 import { is_scalar, is_string, is_boolean, is_object, is_function, is_array, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, norm, range, linspace, enumerate, repeat, meshgrid, lingrid, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, minimum, maximum, min, max, clamp, rescale, sigmoid, logit, smoothstep, setSeed, random, uniform, normal, integer, interp, palette, polar, rounder, add2, sub2, mul2, div2, normalize } from './lib/utils'
 import { registerFont } from './fonts/fonts'
 
@@ -27,7 +27,7 @@ const Rect = Rectangle
 type ElementConstructor = new (args: ElementArgs) => Element
 
 const CONST = {
-    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, bold,
+    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, regular, bold,
 }
 
 const UTILS = {
@@ -48,7 +48,7 @@ export {
     ELEMS, CONTEXT, Context,
     setTheme, registerFont, calcPngAspect, parseTable,
     is_string, is_boolean, is_array, is_object, is_function, is_element, is_scalar,
-    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, bold,
+    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, regular, bold,
     range, linspace, enumerate, repeat, meshgrid, lingrid, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, min, max, minimum, maximum, norm, clamp, rescale, normalize, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, sigmoid, logit, smoothstep, polar, rounder, interp, palette, add2, sub2, mul2, div2, spline1d, spline2d,
     setSeed, random, uniform, normal, integer,
     Element, Group, Svg, Box, Frame, Stack, HWrap, VStack, HStack, Grid, Points, Anchor, Attach, Absolute, Spacer, Ray, Line, UnitLine, HLine, VLine, Rectangle, Rect, RoundedRect, RoundedLine, Square, Ellipse, Arc, Circle, Dot, Shape, Path, Spline, Triangle, Fill, Arrow, Field, Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic, LabelBox, TitleBox, TitleFrame, ArrowHead, Node, Edge, Network, SymPoints, SymLine, SymSpline, SymShape, SymFill, SymField, Bar, VBar, HBar, Bars, VBars, HBars, Scale, VScale, HScale, Label, HLabel, VLabel, Labels, HLabels, VLabels, Axis, HAxis, VAxis, OuterLabel, Mesh, HMesh, VMesh, Mesh2D, Graph, Plot, BarPlot, Legend, Slide, Latex, MathSpan, MathSymbol, MathSpacer, MathRow, MathCol, MathBox, MathRule, MathText, SupSub, Frac, Sqrt, Accent, Bracket, PngImage, SvgImage,

package/src/lib/const.ts

@@ -12,9 +12,12 @@ const mono = 'IBM Plex Mono'
 const moji = 'Noto Emoji'
 const cmoji = 'Noto Color Emoji'
 
-// font metrics
+// font weights
 const light = 300
-const bold = 500
+const regular = 400
+const bold = 700
+
+// font metrics
 const vtext = -0.15
 
 // colors
@@ -52,4 +55,4 @@ const DEFAULTS = {
     calc_size: 16,
 }
 
-export { DEFAULTS, svgns, htmlns, sans, mono, moji, cmoji, light, bold, vtext, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r }
+export { DEFAULTS, svgns, htmlns, sans, mono, moji, cmoji, light, regular, bold, vtext, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r }

package/src/lib/text.ts

@@ -2,30 +2,75 @@
 
 import EMOJI_REGEX from 'emojibase-regex'
 import LineBreaker from 'linebreak'
+import type { Font } from 'opentype.js'
 
-import { DEFAULTS as D, sans, moji } from './const.js'
-import { is_string, compress_whitespace, sum, zip, max, min } from './utils.js'
-import { wrapWidths } from './wrap.js'
-import { FONTS } from '../fonts/fonts.js'
+import { DEFAULTS as D, sans, moji, light, regular } from './const'
+import { is_string, compress_whitespace, sum, zip, max, min } from './utils'
+import { wrapWidths } from './wrap'
+import { FONTS, type FontSet, type FontEntry, type FontWeight } from '../fonts/fonts'
 
-import type { Limit } from './types.js'
+import type { Limit } from './types'
 
 //
 // create text sizer
 //
 
+function is_font_set(font: FontEntry): font is FontSet {
+    return 'light' in font && 'regular' in font && 'bold' in font
+}
+
 function is_emoji(text: string): boolean {
     return EMOJI_REGEX.test(text)
 }
 
+type TextRun = {
+    text: string
+    emoji: boolean
+}
+
+const EMOJI_GLOBAL_REGEX = new RegExp(EMOJI_REGEX.source, EMOJI_REGEX.flags.includes('g') ? EMOJI_REGEX.flags : `${EMOJI_REGEX.flags}g`)
+
+function splitEmojiRuns(text: string): TextRun[] {
+    const runs: TextRun[] = []
+    let last = 0
+    EMOJI_GLOBAL_REGEX.lastIndex = 0
+
+    let match: RegExpExecArray | null
+    while ((match = EMOJI_GLOBAL_REGEX.exec(text)) != null) {
+        const emoji = match[0]
+        const start = match.index
+        const end = start + emoji.length
+
+        if (start > last) runs.push({ text: text.slice(last, start), emoji: false })
+        if (emoji.length > 0) runs.push({ text: emoji, emoji: true })
+
+        last = end
+        if (EMOJI_GLOBAL_REGEX.lastIndex == start) EMOJI_GLOBAL_REGEX.lastIndex++
+    }
+
+    if (last < text.length) runs.push({ text: text.slice(last), emoji: false })
+    EMOJI_GLOBAL_REGEX.lastIndex = 0
+    return runs
+}
+
+const medium = 500
+
+// match the browser result for the bundled 300/400/700 static faces
+function closest_weight(weight: number): FontWeight {
+    if (weight < regular) return 'light'
+    if (weight <= medium) return 'regular'
+    return 'bold'
+}
+
 function arrayEquals(a: number[], b: number[]): boolean {
     return a.length == b.length && a.every((x, i) => x == b[i])
 }
 
 function emojiSizer(text: string): number {
     // get emoji font
-    const font = FONTS[moji]
-    if (font == null) return 1.25
+    const font0 = FONTS[moji]
+    if (font0 == null) return 1.25
+    const font = is_font_set(font0) ? font0.light : font0
 
     // get glyphs
     const { unitsPerEm } = font
@@ -55,19 +100,30 @@ function emojiSizer(text: string): number {
 
 type TextSizerArgs = {
     font_family?: string
+    font_weight?: number
     calc_size?: number
 }
 
-// TODO: handle font_weight
-function textSizer(text: string, { font_family = sans, calc_size = D.calc_size }: TextSizerArgs = {}): number {
-    if (is_emoji(text)) return emojiSizer(text)
+function textFont(font_family: string, font_weight: number): Font {
+    // get font info
     const font = FONTS[font_family]
-    const width = font.getAdvanceWidth(text, calc_size)
-    return width / calc_size
+
+    // match the static face browser font matching would select
+    if (!is_font_set(font)) return font
+    const weight = closest_weight(font_weight)
+    return font[weight]
 }
 
-function textVertical(text: string, { font_family = sans }: TextSizerArgs = {}): Limit {
-    const font = FONTS[font_family]
+function textSizer(text: string, { font_family = sans, font_weight = light, calc_size = D.calc_size }: TextSizerArgs = {}): number {
+    const font = textFont(font_family, font_weight)
+    const runs = splitEmojiRuns(text)
+    return sum(runs.map(run =>
+        run.emoji ? emojiSizer(run.text) :
+        (font.getAdvanceWidth(run.text, calc_size) / calc_size)
+    ))
+}
+
+function fontVertical(font: Font, text: string): Limit {
     const glyphs = font.stringToGlyphs(text)
     const [yMins = [], yMaxs = []] = zip(...glyphs.map(g => [ g.yMin, g.yMax ]))
     const units = font.unitsPerEm ?? 1000
@@ -76,6 +132,11 @@ function textVertical(text: string, { font_family = sans }: TextSizerArgs = {}):
     return [ yMin / units, yMax / units ]
 }
 
+function textVertical(text: string, { font_family = sans, font_weight = light }: TextSizerArgs = {}): Limit {
+    const font = textFont(font_family, font_weight)
+    return fontVertical(font, text)
+}
+
 type TextMetrics = {
     advance: number
     vrange: Limit

package/src/lib/utils.ts

@@ -272,16 +272,6 @@ function map_object<T, U>(obj: Record<string, T>, fn: (k: string, v: T) => U): R
     )
 }
 
-async function map_object_async<T, U>(obj: Record<string, T>, fn: (k: string, v: T) => Promise<U>): Promise<Record<string, U>> {
-    return Object.fromEntries(
-        await Promise.all(
-            Object.entries(obj).map(
-                async ([ k, v ]) => [ k, await fn(k, v) ]
-            )
-        )
-    )
-}
-
 function filter_object<T>(obj: Record<string, T>, fn: (k: string, v: T) => boolean): Record<string, T> {
     return Object.fromEntries(
         Object.entries(obj).filter(([ k, v ]) => fn(k, v))
@@ -915,4 +905,4 @@ function binary_search(arr: number[], t: number): number {
 // export
 //
 
-export { is_browser, is_boolean, is_scalar, is_string, is_number, is_object, is_function, is_array, is_singleton, is_point, ensure_vector, ensure_singleton, ensure_function, check_singleton, check_array, check_string, gzip, zip, reshape, split, concat, squeeze, slice, intersperse, sum, prod, mean, all, any, cumsum, norm, normalize, range, linspace, enumerate, repeat, padvec, meshgrid, lingrid, map_object, map_object_async, filter_object, compress_whitespace, exp, log, log10, sin, cos, tan, cot, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, isNan, isInf, minimum, maximum, heaviside, heavisign, abs_min, abs_max, min, max, clamp, rescale, sigmoid, logit, smoothstep, identity, invert, setSeed, random, uniform, normal, integer, broadcast_point, add2, sub2, mul2, div2, ensure_number, ensure_point, ensure_mnumber, ensure_mpoint, addm, subm, add2m, sub2m, make_mpoint, squeeze_mnumber, squeeze_mpoint, rect_size, rect_dims, rect_center, rect_radius, rect_aspect, rect_radial, norm_angle, split_limits, vector_angle, angle_direc, polar, side_direc, unit_direc, norm_side, rgba_repr, interp, palette, detect_coords, resolve_limits, join_limits, invert_orient, aspect_invariant, flip_rect, radial_rect, box_rect, rect_box, cbox_rect, rect_cbox, merge_rects, merge_points, merge_limits, merge_values, expand_limits, expand_rect, upright_rect, upright_limits, rounder, remap_rect, resizer, rescaler, rotate_aspect, prefix_split, prefix_join, binary_search }
+export { is_browser, is_boolean, is_scalar, is_string, is_number, is_object, is_function, is_array, is_singleton, is_point, ensure_vector, ensure_singleton, ensure_function, check_singleton, check_array, check_string, gzip, zip, reshape, split, concat, squeeze, slice, intersperse, sum, prod, mean, all, any, cumsum, norm, normalize, range, linspace, enumerate, repeat, padvec, meshgrid, lingrid, map_object, filter_object, compress_whitespace, exp, log, log10, sin, cos, tan, cot, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, isNan, isInf, minimum, maximum, heaviside, heavisign, abs_min, abs_max, min, max, clamp, rescale, sigmoid, logit, smoothstep, identity, invert, setSeed, random, uniform, normal, integer, broadcast_point, add2, sub2, mul2, div2, ensure_number, ensure_point, ensure_mnumber, ensure_mpoint, addm, subm, add2m, sub2m, make_mpoint, squeeze_mnumber, squeeze_mpoint, rect_size, rect_dims, rect_center, rect_radius, rect_aspect, rect_radial, norm_angle, split_limits, vector_angle, angle_direc, polar, side_direc, unit_direc, norm_side, rgba_repr, interp, palette, detect_coords, resolve_limits, join_limits, invert_orient, aspect_invariant, flip_rect, radial_rect, box_rect, rect_box, cbox_rect, rect_cbox, merge_rects, merge_points, merge_limits, merge_values, expand_limits, expand_rect, upright_rect, upright_limits, rounder, remap_rect, resizer, rescaler, rotate_aspect, prefix_split, prefix_join, binary_search }

package/src/meta.ts

@@ -3,7 +3,7 @@
 import { readFileSync, readdirSync } from 'fs'
 
 // replace links with bold and push headings
-function prepareText(text: string, sub: boolean = true): string {
+function prepareText(text: string, sub: boolean = false): string {
     text = text.replace(/\[(.*?)\]\((.*?)\)/g, '**$1**') // links to bold
     if (sub) text = text.replace(/^# (.*?)$/mg, '## $1') // headings to sub-headings
     return text.trim()
@@ -22,12 +22,12 @@ function prepareGalaCode(text: string): string {
     return `**Code**\n\n${code}`
 }
 
-function prepareDocsPage(text: string, code: string): string {
-    return `${prepareText(text, true)}\n\n${prepareDocsCode(code)}`
+function prepareDocsPage(text: string, code: string, sub: boolean = false): string {
+    return `${prepareText(text, sub)}\n\n${prepareDocsCode(code)}`
 }
 
-function prepareGalaPage(text: string, code: string): string {
-    return `${prepareText(text, false)}\n\n${prepareGalaCode(code)}`
+function prepareGalaPage(text: string, code: string, sub: boolean = false): string {
+    return `${prepareText(text, sub)}\n\n${prepareGalaCode(code)}`
 }
 
 // index directory contents

package/src/render.ts

@@ -1,22 +1,39 @@
 // Rasterize SVG to PNG via node-canvas
 
-import { createCanvas, loadImage, registerFont } from 'canvas'
+import { createCanvas, loadImage, registerFont, type ImageData as CanvasImageData } from 'canvas'
 
 import type { Size } from './lib/types'
 import { FONT_PATHS } from './fonts/fonts'
+import { light, regular, bold } from './lib/const'
 
 // register bundled fonts so SVG <text> resolves consistently
 for (const [ family, path ] of Object.entries(FONT_PATHS)) {
-  registerFont(path, { family })
+  if (typeof path == 'string') {
+    registerFont(path, { family })
+  } else {
+    registerFont(path.light, { family, weight: String(light) })
+    registerFont(path.regular, { family, weight: String(regular) })
+    registerFont(path.bold, { family, weight: String(bold) })
+  }
 }
 
-interface RasterizeArgs {
+interface RasterizeBaseArgs {
   size?: Size
   width?: number
   height?: number
   background?: string
 }
 
+interface RasterizePngArgs extends RasterizeBaseArgs {
+  pixelData?: false
+}
+
+interface RasterizePixelArgs extends RasterizeBaseArgs {
+  pixelData: true
+}
+
+type RasterizeArgs = RasterizePngArgs | RasterizePixelArgs
+
 interface FormatImageArgs {
   imageId?: number | null
   placementId?: number | null
@@ -26,7 +43,9 @@ interface FormatImageArgs {
   cursorMovement?: boolean
 }
 
-async function rasterizeSvg(svg: string | Buffer, { size, width, height, background }: RasterizeArgs = {}): Promise<Buffer> {
+async function rasterizeSvg(svg: string | Buffer, args: RasterizePixelArgs): Promise<CanvasImageData>
+async function rasterizeSvg(svg: string | Buffer, args?: RasterizePngArgs): Promise<Buffer>
+async function rasterizeSvg(svg: string | Buffer, { size, width, height, background, pixelData }: RasterizeArgs = {}): Promise<Buffer | CanvasImageData> {
   const buf = typeof svg === 'string' ? Buffer.from(svg) : svg
   const img = await loadImage(buf)
   const w0 = size?.[0] ?? img.width
@@ -63,9 +82,9 @@ async function rasterizeSvg(svg: string | Buffer, { size, width, height, backgro
     ctx.fillRect(0, 0, outW, outH)
   }
 
-  // draw image to canvas and return PNG buffer
+  // draw image to canvas and return the requested raster representation
   ctx.drawImage(img, 0, 0, outW, outH)
-  return canvas.toBuffer('image/png')
+  return pixelData ? ctx.getImageData(0, 0, outW, outH) : canvas.toBuffer('image/png')
 }
 
 // kitty image protocol
@@ -107,4 +126,4 @@ async function readStdin(): Promise<string> {
 }
 
 export { rasterizeSvg, formatImage, readStdin }
-export type { RasterizeArgs, FormatImageArgs }
+export type { RasterizeBaseArgs, RasterizePngArgs, RasterizePixelArgs, RasterizeArgs, FormatImageArgs }

package/scripts/claude.ts

@@ -1,25 +0,0 @@
-// upload skill files for anthropic
-
-import { createReadStream } from 'fs'
-import Anthropic, { toFile } from '@anthropic-ai/sdk'
-
-// create anthropic client
-const apiKey = process.env.ANTHROPIC_API_KEY
-const client = new Anthropic({ apiKey })
-
-// directory paths
-const skill_name = 'gum-jsx'
-const skill_file = `${skill_name}.skill`
-const skill_path = `skills/${skill_file}`
-
-// upload skill files
-const skill = await client.beta.skills.create({
-    files: [
-        await toFile(createReadStream(skill_path), skill_file),
-    ],
-})
-
-// output env info
-console.log(`
-GUM_JSX_SKILL_ID=${skill.id}
-`)