Canvas SDK

@internote/canvas-sdk is how an environment is written — the environments (graph, code, …) a scene’s canvas is built from. One definition covers both sides: the attributes and child vocabulary the compiler validates, and the surface, animation and chrome the reader sees.

@internote/canvas-sdk566 exports5 entry points
On this page

Build Internote canvas environments — the graph, code, … a scene's canvas holds — and declare how the compiler reads them.

This is the package root, and it is React-free: everything here runs in a browser, on a server, in a build script or under node --test. It holds both halves of an environment that are not drawing:

  • Defining and registering — defineEnvironment, EnvironmentDefinition, the EnvironmentRegistry, and the declarations a definition carries: toolbar items, footer, storage tiers, plugin manifest.
  • The compile side — attribute and value types, the library builder, the refiner kit for parsing your own value types, and the semantic pass a validate hook is written with.
  • Reading content — compiled documents, the node tree (flatNodes, nodesOf, attrOf…), expressions, data columns, colours, text measurement, parameters, the reader's view.
  • Time — steps, cues, keyframe tracks and the per-environment EnvironmentAnimationRuntime.
  • Live values — the LiveValueStore a surface publishes computed numbers into and prose reads them from.

The other entry points:

  • @internote/canvas-sdk/react — what a surface is drawn with: the hooks, labels, maths, footer controls and chrome components.
  • @internote/canvas-sdk/host — for an application embedding the canvas: the document host, the scene view and the adapters it is given.
  • @internote/canvas-sdk/compile — the compile pipeline. Server only.
  • @internote/canvas-sdk/testing — a headless host and a worked example.
  • @internote/canvas-sdk/styles — the stylesheet, imported once.

The package depends on @internote/chalk, the language, for the compiled document's shapes, the expression grammar and the base vocabulary, and on React and KaTeX for the React entry points.

#By area

Environments
The definition itself — what defineEnvironment takes, what the registry does with it, and the helpers a definition reads its own node tree with.
75
Compiling
What runs before a reader sees anything: an attribute refined from the text it was written as, the semantic pass over the result, the manifest a plugin declares, and the service that compiles a document.
36
Drawing
The React half: the hooks a surface is built on, the components it draws labels, maths and rich text with, the footer controls, and the geometry behind a mark.
100
Animation
Steps and cues as the runtime plays them: the keyframe tracks a cue.to declares, the interpolations that read them, and the controller that advances a step.
23
Storage
The two tiers an environment keeps state in: the session it holds while it is open, and the interaction store that outlives the visit.
24
Toolbar and footer
The chrome the host draws around a surface: the toolbar and the footer an environment contributes to as data, how the host merges every environment's contribution, and the view channel behind the zoom buttons.
44
Data
Datasets as an environment reads them: a column resolved to numbers, dates, slices or categories, the axis presets over them, and a series entry.
95
Parameters and controls
A scene’s named values and the controls that drive them: what each ranges over, which names an expression leaves open, the sweeps a cue control runs, and the state that holds where the reader put things.
17
Text and expressions
What an attribute’s text becomes: rich text and its footnotes, live values, symbol names, measured and wrapped labels, and a compiled expression.
53
Marking answers
How a question’s answer is judged: a maths answer against its expected value and form, a text answer against its accepted strings, and a choice scored by the options picked. Then where the reader stands on a scene’s tasks: each part’s status, reported as they work, and the one status the scene shows for them all.
18
Colour
The colour vocabulary an author writes and a surface resolves: hues and their tones, the ramps, the surface paints, and the CSS each becomes.
46
Host
For the application embedding a canvas, not for the environments in it: the document and scene hosts, and the adapters they are given for storage, code execution and plugins.
25
Testing
The fixture and the walkthrough a test drives a definition through the whole environment contract with, through public surfaces only. The headless host it mounts on is under Host.
10

#Entry points

The root is React-free; @internote/canvas-sdk/react is the half that draws. @internote/canvas-sdk/styles is the stylesheet, imported once by the application, and exports nothing.

@internote/canvas-sdk
packages/canvas-sdk/src/index.ts
Documented under Environments, Compiling, Drawing, Animation, Storage, Toolbar and footer, Data, Parameters and controls, Text and expressions, Marking answers, Colour and Host.
491
@internote/canvas-sdk/compile
packages/canvas-sdk/src/compile/index.ts
Documented under Compiling.
3
@internote/canvas-sdk/host
packages/canvas-sdk/src/host/index.ts
Documented under Host.
23
@internote/canvas-sdk/react
packages/canvas-sdk/src/react/index.ts
Documented under Drawing and Toolbar and footer.
94
@internote/canvas-sdk/testing
packages/canvas-sdk/src/testing/index.ts
Documented under Testing.
15

Last updated