npm - figureone - Versions diffs - 0.15.10 → 1.0.1 - Mend

figureone 0.15.10 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (160) hide show

package/figureone.min.js +1 -1
package/index.js +79170 -0
package/llms.txt +548 -0
package/package.json +16 -1
package/types/index.d.ts +128 -0
package/types/js/figure/Animation/Animation.d.ts +36 -0
package/types/js/figure/Animation/AnimationBuilder.d.ts +173 -0
package/types/js/figure/Animation/AnimationManager.d.ts +392 -0
package/types/js/figure/Animation/AnimationStep/CustomStep.d.ts +99 -0
package/types/js/figure/Animation/AnimationStep/DelayStep.d.ts +24 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/ColorAnimationStep.d.ts +203 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/OpacityAnimationStep.d.ts +220 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/PositionAnimationStep.d.ts +124 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/PulseAnimationStep.d.ts +137 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/PulseTransformAnimationStep.d.ts +52 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/RotationAnimationStep.d.ts +119 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/ScaleAnimationStep.d.ts +93 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/ScenarioAnimationStep.d.ts +204 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/TransformAnimationStep.d.ts +163 -0
package/types/js/figure/Animation/AnimationStep/ElementAnimationStep.d.ts +56 -0
package/types/js/figure/Animation/AnimationStep/ParallelAnimationStep.d.ts +70 -0
package/types/js/figure/Animation/AnimationStep/SerialAnimationStep.d.ts +84 -0
package/types/js/figure/Animation/AnimationStep/TriggerStep.d.ts +106 -0
package/types/js/figure/Animation/AnimationStep.d.ts +110 -0
package/types/js/figure/DrawContext2D.d.ts +9 -0
package/types/js/figure/DrawingObjects/DrawingObject.d.ts +45 -0
package/types/js/figure/DrawingObjects/GLObject/GLObject.d.ts +146 -0
package/types/js/figure/DrawingObjects/HTMLObject/HTMLObject.d.ts +29 -0
package/types/js/figure/DrawingObjects/TextObject/TextObject.d.ts +94 -0
package/types/js/figure/DrawingObjects/TextObject/glyphMeasures.d.ts +7 -0
package/types/js/figure/DrawingObjects/VertexObject/VertexGeneric.d.ts +21 -0
package/types/js/figure/DrawingObjects/VertexObject/VertexObject.d.ts +0 -0
package/types/js/figure/DrawingObjects/VertexObject/VertexText.d.ts +34 -0
package/types/js/figure/Element.d.ts +1212 -0
package/types/js/figure/Equation/Elements/BaseAnnotationFunction.d.ts +118 -0
package/types/js/figure/Equation/Elements/BaseEquationFunction.d.ts +20 -0
package/types/js/figure/Equation/Elements/Bounds.d.ts +49 -0
package/types/js/figure/Equation/Elements/Color.d.ts +7 -0
package/types/js/figure/Equation/Elements/Container.d.ts +5 -0
package/types/js/figure/Equation/Elements/Element.d.ts +95 -0
package/types/js/figure/Equation/Elements/Fraction.d.ts +5 -0
package/types/js/figure/Equation/Elements/Lines.d.ts +5 -0
package/types/js/figure/Equation/Elements/Matrix.d.ts +5 -0
package/types/js/figure/Equation/Elements/Offset.d.ts +5 -0
package/types/js/figure/Equation/Elements/Scale.d.ts +5 -0
package/types/js/figure/Equation/Equation.d.ts +984 -0
package/types/js/figure/Equation/EquationForm.d.ts +139 -0
package/types/js/figure/Equation/EquationFunctions.d.ts +3367 -0
package/types/js/figure/Equation/EquationSymbols.d.ts +1646 -0
package/types/js/figure/Equation/HTMLEquation.d.ts +56 -0
package/types/js/figure/Equation/Symbols/AngleBracket.d.ts +6 -0
package/types/js/figure/Equation/Symbols/Arrow.d.ts +17 -0
package/types/js/figure/Equation/Symbols/Bar.d.ts +6 -0
package/types/js/figure/Equation/Symbols/Box.d.ts +11 -0
package/types/js/figure/Equation/Symbols/Brace.d.ts +6 -0
package/types/js/figure/Equation/Symbols/Bracket.d.ts +8 -0
package/types/js/figure/Equation/Symbols/Division.d.ts +8 -0
package/types/js/figure/Equation/Symbols/Integral.d.ts +7 -0
package/types/js/figure/Equation/Symbols/Line.d.ts +5 -0
package/types/js/figure/Equation/Symbols/Product.d.ts +6 -0
package/types/js/figure/Equation/Symbols/Radical.d.ts +9 -0
package/types/js/figure/Equation/Symbols/SquareBracket.d.ts +6 -0
package/types/js/figure/Equation/Symbols/Strike.d.ts +8 -0
package/types/js/figure/Equation/Symbols/Sum.d.ts +6 -0
package/types/js/figure/Equation/Symbols/SymbolNew.d.ts +15 -0
package/types/js/figure/Equation/Symbols/Vinculum.d.ts +6 -0
package/types/js/figure/Figure.d.ts +711 -0
package/types/js/figure/FigureCollections/Angle.d.ts +766 -0
package/types/js/figure/FigureCollections/Axis.d.ts +517 -0
package/types/js/figure/FigureCollections/Axis3.d.ts +118 -0
package/types/js/figure/FigureCollections/Button.d.ts +195 -0
package/types/js/figure/FigureCollections/EquationLabel.d.ts +77 -0
package/types/js/figure/FigureCollections/FigureCollections.d.ts +122 -0
package/types/js/figure/FigureCollections/Legend.d.ts +270 -0
package/types/js/figure/FigureCollections/Line.d.ts +587 -0
package/types/js/figure/FigureCollections/Plot.d.ts +558 -0
package/types/js/figure/FigureCollections/PolyLine.d.ts +487 -0
package/types/js/figure/FigureCollections/Rectangle.d.ts +235 -0
package/types/js/figure/FigureCollections/SlideNavigator.d.ts +255 -0
package/types/js/figure/FigureCollections/Slider.d.ts +155 -0
package/types/js/figure/FigureCollections/Text.d.ts +307 -0
package/types/js/figure/FigureCollections/Toggle.d.ts +185 -0
package/types/js/figure/FigureCollections/Trace.d.ts +237 -0
package/types/js/figure/FigurePrimitives/FigureElementPrimitive2DText.d.ts +119 -0
package/types/js/figure/FigurePrimitives/FigureElementPrimitiveGLText.d.ts +94 -0
package/types/js/figure/FigurePrimitives/FigureElementPrimitiveGesture.d.ts +536 -0
package/types/js/figure/FigurePrimitives/FigureElementPrimitiveMorph.d.ts +175 -0
package/types/js/figure/FigurePrimitives/FigurePrimitiveTypes.d.ts +788 -0
package/types/js/figure/FigurePrimitives/FigurePrimitiveTypes2D.d.ts +1324 -0
package/types/js/figure/FigurePrimitives/FigurePrimitiveTypes3D.d.ts +1105 -0
package/types/js/figure/FigurePrimitives/FigurePrimitives.d.ts +173 -0
package/types/js/figure/FigurePrimitives/Generic.d.ts +5 -0
package/types/js/figure/FigurePrimitives/Text.d.ts +17 -0
package/types/js/figure/FontManager.d.ts +113 -0
package/types/js/figure/Gesture.d.ts +39 -0
package/types/js/figure/Recorder/Recorder.d.ts +291 -0
package/types/js/figure/Recorder/parseState.d.ts +3 -0
package/types/js/figure/Recorder/recorder.worker.d.ts +1 -0
package/types/js/figure/Recorder/state.d.ts +7 -0
package/types/js/figure/SlideNavigator.d.ts +606 -0
package/types/js/figure/TimeKeeper.d.ts +174 -0
package/types/js/figure/geometries/arc.d.ts +18 -0
package/types/js/figure/geometries/arrow.d.ts +215 -0
package/types/js/figure/geometries/buffer.d.ts +4 -0
package/types/js/figure/geometries/copy/copy.d.ts +178 -0
package/types/js/figure/geometries/ellipse.d.ts +17 -0
package/types/js/figure/geometries/line.d.ts +13 -0
package/types/js/figure/geometries/lines/corners.d.ts +7 -0
package/types/js/figure/geometries/lines/dashes.d.ts +23 -0
package/types/js/figure/geometries/lines/lines.d.ts +31 -0
package/types/js/figure/geometries/polygon/polygon.d.ts +12 -0
package/types/js/figure/geometries/rectangle.d.ts +19 -0
package/types/js/figure/geometries/triangle.d.ts +27 -0
package/types/js/figure/webgl/Atlas.d.ts +42 -0
package/types/js/figure/webgl/shaders.d.ts +143 -0
package/types/js/figure/webgl/target.d.ts +9 -0
package/types/js/figure/webgl/webgl.d.ts +54 -0
package/types/js/tools/FunctionMap.d.ts +69 -0
package/types/js/tools/color.d.ts +11 -0
package/types/js/tools/colorNames.d.ts +2 -0
package/types/js/tools/d2/polygon.d.ts +60 -0
package/types/js/tools/d2/triangles.d.ts +0 -0
package/types/js/tools/d3/cone.d.ts +57 -0
package/types/js/tools/d3/cube.d.ts +26 -0
package/types/js/tools/d3/cylinder.d.ts +45 -0
package/types/js/tools/d3/line3.d.ts +55 -0
package/types/js/tools/d3/prism.d.ts +49 -0
package/types/js/tools/d3/revolve.d.ts +87 -0
package/types/js/tools/d3/sphere.d.ts +33 -0
package/types/js/tools/d3/surface.d.ts +47 -0
package/types/js/tools/g2.d.ts +242 -0
package/types/js/tools/geometry/Bounds.d.ts +446 -0
package/types/js/tools/geometry/Line.d.ts +314 -0
package/types/js/tools/geometry/Path.d.ts +67 -0
package/types/js/tools/geometry/Plane.d.ts +201 -0
package/types/js/tools/geometry/Point.d.ts +359 -0
package/types/js/tools/geometry/Rect.d.ts +115 -0
package/types/js/tools/geometry/Transform.d.ts +623 -0
package/types/js/tools/geometry/angle.d.ts +105 -0
package/types/js/tools/geometry/common.d.ts +9 -0
package/types/js/tools/geometry/coordinates.d.ts +30 -0
package/types/js/tools/geometry/deceleration.d.ts +13 -0
package/types/js/tools/geometry/polygon.d.ts +4 -0
package/types/js/tools/geometry/quaternion.d.ts +15 -0
package/types/js/tools/geometry/scene.d.ts +282 -0
package/types/js/tools/geometry/tools.d.ts +8 -0
package/types/js/tools/geometry/types.d.ts +2 -0
package/types/js/tools/getCssColors.d.ts +1 -0
package/types/js/tools/getCssVariables.d.ts +4 -0
package/types/js/tools/getImageData.d.ts +1 -0
package/types/js/tools/getScssColors.d.ts +2 -0
package/types/js/tools/htmlGenerator.d.ts +85 -0
package/types/js/tools/m2.d.ts +24 -0
package/types/js/tools/m3.d.ts +71 -0
package/types/js/tools/math.d.ts +112 -0
package/types/js/tools/morph.d.ts +651 -0
package/types/js/tools/styleSheets.d.ts +3 -0
package/types/js/tools/tools.d.ts +281 -0
package/types/js/tools/types.d.ts +305 -0
package/figureone.worker.js +0 -1

