v0.11.0

A Chart or Plot is in the packed page as SVG whenever pack can draw it exactly: it shows before the scripts run, with scripts off, and in print. One it cannot (below) appears when the script draws it, as before. One set of Controls can drive figures in several sections, and a written Question with a model answer inside is a self-check that stays on the page.

What an author does differently

• Pages keep writing <Chart option={...} /> and <Plot option={...} />, from the page, in an Explore or in a client component. pack draws each figure three times (a desktop column, half of one, a phone) and the page shows the copy nearest the element's width until the kit script draws it at its own size, without animating over it. Hover values, legends, zoom, setup and Explore's frames work as before, on the live chart. New and optional: height on Chart, Plot and Explore, the figure's height as a length (height="clamp(16rem, 34vw, 21rem)"), which pack reads. Size figures with it, not with CSS on .chart: the gallery pages moved their .chart.mix { block-size: ... } rules into the prop.
• Token colours, color-mix() and the tone under the chart stay CSS in the drawing, so it follows light and dark and a page's token overrides with no flash of other colours. Colours ECharts mixes from two of them, as a visualMap does, are drawn as those two mixed. Keep palette tokens opaque: pack reads a mix only between tokens the option lists together. A chart whose colours pack cannot write exactly (a colour function, a token mixed with a literal or translucent colour, colorAlpha, colorLightness, colorSaturation, colorHue, a visualMap's opacity, a markArea beside a translucent colour) is not drawn by pack.
• A chart's option functions (formatters) now also run in pack. A chart whose functions throw there, because they read the page, is not drawn by pack and appears when the script draws it, as before.
• A page rule that may match a figure's element and set its size, padding, border, all, box-sizing or an animation (or the root font size) leaves that figure to the script, as does a height that is not a length in px, rem, vw, vh, clamp(), min() or max(). A Plot's legend that wraps into a different number of rows across the widths a copy is shown at is not drawn either.
• For a layout that changes with the chart's width, write ECharts' media queries in the option rather than reading the element's width in a client component: the phone copy follows them, while code that measures the element runs only in the browser.
• A packed page grows by the drawings: about 10 to 20 KB per figure.
• One set of controls can drive several figures and readouts in different sections, with no client component: write <Controls id="usage" controls={[...]} /> once (the same range, choice and toggle controls as Explore), then <Explore use="usage" label="..." frame={daily} /> in any section after it. Each Explore takes use in place of controls, shows no row of its own, and keeps everything else (a Plot, a Chart, a readout, stats or a caption; frames pack computes or a "use client" module exports, base, height). frame gets all the set's values in the order the controls are written, so list the ones most figures read first and let a frame take fewer parameters. The choices are kept across reloads like any control with an id. A Controls and its Explores belong in one place: the page outside the Views, or one View, or one record of a filled View (a reader changes the controls of the place they look at). pack fails on a use with no Controls above it in its place (naming the sets that are), on use together with controls, on two Controls with one id, and on a frame that throws for a combination. Each Explore's precomputed frames still fit 100 KB, so add a control for what changes the figures. Each such figure also shows a quiet line of the chosen values ("7 days · Mac · Breakdown") that links back to the controls, kept in print, and left out on screen when the figure is written right under its own Controls; a toggle-only set with every toggle off says so ("Cached off", new label key off). kit Explore documents it (kit Controls prints the same).
• A written Question with a model answer inside is a self-check: what the reader writes is kept on the page, stays out of the reply and brings no Reply bar. One with nothing inside still joins the reply. A page that keeps Question answers without a Reply bar gets a Clear answers button at its end once one is saved, which asks before it clears the answers and leaves other controls as the reader set them (new label keys clearAnswers, clearAnswersPrompt). On a page with a Reply bar, a self-check's answer now brings the bar's Clear too.