Notebook
<Notebook> -- a thin shell around a reactive <DynamicModule tracked-symbols="all"> of <Cell>s: the unified cell owns editing and evaluation, this element owns the notebook-specific chrome (add/remove, drag to reorder) and the seed.
A cell binds a variable with := (a := 5, f(x) := x^2); later cells use that name, in either direction -- TrackedSymbols -> All schedules by dependency, not document position, which is what makes reordering safe. seed is an optional JSON array of cell sources, Epsil unless in-form="latex".
Variable-centric and Desmos-like: cells can be reordered (drag the ordinal), so references are by name only -- a cell-number reference draws a diagnostic (the module rejects it outright, same as any other reactive DynamicModule). The ordinal on the left is a pure display index (a CSS counter), referencing nothing.
The reader's cells are kept (notebook-record.ts): a reload, or another tab on the same page, opens the notebook as they left it. Reset returns it to the seed.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
seed | string | "" | A JSON array of cell sources, used as the notebook's initial cells. |
inForm attribute in-form | string | "epsil" | The seed's syntax: epsil (default) or latex, the syntax notatio-cell reads. |
transient | boolean | false | Transient -> True: keep nothing, so every visit opens from the seed. |
As a web component
Plain custom elements, no framework required: import @enumeratio/frontend for the side effect and write <notatio-notebook> in any HTML. Attributes are kebab-case and always strings; the props table above names each one's attribute where it differs from its prop.