package/llms.txt ADDED Viewed

@@ -0,0 +1,548 @@
+# FigureOne
+FigureOne is a JavaScript library for drawing, animating, and interacting with shapes, text, plots, and equations in a browser using WebGL. Users create a `Figure`, add elements via declarative objects with a `make` property, and control them with animations, interactivity, and slide navigation.
+## Quick Start
+```html
+<!doctype html>
+<html>
+<body>
+  <div id="figureOneContainer" style="width: 500px; height: 500px; background-color: black;"></div>
+  <script src="https://cdn.jsdelivr.net/npm/figureone@latest/figureone.min.js"></script>
+  <script src="./index.js"></script>
+</body>
+</html>
+```
+```js
+const figure = new Fig.Figure();
+figure.add({ make: 'triangle', width: 0.5, height: 0.5, color: [1, 0, 0, 1] });
+```
+`Fig` is the global entry point. `new Fig.Figure()` attaches to a div with id `figureOneContainer` by default. Use `{ htmlId: 'customId' }` to override.
+Colors are `[r, g, b, a]` with values 0-1. Coordinates default to a scene of `[-1, -1, 2, 2]` (x, y, width, height). Override with `new Fig.Figure({ scene: [-2, -2, 4, 4] })`.
+## Core Concepts
+- **Figure** — top-level container that manages all elements and rendering
+- **FigureElement** — base class for all drawable objects (primitives and collections)
+- **FigureElementPrimitive** — a single drawable shape (polygon, text, line, etc.)
+- **FigureElementCollection** — a group of elements that transform together
+- **Transform** — position, rotation, and scale applied to elements
+- `figure.add(definition)` returns the created element; `figure.add([...])` returns an array
+- Access child elements: `figure.elements._childName`
+## Shape Primitives (`make:` types)
+| Type | Description |
+|------|-------------|
+| `polygon` | Regular polygon (use `sides: 100` for circles) |
+| `rectangle` | Rectangle with optional rounded corners |
+| `triangle` | Triangle by width/height or custom points |
+| `ellipse` | Ellipse shape |
+| `arc` | Arc or partial circle |
+| `line` | Straight line between two points |
+| `arrow` | Arrow shape |
+| `star` | Star shape |
+| `polyline` | Connected line segments |
+| `grid` | 2D grid of lines |
+| `text` | WebGL-rendered text |
+| `generic` | Custom 2D vertex geometry |
+| `gl` | Raw WebGL with custom shaders |
+| `html` | HTML element overlay |
+| `collection` | Group of child elements |
+| `cube` | 3D cube (requires orthographic scene) |
+| `sphere` | 3D sphere |
+| `surface` | 3D surface from point grid |
+| `cone` | 3D cone |
+| `cylinder` | 3D cylinder |
+| `prism` | 3D prism |
+| `revolve` | 3D surface of revolution |
+| `cameraControl` | Enables 3D camera rotation via drag |
+Shorthand `make: 'polygon'` is equivalent to `make: 'primitives.polygon'`.
+### Common Shape Examples
+```js
+// Circle (polygon with many sides)
+figure.add({
+  make: 'polygon', sides: 100, radius: 0.3, color: [0, 0, 1, 1],
+});
+// Rectangle with rounded corners
+figure.add({
+  make: 'rectangle', width: 0.8, height: 0.4,
+  corner: { radius: 0.05, sides: 10 }, color: [0, 1, 0, 1],
+});
+// Line
+figure.add({
+  make: 'line', p1: [-0.5, 0], p2: [0.5, 0],
+  width: 0.02, color: [1, 1, 0, 1],
+});
+// Text
+figure.add({
+  make: 'text', text: 'Hello', position: [0, 0],
+  xAlign: 'center', font: { size: 0.2, color: [1, 1, 1, 1] },
+});
+// Textured rectangle
+figure.add({
+  make: 'rectangle', width: 1.8, height: 1.2,
+  texture: { src: 'image.jpg', mapTo: [-0.9, -0.6, 1.8, 1.2] },
+});
+```
+### Element Properties
+All elements accept these common options alongside shape-specific ones:
+- `name` — element name for later access via `figure.elements._name`
+- `color` — `[r, g, b, a]`
+- `position` — `[x, y]` shorthand for translation
+- `rotation` — rotation in radians
+When `options` is used, shape-specific properties go inside it:
+```js
+figure.add({
+  name: 'sq', make: 'primitives.rectangle',
+  options: { width: 0.4, height: 0.4, position: [-0.5, 0.5] },
+});
+```
+Otherwise, shape options can be at the top level alongside `make`:
+```js
+figure.add({ make: 'rectangle', width: 0.4, height: 0.4, position: [-0.5, 0.5] });
+```
+## Collections (`make: 'collections.*'`)
+| Type | Description |
+|------|-------------|
+| `collections.plot` | XY plot with traces, axes, legend |
+| `collections.line` | Labelled line with optional arrows |
+| `collections.polyline` | Labelled polyline with side/angle labels |
+| `collections.angle` | Angle marker with label |
+| `collections.axis` | Single axis with ticks and labels |
+| `collections.axis3` | 3D axis |
+| `collections.rectangle` | Rectangle collection with labels |
+| `collections.slideNavigator` | Slide navigation controls |
+| `collections.slider` | Draggable slider |
+| `collections.toggle` | Toggle button |
+| `collections.button` | Button |
+Also available as direct shortcuts: `make: 'equation'`, `make: 'ftext'`, `make: 'angle'`, `make: 'oline'`, `make: 'opolyline'`.
+## Animation
+Animations use a builder chain pattern on `element.animations`:
+```js
+element.animations.new()
+  .dissolveIn()                                // fade in
+  .rotation({ target: Math.PI / 4, duration: 1 })  // rotate
+  .position({ target: [0.5, 0], duration: 2 })     // move
+  .start();
+```
+### Animation Steps
+| Step | Description |
+|------|-------------|
+| `.position(target_or_options)` | Animate position |
+| `.rotation(target_or_options)` | Animate rotation |
+| `.scale(target_or_options)` | Animate scale |
+| `.transform(target_or_options)` | Animate full transform |
+| `.color(target_or_options)` | Animate color |
+| `.opacity(options)` | Animate opacity |
+| `.dissolveIn(duration?)` | Fade in (show + opacity 0→1) |
+| `.dissolveOut(duration?)` | Fade out (opacity 1→0 + hide) |
+| `.dim(options?)` | Dim to 0.3 opacity |
+| `.undim(options?)` | Restore full opacity |
+| `.pulse(scale_or_options)` | Pulse (scale up and back) |
+| `.scenario(options)` | Animate to a named scenario |
+| `.scenarios(options)` | Animate all children to a scenario |
+| `.delay(duration)` | Wait before next step |
+| `.trigger(callback_or_options)` | Run a callback mid-chain |
+| `.whenFinished(callback)` | Run callback when chain completes |
+Steps run in **sequence** by default. Use `.inParallel([...])` for simultaneous steps:
+```js
+const [s1, s2] = figure.add([
+  { make: 'polygon', sides: 4, radius: 0.2, position: [-0.4, 0], color: [1, 0, 0, 1] },
+  { make: 'polygon', sides: 4, radius: 0.3, position: [0.4, 0], color: [0, 0, 1, 0.5] },
+]);
+// Sequential: dissolve in, then rotate and move simultaneously
+s2.animations.new()
+  .dissolveIn()
+  .inParallel([
+    s2.animations.position({ target: [0, 0], duration: 3 }),
+    s2.animations.rotation({ target: Math.PI / 4, duration: 3 }),
+  ])
+  .start();
+```
+### Cross-Element Animations
+Animate other elements from one animation chain using the `element` property:
+```js
+figure.elements.animations.new()
+  .scenarios({ target: 'center', duration: 1 })    // all children to 'center'
+  .scenario({ element: s1, target: 'right', duration: 1 })  // just s1
+  .dissolveIn({ element: s2, duration: 0.5 })
+  .start();
+```
+## Equations
+Create equations with `make: 'equation'`. Define `elements` (terms and symbols) and `forms` (layouts).
+```js
+const eqn = figure.add({
+  make: 'equation',
+  elements: {
+    v: { symbol: 'vinculum' },
+    equals: ' = ',
+  },
+  forms: {
+    1: ['a', 'equals', { frac: ['b', 'v', 'c'] }],
+  },
+});
+```
+Elements not defined in `elements` are auto-created from form strings. Use `_` prefix for non-displayed spacing strings: `'_ + '` renders as ` + ` but the element name starts with `_`.
+Duplicate elements: append `_N` to create copies — `'b_1'`, `'b_2'` display as `b`.
+### Layout Functions
+| Function | Syntax | Description |
+|----------|--------|-------------|
+| `frac` | `{ frac: [num, vinculum, denom] }` | Fraction |
+| `sup` | `{ sup: [base, superscript] }` | Superscript |
+| `sub` | `{ sub: [base, subscript] }` | Subscript |
+| `supSub` | `{ supSub: [base, superscript, subscript] }` | Both super and subscript |
+| `brac` | `{ brac: { left, content, right } }` | Brackets around content |
+| `root` | `{ root: [radical_symbol, content] }` | Square root |
+| `annotate` | `{ annotate: { content, annotation: {...} } }` | Annotation relative to content |
+| `topComment` | `{ topComment: [content, comment, symbol] }` | Comment above with symbol |
+| `bottomComment` | `{ bottomComment: { content, comment, symbol } }` | Comment below |
+| `strike` | `{ strike: [content, strike_symbol] }` | Strikethrough |
+| `topStrike` | `{ topStrike: [content, symbol, comment] }` | Strike with top comment |
+| `bottomStrike` | `{ bottomStrike: [content, symbol, comment] }` | Strike with bottom comment |
+| `box` | `{ box: [content, box_symbol, inSize] }` | Box around content |
+| `bar` | `{ bar: [content, bar_symbol] }` | Bar over/under content |
+| `topBar` | `{ topBar: { content, symbol } }` | Bar above content |
+| `bottomBar` | `{ bottomBar: { content, symbol } }` | Bar below content |
+| `matrix` | `{ matrix: { content: [[...], [...]], left, right } }` | Matrix with brackets |
+| `int` | `{ int: { symbol, content, from, to } }` | Integral |
+| `sumOf` | `{ sumOf: { symbol, content, from, to } }` | Summation |
+| `prodOf` | `{ prodOf: { symbol, content, from, to } }` | Product |
+| `scale` | `{ scale: [content, scale_factor] }` | Scale content |
+| `color` | `{ color: [content, [r,g,b,a]] }` | Color content |
+| `container` | `{ container: { content, width, ... } }` | Fixed-size container |
+| `lines` | `{ lines: { content: [...], justify } }` | Multi-line layout |
+### Symbols
+Define symbols in `elements` with `{ symbol: 'type' }`:
+| Symbol | Description |
+|--------|-------------|
+| `vinculum` | Horizontal line for fractions |
+| `bracket` | Round bracket (set `side: 'left'` or `'right'`) |
+| `squareBracket` | Square bracket |
+| `angleBracket` | Angle bracket |
+| `brace` | Curly brace (use with `side: 'top'`, `'bottom'`, `'left'`, `'right'`) |
+| `bar` | Bar line (use with `side`) |
+| `radical` | Square root symbol |
+| `strike` | Strikethrough (`style: 'cross'`, `'forward'`, `'back'`, `'horizontal'`) |
+| `box` | Box outline |
+| `int` | Integral symbol (use `num` for double/triple integrals) |
+| `sum` | Sigma summation |
+| `prod` | Pi product |
+| `arrow` | Arrow (`direction: 'right'`, `'left'`, `'up'`, `'down'`) |
+| `line` | Decorative line |
+### Forms and Animation
+```js
+const eqn = figure.add({
+  make: 'equation',
+  elements: {
+    v: { symbol: 'vinculum' },
+    equals: ' = ',
+    times: ' \u00D7 ',
+    c: { color: [0, 0, 1, 1] },
+  },
+  formDefaults: { alignment: { fixTo: 'equals' } },
+  forms: {
+    1: ['a', 'equals', { frac: ['b', 'v', 'c'] }],
+    2: {
+      content: ['c', 'times', 'a', 'equals', 'b'],
+      translation: { c: { style: 'curved', direction: 'down', mag: 0.5 } },
+    },
+  },
+});
+eqn.showForm('1');
+eqn.goToForm({ form: '2', delay: 1, duration: 1.5, animate: 'move' });
+```
+Use `formSeries` to define an ordered list of forms, then navigate with `eqn.nextForm()` and `eqn.prevForm()`.
+Use `phrases` to define reusable sub-expressions:
+```js
+{
+  make: 'equation',
+  phrases: { Csq: { sup: ['C', '2'] } },
+  forms: { 1: ['a', '_ = ', 'Csq'] },
+}
+```
+## Interactivity
+### Making Elements Movable
+```js
+figure.add({
+  make: 'polygon', sides: 100, radius: 0.2,
+  move: {
+    bounds: { left: -0.8, bottom: -0.8, right: 0.8, top: 0.8 },
+    freely: { deceleration: 0.5 },
+  },
+});
+```
+### Touch and Click
+```js
+element.setTouchable();
+element.onClick = () => { /* handle click */ };
+// or
+figure.add({
+  make: 'polygon', radius: 0.3, sides: 4,
+  mods: { isTouchable: true, touchBorder: 0.1 },
+});
+```
+### Notifications
+Elements publish events you can subscribe to:
+```js
+ball.notifications.add('setTransform', () => {
+  const p = ball.getPosition().round(1);
+  text.setText({ text: `(${p.x.toFixed(1)}, ${p.y.toFixed(1)})` });
+});
+eqn.notifications.add('onClick', () => nav.nextSlide());
+```
+Common notifications: `setTransform`, `onClick`, `animationsFinished`, `setFigure`.
+## Scenarios
+Scenarios are named presets for position, rotation, scale, and color:
+```js
+figure.add({
+  name: 'shape', make: 'polygon', sides: 4, radius: 0.3,
+  mods: {
+    scenarios: {
+      center: { position: [0, 0], scale: [1, 1], color: [1, 0, 0, 1] },
+      right: { position: [1, 0], scale: [2, 1], color: [0, 0, 1, 1] },
+    },
+  },
+});
+// Set instantly
+figure.elements._shape.setScenario('center');
+// Animate to scenario
+figure.elements._shape.animations.new()
+  .scenario({ target: 'right', duration: 1 })
+  .start();
+// Set all children to a scenario
+figure.elements.setScenarios('center');
+```
+## SlideNavigator
+SlideNavigator manages sequential presentation states with animated transitions.
+### Verbose Syntax
+```js
+const slides = [
+  {
+    show: [eqn, description],
+    steadyState: () => { eqn.showForm('0'); description.setText({ text: 'Step 1' }); },
+  },
+  {
+    show: [eqn, description],
+    enterState: () => { eqn.showForm('0'); description.setText({ text: 'Step 1' }); },
+    transition: (done) => {
+      eqn.animations.new()
+        .goToForm({ target: '1', animate: 'move' })
+        .whenFinished(done)
+        .start();
+    },
+    steadyState: () => { eqn.showForm('1'); },
+  },
+];
+const nav = new Fig.SlideNavigator({ collection: figure.elements, slides });
+nav.goToSlide(0);
+```
+Slide lifecycle: `enterState` → `transition(done)` → `steadyState`. Each slide should fully define its state (not depend on previous slides).
+### Succinct Equation Syntax
+When using equations and text, use shorthand `form` and `text` properties:
+```js
+const nav = new Fig.SlideNavigator({
+  collection: figure.elements, equation: eqn, text: description,
+  slides: [
+    { form: '0', text: 'Goal: Rearrange for |a|' },
+    { text: 'Subtract |b| from both sides' },
+    { form: '1' },
+    { text: '|b| cancels on left side' },
+    { form: '2' },
+  ],
+});
+```
+If `form` or `text` is the same as the previous slide, it only needs to be defined once.
+### Shortcut Animation Syntax
+```js
+const nav = figure.addSlideNavigator();
+nav.loadSlides([
+  {
+    showCommon: 'sq1',
+    enterStateCommon: () => { sq1.setPosition([-0.5, 0.5]); },
+  },
+  { transition: { in: 'sq2' } },                                  // dissolve in
+  { transition: { position: 'sq2', target: [0.3, 0.5], duration: 1 } },  // move
+  {
+    transition: [                                                  // sequence
+      { position: 'sq1', target: [-0.3, 0.5], duration: 1 },
+      { rotation: 'sq1', target: Math.PI / 4, duration: 1 },
+    ],
+  },
+  {
+    transition: [                                                  // parallel (nested array)
+      [
+        { rotation: 'sq1', target: 0, duration: 1 },
+        { rotation: 'sq2', target: 0, duration: 1 },
+      ],
+      { out: ['sq1', 'sq2'] },                                    // dissolve out
+    ],
+  },
+]);
+```
+## Plots
+```js
+// Simple plot
+figure.add({
+  make: 'collections.plot',
+  trace: Fig.range(0, 10, 0.05).map(x => [x, x ** 2]),
+});
+// Customized plot with multiple traces and legend
+figure.add({
+  make: 'collections.plot',
+  width: 1, height: 1, position: [-0.5, -0.5],
+  title: { text: 'Distance', offset: [0, 0.1] },
+  x: { title: 'time (s)' },
+  y: { start: 0, stop: 100, title: 'distance (m)' },
+  trace: [
+    { points: data1, name: 'Linear' },
+    { points: data2, name: 'Quadratic', markers: { sides: 4, radius: 0.02 } },
+    {
+      points: data3, name: 'Cubic',
+      markers: { radius: 0.02, sides: 10, line: { width: 0.005 } },
+      line: { dash: [0.04, 0.01] },
+    },
+  ],
+  legend: { font: { size: 0.05 } },
+});
+```
+Trace `points` can be `[[x, y], ...]` arrays or `Fig.Point` arrays.
+## 3D
+Use an orthographic scene for 3D:
+```js
+const figure = new Fig.Figure({ scene: { style: 'orthographic' } });
+figure.add([
+  { make: 'collections.axis3', start: -0.8, length: 1.6, arrow: { ends: 'all' }, width: 0.01 },
+  { make: 'cube', side: 0.3, color: [1, 0, 0, 1] },
+  { make: 'cameraControl' },
+]);
+```
+For surfaces, use `Fig.surfaceGrid()` to generate point grids:
+```js
+const points = Fig.surfaceGrid({
+  x: [-0.8, 0.8, 0.02], y: [-0.8, 0.8, 0.02],
+  z: (x, y) => Math.sin(Math.sqrt(x*x + y*y) * 4) * 0.3,
+});
+figure.add({ make: 'surface', points, color: [1, 0, 0, 1], normals: 'curve' });
+```
+## Utilities
+```js
+Fig.range(start, stop, step)   // Array of numbers: [start, start+step, ..., stop]
+new Fig.Point(x, y)            // 2D/3D point; has .add(), .sub(), .scale(), .round()
+new Fig.Transform()            // Transform builder
+  .translate(x, y)
+  .rotate(angle)
+  .scale(sx, sy)
+Fig.round(value, precision)    // Round to N decimal places
+// Color format: [r, g, b, a] with values 0 to 1
+// [1, 0, 0, 1] = red, [0, 0, 1, 0.5] = semi-transparent blue
+```
+## Element Methods Reference
+```js
+element.show()                    // Make visible
+element.hide()                    // Make invisible
+element.setPosition([x, y])       // Set position
+element.getPosition()             // Get position (returns Point)
+element.setRotation(angle)        // Set rotation in radians
+element.getRotation()             // Get rotation
+element.setScale(x, y)            // Set scale
+element.setColor([r, g, b, a])    // Set color
+element.setOpacity(value)         // Set opacity (0-1)
+element.dim()                     // Dim to 0.3 opacity
+element.undim()                   // Restore full opacity
+element.setScenario('name')       // Jump to named scenario
+element.setTouchable()            // Enable touch
+element.setMovable()              // Enable dragging
+element.pulse({ scale: 1.5 })     // Pulse animation
+element.setText({ text: '...' })  // Update text content (text elements)
+```

