nanoplot 0.0.92 → 0.0.94

package/dist/index.css

@@ -32,10 +32,6 @@
   }
 }
 
-.pseudo-bg-inherit::before, .pseudo-bg-inherit::after {
-  background: inherit;
-}
-
 .pointer-events-none {
   pointer-events: none;
 }
@@ -100,10 +96,6 @@
   z-index: -10;
 }
 
-.z-0 {
-  z-index: 0;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -448,10 +440,6 @@
   stroke-width: 5;
 }
 
-.p-\[12px\] {
-  padding: 12px;
-}
-
 .px-2\.5 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
@@ -678,50 +666,10 @@
   backface-visibility: hidden;
 }
 
-.\[background-position\:bottom\] {
-  background-position: bottom;
-}
-
-.\[background-position\:right\] {
-  background-position: right;
-}
-
-.\[background-size\:100\%_calc\(100\%\+var\(--h\)\)\] {
-  background-size: 100% calc(100% + var(--h));
-}
-
-.\[background-size\:calc\(100\%\+var\(--h\)\)_100\%\] {
-  background-size: calc(100% + var(--h)) 100%;
-}
-
 .\[background\:linear-gradient\(transparent\2c \#CFCFCF\)\] {
   background: linear-gradient(transparent,#CFCFCF);
 }
 
-.\[background\:padding-box_linear-gradient\(black\)\2c border-box_rgb\(45\2c 45\2c 45\)\] {
-  background: padding-box linear-gradient(black),border-box rgb(45,45,45);
-}
-
-.\[border-radius\:min\(var\(--r\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_min\(var\(--r\)\2c 100\%-var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_var\(--r\)_var\(--r\)\/var\(--r\)\] {
-  border-radius: min(var(--r),var(--p) - var(--h) * tan(var(--a) / 2)) min(var(--r),100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r) / var(--r);
-}
-
-.\[border-radius\:var\(--r\)\/min\(var\(--r\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_var\(--r\)_var\(--r\)_min\(var\(--r\)\2c 100\%-var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\] {
-  border-radius: var(--r)/min(var(--r),var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h) * tan(var(--a) / 2));
-}
-
-.\[border-radius\:var\(--r\)\/var\(--r\)_min\(var\(--r\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_min\(var\(--r\)\2c 100\%-var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_var\(--r\)\] {
-  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--h) * tan(var(--a) / 2)) min(var(--r),100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r);
-}
-
-.\[border-radius\:var\(--r\)_var\(--r\)_min\(var\(--r\)\2c 100\%-var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_min\(var\(--r\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\/var\(--r\)\] {
-  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--h) * tan(var(--a) / 2)) min(var(--r),var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);
-}
-
-.\[border\:var\(--b\)_solid_\#0000\] {
-  border: var(--b) solid #0000;
-}
-
 .\[container-type\:size\] {
   container-type: size;
 }
@@ -858,129 +806,28 @@
   initial-value: 1px;
 }
 
-.before\:absolute::before {
-  content: var(--tw-content);
-  position: absolute;
-}
-
-.before\:z-\[-1\]::before {
-  content: var(--tw-content);
-  z-index: -1;
-}
-
-.before\:content-\[\'_\'\]::before {
-  --tw-content: ' ';
-  content: var(--tw-content);
-}
-
-.before\:\[background-size\:0_0\2c _100\%_100\%\]::before {
-  content: var(--tw-content);
-  background-size: 0 0, 100% 100%;
-}
-
-.before\:\[clip-path\:polygon\(calc\(100\%-var\(--h\)-var\(--b\)\)_min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c calc\(100\%-var\(--h\)\)_min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c 100\%_var\(--p\)\2c calc\(100\%-var\(--h\)\)_max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c calc\(100\%-var\(--h\)-var\(--b\)\)_max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\)\]::before {
-  content: var(--tw-content);
-  clip-path: polygon(calc(100% - var(--h) - var(--b)) min(100%,var(--p) + var(--h) * tan(var(--a) / 2)),calc(100% - var(--h)) min(100%,var(--p) + var(--h) * tan(var(--a) / 2)),100% var(--p),calc(100% - var(--h)) max(0%,var(--p) - var(--h) * tan(var(--a) / 2)),calc(100% - var(--h) - var(--b)) max(0%,var(--p) - var(--h) * tan(var(--a) / 2)));
-}
-
-.before\:\[clip-path\:polygon\(calc\(var\(--h\)\+var\(--b\)\)_min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c var\(--h\)_min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c 0_var\(--p\)\2c var\(--h\)_max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\2c calc\(var\(--h\)\+var\(--b\)\)_max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)\)\]::before {
-  content: var(--tw-content);
-  clip-path: polygon(calc(var(--h) + var(--b)) min(100%,var(--p) + var(--h) * tan(var(--a) / 2)),var(--h) min(100%,var(--p) + var(--h) * tan(var(--a) / 2)),0 var(--p),var(--h) max(0%,var(--p) - var(--h) * tan(var(--a) / 2)),calc(var(--h) + var(--b)) max(0%,var(--p) - var(--h) * tan(var(--a) / 2)));
-}
-
-.before\:\[clip-path\:polygon\(min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(100\%-var\(--h\)-var\(--b\)\)\2c min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(100\%-var\(--h\)\)\2c var\(--p\)_100\%\2c max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(100\%-var\(--h\)\)\2c max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(100\%-var\(--h\)-var\(--b\)\)\)\]::before {
-  content: var(--tw-content);
-  clip-path: polygon(min(100%,var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h) - var(--b)),min(100%,var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),var(--p) 100%,max(0%,var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),max(0%,var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h) - var(--b)));
-}
-
-.before\:\[clip-path\:polygon\(min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(var\(--h\)\+var\(--b\)\)\2c min\(100\%\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)\)_var\(--h\)\2c var\(--p\)_0\2c max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_var\(--h\)\2c max\(0\%\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\)_calc\(var\(--h\)\+var\(--b\)\)\)\]::before {
-  content: var(--tw-content);
-  clip-path: polygon(min(100%,var(--p) + var(--h) * tan(var(--a) / 2)) calc(var(--h) + var(--b)),min(100%,var(--p) + var(--h) * tan(var(--a) / 2)) var(--h),var(--p) 0,max(0%,var(--p) - var(--h) * tan(var(--a) / 2)) var(--h),max(0%,var(--p) - var(--h) * tan(var(--a) / 2)) calc(var(--h) + var(--b)));
-}
-
-.before\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)\]::before {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h));
-}
-
-.before\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)\]::before {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h));
-}
-
-.before\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)\]::before {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h)) calc(-1 * var(--b)) calc(-1 * var(--b));
-}
-
-.before\:\[inset\:calc\(-1\*var\(--b\)-var\(--h\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)\]::before {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b) - var(--h)) calc(-1 * var(--b)) calc(-1 * var(--b));
-}
-
-.after\:absolute::after {
-  content: var(--tw-content);
-  position: absolute;
-}
-
-.after\:z-\[-1\]::after {
-  content: var(--tw-content);
-  z-index: -1;
-}
-
-.after\:content-\[\'_\'\]::after {
-  --tw-content: ' ';
-  content: var(--tw-content);
-}
-
-.after\:\[background-size\:100\%_100\%\2c 0_0\]::after {
-  content: var(--tw-content);
-  background-size: 100% 100%,0 0;
-}
-
-.after\:\[border\:inherit\]::after {
-  content: var(--tw-content);
-  border: inherit;
-}
+@property --fit-w {
+  syntax: "<length>";
 
-.after\:\[clip-path\:polygon\(calc\(100\%-var\(--h\)-var\(--b\)\)_min\(100\%-var\(--b\)\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)-var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)\2c calc\(100\%-var\(--b\)\/sin\(var\(--a\)\/2\)\)_var\(--p\)\2c calc\(100\%-var\(--h\)-var\(--b\)\)_max\(var\(--b\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\+var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)\2c 50\%_50\%\)\]::after {
-  content: var(--tw-content);
-  clip-path: polygon(calc(100% - var(--h) - var(--b)) min(100% - var(--b),var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)),calc(100% - var(--b) / sin(var(--a) / 2)) var(--p),calc(100% - var(--h) - var(--b)) max(var(--b),var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)),50% 50%);
-}
+  inherits: true;
 
