Functional reference

Features

Interactive reference implementations for reusable framework capabilities.

Transfer

Clipboard and data helpers

clipboard-data.js
Text and JSON round-tripClipboard API · no history

The helper wraps browser clipboard text reads/writes and consistent JSON serialization/parsing. It does not invent an application data format, retain clipboard history, or silently fall back when browser permission is unavailable.

Payload

editable

Transfer status

action-feedback.js

Copy JSON validates and pretty-serializes the editor before writing. Paste JSON parses clipboard text before replacing the editor. Raw text actions preserve the text exactly.

Color encoding

Data color scales

data-color-scale.js
Value → color mappingcontinuous · quantized · categorical

The helper maps application values into explicit color arrays without owning palette selection, dataset meaning, or rendering. Numeric scales interpolate or quantize; categories use declared order or deterministic hashing. Diverging scales can define an explicit achromatic midpoint plus one shared center-influence ramp for tone and opacity. Legend metadata comes from the same scale used by the renderer.

Domain — Palette —

Legend model

renderer-neutral
Mapping
—
Points
—
Seed
color-scale-v1

Point positions and values are generated once with deterministic-random.js; the selected scale changes only their color encoding. Diverging mode keeps an explicit achromatic center RGB and uses one symmetric sigmoid-like Ramp tightness profile for both tone and opacity: higher tightness confines Center-tone influence to a narrower region around zero, while lower Center opacity applies a transparency mask with that same shape. At 0% Center opacity, premultiplied interpolation prevents the center RGB from tinting nearby visible values. The legend uses the same color/opacity mapping as the points and exposes transparency over a checkerboard substrate. The specimen consumes the active rendered perceptual palette, including color-vision assistance, without making the scale helper theme-aware.

Content

Editable authored content

editable-content.js · editable-content-ui.js

Use the filled Edit icon in the status bar to expose only registered prose, headings, eyebrows, annotations, and Markdown info bodies. Functional UI strings—buttons, control labels, toggles, menus, table cells/headers, and live readouts—are intentionally outside this system.

Site-wide browser-local edit bundlestable block id · authored original · local override · JSON export

Editing mode is page-local, but overrides live in one application-wide browser store. Edit this paragraph, move to Styles or the app page, edit another eligible block, then use the filled Save as icon in the status bar: one JSON file carries every local edit across pages with its exact source file/anchor, role, authored original, replacement content, and originating app version.

Markdown-backed info dialogs register their source file as the stable block identity, so editing the same information popup from any page updates the same site-wide override. Nothing in this workflow writes back to the web server.

Controls

Control state binding

control-binding.js
Native controls bound to application statecontrol → state · state → control · teardown

The binding layer removes repetitive native-control plumbing without owning persistence or application state. Change a control to update the state object; use Programmatic update to change the state first and synchronize all controls back from it.

Normalize
Scale

Application-owned state

live

                        

Bindings initialized from state.

The framework binding owns event wiring, native value parsing/writing, output synchronization, radio-group synchronization, and teardown. The application still decides where state lives, whether it persists, and what rerenders after a change.

Diagnostics

Debug diagnostics

?debug=LEVEL · site-config.json · debug.js
Deployment policy and effective levelURL-only · gated · capped

The URL requests a numeric verbosity level, while site-config.json decides whether debugging is enabled and caps the effective level. Any positive effective level also reveals navigation-hidden pages and is preserved by framework-generated internal navigation.

Current debug policy and URL state.
Requested level
Effective level
Policy enabled
Policy max level
Internal-link carry
Hidden navigation

debug=1 exposes identity/basic state; debug=2 adds resolved configuration; debug=3 adds provenance and decision detail. Higher levels are reserved for more detailed framework diagnostics. These level links reload Features while restoring the current browser scroll position.

Shared debug overlaydebug-overlay.js · .debug-overlay

Diagnostic modules supply content while the framework owns one overlay presentation: monospace typography, white foreground, transparent background, dark text shadow, compact tables, and pointer-transparent behavior.