package/package.json CHANGED Viewed

@@ -1,8 +1,23 @@
 {
   "name": "figureone",
-  "version": "0.15.10",
+  "version": "1.0.1",
   "description": "Draw, animate and interact with shapes, text, plots and equations in Javascript. Create interactive slide shows, and interactive videos.",
   "main": "index.js",
+  "types": "types/index.d.ts",
+  "unpkg": "figureone.min.js",
+  "jsdelivr": "figureone.min.js",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./index.js"
+    }
+  },
+  "files": [
+    "index.js",
+    "figureone.min.js",
+    "types/",
+    "llms.txt"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/airladon/figureone.git"

package/types/index.d.ts ADDED Viewed

@@ -0,0 +1,128 @@
+import * as g2 from './js/tools/g2';
+import * as math from './js/tools/math';
+import * as m2 from './js/tools/m2';
+import * as m3 from './js/tools/m3';
+import * as morph from './js/tools/morph';
+import Figure from './js/figure/Figure';
+import TimeKeeper from './js/figure/TimeKeeper';
+import { Recorder } from './js/figure/Recorder/Recorder';
+import { FunctionMap, GlobalFunctionMap } from './js/tools/FunctionMap';
+import * as color from './js/tools/color';
+import * as html from './js/tools/htmlGenerator';
+import * as misc from './js/tools/tools';
+import * as css from './js/tools/styleSheets';
+import * as lines from './js/figure/geometries/lines/lines';
+import { FigureElement, FigureElementPrimitive, FigureElementCollection } from './js/figure/Element';
+import Scene from './js/tools/geometry/scene';
+import DrawContext2D from './js/figure/DrawContext2D';
+import WebGLInstance from './js/figure/webgl/webgl';
+import DrawingObject from './js/figure/DrawingObjects/DrawingObject';
+import VertexGeneric from './js/figure/DrawingObjects/VertexObject/VertexGeneric';
+import { FigureFont } from './js/figure/DrawingObjects/TextObject/TextObject';
+import HTMLObject from './js/figure/DrawingObjects/HTMLObject/HTMLObject';
+import HTMLEquation from './js/figure/Equation/HTMLEquation';
+import CollectionsAngle from './js/figure/FigureCollections/Angle';
+import CollectionsLine from './js/figure/FigureCollections/Line';
+import CollectionsPolyline from './js/figure/FigureCollections/PolyLine';
+import EquationLabel from './js/figure/FigureCollections/EquationLabel';
+import { Equation } from './js/figure/Equation/Equation';
+import EquationForm from './js/figure/Equation/EquationForm';
+import SlideNavigator from './js/figure/SlideNavigator';
+import type { TypeRotationDirection, TypeParsablePoint } from './js/tools/g2';
+import type { COL_Line, OBJ_LineLabel, TypeLabelledLine } from './js/figure/FigureCollections/Line';
+import type { TypeLabelLocation, TypeLabelSubLocation, TypeLabelOrientation } from './js/figure/FigureCollections/EquationLabel';
+import type { COL_Angle, TypeAngleLabelOptions, TypeLabelledAngle } from './js/figure/FigureCollections/Angle';
+import type { OBJ_Figure } from './js/figure/Figure';
+import type { COL_Polyline, OBJ_PolylinePad } from './js/figure/FigureCollections/PolyLine';
+import * as anim from './js/figure/Animation/Animation';
+export type { TypeRotationDirection, TypeLabelLocation, TypeLabelSubLocation, TypeLabelOrientation, COL_Line, COL_Angle, OBJ_Figure, OBJ_LineLabel, TypeAngleLabelOptions, COL_Polyline, OBJ_PolylinePad, TypeParsablePoint, TypeLabelledAngle, TypeLabelledLine, };
+declare const Fig: {
+    version: string;
+    gitHash: string;
+    tools: {
+        math: typeof math;
+        g2: typeof g2;
+        m3: typeof m3;
+        color: typeof color;
+        css: typeof css;
+        html: typeof html;
+        misc: typeof misc;
+        lines: typeof lines;
+        m2: typeof m2;
+        morph: typeof morph;
+    };
+    Figure: typeof Figure;
+    Recorder: typeof Recorder;
+    FunctionMap: typeof FunctionMap;
+    GlobalFunctionMap: typeof GlobalFunctionMap;
+    SlideNavigator: typeof SlideNavigator;
+    FigureElement: typeof FigureElement;
+    FigureElementCollection: typeof FigureElementCollection;
+    FigureElementPrimitive: typeof FigureElementPrimitive;
+    DrawContext2D: typeof DrawContext2D;
+    WebGLInstance: typeof WebGLInstance;
+    DrawingObject: typeof DrawingObject;
+    VertexGeneric: typeof VertexGeneric;
+    FigureFont: typeof FigureFont;
+    HTMLObject: typeof HTMLObject;
+    CollectionsAngle: typeof CollectionsAngle;
+    CollectionsLine: typeof CollectionsLine;
+    CollectionsPolyline: typeof CollectionsPolyline;
+    EquationLabel: typeof EquationLabel;
+    EquationForm: typeof EquationForm;
+    Equation: typeof Equation;
+    HTMLEquation: typeof HTMLEquation;
+    Animation: typeof anim;
+    Scene: typeof Scene;
+    Point: typeof g2.Point;
+    Plane: typeof g2.Plane;
+    Line: typeof g2.Line;
+    Rect: typeof g2.Rect;
+    Transform: typeof g2.Transform;
+    parsePoint: typeof g2.getPoint;
+    LineBounds: typeof g2.LineBounds;
+    RectBounds: typeof g2.RectBounds;
+    RangeBounds: typeof g2.RangeBounds;
+    minAngleDiff: typeof g2.minAngleDiff;
+    getTriangleCenter: typeof g2.getTriangleCenter;
+    polarToRect: typeof g2.polarToRect;
+    rectToPolar: typeof g2.rectToPolar;
+    threePointAngle: typeof g2.threePointAngle;
+    threePointAngleMin: typeof g2.threePointAngleMin;
+    clipAngle: typeof g2.clipAngle;
+    getPoint: typeof g2.getPoint;
+    getPoints: typeof g2.getPoints;
+    getScale: typeof g2.getScale;
+    getLine: typeof g2.getLine;
+    getRect: typeof g2.getRect;
+    getPlane: typeof g2.getPlane;
+    getTransform: typeof g2.getTransform;
+    surfaceGrid: typeof g2.surfaceGrid;
+    cube: typeof g2.cube;
+    sphere: typeof g2.sphere;
+    polygon: typeof g2.polygon;
+    revolve: typeof g2.revolve;
+    surface: typeof g2.surface;
+    cone: typeof g2.cone;
+    cylinder: typeof g2.cylinder;
+    line3: typeof g2.line3;
+    getMaxTimeFromVelocity: typeof g2.getMaxTimeFromVelocity;
+    toNumbers: typeof g2.toNumbers;
+    pointsToNumbers: typeof g2.pointsToNumbers;
+    joinObjects: typeof misc.joinObjects;
+    m3: typeof m3;
+    morph: typeof morph;
+    misc: typeof misc;
+    round: typeof math.round;
+    roundNum: (value: number, precision?: number) => number;
+    range: typeof math.range;
+    randSign: typeof math.randSign;
+    randBool: typeof math.randBool;
+    randInt: typeof math.randInt;
+    rand: typeof math.rand;
+    randElement: typeof math.randElement;
+    randElements: typeof math.randElements;
+    removeRandElement: typeof math.removeRandElement;
+    TimeKeeper: typeof TimeKeeper;
+};
+export default Fig;