-.after\:\[clip-path\:polygon\(calc\(var\(--h\)\+var\(--b\)\)_min\(100\%-var\(--b\)\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)-var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)\2c calc\(var\(--b\)\/sin\(var\(--a\)\/2\)\)_var\(--p\)\2c calc\(var\(--h\)\+var\(--b\)\)_max\(var\(--b\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\+var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)\2c 50\%_50\%\)\]::after {
-  content: var(--tw-content);
-  clip-path: polygon(calc(var(--h) + var(--b)) min(100% - var(--b),var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)),calc(var(--b) / sin(var(--a) / 2)) var(--p),calc(var(--h) + var(--b)) max(var(--b),var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)),50% 50%);
+  initial-value: 1px;
 }
 
-.after\:\[clip-path\:polygon\(min\(100\%-var\(--b\)\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)-var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)_calc\(100\%-var\(--h\)-var\(--b\)\)\2c var\(--p\)_calc\(100\%-var\(--b\)\/sin\(var\(--a\)\/2\)\)\2c max\(var\(--b\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\+var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)_calc\(100\%-var\(--h\)-var\(--b\)\)\2c 50\%_50\%\)\]::after {
-  content: var(--tw-content);
-  clip-path: polygon(min(100% - var(--b),var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)) calc(100% - var(--h) - var(--b)),var(--p) calc(100% - var(--b) / sin(var(--a) / 2)),max(var(--b),var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)) calc(100% - var(--h) - var(--b)),50% 50%);
-}
+@property --fit-h {
+  syntax: "<length>";
 
-.after\:\[clip-path\:polygon\(min\(100\%-var\(--b\)\2c var\(--p\)\+var\(--h\)\*tan\(var\(--a\)\/2\)-var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)_calc\(var\(--h\)\+var\(--b\)\)\2c var\(--p\)_calc\(var\(--b\)\/sin\(var\(--a\)\/2\)\)\2c max\(var\(--b\)\2c var\(--p\)-var\(--h\)\*tan\(var\(--a\)\/2\)\+var\(--b\)\*tan\(45deg-var\(--a\)\/4\)\)_calc\(var\(--h\)\+var\(--b\)\)\2c 50\%_50\%\)\]::after {
-  content: var(--tw-content);
-  clip-path: polygon(min(100% - var(--b),var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) * tan(45deg - var(--a) / 4)) calc(var(--h) + var(--b)),var(--p) calc(var(--b) / sin(var(--a) / 2)),max(var(--b),var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) * tan(45deg - var(--a) / 4)) calc(var(--h) + var(--b)),50% 50%);
-}
+  inherits: true;
 
