@watt-ui/react 0.1.4 → 0.2.0

package/dist/server.d.ts

@@ -1,10 +1,15 @@
 import { type ChartConfig } from "./chart/options.js";
 import type { TelemetrySeries } from "./types.js";
+import { type CategoryChartConfig } from "./chart/category-options.js";
 export interface ServerChartProps extends Omit<ChartConfig, "series"> {
     series: readonly TelemetrySeries[];
     width: number;
     height: number;
 }
+export declare function renderCategorySVG({ width, height, ...config }: CategoryChartConfig & {
+    width: number;
+    height: number;
+}): string;
 /** 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

@@ -1 +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"}
+{"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,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AACrC,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,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,GAAG,MAAM,EACV,EAAE,mBAAmB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAiBlE;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

@@ -1,9 +1,29 @@
 import { init, use } from "echarts/core";
-import { LineChart } from "echarts/charts";
+import { LineChart, BarChart } 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";
+import { categoryOption, validateCategories, } from "./chart/category-options.js";
+export function renderCategorySVG({ width, height, ...config }) {
+    if (![width, height].every((value) => Number.isFinite(value) && value > 0))
+        throw new Error("SSR charts require positive width and height");
+    validateCategories(config);
+    use([BarChart, GridComponent, TooltipComponent, SVGRenderer]);
+    const chart = init(null, undefined, {
+        renderer: "svg",
+        ssr: true,
+        width,
+        height,
+    });
+    try {
+        chart.setOption(categoryOption(config));
+        return chart.renderToSVGString();
+    }
+    finally {
+        chart.dispose();
+    }
+}
 /** 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))

package/dist/server.js.map

@@ -1 +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"}
+{"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,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,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;AAEnE,OAAO,EACL,cAAc,EACd,kBAAkB,GAEnB,MAAM,6BAA6B,CAAC;AAMrC,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,GAAG,MAAM,EAC+C;IACxD,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC;QACxE,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAC3B,GAAG,CAAC,CAAC,QAAQ,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9D,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,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;QACxC,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;IACnC,CAAC;YAAS,CAAC;QACT,KAAK,CAAC,OAAO,EAAE,CAAC;IAClB,CAAC;AACH,CAAC;AACD,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

@@ -52,6 +52,93 @@
 .watt-soc-fill {
   transition-property: var(--watt-motion-property, width);
 }
+.watt-gauge-fill {
+  transition-property: var(--watt-motion-property, width);
+}
+.watt-category-marker {
+  transition-property: var(--watt-motion-property, background-color, scale);
+}
+.watt-chart-legend-toggle[aria-pressed="false"] .watt-category-marker {
+  scale: 0.75;
+}
+.watt-timeline-event {
+  transition-property: var(--watt-motion-property, left, width);
+}
+[data-slot="equipment-table-row"] {
+  transition-property: var(--watt-motion-property, background-color);
+}
+[data-slot="plant-fleet-map-site"][data-selected] {
+  background-color: color-mix(
+    in srgb,
+    var(--watt-accent) 12%,
+    var(--watt-surface)
+  );
+}
+[data-slot="equipment-table-row"]:has(button):focus-within {
+  outline: 2px solid var(--watt-accent);
+  outline-offset: -2px;
+}
+@media (hover: hover) {
+  [data-slot="equipment-table-row"][tabindex]:hover {
+    background-color: var(--watt-subtle);
+  }
+  [data-slot="operating-timeline-event"]:hover {
+    border-color: var(--watt-foreground);
+  }
+}
+.watt-heatmap-cell {
+  transition-property: var(
+    --watt-motion-property,
+    background-color,
+    border-color
+  );
+}
+.watt-heatmap-cell[data-selected] {
+  outline: 2px solid var(--watt-accent);
+  outline-offset: -2px;
+}
+.watt-heatmap-cell[data-quality="stale"],
+.watt-heatmap-cell[data-quality="offline"] {
+  border-style: dashed;
+}
+.watt-heatmap-cell[data-quality="bad"],
+.watt-heatmap-cell[data-status="fault"] {
+  border: 3px double var(--watt-critical);
+}
+.watt-heatmap-cell:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (hover: hover) {
+  .watt-heatmap-cell:hover:not(:disabled) {
+    border-color: var(--watt-foreground);
+  }
+}
+[data-slot="threshold-gauge"][data-tone="positive"] .watt-gauge-fill {
+  background-color: var(--watt-positive);
+}
+[data-slot="threshold-gauge"][data-tone="warning"] .watt-gauge-fill {
+  background-color: var(--watt-warning);
+}
+[data-slot="threshold-gauge"][data-tone="critical"] .watt-gauge-fill {
+  background-color: var(--watt-critical);
+}
+.watt-choice {
+  transition-property: var(--watt-motion-property, background-color, color);
+}
+@media (hover: hover) {
+  .watt-choice:hover {
+    background-color: var(--watt-subtle);
+  }
+}
+.watt-choice:active {
+  background-color: var(--watt-border);
+}
+@media (pointer: coarse) {
+  .watt-choice {
+    min-height: 44px;
+  }
+}
 [data-slot="battery-soc"][data-invalid] .watt-soc-fill {
   transition-duration: 0s;
 }
@@ -59,21 +146,33 @@
   transition-property: var(--watt-motion-property, background-color);
 }
 [data-slot="asset-tree-row"][data-selected] {
-  background-color: color-mix(in srgb, var(--watt-accent) 8%, var(--watt-surface));
+  background-color: color-mix(
+    in srgb,
+    var(--watt-accent) 8%,
+    var(--watt-surface)
+  );
 }
 @media (hover: hover) {
   [data-slot="asset-tree-row"]:hover:not([data-selected]) {
     background-color: var(--watt-subtle);
   }
   [data-slot="asset-tree-row"][data-selected]:hover {
-    background-color: color-mix(in srgb, var(--watt-accent) 12%, var(--watt-surface));
+    background-color: color-mix(
+      in srgb,
+      var(--watt-accent) 12%,
+      var(--watt-surface)
+    );
   }
   .watt-chart-legend-toggle:hover {
     background-color: var(--watt-subtle);
   }
 }
 [data-slot="asset-tree-row"]:active:not([data-selected]) {
-  background-color: color-mix(in srgb, var(--watt-foreground) 7%, var(--watt-surface));
+  background-color: color-mix(
+    in srgb,
+    var(--watt-foreground) 7%,
+    var(--watt-surface)
+  );
 }
 .watt-chart-legend-toggle {
   min-height: 36px;
@@ -89,7 +188,9 @@
   background-color: var(--watt-border);
 }
 @media (pointer: coarse) {
-  .watt-chart-legend-toggle { min-height: 44px; }
+  .watt-chart-legend-toggle {
+    min-height: 44px;
+  }
 }
 [data-slot="asset-tree-indicator"] {
   transition-property: var(--watt-motion-property, transform);
@@ -200,3 +301,31 @@
     display: none;
   }
 }
+
+[data-slot="threshold-gauge"][data-density="compact"]
+  [data-slot="threshold-gauge-track"] {
+  height: 0.5rem;
+}
+[data-slot="time-range-selector"][data-density="compact"]
+  [data-slot="time-range-selector-option"] {
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+[data-slot="category-chart"][data-density="compact"]
+  [data-slot="category-chart-legend"] {
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+[data-slot="plant-fleet-map"][data-density="compact"]
+  [data-slot="plant-fleet-map-site"] {
+  min-width: 1.75rem;
+  min-height: 1.75rem;
+}
+@media (pointer: coarse) {
+  [data-slot="time-range-selector"] [data-slot="time-range-selector-option"],
+  [data-slot="plant-fleet-map"] [data-slot="plant-fleet-map-site"] {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}

package/dist/virtual-focus.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+export declare function useVirtualFocus(host: RefObject<HTMLElement | null>, scroll: (index: number) => void): (index: number) => void;
+//# sourceMappingURL=virtual-focus.d.ts.map

package/dist/virtual-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-focus.d.ts","sourceRoot":"","sources":["../src/virtual-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,wBAAgB,eAAe,CAC7B,IAAI,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,IAIvB,OAAO,MAAM,UAiBtB"}

package/dist/virtual-focus.js

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect, useRef } from "react";
+export function useVirtualFocus(host, scroll) {
+    const frame = useRef(0);
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    return (index) => {
+        cancelAnimationFrame(frame.current);
+        scroll(index);
+        const started = performance.now();
+        const focus = () => {
+            const active = document.activeElement;
+            if (active && active !== document.body && !host.current?.contains(active))
+                return;
+            const element = host.current?.querySelector(`[data-focus-index="${index}"]`);
+            if (element)
+                element.focus({ preventScroll: true });
+            else if (performance.now() - started < 1000)
+                frame.current = requestAnimationFrame(focus);
+        };
+        frame.current = requestAnimationFrame(focus);
+    };
+}
+//# sourceMappingURL=virtual-focus.js.map

package/dist/virtual-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-focus.js","sourceRoot":"","sources":["../src/virtual-focus.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AAE1D,MAAM,UAAU,eAAe,CAC7B,IAAmC,EACnC,MAA+B;IAE/B,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACxB,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAC/D,OAAO,CAAC,KAAa,EAAE,EAAE;QACvB,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,CAAC;QACd,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC;QAClC,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;YACtC,IAAI,MAAM,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACvE,OAAO;YACT,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,aAAa,CACzC,sBAAsB,KAAK,IAAI,CAChC,CAAC;YACF,IAAI,OAAO;gBAAE,OAAO,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;iBAC/C,IAAI,WAAW,CAAC,GAAG,EAAE,GAAG,OAAO,GAAG,IAAI;gBACzC,KAAK,CAAC,OAAO,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;QACF,KAAK,CAAC,OAAO,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watt-ui/react",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "React components for energy and power dashboards",
   "homepage": "https://watt-ui.pages.dev",
   "license": "MIT",
@@ -67,6 +67,42 @@
     "./asset-tree": {
       "types": "./dist/components/asset-tree.d.ts",
       "import": "./dist/components/asset-tree.js"
+    },
+    "./equipment-card": {
+      "types": "./dist/components/equipment-card.d.ts",
+      "import": "./dist/components/equipment-card.js"
+    },
+    "./metric-trend": {
+      "types": "./dist/components/metric-trend.d.ts",
+      "import": "./dist/components/metric-trend.js"
+    },
+    "./threshold-gauge": {
+      "types": "./dist/components/threshold-gauge.d.ts",
+      "import": "./dist/components/threshold-gauge.js"
+    },
+    "./time-range-selector": {
+      "types": "./dist/components/time-range-selector.d.ts",
+      "import": "./dist/components/time-range-selector.js"
+    },
+    "./equipment-heatmap": {
+      "types": "./dist/components/equipment-heatmap.d.ts",
+      "import": "./dist/components/equipment-heatmap.js"
+    },
+    "./equipment-table": {
+      "types": "./dist/components/equipment-table.d.ts",
+      "import": "./dist/components/equipment-table.js"
+    },
+    "./operating-timeline": {
+      "types": "./dist/components/operating-timeline.d.ts",
+      "import": "./dist/components/operating-timeline.js"
+    },
+    "./category-chart": {
+      "types": "./dist/components/category-chart.d.ts",
+      "import": "./dist/components/category-chart.js"
+    },
+    "./plant-fleet-map": {
+      "types": "./dist/components/plant-fleet-map.d.ts",
+      "import": "./dist/components/plant-fleet-map.js"
     }
   },
   "scripts": {

package/src/chart/category-engine.ts

@@ -0,0 +1,8 @@
+import { init, use } from "echarts/core";
+import { BarChart } from "echarts/charts";
+import { GridComponent, TooltipComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+export function initCategoryCanvas(element: HTMLElement) {
+  use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
+  return init(element, undefined, { renderer: "canvas" });
+}

package/src/chart/category-options.ts

@@ -0,0 +1,158 @@
+import type { EChartsCoreOption } from "echarts/core";
+export interface CategorySeries {
+  id: string;
+  label: string;
+  unit: string;
+  values: readonly (number | null)[];
+  color?: string;
+}
+export interface CategoryChartConfig {
+  categories: readonly string[];
+  series: readonly CategorySeries[];
+  orientation?: "horizontal" | "vertical";
+  stacked?: boolean;
+  options?: EChartsCoreOption;
+}
+const record = (value: unknown): Record<string, unknown> =>
+  value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+const at = (value: unknown) => record(Array.isArray(value) ? value[0] : value);
+export function hasCategoryConflict(config: CategoryChartConfig) {
+  const options = config.options;
+  if (!options) return false;
+  const category = at(
+    config.orientation === "horizontal" ? options.yAxis : options.xAxis,
+  );
+  const value = at(
+    config.orientation === "horizontal" ? options.xAxis : options.yAxis,
+  );
+  return (
+    "data" in category ||
+    (category.type !== undefined && category.type !== "category") ||
+    (value.type !== undefined && value.type !== "value") ||
+    (value.name !== undefined && value.name !== config.series[0]?.unit) ||
+    at(options.legend).show === true ||
+    at(options.tooltip).showContent === true ||
+    (Array.isArray(options.series)
+      ? options.series
+      : options.series
+        ? [options.series]
+        : []
+    ).some((series) => {
+      const item = record(series);
+      return "data" in item || (item.type !== undefined && item.type !== "bar");
+    })
+  );
+}
+export function validateCategories(config: CategoryChartConfig) {
+  const ids = new Set<string>();
+  let unit: string | undefined;
+  for (const series of config.series) {
+    if (
+      !series.id ||
+      ids.has(series.id) ||
+      series.values.length !== config.categories.length
+    )
+      throw new Error(
+        "CategoryChart needs unique series IDs and one value per category",
+      );
+    if (unit !== undefined && unit !== series.unit)
+      throw new Error("CategoryChart series must share one unit");
+    ids.add(series.id);
+    unit = series.unit;
+  }
+}
+export function categoryOption(
+  config: CategoryChartConfig,
+  colors = { text: "#626b7b", border: "#e3e6ec", accent: "#355dff" },
+): EChartsCoreOption {
+  const horizontal = config.orientation === "horizontal";
+  const customCategory = at(
+    horizontal ? config.options?.yAxis : config.options?.xAxis,
+  );
+  const customValue = at(
+    horizontal ? config.options?.xAxis : config.options?.yAxis,
+  );
+  const category = {
+    ...customCategory,
+    type: "category",
+    data: config.categories,
+    axisLabel: {
+      color: colors.text,
+      hideOverlap: true,
+      ...record(customCategory.axisLabel),
+    },
+    axisLine: {
+      lineStyle: { color: colors.border },
+      ...record(customCategory.axisLine),
+    },
+    axisTick: { show: false, ...record(customCategory.axisTick) },
+  };
+  const value = {
+    ...customValue,
+    type: "value",
+    name: config.series[0]?.unit ?? "",
+    splitNumber: customValue.splitNumber ?? 4,
+    nameTextStyle: { color: colors.text, ...record(customValue.nameTextStyle) },
+    axisLabel: {
+      color: colors.text,
+      hideOverlap: true,
+      ...record(customValue.axisLabel),
+    },
+    splitLine: {
+      lineStyle: { color: colors.border },
+      ...record(customValue.splitLine),
+    },
+  };
+  const passthrough = { ...config.options };
+  delete passthrough.legend;
+  return {
+    ...passthrough,
+    animation: false,
+    grid: {
+      left: 12,
+      right: 20,
+      top: 30,
+      bottom: 40,
+      containLabel: true,
+      ...(config.options?.grid as object),
+    },
+    tooltip: {
+      ...at(config.options?.tooltip),
+      trigger: "axis",
+      showContent: false,
+      axisPointer: {
+        type: "shadow",
+        ...record(at(config.options?.tooltip).axisPointer),
+      },
+    },
+    xAxis: horizontal ? value : category,
+    yAxis: horizontal ? category : value,
+    series: config.series.map((series, index) => {
+      const custom = record(
+        Array.isArray(config.options?.series)
+          ? (config.options.series.find(
+              (item) => record(item).id === series.id,
+            ) ?? config.options.series[index])
+          : config.options?.series,
+      );
+      return {
+        ...custom,
+        id: series.id,
+        name: series.label,
+        type: "bar",
+        stack: config.stacked ? "total" : undefined,
+        data: series.values.map((value) =>
+          value !== null && Number.isFinite(value) ? value : null,
+        ),
+        itemStyle: {
+          ...record(custom.itemStyle),
+          color: series.color ?? colors.accent,
+        },
+        barMaxWidth: custom.barMaxWidth ?? 36,
+        emphasis: { focus: "series", ...record(custom.emphasis) },
+      };
+    }),
+  };
+}

package/src/components/asset-tree.tsx

@@ -33,8 +33,7 @@ export type AssetTreeItem<T extends PlantAsset> =
         : AssetTreeItem<C>
       : never);
 export interface AssetTreeProps<T extends PlantAsset = PlantAsset>
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
-    MotionProps {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, MotionProps {
   items: readonly T[];
   children: (row: AssetTreeRow<AssetTreeItem<T>>) => React.ReactNode;
   expandedIds?: string[];
@@ -188,7 +187,14 @@ function Root<T extends PlantAsset>(
     initialRect: { width: 0, height },
     getItemKey: (index) => visible[index]!.getId(),
   });
+  useEffect(() => {
+    virtualizer.measure();
+  }, [virtualizer, rowHeight]);
   virtualRef.current = virtualizer;
+  const virtualRows = virtualizer.getVirtualItems();
+  const focusIndex =
+    virtualRows.find((row) => visible[row.index]?.isFocused())?.index ??
+    virtualRows[0]?.index;
   const containerProps = tree.getContainerProps(props["aria-label"]);
   const hostRef = useComposedRefs(host, tree.registerElement, forwardedRef);
   const renderRow = (
@@ -200,6 +206,12 @@ function Root<T extends PlantAsset>(
     return (
       <div
         {...rowProps}
+        tabIndex={index === focusIndex ? 0 : -1}
+        onFocus={(event) => {
+          rowProps.onFocus?.(event);
+          if (event.target === event.currentTarget && !item.isFocused())
+            item.setFocused();
+        }}
         aria-label={undefined}
         key={item.getId()}
         data-slot="asset-tree-row"
@@ -229,13 +241,17 @@ function Root<T extends PlantAsset>(
   return (
     <MotionProvider motion={motion}>
       <div
-        {...containerProps}
+        {...(items.length ? containerProps : { role: "group" })}
         {...props}
         ref={hostRef}
         data-slot="asset-tree"
         data-density={density}
         className={cx("watt-root overflow-auto text-sm", className)}
-        style={{ height, ...style, ...motionStyle(motion) }}
+        style={{
+          height: items.length ? height : undefined,
+          ...style,
+          ...motionStyle(motion),
+        }}
       >
         {!items.length ? (
           empty
@@ -244,7 +260,7 @@ function Root<T extends PlantAsset>(
             role="presentation"
             style={{ height: virtualizer.getTotalSize(), position: "relative" }}
           >
-            {virtualizer.getVirtualItems().map((row) => {
+            {virtualRows.map((row) => {
               const item = visible[row.index];
               return item && indexed.has(item.getId())
                 ? renderRow(item, row.index, row.start)

package/src/components/battery-soc.tsx

@@ -62,6 +62,14 @@ const Track = forwardRef<HTMLElement, PartProps>(
         aria-valuemin={value === null ? undefined : 0}
         aria-valuemax={value === null ? undefined : 100}
         aria-valuenow={value ?? undefined}
+        aria-valuetext={value === null ? undefined : props["aria-valuetext"]}
+        aria-description={
+          value === null
+            ? (props["aria-valuetext"] ??
+              props["aria-description"] ??
+              "Unavailable")
+            : props["aria-description"]
+        }
         data-slot="battery-soc-track"
         className={cx(
           density === "compact" ? "h-2" : "h-4",