doom-design-system 0.5.0 → 0.6.0

package/dist/components/Chart/subcomponents/InteractionLayer/InteractionLayer.js

@@ -1,33 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useChartContext } from "../../context.js";
-import { useEventContext } from "../../state/EventContext.js";
-import { normalizeCoordinates } from "../../utils/coordinates.js";
+import { InputAction } from "../../engine/index.js";
 /**
  * InteractionLayer
  *
  * The root-level driver that captures native DOM pointer events on the Chart Container
- * and broadcasts normalized chart events to the EventContext.
+ * and forwards them to the Engine as InputSignals.
  *
  * Features:
- * - RAF Throttling (60fps aligned)
- * - Coordinate Normalization (fixes margins, borders, padding)
- * - Keyboard Support (basic)
+ * - RAF Throttling (60fps aligned for moves)
+ * - Direct Engine integration (no EventContext)
+ * - Keyboard Support
  */
 export const InteractionLayer = () => {
-    const { emit } = useEventContext();
-    const { chartStore } = useChartContext();
+    const { chartStore, engine } = useChartContext();
     const observerRef = useRef(null);
     // RAF State
     const frameRef = useRef(null);
     const lastEventRef = useRef(null);
-    // Cache
-    const plotRef = useRef(null);
     useEffect(() => {
         var _a;
         // 1. Locate the container (parent of this invisible element)
         const container = (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.closest("[data-chart-container]");
-        if (!container) {
+        if (!container || !engine) {
             return;
         }
         // 2. Define the throttled processor
@@ -36,52 +32,12 @@ export const InteractionLayer = () => {
             if (!event) {
                 return;
             }
-            // Lazy-find the plot SVG to avoid querySelector thrashing
-            let svg = plotRef.current;
-            if (!svg || !svg.isConnected) {
-                svg = container.querySelector("[data-chart-plot]");
-                plotRef.current = svg;
-            }
-            if (!svg) {
-                return;
-            } // Not ready yet
-            // Map native event to ChartEventType
-            const type = getChartEventType(event.type);
-            // --- CRITICAL COORDINATE CALCULATION ---
-            // We rely on the Store for margins, NOT the inner plot group BBox.
-            // This ensures x=0 is always the true axis line, even if data doesn't touch it.
-            const state = chartStore.getState();
-            const { margin, innerWidth, innerHeight } = state.dimensions;
-            const svgRect = svg.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            const containerStyle = window.getComputedStyle(container);
-            // Account for container borders
-            const borderLeft = parseFloat(containerStyle.borderLeftWidth) || 0;
-            const borderTop = parseFloat(containerStyle.borderTopWidth) || 0;
-            // Construct the Virtual Plot Rect (where the plot *logically* exists)
-            const plotLeft = svgRect.left + margin.left;
-            const plotTop = svgRect.top + margin.top;
-            const virtualPlotRect = {
-                left: plotLeft,
-                top: plotTop,
-                width: innerWidth,
-                height: innerHeight,
-                right: plotLeft + innerWidth,
-                bottom: plotTop + innerHeight,
-                x: plotLeft,
-                y: plotTop,
-                toJSON: () => { },
-            };
-            const coords = normalizeCoordinates(event, containerRect, virtualPlotRect, {
-                left: borderLeft,
-                top: borderTop,
-            });
-            if (coords) {
-                emit({
-                    type,
-                    coordinates: coords,
-                    nativeEvent: event,
-                });
+            // Map native event to InputAction
+            const action = getInputAction(event.type);
+            // Create signal and send to engine
+            const signal = engine.createSignal(event, action);
+            if (signal) {
+                engine.input(signal);
             }
             // Reset
             lastEventRef.current = null;
@@ -89,6 +45,22 @@ export const InteractionLayer = () => {
         };
         // 3. Define the listener (Throttler)
         const onPointerEvent = (e) => {
+            // CRITICAL: Do NOT throttle state-change events (down, up, leave).
+            // These need immediate processing for proper drag/click handling.
+            if (e.type === "pointerdown" ||
+                e.type === "pointerup" ||
+                e.type === "pointerleave") {
+                // Cancel any pending frame to avoid processing stale events
+                if (frameRef.current) {
+                    cancelAnimationFrame(frameRef.current);
+                    frameRef.current = null;
+                }
+                // Force synchronous processing
+                lastEventRef.current = e;
+                processEvent();
+                return;
+            }
+            // Throttle moves to RAF
             lastEventRef.current = e;
             if (!frameRef.current) {
                 frameRef.current = requestAnimationFrame(processEvent);
@@ -103,18 +75,9 @@ export const InteractionLayer = () => {
                 "Enter",
                 " ",
             ].includes(e.key)) {
-                // Keyboard events are not throttled for responsiveness
-                emit({
-                    type: "CHART_KEY_DOWN",
-                    coordinates: {
-                        containerX: 0,
-                        containerY: 0,
-                        chartX: 0,
-                        chartY: 0,
-                        isWithinPlot: true,
-                    },
-                    nativeEvent: e,
-                });
+                // Create and send keyboard signal
+                const signal = engine.createKeySignal(e);
+                engine.input(signal);
             }
         };
         // 4. Attach Listeners
@@ -133,7 +96,7 @@ export const InteractionLayer = () => {
                 cancelAnimationFrame(frameRef.current);
             }
         };
-    }, [emit, chartStore]);
+    }, [engine, chartStore]);
     return (_jsx("div", { ref: observerRef, "data-testid": "interaction-layer", style: {
             position: "absolute",
             width: 0,
@@ -142,16 +105,16 @@ export const InteractionLayer = () => {
             visibility: "hidden",
         } }));
 };
-// Helper
-function getChartEventType(nativeType) {
+// Helper: Map pointer event type to InputAction
+function getInputAction(nativeType) {
     switch (nativeType) {
         case "pointerdown":
-            return "CHART_POINTER_DOWN";
+            return InputAction.START;
         case "pointerup":
-            return "CHART_POINTER_UP";
+            return InputAction.END;
         case "pointerleave":
-            return "CHART_POINTER_LEAVE";
+            return InputAction.CANCEL;
         default:
-            return "CHART_POINTER_MOVE";
+            return InputAction.MOVE;
     }
 }

package/dist/components/Chart/subcomponents/Legend/Legend.module.css

@@ -1,33 +1,31 @@
-.legend {
-  align-items: center;
-  justify-content: flex-start;
-}
-.legend.legendBottom {
-  justify-content: center;
-}
-
-.legendItem {
-  align-items: center;
-}
-
-.legendDot {
-  width: var(--spacing-4);
-  height: var(--spacing-2);
-  border-radius: var(--radius);
-  flex-shrink: 0;
-  border: var(--border-width) solid var(--border-strong);
-}
-
-.legendLabel {
-  color: var(--foreground);
-  margin: 0;
-  white-space: nowrap;
-}
-
-.legendVertical {
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  gap: var(--spacing-2);
-  padding: 0 var(--spacing-2);
+@layer doom.components {
+  .legend {
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .legend.legendBottom {
+    justify-content: center;
+  }
+  .legendItem {
+    align-items: center;
+  }
+  .legendDot {
+    width: var(--space-4);
+    height: var(--space-2);
+    border-radius: var(--radius-md);
+    flex-shrink: 0;
+    border: var(--surface-border-width) solid var(--border-strong);
+  }
+  .legendLabel {
+    color: var(--foreground);
+    margin: 0;
+    white-space: nowrap;
+  }
+  .legendVertical {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    gap: var(--space-2);
+    padding: 0 var(--space-2);
+  }
 }

package/dist/components/Chart/subcomponents/LineSeries/LineSeries.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useId, useMemo } from "react";
 import { useChartContext } from "../../context.js";
+import { CHART_DATA_ATTRS } from "../../engine/index.js";
 import { registerSeries, unregisterSeries, } from "../../state/store/chart.store.js";
 import { resolveAccessor } from "../../utils/accessors.js";
 import { d3 } from "../../utils/d3.js";
@@ -39,6 +40,7 @@ const LineSeriesComponent = ({ data: localData, x: localX, y: localY, color, cur
         }
         registerSeries(chartStore, gradientId, [
             {
+                id: gradientId,
                 label: label || ((_a = config.yAxisLabel) !== null && _a !== void 0 ? _a : "Series"),
                 color: strokeColor,
                 x: xAccessor,
@@ -115,9 +117,11 @@ const LineSeriesComponent = ({ data: localData, x: localX, y: localY, color, cur
                         config,
                         colors: [color || "var(--primary)"],
                         styles: {},
-                        gradientId: "",
+                        gradientId,
                         isMobile,
                         chartStore,
+                        seriesId: gradientId,
+                        chartDataAttrs: CHART_DATA_ATTRS,
                     });
                 }
             } }));
@@ -129,7 +133,9 @@ const LineSeriesComponent = ({ data: localData, x: localX, y: localY, color, cur
     const showGradient = isArea && config.withGradient !== false;
     return (_jsxs("g", { className: "chart-line-series", children: [showGradient && (_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: strokeColor, stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: strokeColor, stopOpacity: 0 })] }) })), showGradient && (_jsx("path", { className: styles.area, d: paths.area || "", style: {
                     fill: `url(#${gradientId})`,
-                } })), _jsx("path", { "aria-label": label || "Line Series", "aria-roledescription": "line", className: styles.path, d: paths.line || "", role: "graphics-object", style: { stroke: strokeColor } }), (showDots || config.showDots) &&
+                } })), _jsx("path", { "aria-label": label || "Line Series", "aria-roledescription": "line", className: styles.path, d: paths.line || "", role: "graphics-object", style: { stroke: strokeColor }, [CHART_DATA_ATTRS.TYPE]: "line",
+                [CHART_DATA_ATTRS.SERIES_ID]: gradientId,
+                [CHART_DATA_ATTRS.DRAGGABLE]: false }), (showDots || config.showDots) &&
                 xScale &&
                 yScale &&
                 yAccessor &&
