@watt-ui/react 0.0.0-stage → 0.1.0

package/dist/internal.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useSyncExternalStore } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cx(...values) {
+    return twMerge(clsx(values));
+}
+export function part(slot, defaults = "", tag = "div") {
+    const Part = forwardRef(({ asChild, className, ...props }, ref) => {
+        const Component = asChild ? Slot : tag;
+        return (_jsx(Component, { ...props, ref: ref, "data-slot": slot, className: cx(defaults, className) }));
+    });
+    Part.displayName = slot;
+    return Part;
+}
+let instant = null;
+let timer;
+const listeners = new Set();
+function subscribe(listener) {
+    listeners.add(listener);
+    if (!timer) {
+        instant = Date.now();
+        timer = setInterval(() => {
+            instant = Date.now();
+            listeners.forEach((fn) => fn());
+        }, 1000);
+    }
+    return () => {
+        listeners.delete(listener);
+        if (!listeners.size) {
+            clearInterval(timer);
+            timer = undefined;
+            instant = null;
+        }
+    };
+}
+const snapshot = () => instant;
+const serverSnapshot = () => null;
+const noopSubscribe = () => () => { };
+export function useNow(enabled) {
+    return useSyncExternalStore(enabled ? subscribe : noopSubscribe, snapshot, serverSnapshot);
+}
+//# sourceMappingURL=internal.js.map

package/dist/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC/B,CAAC;AACD,MAAM,UAAU,IAAI,CAAC,IAAY,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAsB,KAAK;IAC3E,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;QACxC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;QACvC,OAAO,CACL,KAAC,SAAS,OACJ,KAAK,EACT,GAAG,EAAE,GAAY,eACN,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,GAClC,CACH,CAAC;IACJ,CAAC,CACF,CAAC;IACF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,OAAO,IAAI,CAAC;AACd,CAAC;AACD,IAAI,OAAO,GAAkB,IAAI,CAAC;AAClC,IAAI,KAAiD,CAAC;AACtD,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AACxC,SAAS,SAAS,CAAC,QAAoB;IACrC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACrB,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YACvB,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACrB,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC;IACD,OAAO,GAAG,EAAE;QACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;YACpB,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,KAAK,GAAG,SAAS,CAAC;YAClB,OAAO,GAAG,IAAI,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;AACJ,CAAC;AACD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC;AAC/B,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC;AAClC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AACrC,MAAM,UAAU,MAAM,CAAC,OAAgB;IACrC,OAAO,oBAAoB,CACzB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EACnC,QAAQ,EACR,cAAc,CACf,CAAC;AACJ,CAAC"}

package/dist/server.d.ts

@@ -0,0 +1,10 @@
+import { type ChartConfig } from "./chart/options.js";
+import type { TelemetrySeries } from "./types.js";
+export interface ServerChartProps extends Omit<ChartConfig, "series"> {
+    series: readonly TelemetrySeries[];
+    width: number;
+    height: number;
+}
+/** Render on the server and pass this trusted output to TelemetryChart.Canvas previewSvg. */
+export declare function renderTelemetrySVG({ width, height, series, ...config }: ServerChartProps): string;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AASA,OAAO,EAAe,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IACnE,MAAM,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AACD,6FAA6F;AAC7F,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,MAAM,EACN,GAAG,MAAM,EACV,EAAE,gBAAgB,GAAG,MAAM,CAwB3B"}

package/dist/server.js