-.after\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)\]::after {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h));
+  initial-value: 1px;
 }
 
-.after\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)\]::after {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h));
-}
+@property --sx {
+  syntax: "<number>";
 
-.after\:\[inset\:calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)-var\(--h\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)\]::after {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b)) calc(-1 * var(--b) - var(--h)) calc(-1 * var(--b)) calc(-1 * var(--b));
-}
+  inherits: false;
 
-.after\:\[inset\:calc\(-1\*var\(--b\)-var\(--h\)\)_calc\(-1\*var\(--b\)\)_calc\(-1\*var\(--b\)\)\]::after {
-  content: var(--tw-content);
-  inset: calc(-1 * var(--b) - var(--h)) calc(-1 * var(--b)) calc(-1 * var(--b));
+  initial-value: 1;
 }
 
 .hover\:stroke-\[var\(--worldmap-stroke\)\]:hover {

package/dist/src/components/Bars/components/HorizontalBars.js

@@ -17,7 +17,6 @@ import { cx } from "../../../utils/cx/cx";
 import { ObjectUtils } from "../../../utils/object/object";
 import { Rect } from "./Rect";
 import { scale } from "../../../utils/math/math";
-import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
 import { toEpochMs } from "../../../utils/domain/utils/temporal";
 export const HorizontalBars = ({ children, fill, stroke, labels, size = 50, radius = 0, anchor = 0, interactions, onMouseEnter, onMouseLeave, className, }) => {
@@ -75,7 +74,7 @@ export const HorizontalBars = ({ children, fill, stroke, labels, size = 50, radi
                     return (_a = (labels === true ? bar.data.y : labels(bar))) !== null && _a !== void 0 ? _a : "";
                 })();
                 const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
-                return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
+                return (React.createElement("div", { key: i, className: "bars__label [grid-area:graph] @container-[size] absolute text-center", style: {
                         width,
                         height: height + "%",
                         left: position === "above" ? "unset" : scale(Math.min(bar.x1, bar.x2), context.viewbox.x, 100) + "%",

package/dist/src/components/Bars/components/VerticalBars.js

@@ -18,7 +18,6 @@ import { ObjectUtils } from "../../../utils/object/object";
 import { Rect } from "./Rect";
 import { cx } from "../../../utils/cx/cx";
 import { scale } from "../../../utils/math/math";
-import { overlay } from "../../Overlay/Overlay";
 import { ColorUtils } from "../../../utils/color/color";
 import { toEpochMs } from "../../../utils/domain/utils/temporal";
 export const VerticalBars = (_a) => {
@@ -37,12 +36,10 @@ export const VerticalBars = (_a) => {
     }));
     const BAR_WIDTH = Math.floor(context.viewbox.x / context.domain.x.length / new Set(bars.map((bar) => bar.group)).size) * (size / 100); // this divided by number of unique groups?
     const xValues = new Set(bars.map((bar) => (typeof bar.data.x === "string" || typeof bar.data.x === "number" ? bar.data.x : toEpochMs(bar.data.x))));
-    console.log(xValues);
     const dataset = Array.from(xValues)
         .flatMap((x) => {
         const coordinate = xForValue(x);
         const barsForTick = bars.filter((bar) => (typeof bar.data.x === "string" || typeof bar.data.x === "number" ? bar.data.x : toEpochMs(bar.data.x)) === x);
-        console.log(barsForTick);
         return Object.entries(ObjectUtils.groupBy(barsForTick, ({ group }) => group)).flatMap(([, barsForGroup], i, groups) => {
             const x1 = coordinate + BAR_WIDTH * i - (BAR_WIDTH * Object.keys(groups).length) / 2;
             return barsForGroup === null || barsForGroup === void 0 ? void 0 : barsForGroup.map((bar) => (Object.assign(Object.assign({}, bar), { x1, x2: x1 + BAR_WIDTH, y1: yForValue(bar.data.y), y2: yForValue(anchor) }))).map((segment, ii, segments) => {
@@ -88,7 +85,7 @@ export const VerticalBars = (_a) => {
                     return (_a = (labels === true ? bar.data.y : labels(bar))) !== null && _a !== void 0 ? _a : "";
                 })();
                 const breakpoint = [2, 4, 5, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().replace(".", "").length);
-                return (React.createElement(overlay.div, { key: i, className: "bars__label @container-[size] absolute text-center", style: {
+                return (React.createElement("div", { key: i, className: "bars__label [grid-area:graph] @container-[size] absolute text-center", style: {
                         width,
                         height: Math.abs(height - (position === "above" ? 100 : 0)) + "%",
                         left: scale(bar.x1, context.viewbox.x, 100) + "%",

package/dist/src/components/BoxShadow/BoxShadow.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function BoxShadow({ id, shadow }: {
+    id: string;
+    shadow: string;
+}): React.JSX.Element | null;

package/dist/src/components/BoxShadow/BoxShadow.js

@@ -0,0 +1,240 @@
+import React, { useMemo } from "react";
+function splitShadows(str) {
+    const result = [];
+    let depth = 0, current = "";
+    for (const ch of str) {
+        if (ch === "(")
+            depth++;
+        if (ch === ")")
+            depth--;
+        if (ch === "," && depth === 0) {
+            result.push(current.trim());
+            current = "";
+        }
+        else {
+            current += ch;
+        }
+    }
+    if (current.trim())
+        result.push(current.trim());
+    return result;
+}
+function parseBoxShadow(shadowStr) {
+    if (!shadowStr || !shadowStr.trim())
+        return [];
+    return splitShadows(shadowStr).map(parseSingleShadow);
+}
+function buildFilterData(shadows) {
+    const primitives = [];
+    const dropRefs = [];
+    const insetRefs = [];
+    shadows.forEach((s, i) => {
+        const sd = s.blur / 2;
+        if (!s.inset) {
+            // ═══ DROP SHADOW ═══
+            let src = "SourceAlpha";
+            if (s.spread !== 0) {
+                const op = s.spread > 0 ? "dilate" : "erode";
+                primitives.push({ tag: "feMorphology", attrs: { in: src, operator: op, radius: Math.abs(s.spread), result: `dSp${i}` } });
+                src = `dSp${i}`;
+            }
+            if (sd > 0) {
+                primitives.push({ tag: "feGaussianBlur", attrs: { in: src, stdDeviation: sd, result: `dBl${i}` } });
+                src = `dBl${i}`;
+            }
+            primitives.push({ tag: "feOffset", attrs: { in: src, dx: s.offsetX, dy: s.offsetY, result: `dOf${i}` } });
+            primitives.push({ tag: "feFlood", attrs: { floodColor: s.color, floodOpacity: s.opacity, result: `dFl${i}` } });
+            primitives.push({ tag: "feComposite", attrs: { in: `dFl${i}`, in2: `dOf${i}`, operator: "in", result: `dSh${i}` } });
+            dropRefs.push(`dSh${i}`);
+        }
+        else {
+            // ═══ INSET SHADOW ═══
+            primitives.push({ tag: "feFlood", attrs: { floodColor: "white", floodOpacity: 1, result: `iWh${i}` } });
+            primitives.push({ tag: "feComposite", attrs: { in: `iWh${i}`, in2: "SourceAlpha", operator: "out", result: `iInv${i}` } });
+            let src = `iInv${i}`;
+            if (s.spread !== 0) {
+                const op = s.spread > 0 ? "dilate" : "erode";
+                primitives.push({ tag: "feMorphology", attrs: { in: src, operator: op, radius: Math.abs(s.spread), result: `iSp${i}` } });
+                src = `iSp${i}`;
+            }
+            if (sd > 0) {
+                primitives.push({ tag: "feGaussianBlur", attrs: { in: src, stdDeviation: sd, result: `iBl${i}` } });
+                src = `iBl${i}`;
+            }
+            primitives.push({ tag: "feOffset", attrs: { in: src, dx: s.offsetX, dy: s.offsetY, result: `iOf${i}` } });
+            primitives.push({ tag: "feFlood", attrs: { floodColor: s.color, floodOpacity: s.opacity, result: `iFl${i}` } });
+            primitives.push({ tag: "feComposite", attrs: { in: `iFl${i}`, in2: `iOf${i}`, operator: "in", result: `iCo${i}` } });
+            primitives.push({ tag: "feComposite", attrs: { in: `iCo${i}`, in2: "SourceAlpha", operator: "in", result: `iSh${i}` } });
+            insetRefs.push(`iSh${i}`);
+        }
+    });
+    // Merge order: drop shadows (last→first) → SourceGraphic → inset (last→first)
+    const mergeInputs = [];
+    for (let i = dropRefs.length - 1; i >= 0; i--)
+        mergeInputs.push(dropRefs[i]);
+    mergeInputs.push("SourceGraphic");
+    for (let i = insetRefs.length - 1; i >= 0; i--)
+        mergeInputs.push(insetRefs[i]);
+    return { primitives, mergeInputs };
+}
+function computeFilterRegion(shadows) {
+    let maxExt = 30;
+    for (const s of shadows) {
+        const ext = Math.abs(s.offsetX) + Math.abs(s.offsetY) + s.blur + Math.abs(s.spread) + 20;
+        if (ext > maxExt)
+            maxExt = ext;
+    }
+    const pad = Math.max(maxExt * 3, 100);
+    return { x: `-${pad}%`, y: `-${pad}%`, width: `${100 + pad * 2}%`, height: `${100 + pad * 2}%` };
+}
+function parseSingleShadow(str) {
+    const tokens = tokenize(str);
+    let inset = false;
+    const lengths = [];
+    let colorStr = null;
+    for (const token of tokens) {
+        if (token.toLowerCase() === "inset") {
+            inset = true;
+        }
+        else if (isLength(token)) {
+            lengths.push(parseFloat(token) || 0);
+        }
+        else {
+            colorStr = token;
+        }
+    }
+    const { color, opacity } = parseColorValue(colorStr || "rgba(0,0,0,1)");
+    return {
+        inset,
+        offsetX: lengths[0] || 0,
+        offsetY: lengths[1] || 0,
+        blur: Math.max(lengths[2] || 0, 0),
+        spread: lengths[3] || 0,
+        color,
+        opacity,
+    };
+}
+function isLength(token) {
+    return /^-?\d*\.?\d+(px|em|rem|pt|cm|mm|in|vh|vw|%)?$/.test(token);
+}
+// ─── Color Parser ─────────────────────────────────────────
+function tokenize(str) {
+    const tokens = [];
+    let i = 0;
+    const s = str.trim();
+    while (i < s.length) {
+        if (/\s/.test(s[i])) {
+            i++;
+            continue;
+        }
+        if (/[a-zA-Z_]/.test(s[i])) {
+            let word = "";
+            while (i < s.length && /[a-zA-Z_-]/.test(s[i])) {
+                word += s[i];
+                i++;
+            }
+            if (i < s.length && s[i] === "(") {
+                word += "(";
+                i++;
+                let depth = 1;
+                while (i < s.length && depth > 0) {
+                    if (s[i] === "(")
+                        depth++;
+                    if (s[i] === ")")
+                        depth--;
+                    word += s[i];
+                    i++;
+                }
+            }
+            tokens.push(word);
+            continue;
+        }
+        if (s[i] === "#") {
+            let hex = "#";
+            i++;
+            while (i < s.length && /[0-9a-fA-F]/.test(s[i])) {
+                hex += s[i];
+                i++;
+            }
+            tokens.push(hex);
+            continue;
+        }
+        if (/[-\d.]/.test(s[i])) {
+            let num = "";
+            if (s[i] === "-") {
+                num += "-";
+                i++;
+            }
+            while (i < s.length && /[\d.]/.test(s[i])) {
+                num += s[i];
+                i++;
+            }
+            while (i < s.length && /[a-zA-Z%]/.test(s[i])) {
+                num += s[i];
+                i++;
+            }
+            tokens.push(num);
+            continue;
+        }
+        i++;
+    }
+    return tokens;
+}
+function parseColorValue(colorStr) {
+    const s = (colorStr || "").trim();
+    if (!s || s.toLowerCase() === "transparent")
+        return { color: "rgb(0,0,0)", opacity: 0 };
+    if (s.startsWith("#")) {
+        const hex = s.slice(1);
+        if (hex.length === 3)
+            return { color: s, opacity: 1 };
+        if (hex.length === 4) {
+            const a = parseInt(hex[3] + hex[3], 16) / 255;
+            return { color: `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`, opacity: +a.toFixed(3) };
+        }
+        if (hex.length === 6)
+            return { color: s, opacity: 1 };
+        if (hex.length === 8) {
+            const a = parseInt(hex.slice(6), 16) / 255;
+            return { color: s.slice(0, 7), opacity: +a.toFixed(3) };
+        }
+        return { color: s, opacity: 1 };
+    }
+    const rgbaMatch = s.match(/^rgba?\((.+)\)$/i);
+    if (rgbaMatch) {
+        const parts = rgbaMatch[1].split(/[\s,/]+/).filter(Boolean);
+        const [r, g, b] = parts;
+        if (parts.length >= 4) {
+            let a = parseFloat(parts[3]);
+            if (parts[3].endsWith("%"))
+                a = parseFloat(parts[3]) / 100;
+            return { color: `rgb(${r},${g},${b})`, opacity: a };
+        }
+        return { color: `rgb(${r},${g},${b})`, opacity: 1 };
+    }
+    const hslaMatch = s.match(/^hsla?\((.+)\)$/i);
+    if (hslaMatch) {
+        const parts = hslaMatch[1].split(/[\s,/]+/).filter(Boolean);
+        if (parts.length >= 4) {
+            let a = parseFloat(parts[3]);
+            if (parts[3].endsWith("%"))
+                a = parseFloat(parts[3]) / 100;
+            return { color: `hsl(${parts[0]},${parts[1]},${parts[2]})`, opacity: a };
+        }
+        return { color: s, opacity: 1 };
+    }
+    return { color: s, opacity: 1 };
+}
+export function BoxShadow({ id, shadow }) {
+    const filterElement = useMemo(() => {
+        const shadows = parseBoxShadow(shadow);
+        if (!shadows.length)
+            return null;
+        const { primitives, mergeInputs } = buildFilterData(shadows);
+        const region = computeFilterRegion(shadows);
+        return (React.createElement("filter", { id: id, x: region.x, y: region.y, width: region.width, height: region.height, colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse" },
+            primitives.map((p, i) => React.createElement(p.tag, Object.assign({ key: i }, p.attrs))),
+            React.createElement("feMerge", null, mergeInputs.map((ref, i) => (React.createElement("feMergeNode", { key: i, in: ref }))))));
+    }, [shadow, id]);
+    return filterElement;
+}

package/dist/src/components/Heatmap/Heatmap.js

@@ -16,7 +16,6 @@ import { GraphUtils } from "../../utils/graph/graph";
 import { CoordinatesUtils } from "../../utils/coordinates/coordinates";
 import { scale } from "../../utils/math/math";
 import { GradientUtils } from "../../utils/gradient/gradient";
-import { overlay } from "../Overlay/Overlay";
 import { ColorUtils } from "../../utils/color/color";
 import React from "react";
 import { ScalarUtils } from "../../utils/scalars/scalars";
@@ -67,7 +66,7 @@ export const Heatmap = (_a) => {
                     return (_a = (labels === true ? rect.data.z.toString() : labels(rect.data.z))) !== null && _a !== void 0 ? _a : "";
                 })();
                 const breakpoint = [2, 4, 6, 8, 10, 15, 20].find((bp) => bp >= label.toString().length);
-                return (React.createElement(overlay.div, { key: i, className: "heatmap__labels @container-[size] absolute text-center", style: {
+                return (React.createElement("div", { key: i, className: "heatmap__labels [grid-area:graph] @container-[size] absolute text-center", style: {
                         width,
                         height: height + "%",
                         left: `${scale(rect.x1, context.viewbox.x, 100)}%`,

package/dist/src/components/Lines/Lines.d.ts

@@ -1,6 +1,7 @@
-import React, { ReactNode } from "react";
+import React, { ComponentProps, ReactNode } from "react";
 import { InternalGraphContext } from "../../hooks/use-graph/use-graph";
 import { CurveUtils } from "../../utils/path/curve";
+import { Line } from "./components/Line";
 interface Props extends React.SVGAttributes<SVGSVGElement> {
     children?: ReactNode;
     curve?: keyof typeof CurveUtils;
@@ -13,6 +14,7 @@ interface Props extends React.SVGAttributes<SVGSVGElement> {
 }
 export declare const Lines: {
     (props: Props): React.JSX.Element | null;
+    Line(props: ComponentProps<typeof Line>): React.JSX.Element;
     Tooltip: React.ComponentType<Omit<React.HTMLAttributes<HTMLDivElement> & {
         tooltip?: ((points: Array<Omit<import("../../export").CartesianDataset[number], "data"> & {
             data: import("../../export").CartesianDataset[number]["data"][number];

package/dist/src/components/Lines/Lines.js

@@ -63,6 +63,11 @@ export const Lines = (props) => {
             }),
             children)));
 };
+Lines.Line = (props) => {
+    const context = useGraph();
+    return (React.createElement("svg", { className: "[grid-area:graph] h-full w-full", viewBox: `0 0 ${context.viewbox.x} ${context.viewbox.y}`, preserveAspectRatio: "none" },
+        React.createElement(Line, Object.assign({}, props))));
+};
 Lines.Tooltip = LinesTooltipZone;
 Lines.Mouse = LinesMouse;
 Lines.Joints = LinesJoints;

package/dist/src/components/Lines/components/Line.d.ts

@@ -1,13 +1,16 @@
 import { JSX } from "react";
-type Props = JSX.IntrinsicElements["path"] & {
-    d: string;
+import { InternalGraphContext, TemporalDate } from "../../../hooks/use-graph/use-graph";
+type Props = Omit<JSX.IntrinsicElements["path"], "points"> & {
+    d?: string;
     stroke: string;
     fill?: string;
+    filter?: string;
     disabled?: boolean;
     points?: Array<{
-        x: number;
-        y: number;
+        x: number | string | TemporalDate;
+        y: number | string | TemporalDate;
     }>;
+    context?: InternalGraphContext;
 };
-export declare const Line: ({ stroke, d, disabled, fill, className, points, ...rest }: Props) => JSX.Element;
+export declare const Line: ({ stroke, d, disabled, fill, className, points, filter, ...rest }: Props) => JSX.Element;
 export {};

package/dist/src/components/Lines/components/Line.js

@@ -11,20 +11,36 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useId } from "react";
 import { LinearGradient } from "../../LinearGradient/LinearGradient";
+import { useGraph } from "../../../hooks/use-graph/use-graph";
+import { CoordinatesUtils } from "../../../utils/coordinates/coordinates";
+import { CurveUtils } from "../../../utils/path/curve";
+import { BoxShadow } from "../../BoxShadow/BoxShadow";
 export const Line = (_a) => {
-    var { stroke, d, disabled, fill, className, points } = _a, rest = __rest(_a, ["stroke", "d", "disabled", "fill", "className", "points"]);
+    var { stroke, d, disabled, fill, className, points, filter } = _a, rest = __rest(_a, ["stroke", "d", "disabled", "fill", "className", "points", "filter"]);
+    const context = useGraph();
     const strokeId = useId();
     const fillId = useId();
     const clipId = useId();
+    const boxShadowId = useId();
     const isGradientFill = fill === null || fill === void 0 ? void 0 : fill.includes("linear-gradient");
     const isGradientStroke = stroke === null || stroke === void 0 ? void 0 : stroke.includes("linear-gradient");
     const isMaskStroke = stroke === null || stroke === void 0 ? void 0 : stroke.includes("mask");
+    const coordinatesFor = CoordinatesUtils.xyCoordinatesForDataset(context);
+    const D = (() => {
+        if (d)
+            return d;
+        if (points)
+            return CurveUtils.linear(coordinatesFor(points));
+        return "";
+    })();
     return (React.createElement(React.Fragment, null,
+        filter && React.createElement(BoxShadow, { id: boxShadowId, shadow: filter }),
         isGradientFill && !disabled && fill && React.createElement(LinearGradient, { id: fillId, gradient: fill }),
         isGradientStroke && !disabled && stroke && React.createElement(LinearGradient, { id: strokeId, gradient: stroke }),
         isMaskStroke && (React.createElement("mask", { id: clipId },
             React.createElement("rect", { width: "100%", height: "100%", fill: "black" }),
-            React.createElement("path", { d: d, fill: "none", stroke: "white", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" }))),
+            React.createElement("path", { d: D, fill: "none", stroke: "white", strokeWidth: 1.5, vectorEffect: "non-scaling-stroke" }))),
         isMaskStroke && React.createElement("rect", { width: "100%", height: "100%", fill: `url(#${strokeId})`, mask: `url(#${clipId})` }),
-        !isMaskStroke && (React.createElement("path", Object.assign({ d: d, stroke: isGradientStroke ? `url(#${strokeId})` : stroke, fill: isGradientFill ? `url(#${fillId})` : fill, vectorEffect: "non-scaling-stroke", strokeWidth: 1.5, className: className }, rest)))));
+        !isMaskStroke && (React.createElement("g", { filter: `url(#${boxShadowId})` },
+            React.createElement("path", Object.assign({ d: D, stroke: isGradientStroke ? `url(#${strokeId})` : stroke, fill: isGradientFill ? `url(#${fillId})` : fill, vectorEffect: "non-scaling-stroke", strokeWidth: 1.5, className: className }, rest))))));
 };