@kymoscope/sdk 0.0.0-stage → 0.1.1

package/dist/react.js

@@ -0,0 +1,2 @@
+/*! @kymoscope/sdk (c) 2026 Kymoscope. Proprietary software: use requires a license. See LICENSE.md. */
+import{createContext as e,useContext as t,useEffect as n,useRef as r,useSyncExternalStore as i}from"react";import{jsx as a}from"react/jsx-runtime";var o=e(null);function s({engine:e,children:t}){return a(o.Provider,{value:e,children:t})}function c(){let e=t(o);if(!e)throw Error(`useEngine() needs a <KymoscopeProvider engine={...}> above it`);return e}function l(e,t=Object.is){let n=c(),a=r(null),o=()=>{let r=n.getState(),i=a.current;if(i&&i.state===r)return i.value;let o=e(r);return i&&t(i.value,o)?(a.current={state:r,value:i.value},i.value):(a.current={state:r,value:o},o)};return i(e=>n.subscribe(e),o,o)}function u({id:e,className:t,style:i,options:o,onStatus:s,onContextMenu:l,onViewChange:u,viewRef:d}){let f=c(),p=r(null),m=r(null),h=r({onStatus:s,onContextMenu:l,onViewChange:u,viewRef:d});return h.current={onStatus:s,onContextMenu:l,onViewChange:u,viewRef:d},n(()=>{if(!p.current)return;let t=f.charts.mount(e,p.current,o);m.current=t;let n=[t.on(`status`,e=>h.current.onStatus?.(e)),t.on(`contextmenu`,e=>h.current.onContextMenu?.(e)),t.on(`viewchange`,e=>h.current.onViewChange?.(e))];return h.current.viewRef?.(t),()=>{for(let e of n)e();h.current.viewRef?.(null),t.destroy(),m.current=null}},[f,e]),n(()=>{m.current?.setOptions(o??{})},[JSON.stringify(o??{})]),a(`div`,{ref:p,className:t,style:i})}export{u as Chart,s as KymoscopeProvider,c as useEngine,l as useEngineState};

package/dist/styles/charts.css