@@ -0,0 +1,32 @@
+import { init, use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import { GridComponent, TooltipComponent, DataZoomComponent, } from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
+import { prepareSeries } from "./chart/data.js";
+import { chartOption } from "./chart/options.js";
+/** Render on the server and pass this trusted output to TelemetryChart.Canvas previewSvg. */
+export function renderTelemetrySVG({ width, height, series, ...config }) {
+    if (![width, height].every((v) => Number.isFinite(v) && v > 0))
+        throw new Error("SSR charts require positive width and height");
+    use([
+        LineChart,
+        GridComponent,
+        TooltipComponent,
+        DataZoomComponent,
+        SVGRenderer,
+    ]);
+    const chart = init(null, undefined, {
+        renderer: "svg",
+        ssr: true,
+        width,
+        height,
+    });
+    try {
+        chart.setOption(chartOption({ ...config, series: prepareSeries(series) }, width));
+        return chart.renderToSVGString();
+    }
+    finally {
+        chart.dispose();
+    }
+}
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAoB,MAAM,oBAAoB,CAAC;AAOnE,6FAA6F;AAC7F,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,MAAM,EACN,GAAG,MAAM,EACQ;IACjB,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC5D,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,GAAG,CAAC;QACF,SAAS;QACT,aAAa;QACb,gBAAgB;QAChB,iBAAiB;QACjB,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE;QAClC,QAAQ,EAAE,KAAK;QACf,GAAG,EAAE,IAAI;QACT,KAAK;QACL,MAAM;KACP,CAAC,CAAC;IACH,IAAI,CAAC;QACH,KAAK,CAAC,SAAS,CACb,WAAW,CAAC,EAAE,GAAG,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CACjE,CAAC;QACF,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;IACnC,CAAC;YAAS,CAAC;QACT,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;AACH,CAAC"}

package/dist/styles.css

@@ -0,0 +1,130 @@
+@source "./**/*.js";
+@theme inline {
+  --color-watt-positive: var(--watt-positive);
+  --color-watt-warning: var(--watt-warning);
+  --color-watt-critical: var(--watt-critical);
+  --color-watt-accent: var(--watt-accent);
+  --color-watt-surface: var(--watt-surface);
+  --color-watt-foreground: var(--watt-foreground);
+  --color-watt-muted: var(--watt-muted);
+  --color-watt-border: var(--watt-border);
+  --color-watt-subtle: var(--watt-subtle);
+}
+:root,
+.watt-theme {
+  --watt-surface: #ffffff;
+  --watt-foreground: #20232c;
+  --watt-muted: #626b7b;
+  --watt-border: #e3e6ec;
+  --watt-subtle: #f1f3f7;
+  --watt-accent: #355dff;
+  --watt-positive: #16806b;
+  --watt-warning: #996009;
+  --watt-critical: #c43b40;
+  --watt-radius: 12px;
+}
+.dark,
+[data-theme="dark"] {
+  --watt-surface: #17191f;
+  --watt-foreground: #eef0f5;
+  --watt-muted: #a4adbe;
+  --watt-border: #333743;
+  --watt-subtle: #252932;
+  --watt-accent: #8ba3ff;
+  --watt-positive: #61d4b7;
+  --watt-warning: #f1bd65;
+  --watt-critical: #ff898d;
+}
+.watt-root {
+  color: var(--watt-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.watt-status {
+  color: var(--watt-muted);
+}
+.watt-status[data-status="normal"] {
+  color: var(--watt-positive);
+}
+.watt-status[data-status="warning"] {
+  color: var(--watt-warning);
+}
+.watt-status[data-status="fault"] {
+  color: var(--watt-critical);
+}
+.watt-status-dot {
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+[data-status="standby"] .watt-status-dot {
+  background: transparent;
+  border: 1.5px solid currentColor;
+}
+[data-status="stopped"] .watt-status-dot {
+  border-radius: 1px;
+}
+[data-status="warning"] .watt-status-dot {
+  border-radius: 1px;
+  transform: rotate(45deg);
+}
+[data-status="fault"] .watt-status-dot {
+  border-radius: 0;
+  clip-path: polygon(
+    25% 0,
+    75% 0,
+    100% 25%,
+    100% 75%,
+    75% 100%,
+    25% 100%,
+    0 75%,
+    0 25%
+  );
+}
+[data-status="offline"] .watt-status-dot {
+  background: transparent;
+  border: 1px dashed currentColor;
+}
+.watt-flow-dash {
+  stroke-dasharray: 7 6;
+  animation: watt-flow-dash 3s linear infinite;
+}
+.watt-flow-pulse {
+  animation: watt-flow-pulse 3s ease-in-out infinite;
+}
+.watt-flow-particle {
+  animation: watt-flow-particle 3s linear infinite;
+}
+.watt-chart-preview svg {
+  width: 100%;
+  height: 100%;
+}
+@keyframes watt-flow-dash {
+  to {
+    stroke-dashoffset: -26;
+  }
+}
+@keyframes watt-flow-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+@keyframes watt-flow-particle {
+  from {
+    offset-distance: 0%;
+  }
+  to {
+    offset-distance: 100%;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .watt-flow-dash,
+  .watt-flow-pulse {
+    animation: none !important;
+  }
+  .watt-flow-particle {
+    display: none;
+  }
+}

package/dist/theme/shadcn.css

@@ -0,0 +1,14 @@
+/* Import after @watt-ui/react/styles.css inside a shadcn project. */
+:root,
+.dark,
+[data-theme],
+.watt-theme {
+  --watt-surface: var(--background);
+  --watt-foreground: var(--foreground);
+  --watt-muted: var(--muted-foreground);
+  --watt-border: var(--border);
+  --watt-subtle: var(--muted);
+  --watt-accent: var(--primary);
+  --watt-critical: var(--destructive);
+  --watt-radius: var(--radius);
+}

package/dist/types.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes } from "react";
+export type PowerUnit = "W" | "kW" | "MW";
+export type EnergyUnit = "Wh" | "kWh" | "MWh";
+export type MeasurementUnit = PowerUnit | EnergyUnit | "V" | "A" | "Hz" | "°C" | "%" | "W/m²";
+export type Timestamp = string | number;
+export type DataQuality = "good" | "uncertain" | "stale" | "missing" | "bad" | "offline";
+export type EquipmentStatus = "normal" | "standby" | "stopped" | "warning" | "fault" | "offline";
+export type Density = "compact" | "comfortable";
+export interface PartProps extends HTMLAttributes<HTMLElement> {
+    asChild?: boolean;
+}
+export interface RootProps extends PartProps {
+    density?: Density;
+}
+export interface Measurement<U extends MeasurementUnit = MeasurementUnit> {
+    value: number | null;
+    unit: U;
+    timestamp: Timestamp;
+    quality?: DataQuality;
+}
+export interface TimeSeriesPoint {
+    timestamp: Timestamp;
+    value: number | null;
+    quality?: DataQuality;
+}
+export interface TelemetrySeries {
+    id: string;
+    label: string;
+    unit: string;
+    points: readonly TimeSeriesPoint[];
+    color?: string;
+    axis?: 0 | 1;
+    area?: boolean;
+}
+export type TimeRange = readonly [number, number];
+export interface AlarmEvent {
+    id: string;
+    severity: "critical" | "warning" | "info";
+    status: "active" | "acknowledged" | "resolved";
+    timestamp: Timestamp;
+    message: string;
+    asset?: string;
+    description?: string;
+}
+export interface EnergyFlowNode {
+    id: string;
+}
+export interface EnergyFlowEdge {
+    source: string;
+    target: string;
+    sourcePort?: string;
+    targetPort?: string;
+}
+export interface PlantAsset {
+    id: string;
+    label: string;
+    children?: readonly PlantAsset[];
+    status?: EquipmentStatus;
+    measurement?: Measurement;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;AAC9C,MAAM,MAAM,eAAe,GACzB,SAAS,GAAG,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACxC,MAAM,MAAM,WAAW,GACrB,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AACjE,MAAM,MAAM,eAAe,GACzB,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AACrE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,aAAa,CAAC;AAChD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IACtE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC;IACR,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AACD,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AACD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AACD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAClD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1C,MAAM,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC;IAC/C,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AACD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;CACZ;AACD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,120 @@
 {
   "name": "@watt-ui/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "React components for energy and power dashboards",
+  "homepage": "https://watt-ui.pages.dev",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme/shadcn.css": "./dist/theme/shadcn.css",
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./power-metric": {
+      "types": "./dist/components/power-metric.d.ts",
+      "import": "./dist/components/power-metric.js"
+    },
+    "./status-indicator": {
+      "types": "./dist/components/status-indicator.d.ts",
+      "import": "./dist/components/status-indicator.js"
+    },
+    "./data-freshness": {
+      "types": "./dist/components/data-freshness.d.ts",
+      "import": "./dist/components/data-freshness.js"
+    },
+    "./battery-soc": {
+      "types": "./dist/components/battery-soc.d.ts",
+      "import": "./dist/components/battery-soc.js"
+    },
+    "./telemetry-chart": {
+      "types": "./dist/components/telemetry-chart.d.ts",
+      "import": "./dist/components/telemetry-chart.js"
+    },
+    "./energy-flow": {
+      "types": "./dist/components/energy-flow.d.ts",
+      "import": "./dist/components/energy-flow.js"
+    },
+    "./alarm-feed": {
+      "types": "./dist/components/alarm-feed.d.ts",
+      "import": "./dist/components/alarm-feed.js"
+    },
+    "./asset-tree": {
+      "types": "./dist/components/asset-tree.d.ts",
+      "import": "./dist/components/asset-tree.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "node scripts/build.mjs",
+    "build:demo": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepack": "npm run build",
+    "test:browser": "playwright test",
+    "check:package": "node scripts/check-package.mjs",
+    "benchmark": "node scripts/benchmark.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
+    "@playwright/test": "^1.64.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "esbuild": "^0.28.2",
+    "jsdom": "^27.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@headless-tree/core": "^1.8.0",
+    "@headless-tree/react": "^1.8.0",
+    "@radix-ui/react-compose-refs": "^1.1.5",
+    "@radix-ui/react-slot": "^1.5.0",
+    "@tanstack/react-virtual": "^3.14.22",
+    "clsx": "^2.1.1",
+    "echarts": "^6.1.0",
+    "lucide-react": "^1.61.0",
+    "tailwind-merge": "^3.7.0"
+  }
+}

package/src/chart/data.ts

@@ -0,0 +1,103 @@
+import { parseTimestamp } from "../domain.js";
+import type { TelemetrySeries, TimeRange, TimeSeriesPoint } from "../types.js";
+export type ChartPoint = [number, number | null];
+export interface PreparedSeries extends Omit<TelemetrySeries, "points"> {
+  points: ChartPoint[];
+  sourcePoints: readonly TimeSeriesPoint[];
+}
+export function prepareSeries(
+  series: readonly TelemetrySeries[],
+): PreparedSeries[] {
+  const ids = new Set<string>();
+  const units = new Map<number, string>();
+  return series.map((s) => {
+    if (!s.id || ids.has(s.id))
+      throw new Error("Chart series IDs must be nonempty and unique");
+    ids.add(s.id);
+    const axis = s.axis ?? 0;
+    if (axis !== 0 && axis !== 1)
+      throw new Error("Charts support at most two Y axes");
+    if (units.has(axis) && units.get(axis) !== s.unit)
+      throw new Error("Series on one Y axis must use the same unit");
+    units.set(axis, s.unit);
+    let last = -Infinity;
+    const points: ChartPoint[] = s.points.map((p) => {
+      const time = parseTimestamp(p.timestamp);
+      if (time === null || time < last)
+        throw new Error(
+          "Chart timestamps must be valid ISO instants or epoch milliseconds, sorted ascending",
+        );
+      last = time;
+      return [
+        time,
+        p.value !== null && Number.isFinite(p.value) ? p.value : null,
+      ];
+    });
+    return { ...s, points, sourcePoints: s.points };
+  });
+}
+/** Display-only min/max sampling: every explicit null remains a line break. */
+export function samplePoints(
+  points: ChartPoint[],
+  limit: number,
+  range?: TimeRange,
+): ChartPoint[] {
+  let start = range ? lowerBound(points, range[0]) : 0;
+  let end = range ? lowerBound(points, range[1]) + 1 : points.length;
+  start = Math.max(0, start - (range ? 1 : 0));
+  end = Math.min(points.length, end);
+  if (end - start <= limit) return points.slice(start, end);
+  const result: ChartPoint[] = [];
+  const bucket = Math.max(1, Math.ceil((end - start) / Math.max(1, limit / 2)));
+  result.push(points[start]!);
+  for (let i = start; i < end;) {
+    if (points[i]![1] === null) {
+      result.push(points[i]!);
+      i++;
+      continue;
+    }
+    const stop = Math.min(end, i + bucket);
+    let min = i,
+      max = i,
+      j = i;
+    while (j < stop && points[j]![1] !== null) {
+      if (points[j]![1]! < points[min]![1]!) min = j;
+      if (points[j]![1]! > points[max]![1]!) max = j;
+      j++;
+    }
+    if (min < max) result.push(points[min]!, points[max]!);
+    else if (max < min) result.push(points[max]!, points[min]!);
+    else result.push(points[min]!);
+    i = j;
+  }
+  if (end > start) result.push(points[end - 1]!);
+  return result;
+}
+export function lowerBound(points: ChartPoint[], time: number): number {
+  let lo = 0,
+    hi = points.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >>> 1;
+    if (points[mid]![0] < time) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+export function nearestIndex(points: ChartPoint[], time: number): number {
+  const index = lowerBound(points, time);
+  const right = points[index],
+    left = points[index - 1];
+  return !right
+    ? points.length - 1
+    : !left
+      ? index
+      : time - left[0] <= right[0] - time
+        ? index - 1
+        : index;
+}
+export function nearestPoint(
+  points: ChartPoint[],
+  time: number,
+): ChartPoint | undefined {
+  return points[nearestIndex(points, time)];
+}

package/src/chart/engine.ts

@@ -0,0 +1,19 @@
+import { init, use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+export function initCanvas(element: HTMLElement) {
+  // Registration belongs to the called function so bundlers cannot discard it as an unused module side effect.
+  use([
+    LineChart,
+    GridComponent,
+    TooltipComponent,
+    DataZoomComponent,
+    CanvasRenderer,
+  ]);
+  return init(element, undefined, { renderer: "canvas" });
+}