doom-design-system 0.5.0 → 0.6.0

package/dist/components/Chart/sensors/SelectionSensor/index.js

@@ -0,0 +1 @@
+export * from "./SelectionSensor.js";

package/dist/components/Chart/sensors/SensorManager/SensorManager.js

@@ -1,11 +1,10 @@
 "use client";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useChartContext } from "../../context.js";
-import { useEventContext } from "../../state/EventContext.js";
 import { removeInteraction, upsertInteraction, } from "../../state/store/chart.store.js";
 import { InteractionChannel } from "../../types/interaction.js";
 import { DataHoverSensor } from "../DataHoverSensor/DataHoverSensor.js";
-import { KeyboardSensor } from "../KeyboardSensor.js";
+import { KeyboardSensor } from "../KeyboardSensor/index.js";
 /**
  * The SensorManager is a headless component that manages the lifecycle of
  * Chart Sensors. It coordinates event listeners, identifies default sensors
@@ -13,25 +12,25 @@ import { KeyboardSensor } from "../KeyboardSensor.js";
  * to the interaction store.
  */
 export const SensorManager = ({ sensors }) => {
-    const { chartStore, config, colorPalette } = useChartContext();
-    const eventContext = useEventContext();
-    // Subscribe to status and data for lifecycle protection
+    const { chartStore, config, colorPalette, engine } = useChartContext();
     const status = chartStore.useStore((s) => s.status);
     const data = chartStore.useStore((s) => s.data);
+    // Use a ref to access the latest colorPalette without triggering re-instantiation
+    const colorPaletteRef = useRef(colorPalette);
+    useEffect(() => {
+        colorPaletteRef.current = colorPalette;
+    }, [colorPalette]);
     const activeSensors = useMemo(() => {
         if (sensors && sensors.length > 0) {
             return sensors;
         }
-        // Default injection
         const defaults = [];
         const type = config.type || "line";
         if (["line", "area", "bar", "scatter", "bubble"].includes(type)) {
-            const mode = type === "scatter" || type === "bubble"
-                ? "closest"
-                : "nearest-x";
+            const isVerticalSliceType = ["line", "area", "bar"].includes(type);
             defaults.push(DataHoverSensor({
-                mode,
                 name: InteractionChannel.PRIMARY_HOVER,
+                verticalSlice: isVerticalSliceType,
             }));
             // A11y: Always include keyboard sensor for line/bar/scatter
             defaults.push(KeyboardSensor({
@@ -40,47 +39,43 @@ export const SensorManager = ({ sensors }) => {
         }
         else {
             defaults.push(DataHoverSensor({
-                mode: "exact",
                 name: InteractionChannel.PRIMARY_HOVER,
             }));
         }
         return defaults;
     }, [sensors, config.type]);
     useEffect(() => {
-        // PROTECT: Only instantiate sensors when the chart is READY.
-        if (status !== "ready" || !data.length) {
+        if (status !== "ready" || !data.length || !engine) {
             return;
         }
-        // Instantiate sensors
-        const cleanups = activeSensors.map((sensor) => {
-            return sensor({
-                on: eventContext.on,
-                off: eventContext.off,
-                emit: eventContext.emit,
-                pointerPosition: eventContext.pointerPosition,
-                isWithinPlot: eventContext.isWithinPlot,
-                getChartContext: () => {
-                    const state = chartStore.getState();
-                    return Object.assign(Object.assign({}, state), { xScale: state.scales.x, yScale: state.scales.y, colorPalette: colorPalette || [], chartStore });
-                },
-                getInteraction: (name) => {
-                    return chartStore.getState().interactions.get(name) || null;
-                },
-                upsertInteraction: (name, value) => {
-                    upsertInteraction(chartStore, name, value);
-                },
-                removeInteraction: (name) => {
-                    removeInteraction(chartStore, name);
-                },
+        const sensorContext = {
+            getChartContext: () => {
+                const state = chartStore.getState();
+                return Object.assign(Object.assign({}, state), { xScale: state.scales.x, yScale: state.scales.y, colorPalette: colorPaletteRef.current || [], chartStore });
+            },
+            getInteraction: (name) => {
+                return chartStore.getState().interactions.get(name) || null;
+            },
+            upsertInteraction: (name, value) => {
+                upsertInteraction(chartStore, name, value);
+            },
+            removeInteraction: (name) => {
+                removeInteraction(chartStore, name);
+            },
+        };
+        engine.setHandler((event) => {
+            activeSensors.forEach((sensor) => {
+                try {
+                    sensor(event, sensorContext);
+                }
+                catch (err) {
+                    console.error("Sensor Error:", err);
+                }
             });
         });
         return () => {
-            cleanups.forEach((cleanup) => {
-                if (typeof cleanup === "function") {
-                    cleanup();
-                }
-            });
+            engine.setHandler(() => { });
         };
-    }, [activeSensors, eventContext, chartStore, status, data.length]);
+    }, [activeSensors, engine, chartStore, status, data.length]);
     return null;
 };

package/dist/components/Chart/sensors/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./DataHoverSensor";
+export * from "./DragSensor";
 export * from "./KeyboardSensor";
 export * from "./SelectionSensor";
 export * from "./SensorManager";

package/dist/components/Chart/sensors/index.js

@@ -1,4 +1,5 @@
 export * from "./DataHoverSensor/index.js";
-export * from "./KeyboardSensor.js";
-export * from "./SelectionSensor.js";
+export * from "./DragSensor/index.js";
+export * from "./KeyboardSensor/index.js";
+export * from "./SelectionSensor/index.js";
 export * from "./SensorManager/index.js";

package/dist/components/Chart/sensors/utils/search.d.ts

@@ -12,4 +12,4 @@ export interface SearchResult {
  * Coordinated search logic to find target(s) across all registered series.
  * This is the "Engine" of the sensor architecture.
  */
-export declare const findClosestTargets: (event: ChartEvent, mode: HoverMode, state: State) => InteractionTarget[];
+export declare const findClosestTargets: (event: ChartEvent, mode: HoverMode, state: State, radius?: number) => InteractionTarget[];

package/dist/components/Chart/sensors/utils/search.js

@@ -3,17 +3,38 @@ const INTERACTION_RADIUS = 50;
  * Coordinated search logic to find target(s) across all registered series.
  * This is the "Engine" of the sensor architecture.
  */
-export const findClosestTargets = (event, mode, state) => {
+export const findClosestTargets = (event, mode, state, radius = INTERACTION_RADIUS) => {
+    var _a, _b, _c;
     const chartX = event.coordinates.chartX;
     const chartY = event.coordinates.chartY;
-    // Exact target finding (DOM fallback) - Does NOT require global scales
+    // Exact target finding (DOM hit-test) - Uses elementFromPoint since
+    // events are captured at container level, not individual elements
     if (mode === "exact") {
-        const domTarget = event.nativeEvent.target;
+        // First check if the event target itself has __data__ (direct click on element)
+        const directTarget = event.nativeEvent.target;
+        if (directTarget && directTarget.__data__) {
+            return [
+                {
+                    data: directTarget.__data__,
+                    coordinate: { x: chartX, y: chartY },
+                    seriesColor: ((_b = (_a = directTarget).getAttribute) === null || _b === void 0 ? void 0 : _b.call(_a, "fill")) || undefined,
+                },
+            ];
+        }
+        // Use elementFromPoint to find what's under the cursor
+        // IMPORTANT: Use the event target's ownerDocument for correct context (handles iframes)
+        const pointerEvent = event.nativeEvent;
+        const { clientX, clientY } = pointerEvent;
+        // Get the correct document - if the event target is in an iframe,
+        // its ownerDocument will be the iframe's document
+        const targetDoc = (directTarget === null || directTarget === void 0 ? void 0 : directTarget.ownerDocument) || document;
+        const domTarget = targetDoc.elementFromPoint(clientX, clientY);
         if (domTarget && domTarget.__data__) {
             return [
                 {
                     data: domTarget.__data__,
                     coordinate: { x: chartX, y: chartY },
+                    seriesColor: ((_c = domTarget.getAttribute) === null || _c === void 0 ? void 0 : _c.call(domTarget, "fill")) || undefined,
                 },
             ];
         }
@@ -31,7 +52,7 @@ export const findClosestTargets = (event, mode, state) => {
         if (!series.strategy) {
             return;
         }
-        const result = series.strategy.find(chartX, chartY, INTERACTION_RADIUS, xScale, yScale);
+        const result = series.strategy.find(chartX, chartY, radius, xScale, yScale);
         if (result) {
             targets.push(result);
         }

package/dist/components/Chart/state/store/chart.store.js

@@ -64,11 +64,22 @@ export const updateChartState = (store, props) => {
             innerHeight });
         // Recalculate scales based on new data/type/dimensions
         const nextScales = calculateScales(data, nextDimensions, Object.assign(Object.assign({}, prev), { type: type || prev.type }));
+        // Re-hydrate series with new data
+        // This is critical for real-time updates (e.g. drag interactions)
+        // We must use the stored configs to re-create the series strategies with the fresh data
+        const nextSeries = new Map();
+        const currentConfigs = prev.seriesConfigs || new Map();
+        currentConfigs.forEach((configs, id) => {
+            const hydrated = configs.map((c, i) => hydrateSeries(c, (prev.processedSeries.length || 0) + i, data));
+            nextSeries.set(id, hydrated);
+        });
         return {
             data,
             type: type || prev.type,
             dimensions: nextDimensions,
             scales: nextScales,
+            series: nextSeries, // Update series map
+            processedSeries: combineSeries(nextSeries), // Update flattened series
             status: nextDimensions.width > 0 && nextDimensions.height > 0
                 ? "ready"
                 : "idle",
@@ -82,10 +93,14 @@ export const updateChartState = (store, props) => {
 export const registerSeries = (store, id, configs) => {
     store.setState((state) => {
         const nextSeries = new Map(state.series);
+        const nextConfigs = new Map(state.seriesConfigs); // Clone configs map
+        // Store raw configs for future re-hydration
+        nextConfigs.set(id, configs);
         const hydrated = configs.map((c, i) => hydrateSeries(c, (state.processedSeries.length || 0) + i, state.data));
         nextSeries.set(id, hydrated);
         return {
             series: nextSeries,
+            seriesConfigs: nextConfigs,
             processedSeries: combineSeries(nextSeries),
         };
     });
@@ -96,9 +111,12 @@ export const unregisterSeries = (store, id) => {
             return state;
         }
         const nextSeries = new Map(state.series);
+        const nextConfigs = new Map(state.seriesConfigs);
         nextSeries.delete(id);
+        nextConfigs.delete(id);
         return {
             series: nextSeries,
+            seriesConfigs: nextConfigs,
             processedSeries: combineSeries(nextSeries),
         };
     });

package/dist/components/Chart/state/store/slices/series.slice.d.ts

@@ -1,6 +1,7 @@
 import { Series } from "../../../types";
 export interface SeriesSlice {
     series: Map<string, Series[]>;
+    seriesConfigs: Map<string, any[]>;
     processedSeries: Series[];
 }
 export declare const getSeriesInitialState: () => SeriesSlice;

package/dist/components/Chart/state/store/slices/series.slice.js

@@ -3,10 +3,12 @@ import { LinearStrategy } from "../../../sensors/utils/strategies/LinearStrategy
 import { QuadtreeStrategy } from "../../../sensors/utils/strategies/QuadtreeStrategy/index.js";
 export const getSeriesInitialState = () => ({
     series: new Map(),
+    seriesConfigs: new Map(),
     processedSeries: [],
 });
 const LEGEND_PALETTE = ["#2E93fA", "#66DA26", "#546E7A", "#E91E63", "#FF9800"];
 export const hydrateSeries = (props, index, defaultData) => {
+    const data = props.data || defaultData;
     const series = {
         id: props.id || `series-${index}`,
         label: props.label || `Series ${index + 1}`,
@@ -16,9 +18,8 @@ export const hydrateSeries = (props, index, defaultData) => {
         hideCursor: props.hideCursor,
         interactionMode: props.interactionMode,
         type: props.type,
+        data,
     };
-    // --- Strategy Selection Heuristic ---
-    const data = props.data || defaultData;
     if (!data || data.length === 0) {
         series.strategy = new LinearStrategy(series, []);
         return series;

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

@@ -1,34 +1,33 @@
-.axes {
-  pointer-events: none;
-  font-family: var(--font-montserrat); /* Keep this as it matches font-bold usually */
-  font-size: var(--text-xs);
-}
-.axes :global(.domain) {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-}
-.axes :global(.domain).hideDomain {
-  stroke: none;
-}
-.axes :global(.tick) line {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  opacity: 1;
-}
-.axes :global(.tick) text {
-  fill: var(--foreground);
-  font-family: inherit;
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  font-size: var(--text-xs);
-}
-.axes {
-  /* This might be redundant if we target :global(.tick) text above, but keeping for safety if Axis.tsx uses .label */
-}
-.axes .label {
-  fill: var(--foreground);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  text-anchor: middle;
+@layer doom.components {
+  .axes {
+    pointer-events: none;
+    font-family: var(--font-montserrat); /* Keep this as it matches font-bold usually */
+    font-size: var(--text-xs);
+  }
+  .axes :global(.domain) {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+  }
+  .axes :global(.domain).hideDomain {
+    stroke: none;
+  }
+  .axes :global(.tick) line {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    opacity: 1;
+  }
+  .axes :global(.tick) text {
+    fill: var(--foreground);
+    font-family: inherit;
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    font-size: var(--text-xs);
+  }
+  .axes .label {
+    fill: var(--foreground);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    text-anchor: middle;
+  }
 }

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx } 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 { createRoundedTopBarPath } from "../../utils/shapes.js";
@@ -24,6 +25,7 @@ const BarSeriesComponent = ({ data: localData, x: localX, y: localY, color, hide
         }
         registerSeries(chartStore, gradientId, [
             {
+                id: gradientId,
                 label: label || "Bar Series",
                 color: color || "var(--primary)",
                 x: xAccessor,
@@ -86,7 +88,10 @@ const BarSeriesComponent = ({ data: localData, x: localX, y: localY, color, hide
                     : `Bar: ${JSON.stringify(d)}`, "aria-roledescription": "bar", className: `${styles.bar} chart-bar`, d: createRoundedTopBarPath(finalX, yVal, w, h, BAR_RADIUS), role: "graphics-symbol", style: {
                     fill: fillColor,
                     pointerEvents: "all",
-                } }, i));
+                }, [CHART_DATA_ATTRS.TYPE]: "bar",
+                [CHART_DATA_ATTRS.SERIES_ID]: gradientId,
+                [CHART_DATA_ATTRS.INDEX]: i,
+                [CHART_DATA_ATTRS.DRAGGABLE]: false }, i));
         }) }));
 };
 export const BarSeries = React.memo(BarSeriesComponent);

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

@@ -1,10 +1,12 @@
-.bar {
-  fill: var(--primary);
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  stroke-linejoin: round;
-  transition: opacity 0.2s;
-}
-.bar:hover {
-  filter: brightness(1.1);
+@layer doom.components {
+  .bar {
+    fill: var(--primary);
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    stroke-linejoin: round;
+    transition: opacity 0.2s;
+  }
+  .bar:hover {
+    filter: brightness(1.1);
+  }
 }

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

@@ -27,7 +27,14 @@ export function CursorLine() {
     // Use primary target or first target in list
     const target = (_b = (_a = hover === null || hover === void 0 ? void 0 : hover.targets) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
     // Use pointer for fallback or if target is missing
-    const point = target ? target.coordinate : ((_c = hover === null || hover === void 0 ? void 0 : hover.pointer) !== null && _c !== void 0 ? _c : null);
+    let point = target ? target.coordinate : ((_c = hover === null || hover === void 0 ? void 0 : hover.pointer) !== null && _c !== void 0 ? _c : null);
+    // Normalize point to plot-relative coordinates consistently
+    if (target && point) {
+        point = {
+            x: point.x - dimensions.margin.left,
+            y: point.y - dimensions.margin.top,
+        };
+    }
     if (!point) {
         return null;
     }

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

@@ -1,14 +1,15 @@
-.cursorLine {
-  stroke: var(--muted-foreground);
-  stroke-width: var(--border-width);
-  stroke-dasharray: 4 4;
-  opacity: 1;
-  pointer-events: none;
-}
-
-.cursorPoint {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  pointer-events: none;
+@layer doom.components {
+  .cursorLine {
+    stroke: var(--muted-foreground);
+    stroke-width: var(--surface-border-width);
+    stroke-dasharray: 4 4;
+    opacity: 1;
+    pointer-events: none;
+  }
+  .cursorPoint {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    pointer-events: none;
+  }
 }

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useId, useRef } 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";
@@ -30,6 +31,7 @@ const CustomSeriesComponent = (props) => {
                 hideCursor: true,
                 interactionMode: "x",
                 data,
+                id: seriesId,
             },
         ]);
         return () => {
@@ -74,6 +76,8 @@ const CustomSeriesComponent = (props) => {
             },
             config,
             resolveInteraction,
+            seriesId,
+            chartDataAttrs: CHART_DATA_ATTRS,
         });
     }, [
         render,

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

@@ -1,4 +1,6 @@
-.customSeries {
-  /* Placeholder for custom series styles */
-  pointer-events: none; /* Usually custom render handles its own events */
+@layer doom.components {
+  .customSeries {
+    /* Placeholder for custom series styles */
+    pointer-events: none; /* Usually custom render handles its own events */
+  }
 }

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

@@ -1,4 +1,6 @@
-.footer {
-  width: 100%;
-  margin-top: var(--spacing-4);
+@layer doom.components {
+  .footer {
+    width: 100%;
+    margin-top: var(--space-4);
+  }
 }

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

@@ -1,12 +1,13 @@
-.grid {
-  pointer-events: none;
-}
-.grid :global(.tick) line,
-.grid line {
-  stroke: var(--muted);
-  stroke-opacity: 0.5;
-  /* stroke-dasharray: 4 4; */ /* User's snippet didn't have dash on grid? Wait, snippet said .grid :global(.tick) line { ... }. D3 grids often use ticks. My Grid component manually renders lines though. Keeping solid as per snippet, but adding opacity. */
-}
-.grid path {
-  display: none;
+@layer doom.components {
+  .grid {
+    pointer-events: none;
+  }
+  .grid :global(.tick) line,
+  .grid line {
+    stroke: var(--muted);
+    stroke-opacity: 0.5;
+  }
+  .grid path {
+    display: none;
+  }
 }

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

@@ -1,8 +1,9 @@
-.header {
-  padding-right: 0;
-}
-
-.subtitle {
-  color: var(--muted-foreground);
-  margin: 0;
+@layer doom.components {
+  .header {
+    padding-right: 0;
+  }
+  .subtitle {
+    color: var(--muted-foreground);
+    margin: 0;
+  }
 }

package/dist/components/Chart/subcomponents/InteractionLayer/InteractionLayer.d.ts

@@ -3,11 +3,11 @@ import React from "react";
  * 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 declare const InteractionLayer: React.FC;