Feedback

Action and status feedback

action-feedback.js
Transient action resultneutral · info · success · warning · error

Actions can report a compact semantic result without inventing a new status treatment. The controller owns the live-region presentation and optional auto-clear timer; the application still owns the action and its durable state.

Trigger feedback

live

Shared status region

.action-feedback

The semantic color and icon are presentation only. Feedback does not become application state or enter snapshots unless the application explicitly models it as durable state.

Files

File import and export

file-transfer.js · csv.js · .file-drop-zone
CSV import pipelinedrop · choose · validate · parse · preview · export

The framework owns file validation, text reading, and browser download plumbing. This specimen uses CSV as a lightweight parser example, previews bounded rows through the shared scientific-table contract, and keeps the complete parsed dataset available for export.

Drop a CSV file here CSV only · up to 2 MB. Drag-and-drop is optional; Choose CSV provides the ordinary file-input path.
File None Size — Rows 0 Columns 0

Choose a CSV file or load the embedded example.

Preview appears after a successful import.

History

Undo and redo

undo-history.js
Transactional snapshot historyrecord · begin/commit · undo · redo · clear

The helper stores cloned snapshots while the application keeps ownership of live state, rendering, and persistence. Drag the slider: all intermediate input events are grouped into one undo step. A new edit after Undo clears the redo branch.

History initialized from application-owned state.

History state

transient
Undo steps
0
Redo steps
0
Next undo
—
Next redo
—

History is intentionally outside persistence and snapshots. Applications choose which state is worth recording, when a transaction begins/ends, and whether a restored snapshot should itself become a history step.

Display

Layer display state

layer-display.js
Visible · opacity · styleapplication-owned rendering

The shared model standardizes only the recurring display-state shell. Layer meaning, render order, geometry, style vocabulary, persistence, and snapshot-domain ownership remain application decisions.

Display layers

Gridreference guides
Seriesprimary trace
Markersobservations

Application renderer

live state

                      

This state is snapshot-eligible only when the application classifies it as reproducibility-relevant. For one app it may belong to Application; for another, a document-specific layer configuration may belong to Content.

Authoring

Runtime Markdown

<md-block> · markdown runtime
Markdown inside authored HTMLruntime transform · TOC aware

Pages that declare the markdown runtime can mix ordinary HTML with <md-block> regions. Markdown headings are assigned stable anchors and participate in the existing page TOC after rendering.

<md-block>
        ## Section

        A paragraph with **bold**, *italic*, `code`, and [a link](../methods/).

        ### Subsection

        - one
        - two
        </md-block>
### Live Markdown specimen This paragraph was written as Markdown. It contains **strong emphasis**, *italic emphasis*, `inline code`, and a [link to Methods](../methods/). - Markdown lists become semantic HTML lists. - The rendered elements inherit Ptolemaic Clock typography and spacing. - This `###` heading becomes a TOC subitem under the Markdown feature section. ### Runtime behavior The primary parser is pinned Marked. If that external parser is unavailable, the framework still renders the core authoring subset with its local fallback parser and reports the runtime environment as degraded rather than blocking the application shell.

Use ## for top-level Markdown sections on ordinary pages, ### for TOC subitems, and #### for third-level TOC items. The framework-owned page title remains the document H1.

Authoring

Metadata diagnostics

site-metadata.json · site-discovery.json
Resolved page metadatabuild-time QA

The site generator resolves inherited page metadata, crawler policy, social metadata, sitemap eligibility, and generic structured data once. This report surfaces missing or duplicate core fields and contradictory discovery state without copying the full metadata catalogue into the eager application runtime.

Numbers

Numeric formatting

numeric-format.js
Global display precisionglobal default

Uses the current System preferences default. Calculations retain their original numeric values; only display formatting changes.

Current default: 2 decimal places

Local overrideview · table · column

A view, table, or column can inherit the global setting or request a local decimal-place override.

Measured value1.235

