@camstack/ui-library 1.2.305 → 1.2.306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.305",
+  "version": "1.2.306",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -83,6 +83,7 @@
     }
   },
   "dependencies": {
+    "uplot": "1.6.32",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/src/tailwind/camstack-theme.css

@@ -39,10 +39,21 @@
   --color-provider-ha: #22d3ee;
   --color-provider-rtsp: #78716c;
 
-  /* Cluster load-chart categorical series (web only; not status colours).
-     CVD-validated pair: blue = main threads, magenta = V8 pool. */
+  /* Chart categorical series (web only; never status colours), FIXED order:
+     a blue, b magenta, c yellow, d aqua, e orange, f violet, g green, h red.
+     Validated as an 8-slot adjacent-pair palette against `surface` in both
+     themes (dark: all checks pass; light: CVD 7.2 and four slots under 3:1, so
+     every chart carries a legend and direct values). Slots a/b keep the load
+     chart's meaning (main threads / V8 pool). A ninth series reuses a slot
+     with a dash pattern (`composites/charts/chart-palette.ts`), never a new hue. */
   --color-chart-series-a: #3987e5;
   --color-chart-series-b: #d55181;
+  --color-chart-series-c: #c98500;
+  --color-chart-series-d: #199e70;
+  --color-chart-series-e: #d95926;
+  --color-chart-series-f: #9085e9;
+  --color-chart-series-g: #008300;
+  --color-chart-series-h: #e66767;
 
   /* Cluster node identity — vivid pastels (never stone/gray: that reads disabled) */
   --color-node-a: #7dd3fc;
@@ -107,6 +118,12 @@
   --color-neutral-on: #fafaf9;
   --color-chart-series-a: #3987e5;
   --color-chart-series-b: #d55181;
+  --color-chart-series-c: #c98500;
+  --color-chart-series-d: #199e70;
+  --color-chart-series-e: #d95926;
+  --color-chart-series-f: #9085e9;
+  --color-chart-series-g: #008300;
+  --color-chart-series-h: #e66767;
   --color-node-a: #7dd3fc;
   --color-node-b: #f9a8d4;
   --color-node-c: #86efac;
@@ -150,6 +167,12 @@
   --color-neutral-on: #ffffff;
   --color-chart-series-a: #2a78d6;
   --color-chart-series-b: #e87ba4;
+  --color-chart-series-c: #eda100;
+  --color-chart-series-d: #1baf7a;
+  --color-chart-series-e: #eb6834;
+  --color-chart-series-f: #6250d6;
+  --color-chart-series-g: #008300;
+  --color-chart-series-h: #e34948;
   --color-node-a: #0284c7;
   --color-node-b: #db2777;
   --color-node-c: #16a34a;
@@ -194,6 +217,12 @@
     --color-neutral-on: #ffffff;
     --color-chart-series-a: #2a78d6;
     --color-chart-series-b: #e87ba4;
+    --color-chart-series-c: #eda100;
+    --color-chart-series-d: #1baf7a;
+    --color-chart-series-e: #eb6834;
+    --color-chart-series-f: #6250d6;
+    --color-chart-series-g: #008300;
+    --color-chart-series-h: #e34948;
     --color-node-a: #0284c7;
     --color-node-b: #db2777;
     --color-node-c: #16a34a;
@@ -204,3 +233,76 @@
     --color-node-h: #e11d48;
   }
 }
+
+/* uPlot structure for the chart family (`composites/charts/`). uPlot ships its
+   own stylesheet; these are only the rules its layout needs, spelled in theme
+   tokens. Its legend is never used — the React legend renders identity. */
+.uplot,
+.uplot *,
+.uplot *::before,
+.uplot *::after {
+  box-sizing: border-box;
+}
+.uplot {
+  font-family: inherit;
+  line-height: 1.5;
+  width: 100%;
+}
+.uplot .u-wrap {
+  position: relative;
+  user-select: none;
+}
+.uplot .u-over,
+.uplot .u-under {
+  position: absolute;
+}
+.uplot .u-under {
+  overflow: hidden;
+}
+.uplot canvas {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.uplot .u-axis {
+  position: absolute;
+}
+.uplot .u-select {
+  position: absolute;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+.uplot .u-cursor-x,
+.uplot .u-cursor-y {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  will-change: transform;
+}
+.uplot.u-hz .u-cursor-x {
+  height: 100%;
+  border-right: 1px solid var(--color-foreground-subtle);
+}
+.uplot.u-hz .u-cursor-y {
+  width: 100%;
+  border-bottom: 1px dashed var(--color-border);
+}
+.uplot .u-cursor-pt {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  border: 0 solid;
+  pointer-events: none;
+  will-change: transform;
+  background-clip: padding-box !important;
+}
+.uplot .u-axis.u-off,
+.uplot .u-select.u-off,
+.uplot .u-cursor-x.u-off,
+.uplot .u-cursor-y.u-off,
+.uplot .u-cursor-pt.u-off {
+  display: none;
+}