@@ -0,0 +1,207 @@
+/*
+ * @kymoscope/sdk chart styles. Import once: `import '@kymoscope/sdk/styles/charts.css'`.
+ *
+ * Colours are CSS custom properties; override them on any ancestor of a chart
+ * (or per chart with the `style` mount option):
+ *   --chart-bg      plot background
+ *   --chart-muted   axis labels, ticks, legend text
+ *   --chart-grid    grid and frame lines
+ *   --accent        cursor and highlights
+ * Dark is the default; `data-color-scheme="light"` on an ancestor (or the
+ * `theme` mount option) switches to light.
+ */
+:where(:root) {
+  --chart-bg: oklch(0.13 0.022 255);
+  --chart-muted: oklch(0.52 0.02 255);
+  --chart-grid: oklch(0.29 0.022 255);
+  --accent: oklch(0.76 0.14 58);
+}
+
+:where([data-color-scheme='light']) {
+  --chart-bg: oklch(0.995 0 0);
+  --chart-muted: oklch(0.46 0.02 255);
+  --chart-grid: oklch(0.87 0.018 255);
+  --accent: oklch(0.52 0.19 58);
+}
+
+:where([data-color-scheme='dark']) {
+  --chart-bg: oklch(0.13 0.022 255);
+  --chart-muted: oklch(0.52 0.02 255);
+  --chart-grid: oklch(0.29 0.022 255);
+  --accent: oklch(0.76 0.14 58);
+}
+
+.kymo-chart {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--chart-bg);
+}
+
+.kymo-chart > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.kymo-chart .chart-canvas-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.kymo-chart .chart-canvas {
+  display: block;
+  width: 100%;
+  vertical-align: top;
+}
+
+.kymo-chart .chart-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.kymo-chart .kymoscope-attribution {
+  flex: none;
+}
+
+/* Alarm line drawn over the plot (kinds whose chart does not draw its own). */
+.kymo-chart > .kymo-alarm {
+  position: absolute;
+  inset: 0;
+  flex: none;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+/* ── Annotations ───────────────────────────────────────────────────────────
+   An overlay over the plot. It lets the pointer through to the chart except
+   on the annotations; while a tool is set it takes the pointer to draw. */
+.kymo-chart > .kymo-annotations {
+  position: absolute;
+  inset: 0;
+  flex: none;
+  z-index: 3;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.kymo-annotations.is-drawing {
+  pointer-events: auto;
+  cursor: crosshair;
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 55%, transparent);
+}
+
+.kymo-annotations.is-tool-text { cursor: text; }
+
+.kymo-ann-svg {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+.kymo-ann-clip {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.kymo-ann { cursor: move; }
+.kymo-ann-hit {
+  fill: none;
+  stroke: transparent;
+  pointer-events: stroke;
+}
+
+.kymo-annotations.is-drawing .kymo-ann,
+.kymo-annotations.is-drawing .kymo-ann-hit,
+.kymo-annotations.is-drawing .kymo-ann-text {
+  pointer-events: none;
+}
+
+.kymo-ann-selection {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.kymo-ann-text {
+  position: absolute;
+  pointer-events: auto;
+  cursor: move;
+  max-width: 60%;
+  padding: 0.15em 0.45em;
+  border-radius: 4px;
+  font-family: var(--font-sans, inherit);
+  font-weight: 600;
+  line-height: 1.25;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+  background: color-mix(in oklch, var(--chart-bg) 82%, transparent);
+  user-select: none;
+}
+
+.kymo-ann-text--box {
+  max-width: 40%;
+  font-size: 12px;
+}
+
+.kymo-ann-handle {
+  fill: var(--chart-bg);
+  stroke: var(--accent);
+  stroke-width: 1.5;
+  pointer-events: all;
+}
+.kymo-ann-handle--nwse { cursor: nwse-resize; }
+.kymo-ann-handle--nesw { cursor: nesw-resize; }
+.kymo-ann-handle--end { cursor: crosshair; }
+.kymo-ann-handle:hover { fill: var(--accent); }
+
+.kymo-ann-text.is-selected {
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+.kymo-ann-editor {
+  min-width: 2ch;
+  outline: none;
+  cursor: text;
+  user-select: text;
+  pointer-events: auto;
+  caret-color: currentColor;
+}
+
+.kymo-ann-text:has(.kymo-ann-editor) {
+  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent);
+}
+
+.kymo-ann-delete {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border-radius: 50%;
+  border: 1px solid color-mix(in oklch, var(--accent) 60%, var(--chart-grid));
+  background: var(--chart-bg);
+  color: var(--chart-muted);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.kymo-ann-delete svg { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
+.kymo-ann-delete:hover { color: oklch(0.7 0.19 25); border-color: currentColor; }
+.kymo-ann-delete:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .kymo-ann-delete { transition: color 0.14s ease, border-color 0.14s ease; }
+}

package/dist/styles/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Plus Jakarta Sans Project Authors (https://github.com/tokotype/PlusJakartaSans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/styles/tokens.css

@@ -0,0 +1,218 @@
+/* Plus Jakarta Sans (SIL OFL 1.1, see fonts/OFL.txt), self-hosted: no request leaves the page's origin.
+   Same faces Google Fonts served (latin + latin-ext): one variable file per subset declared at 400/500/600/700,
+   so a weight in between (650, 750) still resolves to the same face as before. Italic: 500 only. */
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('./fonts/plus-jakarta-sans-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('./fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+
+/* Shared tokens (no surface color here: avoids flash before data-color-scheme) */
+:root {
+  --font-sans: 'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif;
+  --font-mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2.25rem;
+  --space-7: 3.5rem;
+
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 22px;
+}
+
+/* Dark mode: cool-tinted neutrals, amber accent */
+:root[data-color-scheme='dark'] {
+  --bg: oklch(0.16 0.024 252);
+  --bg-elevated: oklch(0.195 0.022 252);
+  --surface: oklch(0.22 0.02 252);
+  --surface-hover: oklch(0.255 0.018 252);
+  --border: oklch(0.33 0.026 255);
+  --border-strong: oklch(0.41 0.032 255);
+
+  --text: oklch(0.72 0.03 255);
+  --text-muted: oklch(0.54 0.022 255);
+  --text-strong: oklch(0.97 0.008 255);
+
+  --accent: oklch(0.76 0.14 58);
+  --accent-foreground: oklch(0.17 0.045 58);
+  --accent-soft: color-mix(in oklch, var(--accent) 18%, transparent);
+  --accent-ring: color-mix(in oklch, var(--accent) 48%, transparent);
+
+  --danger: oklch(0.66 0.2 25);
+  --danger-bg: color-mix(in oklch, var(--danger) 16%, transparent);
+  --warn: oklch(0.82 0.14 85);
+
+  --chart-bg: oklch(0.13 0.022 255);
+  --chart-fg: oklch(0.93 0.01 255);
+  --chart-muted: oklch(0.52 0.02 255);
+  --chart-grid: oklch(0.29 0.022 255);
+  --chart-band: color-mix(in oklch, var(--text-strong) 4.5%, transparent);
+
+  --shadow-sm: 0 1px 2px color-mix(in oklch, black 38%, transparent);
+  --shadow-md: 0 14px 44px color-mix(in oklch, black 48%, transparent);
+
+  --ambient-accent: color-mix(in oklch, var(--accent) 9%, transparent);
+
+  /* ── Elevation primitives (additive polish layer) ──────────────────
+     Theme-aware depth: a lighter top for surface gradients, a 1px top
+     light line, and a rest → hover → featured shadow scale. */
+  --surface-hi: oklch(0.247 0.02 252);
+  --edge-light: color-mix(in oklch, white 7%, transparent);
+  --accent-glow: color-mix(in oklch, var(--accent) 42%, transparent);
+  --elevation-rest:
+    0 1px 0 color-mix(in oklch, white 4%, transparent) inset,
+    0 10px 26px -20px color-mix(in oklch, black 72%, transparent);
+  --elevation-hover:
+    0 1px 0 color-mix(in oklch, white 6%, transparent) inset,
+    0 22px 46px -26px color-mix(in oklch, black 84%, transparent);
+  --elevation-featured:
+    0 0 0 1px var(--accent-ring),
+    0 0 56px -14px var(--accent-glow),
+    0 26px 54px -30px color-mix(in oklch, black 88%, transparent);
+
+  color-scheme: dark;
+}
+
+/* Light mode: pure neutral whites, same accent with stronger contrast on background */
+:root[data-color-scheme='light'] {
+  --bg: oklch(0.985 0 0);
+  --bg-elevated: oklch(0.97 0 0);
+  --surface: oklch(1 0 0);
+  --surface-hover: oklch(0.955 0 0);
+  --border: oklch(0.87 0.022 250);
+  --border-strong: oklch(0.76 0.028 250);
+
+  --text: oklch(0.36 0.032 255);
+  --text-muted: oklch(0.48 0.024 255);
+  --text-strong: oklch(0.19 0.04 255);
+
+  --accent: oklch(0.52 0.19 58);
+  --accent-foreground: oklch(0.99 0 0);
+  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
+  --accent-ring: color-mix(in oklch, var(--accent) 38%, transparent);
+
+  --danger: oklch(0.5 0.2 25);
+  --danger-bg: color-mix(in oklch, var(--danger) 11%, transparent);
+  --warn: oklch(0.42 0.12 75);
+
+  --chart-bg: oklch(0.995 0 0);
+  --chart-fg: oklch(0.2 0.035 255);
+  --chart-muted: oklch(0.46 0.02 255);
+  --chart-grid: oklch(0.87 0.018 255);
+  --chart-band: color-mix(in oklch, var(--text-strong) 4%, transparent);
+
+  --shadow-sm: 0 1px 2px color-mix(in oklch, black 7%, transparent);
+  --shadow-md: 0 18px 50px color-mix(in oklch, black 11%, transparent);
+
+  /* Same orange strength as dark; fades to transparent over the pure-white
+     surface, giving an orange → white fade that mirrors dark's orange → black. */
+  --ambient-accent: color-mix(in oklch, var(--accent) 9%, transparent);
+
+  /* ── Elevation primitives (additive polish layer) ──────────────────
+     Surfaces are already near-white, so depth comes from a faint
+     gradient plus soft, low-opacity drop shadows rather than glow. */
+  --surface-hi: oklch(1 0 0);
+  --edge-light: color-mix(in oklch, white 85%, transparent);
+  --accent-glow: color-mix(in oklch, var(--accent) 24%, transparent);
+  --elevation-rest:
+    0 1px 0 color-mix(in oklch, white 70%, transparent) inset,
+    0 8px 20px -16px color-mix(in oklch, black 16%, transparent);
+  --elevation-hover:
+    0 1px 0 color-mix(in oklch, white 80%, transparent) inset,
+    0 18px 40px -22px color-mix(in oklch, black 22%, transparent);
+  --elevation-featured:
+    0 0 0 1px var(--accent-ring),
+    0 0 48px -16px var(--accent-glow),
+    0 22px 46px -26px color-mix(in oklch, black 20%, transparent);
+
+  color-scheme: light;
+}
+
+:root[data-color-scheme='dark'],
+:root[data-color-scheme='light'] {
+  font-family: var(--font-sans);
+  font-size: 15px;
+  line-height: 1.55;
+  letter-spacing: 0.01em;
+  color: var(--text);
+  background-color: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+#root {
+  width: 100%;
+  min-height: 100svh;
+  margin: 0;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+h1,
+h2,
+h3 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  color: var(--text-strong);
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+
+h1 {
+  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2rem);
+  font-weight: 700;
+  line-height: 1.15;
+}
+
+h2 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+p {
+  margin: 0;
+}

package/dist/types/charts/AlarmOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { AlarmLine } from '../types/plotSeries';
+import { type PlotFrame, type PlotFrameStore } from '../lib/render/plotFrame';
+/** Ends of the alarm line in px, or null when the axis is missing or the value is off the plot. */
+export declare function alarmSegment(f: PlotFrame | null, alarm: AlarmLine, axis: 'x' | 'y'): [number, number, number, number] | null;
+export declare const AlarmOverlay: import("react").MemoExoticComponent<({ frame, alarm, axis }: {
+    frame: PlotFrameStore;
+    alarm: AlarmLine;
+    axis: "x" | "y";
+}) => import("react/jsx-runtime").JSX.Element | null>;
+/** Paint the alarm line onto a 2-D canvas of the chart's size × `scale` (PNG export). */
+export declare function paintAlarm(ctx: CanvasRenderingContext2D, f: PlotFrame | null, alarm: AlarmLine, axis: 'x' | 'y', scale: number): void;

package/dist/types/charts/AnnotationLayer.d.ts

@@ -0,0 +1,29 @@
+import type { AnnotationTool, ChartAnnotation } from '../lib/annotations';
+import { type PlotFrame, type PlotFrameStore } from '../lib/render/plotFrame';
+interface Props {
+    annotations: ChartAnnotation[];
+    tool: AnnotationTool | null;
+    plotFrame: PlotFrameStore;
+    onChange: (next: ChartAnnotation[]) => void;
+    /** Escape pressed with a tool set. */
+    onToolEnd: () => void;
+    onSelect: (id: string | null) => void;
+}
+type Pt = [number, number];
+/** Elements outside the chart marked with this attribute keep the selection when pressed (a host's style controls). */
+export declare const ANNOTATION_CONTROLS_ATTR = "data-kymo-annotation-controls";
+/** Pixel positions of an annotation's points (null: pinned to X on a chart without an X frame now). */
+export declare function annotationPx(a: ChartAnnotation, W: number, H: number, frame: PlotFrame | null): Pt[] | null;
+export declare const AnnotationLayer: import("react").MemoExoticComponent<({ annotations, tool, plotFrame, onChange, onToolEnd, onSelect }: Props) => import("react/jsx-runtime").JSX.Element>;
+/** A smooth path through the stroke's points (quadratic curves through the midpoints). */
+export declare function brushPath(px: Pt[]): string;
+/** Head of an arrow ending at (x1, y1): its outline and where the shaft should stop. */
+export declare function arrowHead(x0: number, y0: number, x1: number, y1: number, width: number): {
+    d: string;
+    base: Pt;
+    l: Pt;
+    r: Pt;
+};
+/** Paint annotations onto a 2-D canvas of the chart's size × `scale` (PNG export). */
+export declare function paintAnnotations(ctx: CanvasRenderingContext2D, list: ChartAnnotation[], W: number, H: number, scale: number, font: string, frame: PlotFrame | null): void;
+export {};

package/dist/types/charts/ChartBody.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The bare plotting surface for one chart: picks the renderer for its kind and
+ * feeds it the prepared data. No toolbar, menu or placeholder copy — the host
+ * learns the chart's status ('no-data' | 'empty' | 'ready') through events.
+ */
+import type { ReactNode, Ref } from 'react';
+import type { DashboardPanel } from '../components/dashboardGridLayout';
+import { type PanelChartSettings } from '../lib/panelChartSettings';
+import { type XYZMeshChartHandle } from '../components/XYZMeshChart';
+import type { LiveZoomBus } from '../lib/render/liveZoomBus';
+import { type WorksheetData } from './useWorksheetData';
+import type { LiveConnection } from '../lib/live/types';
+import type { LoadedDataset } from '../types/loadedDataset';
+export type ChartStatus = 'no-data' | 'empty' | 'ready';
+export interface ContextMenuEvent {
+    clientX: number;
+    clientY: number;
+    /** Multiband only: X span of a right-drag, for "zoom to selection". */
+    zoomXRange?: [number, number] | null;
+}
+export interface ChartBodyProps {
+    panel: DashboardPanel;
+    settings: PanelChartSettings | undefined;
+    background: string | null;
+    /** Changes whenever host styling changes, so charts re-read their CSS colours. */
+    styleToken: string;
+    data: WorksheetData;
+    xKey: string;
+    height: number;
+    viewXRange: [number, number] | null;
+    onViewXRangeChange: (r: [number, number] | null) => void;
+    liveZoom: LiveZoomBus;
+    liveWindowSeconds: number | null;
+    onLiveWindowChange: (seconds: number | null) => void;
+    /** The selected live stream a beacon chart follows (even with datasets selected). */
+    beaconLive: LiveConnection | null;
+    /** A loaded dataset or lap by id (beacon reference data). */
+    findDataset: (id: string) => LoadedDataset | undefined;
+    shiftMode?: {
+        label: string;
+        onDragStart: () => void;
+        onDragOffset: (delta: number) => void;
+    };
+    onContextMenu: (e: ContextMenuEvent) => void;
+    xyzRef?: Ref<XYZMeshChartHandle>;
+}
+/** Renders the chart and reports whether it had anything to draw. */
+export declare function renderChart(p: ChartBodyProps): {
+    status: ChartStatus;
+    node: ReactNode;
+    data: unknown;
+};

package/dist/types/charts/PerfHud.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Debug overlay (mount option `debug`): live performance numbers in the chart's
+ * top-right corner. It samples on its own animation-frame loop and re-renders
+ * only itself, so watching a chart never makes the chart render more.
+ */
+import { type RefObject } from 'react';
+/** Written by ChartFrame on every commit; read by the HUD twice a second. */
+export interface PerfStats {
+    renderStart: number;
+    /** React render + commit of the chart subtree (incl. layout-effect draws), ms. */
+    lastRenderMs: number;
+    renders: number;
+    data: unknown;
+}
+/** Rows the chart is drawing, read off its prepared data. */
+export declare function countPoints(data: unknown): number | null;
+export declare function PerfHud({ stats, host }: {
+    stats: PerfStats;
+    host: RefObject<HTMLElement | null>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/charts/beacon.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Beacon view of a live multiband chart: only the current cycle (X starting
+ * over — a lap, a battery cycle…) is drawn, with reference data behind it — a
+ * loaded dataset, the previous cycle, or nothing (the chart restarts every cycle).
+ */
+import type { LiveChartSource } from '../components/MultiBandCanvasChart';
+import { type PointColumns } from '../lib/data/pointColumns';
+import type { LiveConnection } from '../lib/live/types';
+import type { LoadedDataset } from '../types/loadedDataset';
+import type { BeaconSettings } from '../lib/panelChartSettings';
+import type { PlotSeries } from '../types/plotSeries';
+/** Column suffix of the reference copy of a series (grouped with it in the legend). */
+export declare const REF_SUFFIX = "__ref";
+/** Reference series drawn under the live ones (same bands and scales, own colour). */
+export declare function referenceSeries(series: PlotSeries[], color: string): PlotSeries[];
+/** A dataset as reference points (columns suffixed with REF_SUFFIX), sorted by X. */
+export declare function datasetReference(ds: LoadedDataset, xKey: string, cols: string[]): {
+    points: PointColumns;
+    span: [number, number] | null;
+};
+/**
+ * The live source of a beacon chart: the current cycle of `conn` on `xKey`, plus
+ * the chosen reference. The X axis spans every cycle seen and the reference.
+ */
+export declare function beaconLiveSource(conn: LiveConnection, xKey: string, cols: string[], beacon: BeaconSettings, refDataset: LoadedDataset | undefined): LiveChartSource;
+/** Colour of the active reference, or null when nothing is drawn behind. */
+export declare function referenceColor(beacon: BeaconSettings, hasDataset: boolean): string | null;