Local override: 3 decimal places

Formatting modesfixed · scientific · percent · significant

Common scientific presentation modes share missing-value, infinity, sign, and locale-safe handling.

InputFormattedPurpose

Authoring

Page runtime environments

runtime-environments.json · runtime.environments
Page-scoped optional runtimesnamed · lazy · fail-soft

A page declares only the optional runtime environments it needs. The central registry owns their resources; page-local controller scripts remain under wrapper.scripts. Runtime environments are not inherited through the hierarchy and are loaded only on requesting pages.

"runtime": {
          "// environments": "\"a\" or [\"a\", \"b\", ...]. Use [] for none.",
          "environments": ["mathjax"]
        }

The Mathematics specimen requests mathjax and demonstrates both browser-native MathML and MathJax TeX. External runtime failure never prevents the normal application shell from starting.

Overlay

Anchored popover controller

popover-controller.js
Non-modal anchored controlsposition · dismiss · focus

A shared controller anchors compact non-modal UI to either a DOM trigger or an application-supplied virtual screen-space rectangle, flips and clamps it inside the viewport, and closes on outside click or Escape. This specimen uses a DOM trigger, so it also maintains aria-expanded and restores trigger focus; Selection and inspection demonstrates virtual-anchor use.

Popover anchor

bottom-start
Closed

Try opening near a viewport edge, scrolling, clicking elsewhere, or pressing Escape.

State

Preset library

preset-library.js
Named save/apply preset workflowfactory · user · import/export

Preset libraries are intentionally separate from snapshots. The application chooses the captured payload, factory presets remain immutable, user presets are save/replace/delete entries, and import/export travels through a smaller named preset envelope rather than the snapshot transport.

Current specimen state

application-owned

Applications decide which fields presets capture. This specimen stores only a small renderer/sample/legend/tone bundle.

Factory presets
0
User presets
0
Selected source
—
Data schema
v1
{}

Library actions

format v1

Preset library ready.

Snapshots are not presets. Presets deliberately stay named, library-oriented, and application-scoped; snapshots remain portable multi-domain state envelopes.

No preset selected.

Reproducibility

Deterministic randomization

deterministic-random.js
Seeded repeatable sequencemulberry32-v1

The same seed and algorithm identifier reproduce the same pseudo-random sequence. Applications can store the seed and algorithm with snapshots, fingerprints, or scientific provenance instead of serializing every randomized result.

Generator

seeded

Generate from seed restarts the stream. Next values continues from the current deterministic generator state.

Reproducibility record

mulberry32-v1
Integers 1–100—
Shuffled samples—

Rendering

Render scheduling

render-scheduler.js
Frame-coalesced invalidationreasons · dirty keys · lifecycle

Repeated resize, control, layer, pan, zoom, and style changes can request work freely while the scheduler collapses them into one render callback per animation frame. Reasons and dirty keys are preserved as hints; the application still decides what state changed and what must actually be redrawn.

Invalidation requests

requestAnimationFrame
Statuswaiting for request

The burst calls request() eight times synchronously across viewport, controls, layers, resize, and style concerns. One animation-frame callback receives the aggregated batch.

Latest render pass

coalesced batch
Total requests
0
Render frames
0
Last batch
—
Reasons
—
Dirty keys
—

Dirty keys are opaque application vocabulary such as scene, labels, or layer IDs. The scheduler never interprets them and owns no render state.

Interaction

Selection and inspection

selection-state.js
Hover · primary · multiple selectionstable application ids

The shared model tracks transient hover, ordered selected IDs, and one primary selection while the application retains object identity, hit testing, rendering, inspection content, persistence, and snapshot semantics. Ordinary activation replaces the selection; Shift/Command/Control activation demonstrates additive toggle behavior.

Selectable field

hover · click · modifier-click
01 02 03 04 05 06 07 08 09 10 11 12

Inspection state

renderer-neutral
Hover
—
Primary
—
Selected
0
IDs
—