@@ -137,7 +143,7 @@ const LineSeriesComponent = ({ data: localData, x: localX, y: localY, color, cur
                 data.map((d, i) => {
                     const cx = xScale(xAccessor(d));
                     const cy = yScale(yAccessor(d));
-                    return _jsx(SeriesPoint, { color: strokeColor, x: cx, y: cy }, i);
+                    return (_jsx(SeriesPoint, { color: strokeColor, datum: d, x: cx, y: cy }, i));
                 })] }));
 };
 export const LineSeries = React.memo(LineSeriesComponent);

package/dist/components/Chart/subcomponents/LineSeries/LineSeries.module.css

@@ -1,22 +1,22 @@
-.path {
-  fill: none;
-  stroke: var(--primary);
-  stroke-width: calc(var(--border-width) * 1.5);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: stroke-dasharray 0.3s ease;
-}
-
-.area {
-  fill: var(--primary);
-  stroke: none;
-  /* opacity: 0.1; */
-}
-
-.dot {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  transition: r 0.2s;
-  z-index: var(--z-overlay);
+@layer doom.components {
+  .path {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: stroke-dasharray 0.3s ease;
+  }
+  .area {
+    fill: var(--primary);
+    stroke: none;
+    /* opacity: 0.1; */
+  }
+  .dot {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    transition: r 0.2s;
+    z-index: var(--z-overlay);
+  }
 }

package/dist/components/Chart/subcomponents/Root/Root.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { ChartContext } from "../../context.js";
 import { useChartBehaviors } from "../../hooks/useChartBehaviors.js";
+import { useEngine } from "../../hooks/useEngine.js";
 import { SensorManager } from "../../sensors/SensorManager/SensorManager.js";
 import { EventsProvider } from "../../state/EventContext.js";
 import { createChartStore, updateChartDimensions, updateChartState, } from "../../state/store/chart.store.js";
-import { InteractionChannel, } from "../../types/index.js";
+import { InteractionChannel, resolveAccessor, } from "../../types/index.js";
 import { hasChildOfTypeDeep } from "../../utils/componentDetection.js";
 import { Axis } from "../Axis/Axis.js";
 import { CursorWrapper } from "../Cursor/Cursor.js";
@@ -59,9 +60,115 @@ function RootPlot({ children, chartStore, }) {
 export function Root({ data, d3Config, className, style, onValueChange, variant = "default", flat = false, withFrame = true, title, subtitle, withLegend = false, children, type, render, x, y, behaviors, sensors, }) {
     const [chartStore] = useState(() => createChartStore(Object.assign(Object.assign({}, d3Config), { type }), x, y));
     const [isMobile, setIsMobile] = useState(false);
+    const containerRef = useRef(null);
     const wrapperRef = useRef(null);
     const lastValueRef = useRef(null);
-    // Sync data to store
+    const { engine } = useEngine();
+    useLayoutEffect(() => {
+        var _a, _b, _c;
+        if (!containerRef.current) {
+            return;
+        }
+        const state = chartStore.getState();
+        const { dimensions } = state;
+        // In composition mode wrapperRef is never mounted; fall back to the SVG
+        // element that Plot.tsx registers via chartStore.elements.svg.
+        const plotEl = (_c = (_a = wrapperRef.current) !== null && _a !== void 0 ? _a : (_b = chartStore.getState().elements) === null || _b === void 0 ? void 0 : _b.svg) !== null && _c !== void 0 ? _c : null;
+        engine.setContainer(containerRef.current, plotEl, {
+            x: dimensions.margin.left,
+            y: dimensions.margin.top,
+            width: dimensions.innerWidth,
+            height: dimensions.innerHeight,
+        });
+    }, [
+        engine,
+        chartStore,
+        title,
+        subtitle,
+        withLegend,
+        withFrame,
+        flat,
+        variant,
+        isMobile,
+    ]);
+    useEffect(() => {
+        return chartStore.subscribe(() => {
+            var _a, _b, _c;
+            const state = chartStore.getState();
+            if (!state) {
+                return;
+            }
+            const { data, scales, dimensions, processedSeries } = state;
+            const { x: xScale, y: yScale } = scales;
+            if (containerRef.current) {
+                // In composition mode wrapperRef is null; use the SVG registered by Plot.tsx.
+                const plotEl = (_c = (_a = wrapperRef.current) !== null && _a !== void 0 ? _a : (_b = state.elements) === null || _b === void 0 ? void 0 : _b.svg) !== null && _c !== void 0 ? _c : null;
+                engine.setContainer(containerRef.current, plotEl, {
+                    x: dimensions.margin.left,
+                    y: dimensions.margin.top,
+                    width: dimensions.innerWidth,
+                    height: dimensions.innerHeight,
+                });
+            }
+            if (xScale && yScale) {
+                const allPoints = [];
+                const hasSeries = processedSeries && processedSeries.length > 0;
+                if (hasSeries) {
+                    processedSeries.forEach((series) => {
+                        const seriesData = series.data || data;
+                        if (!seriesData) {
+                            return;
+                        }
+                        const getX = series.xAccessor
+                            ? resolveAccessor(series.xAccessor)
+                            : x
+                                ? resolveAccessor(x)
+                                : null;
+                        const getY = series.yAccessor
+                            ? resolveAccessor(series.yAccessor)
+                            : y
+                                ? resolveAccessor(y)
+                                : null;
+                        const points = seriesData.map((d, i) => {
+                            var _a, _b;
+                            return ({
+                                x: ((_a = xScale((getX ? getX(d) : i))) !== null && _a !== void 0 ? _a : 0) +
+                                    dimensions.margin.left,
+                                y: ((_b = yScale((getY ? getY(d) : d))) !== null && _b !== void 0 ? _b : 0) +
+                                    dimensions.margin.top,
+                                data: d,
+                                seriesId: series.id,
+                                seriesColor: series.color,
+                                dataIndex: i,
+                            });
+                        });
+                        allPoints.push(...points);
+                    });
+                }
+                else if (data.length > 0) {
+                    const getX = x ? resolveAccessor(x) : null;
+                    const getY = y ? resolveAccessor(y) : null;
+                    const points = data.map((d, i) => {
+                        var _a, _b;
+                        return ({
+                            x: ((_a = xScale((getX ? getX(d) : i))) !== null && _a !== void 0 ? _a : 0) +
+                                dimensions.margin.left,
+                            y: ((_b = yScale((getY ? getY(d) : d))) !== null && _b !== void 0 ? _b : 0) +
+                                dimensions.margin.top,
+                            data: d,
+                            seriesId: "default",
+                            seriesColor: null,
+                            dataIndex: i,
+                        });
+                    });
+                    allPoints.push(...points);
+                }
+                if (allPoints.length > 0) {
+                    engine.updateData(allPoints);
+                }
+            }
+        });
+    }, [chartStore, engine, x, y]);
     useEffect(() => {
         updateChartState(chartStore, {
             data,
@@ -69,7 +176,6 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
             dimensions: chartStore.getState().dimensions,
         });
     }, [chartStore, data, type]);
-    // Handle onValueChange proxy from Interaction Store
     useEffect(() => {
         return chartStore.subscribe(() => {
             var _a, _b;
@@ -116,7 +222,6 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
             chartStore.setState((prev) => ({
                 dimensions: Object.assign(Object.assign({}, prev.dimensions), { margin: next }),
             }));
-            // Trigger re-calculation
             updateChartDimensions(chartStore, state.dimensions.width, state.dimensions.height);
         }
     }, [chartStore]);
@@ -178,6 +283,7 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
     }, []);
     const value = useMemo(() => ({
         chartStore,
+        engine,
         data,
         config: config,
         width: chartStore.getState().dimensions.width,
@@ -187,7 +293,6 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
         isMobile,
         requestLayoutAdjustment,
         colorPalette: LEGEND_PALETTE,
-        // Internal bridges - maintained for system stability during architectural shift
         seriesStore: chartStore,
         interactionStore: chartStore,
         x: x ? x : undefined,
@@ -203,6 +308,7 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
         x,
         y,
         variant,
+        engine,
     ]);
     const hasContent = React.Children.count(children) > 0;
     const showShorthand = !hasContent && (type || render || x || y);
@@ -211,5 +317,5 @@ export function Root({ data, d3Config, className, style, onValueChange, variant
     const hasGrid = hasContent && hasChildOfTypeDeep(children, Grid);
     const hasAxis = hasContent && hasChildOfTypeDeep(children, Axis);
     const hasCursor = hasContent && hasChildOfTypeDeep(children, CursorWrapper);
-    return (_jsx(ChartContext.Provider, { value: value, children: _jsxs(EventsProvider, { children: [_jsx(BehaviorManager, { behaviors: behaviors, value: value }), _jsxs("div", { "data-chart-container": true, "aria-describedby": subtitle ? "chart-subtitle" : undefined, "aria-label": title ? `Chart: ${title}` : "Interactive Chart", className: clsx(styles.chartContainer, variant === "solid" && styles.solid, flat && styles.flat, isMobile && styles.mobile, !withFrame && styles.frameless, className), role: "region", style: style, tabIndex: 0, children: [_jsx(InteractionLayer, {}), _jsx(SensorManager, { sensors: sensors }), isAutoLayout && (title || subtitle) && (_jsx(Header, { subtitle: subtitle, title: title })), isAutoLayout ? (_jsx("div", { ref: wrapperRef, className: styles.responsiveWrapper, style: { flex: 1, position: "relative" }, children: _jsxs(RootPlot, { chartStore: chartStore, children: [!hasGrid && config.grid !== false && _jsx(Grid, {}), !hasCursor && !render && _jsx(CursorWrapper, { mode: "line" }), children, !hasAxis && config.showAxes !== false && _jsx(Axis, {}), showShorthand && (_jsx(Series, { render: render, type: type, x: x, y: y }))] }) })) : (children), withLegend && _jsx(Legend, {}), _jsx(Tooltip, { containerRef: wrapperRef })] })] }) }));
+    return (_jsx(ChartContext.Provider, { value: value, children: _jsxs(EventsProvider, { children: [_jsx(BehaviorManager, { behaviors: behaviors, value: value }), _jsxs("div", { ref: containerRef, "data-chart-container": true, "aria-describedby": subtitle ? "chart-subtitle" : undefined, "aria-label": title ? `Chart: ${title}` : "Interactive Chart", className: clsx(styles.chartContainer, variant === "solid" && styles.solid, flat && styles.flat, isMobile && styles.mobile, !withFrame && styles.frameless, className), role: "region", style: style, tabIndex: 0, children: [_jsx(InteractionLayer, {}), _jsx(SensorManager, { sensors: sensors }), isAutoLayout && (title || subtitle) && (_jsx(Header, { subtitle: subtitle, title: title })), isAutoLayout ? (_jsx("div", { ref: wrapperRef, className: styles.responsiveWrapper, style: { flex: 1, position: "relative" }, children: _jsxs(RootPlot, { chartStore: chartStore, children: [!hasGrid && config.grid !== false && _jsx(Grid, {}), !hasCursor && !render && _jsx(CursorWrapper, { mode: "line" }), children, !hasAxis && config.showAxes !== false && _jsx(Axis, {}), showShorthand && (_jsx(Series, { render: render, type: type, x: x, y: y }))] }) })) : (children), withLegend && _jsx(Legend, {}), _jsx(Tooltip, { containerRef: wrapperRef })] })] }) }));
 }