The specimen's SVG targets provide hit testing only. The model receives stable IDs and returns selection state; it never receives circles, coordinates, labels, or domain objects.

Virtual data-point inspectionscreen-space anchor · compact anatomy

Virtual anchors let renderer-owned marks open the same viewport-aware popover without requiring the rendered point itself to provide DOM geometry. This SVG specimen deliberately derives a screen-space rectangle from application point data; Canvas, WebGL, charts, and sky maps can supply the same contract.

Point field

click · Enter · Space

The active mark supplies only application data. Its virtual rectangle is recomputed in viewport coordinates whenever the shared controller positions or repositions the popup.

State

Versioned snapshots

versioned-snapshot.js
Portable state with independent domainsinterface · application · content

One snapshot envelope can carry several independently versioned state domains. Capture the current interface, the Controls specimen state, and an example content fingerprint; change any of them, then restore only the domains you select.

Snapshot domains

format v1

The fingerprint is an application-owned opaque value. DEMO-FP1:alpha is only a specimen string; the snapshot framework does not define its syntax.

Capture the current state to create a snapshot.

Envelope and domain compatibility

live
DomainSchemaStatus
Interfacev1Current
Applicationv1Current
Contentv1Current
No snapshot captured yet.

Snapshots are not presets. Snapshots are portable reproducible state envelopes and may include interface, application, and content together. Presets are now a separate named-library workflow that can reuse the same domain capture/validation adapters while choosing its own subset and lifecycle.

Tables

Scientific tables

scientific-table.js · .data-table
Semantic scientific tablesort · select · units · missing values

Native table markup stays the baseline. Numeric columns are right-aligned with tabular figures, headers stay visible while scrolling, missing observations sort last, and selected rows retain a clear theme-aware state.

Selected 0 Sort Sample ↑
Example scientific measurements with sortable columns, row selection, units, missing observations, and local numeric precision.

Table values inherit the global display precision; Signal uses a local 3-decimal column override.

Tasks

Async/latest task

latest-task-controller.js
Latest-request-wins coordinationabort · stale suppression · pending/success/error

The controller gives each run a request id, requests cancellation of the previous run through AbortSignal, and still suppresses an older result if that task ignores abort. Applications own the actual network/computation task, retry policy, result meaning, presentation, persistence, and whether a completed result changes application state.

Requests

simulated async work

Race latest starts a slow task that deliberately ignores abort, then starts a fast task. The fast request commits; the eventual slow result is reported as stale and cannot overwrite it.

Statusidle

No task has run yet.

Controller state

latest wins
Latest request
—
Active request
—
Committed request
—
Stale suppressed
0
Cancelled
0
Committed result—

Abort is cooperative optimization, not correctness. The request-id/latest check is the correctness boundary: an obsolete task may finish, reject, or ignore its signal, but it cannot become the current committed result.

Interaction

Viewport interaction

viewport-interaction.js
Pan · zoom · pinch · keyboardapplication-owned coordinates

The shared controller owns input mechanics and lifecycle only. It reports screen-space pan deltas and focal-point zoom factors; the application decides whether those gestures move Cartesian coordinates, a camera, a celestial projection center, or another domain-specific view.

Interactive viewport

drag · wheel/pinch · arrows · +/−

Application view state

demo transform
Pan x
0 px
Pan y
0 px
Scale
1.00×
Last input
ready

Reset/Fit are callback hooks rather than built-in geometry. This specimen implements them only for its local SVG transform.

Visualization

Visualization host

visualization-host.js · visualization-export.js · .visualization-host
Responsive visualization viewportresize · DPR · states · SVG/PNG export

The host owns responsive geometry and standard loading, empty, and error presentation while the application keeps complete control of the renderer. Export helpers prepare standalone SVG or raster PNG output at an explicit scale/density without taking ownership of the scene or the browser download action.

Viewport — Pixel ratio —

Ready: the renderer receives CSS-pixel dimensions and device-pixel ratio from the shared host.

Export —