doom-design-system 0.5.0 → 0.6.0

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

@@ -1,246 +1,214 @@
-.chart {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: visible;
-}
-.chart :global .domain {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-}
-.chart :global .domain.hideDomain {
-  stroke: none;
-}
-.chart :global .tick line {
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  opacity: 1;
-}
-.chart :global .tick text {
-  fill: var(--foreground);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-}
-
-.grid :global(.tick) line {
-  stroke: var(--muted);
-  stroke-opacity: 0.5;
-}
-.grid path {
-  display: none;
-}
-
-.path {
-  fill: none;
-  stroke: var(--primary);
-  stroke-width: calc(var(--border-width) * 1.5);
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.area {
-  fill: var(--primary);
-  stroke: none;
-}
-
-.bar {
-  fill: var(--primary);
-  stroke: var(--card-border);
-  stroke-width: var(--border-width);
-  stroke-linejoin: round;
-  transition: opacity 0.2s;
-}
-.bar:hover {
-  cursor: crosshair;
-  filter: brightness(1.1);
-}
-
-.cursorLine {
-  stroke: var(--muted-foreground);
-  stroke-width: var(--border-width);
-  stroke-dasharray: 4 4;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.cursorPoint {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  pointer-events: none;
-}
-
-.dot {
-  fill: var(--primary);
-  stroke: var(--border-strong);
-  stroke-width: var(--border-width);
-  transition: r 0.2s;
-  z-index: var(--z-overlay);
-}
-.dot:hover {
-  r: 8;
-  stroke-width: calc(var(--border-width) * 1.5);
-}
-
-.chartContainer {
-  position: relative;
-  background-color: var(--card-bg);
-  border: var(--border-width) solid var(--card-border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-hard);
-  padding: var(--spacing-6);
-  overflow: visible;
-  display: flex;
-  flex-direction: column;
-}
-.chartContainer.flat {
-  box-shadow: none;
-}
-.chartContainer.frameless {
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  padding: 0;
-}
-.chartContainer.solid {
-  /* ROOT CONTEXT (The Field) */
-  background-color: var(--solid-bg);
-  color: var(--solid-fg);
-  /* Root Variables */
-  --background: var(--solid-bg);
-  --foreground: var(--solid-fg);
-  --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
-  /*
-  * Standardized Brand Surface Logic
-  * Decouples Modals (Surface) from Buttons (Action)
-  */
-  --surface-brand: var(--solid-bg);
-  --surface-brand-foreground: var(--solid-fg);
-  /* SEMANTICS (True Semantic Colors) */
-  --success: var(--solid-success);
-  --success-foreground: var(--solid-fg);
-  --error: var(--solid-error);
-  --error-foreground: var(--solid-fg);
-  --warning: var(--solid-warning);
-  --warning-foreground: var(--solid-fg);
-  /* SURFACE COLORS */
-  --on-surface: var(--solid-bg);
-  --on-surface-muted: var(--solid-bg);
-  /* COMPONENT TOKENS */
-  --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --card-border: var(--solid-fg);
-  --card-foreground: var(--solid-fg);
-  /* POPOVER TOKENS */
-  --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --popover-foreground: var(--solid-bg);
-  /* INPUT TOKENS */
-  --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
-  --border-strong: var(--solid-fg);
-  /* BUTTON TOKENS */
-  --primary: var(--solid-fg);
-  --primary-foreground: var(--solid-bg);
-  /* SECONDARY TOKENS */
-  --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
-  --secondary-foreground: var(--solid-fg);
-  /* MUTED TOKENS */
-  --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
-  border-color: var(--border-strong);
-}
-.chartContainer.solid :global(.tick) text {
-  fill: var(--solid-fg);
-}
-.chartContainer.solid :global(.domain),
-.chartContainer.solid :global(.tick) line {
-  stroke: var(--solid-fg);
-}
-.chartContainer.solid .tooltipCard {
-  background-color: var(--solid-bg);
-  border-color: var(--solid-fg);
-}
-.chartContainer.mobile {
-  padding: var(--spacing-2);
-}
-
-.responsiveWrapper {
-  width: 100%;
-  flex: 1;
-  height: 100%;
-  min-height: 0;
-  position: relative;
-  overflow: visible;
-}
-
-.tooltipWrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  z-index: var(--z-tooltip);
-  will-change: transform;
-}
-
-.tooltipCard {
-  padding: var(--spacing-3) var(--spacing-4);
-  font-size: var(--text-xs);
-  white-space: nowrap;
-}
-
-.tooltipLabel {
-  color: var(--muted-foreground);
-  text-transform: uppercase;
-  font-size: var(--text-2xs);
-  letter-spacing: 0.05em;
-  margin-bottom: var(--spacing-1);
-}
-
-.axisLabel {
-  fill: var(--foreground);
-  font-size: var(--text-xs);
-  font-weight: var(--font-bold);
-  text-transform: uppercase;
-  text-anchor: middle;
-}
-
-.chartHeader {
-  padding-right: 0;
-}
-
-.subtitle {
-  color: var(--muted-foreground);
-  margin: 0;
-}
-
-.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 {
+  .chart {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: visible;
+  }
+  .chart :global .domain {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+  }
+  .chart :global .domain.hideDomain {
+    stroke: none;
+  }
+  .chart :global .tick line {
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    opacity: 1;
+  }
+  .chart :global .tick text {
+    fill: var(--foreground);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+  }
+  .grid :global(.tick) line {
+    stroke: var(--muted);
+    stroke-opacity: 0.5;
+  }
+  .grid path {
+    display: none;
+  }
+  .path {
+    fill: none;
+    stroke: var(--primary);
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  .area {
+    fill: var(--primary);
+    stroke: none;
+  }
+  .bar {
+    fill: var(--primary);
+    stroke: var(--card-border);
+    stroke-width: var(--surface-border-width);
+    stroke-linejoin: round;
+    transition: opacity 0.2s;
+  }
+  .bar:hover {
+    cursor: crosshair;
+    filter: brightness(1.1);
+  }
+  .cursorLine {
+    stroke: var(--muted-foreground);
+    stroke-width: var(--surface-border-width);
+    stroke-dasharray: 4 4;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .cursorPoint {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    pointer-events: none;
+  }
+  .dot {
+    fill: var(--primary);
+    stroke: var(--border-strong);
+    stroke-width: var(--surface-border-width);
+    transition: r 0.2s;
+    z-index: var(--z-overlay);
+  }
+  .dot:hover {
+    r: 8;
+    stroke-width: calc(var(--surface-border-width) * 1.5);
+  }
+  .chartContainer {
+    position: relative;
+    background-color: var(--card-bg);
+    border: var(--surface-border-width) solid var(--card-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-6);
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+  }
+  .chartContainer.flat {
+    box-shadow: none;
+  }
+  .chartContainer.frameless {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+  .chartContainer.solid {
+    background-color: var(--solid-bg);
+    color: var(--solid-fg);
+    --background: var(--solid-bg);
+    --foreground: var(--solid-fg);
+    --muted-foreground: color-mix(in srgb, var(--solid-fg) 70%, transparent);
+    --surface-brand: var(--solid-bg);
+    --surface-brand-foreground: var(--solid-fg);
+    --success: var(--solid-success);
+    --success-foreground: var(--solid-fg);
+    --error: var(--solid-error);
+    --error-foreground: var(--solid-fg);
+    --warning: var(--solid-warning);
+    --warning-foreground: var(--solid-fg);
+    --on-surface: var(--solid-bg);
+    --on-surface-muted: var(--solid-bg);
+    --card-bg: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --card-border: var(--solid-fg);
+    --card-foreground: var(--solid-fg);
+    --popover: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --popover-foreground: var(--solid-bg);
+    --input: color-mix(in srgb, var(--solid-fg) 95%, var(--solid-bg) 5%);
+    --border-strong: var(--solid-fg);
+    --primary: var(--solid-fg);
+    --primary-foreground: var(--solid-bg);
+    --secondary: color-mix(in srgb, var(--solid-bg) 90%, transparent);
+    --secondary-foreground: var(--solid-fg);
+    --muted: color-mix(in srgb, var(--solid-fg) 20%, transparent);
+    border-color: var(--border-strong);
+  }
+  .chartContainer.solid :global(.tick) text {
+    fill: var(--solid-fg);
+  }
+  .chartContainer.solid :global(.domain),
+  .chartContainer.solid :global(.tick) line {
+    stroke: var(--solid-fg);
+  }
+  .chartContainer.solid .tooltipCard {
+    background-color: var(--solid-bg);
+    border-color: var(--solid-fg);
+  }
+  .chartContainer.mobile {
+    padding: var(--space-2);
+  }
+  .responsiveWrapper {
+    width: 100%;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    position: relative;
+    overflow: visible;
+  }
+  .tooltipWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: var(--z-tooltip);
+    will-change: transform;
+  }
+  .tooltipCard {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+  }
+  .tooltipLabel {
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    font-size: var(--text-2xs);
+    letter-spacing: 0.05em;
+    margin-bottom: var(--space-1);
+  }
+  .axisLabel {
+    fill: var(--foreground);
+    font-size: var(--text-xs);
+    font-weight: var(--font-bold);
+    text-transform: uppercase;
+    text-anchor: middle;
+  }
+  .chartHeader {
+    padding-right: 0;
+  }
+  .subtitle {
+    color: var(--muted-foreground);
+    margin: 0;
+  }
+  .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/behaviors/DraggablePuck.d.ts

@@ -0,0 +1,36 @@
+import { Behavior } from "../types/events";
+import { InteractionChannel } from "../types/interaction";
+export interface DraggablePuckOptions {
+    /**
+     * Interaction channel to listen to.
+     * @default InteractionChannel.DRAG
+     */
+    on?: InteractionChannel | string;
+    /**
+     * Radius of the puck circle in pixels.
+     * @default 8
+     */
+    radius?: number;
+    /**
+     * Color of the puck. If not specified, uses the series color.
+     */
+    color?: string;
+    /**
+     * Whether to show a "ghost" at the original position during drag.
+     * @default true
+     */
+    showGhost?: boolean;
+}
+/**
+ * DraggablePuck renders a visual indicator at the drag position.
+ *
+ * It creates a "puck" circle that follows the cursor during drag operations,
+ * providing immediate visual feedback. Optionally shows a ghost at the
+ * original position.
+ *
+ * @example
+ * ```tsx
+ * DraggablePuck({ radius: 10, showGhost: true })
+ * ```
+ */
+export declare const DraggablePuck: (options?: DraggablePuckOptions) => Behavior;

package/dist/components/Chart/behaviors/DraggablePuck.js

@@ -0,0 +1,94 @@
+import { InteractionChannel } from "../types/interaction.js";
+/**
+ * DraggablePuck renders a visual indicator at the drag position.
+ *
+ * It creates a "puck" circle that follows the cursor during drag operations,
+ * providing immediate visual feedback. Optionally shows a ghost at the
+ * original position.
+ *
+ * @example
+ * ```tsx
+ * DraggablePuck({ radius: 10, showGhost: true })
+ * ```
+ */
+export const DraggablePuck = (options = {}) => {
+    const { on = InteractionChannel.DRAG, radius = 8, color, showGhost = true, } = options;
+    return ({ getChartContext, getInteraction }) => {
+        const ctx = getChartContext();
+        if (!ctx || !ctx.g) {
+            return () => { };
+        }
+        const { g } = ctx;
+        const layer = g.append("g").attr("class", "chart-drag-puck-layer");
+        // Ghost circle (original position)
+        const ghost = layer
+            .append("circle")
+            .attr("class", "drag-ghost")
+            .attr("r", radius)
+            .attr("fill", "none")
+            .attr("stroke", "var(--text-tertiary)")
+            .attr("stroke-width", 2)
+            .attr("stroke-dasharray", "4,2")
+            .style("opacity", 0)
+            .style("pointer-events", "none");
+        // Active puck circle (current drag position)
+        const puck = layer
+            .append("circle")
+            .attr("class", "drag-puck")
+            .attr("r", radius)
+            .attr("stroke", "var(--card-border)")
+            .attr("stroke-width", 2)
+            .style("opacity", 0)
+            .style("cursor", "grabbing")
+            .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.2))")
+            .style("pointer-events", "none");
+        // Connection line between ghost and puck
+        const line = layer
+            .append("line")
+            .attr("class", "drag-line")
+            .attr("stroke", "var(--text-tertiary)")
+            .attr("stroke-width", 1)
+            .attr("stroke-dasharray", "2,2")
+            .style("opacity", 0)
+            .style("pointer-events", "none");
+        const update = () => {
+            const interaction = getInteraction(on);
+            if (!interaction || !interaction.isDragging) {
+                puck.style("opacity", 0);
+                ghost.style("opacity", 0);
+                line.style("opacity", 0);
+                return;
+            }
+            const { target, currentPosition, startPosition: _startPosition, } = interaction;
+            const puckColor = color || target.seriesColor || "var(--primary)";
+            // Update puck position (currentPosition is already plot-relative)
+            puck
+                .attr("cx", currentPosition.x)
+                .attr("cy", currentPosition.y)
+                .attr("fill", puckColor)
+                .style("opacity", 1);
+            if (showGhost) {
+                const { margin } = ctx.chartStore.getState().dimensions;
+                // Show ghost at original target position
+                ghost
+                    .attr("cx", target.coordinate.x - margin.left)
+                    .attr("cy", target.coordinate.y - margin.top)
+                    .style("opacity", 0.5);
+                // Draw connecting line
+                line
+                    .attr("x1", target.coordinate.x - margin.left)
+                    .attr("y1", target.coordinate.y - margin.top)
+                    .attr("x2", currentPosition.x)
+                    .attr("y2", currentPosition.y)
+                    .style("opacity", 0.5);
+            }
+        };
+        const unsubscribe = ctx.chartStore.subscribe(() => {
+            update();
+        });
+        return () => {
+            unsubscribe();
+            layer.remove();
+        };
+    };
+};

package/dist/components/Chart/behaviors/Markers.js

@@ -26,6 +26,8 @@ export const Markers = (options = {}) => {
         const update = () => {
             const interaction = getInteraction(on);
             const targets = (interaction === null || interaction === void 0 ? void 0 : interaction.targets) || [];
+            // Retrieve dimensions for margin correction
+            const { margin } = ctx.chartStore.getState().dimensions;
             // Bind data to circles
             const circles = layer
                 .selectAll("circle")
@@ -38,13 +40,13 @@ export const Markers = (options = {}) => {
                 .attr("fill", (d) => d.seriesColor || options.color || "currentColor")
                 .attr("stroke", "var(--card-border)")
                 .attr("stroke-width", 2)
-                .attr("cx", (d) => d.coordinate.x)
-                .attr("cy", (d) => d.coordinate.y)
+                .attr("cx", (d) => d.coordinate.x - margin.left)
+                .attr("cy", (d) => d.coordinate.y - margin.top)
                 .style("opacity", 1);
             // Update
             circles
-                .attr("cx", (d) => d.coordinate.x)
-                .attr("cy", (d) => d.coordinate.y)
+                .attr("cx", (d) => d.coordinate.x - margin.left)
+                .attr("cy", (d) => d.coordinate.y - margin.top)
                 .attr("fill", (d) => d.seriesColor || options.color || "currentColor");
             // Exit
             circles.exit().remove();

package/dist/components/Chart/behaviors/SelectionUpdate.js

@@ -23,11 +23,9 @@ export const SelectionUpdate = (options = {}) => {
             // Otherwise map targets (from HoverSensor) to data.
             let activeData = interaction === null || interaction === void 0 ? void 0 : interaction.data; // Direct data payload from some sensors
             if (!activeData && targets.length > 0) {
-                activeData = targets[0]; // Wrapper { element, data }
+                const candidate = targets[0];
+                activeData = (candidate === null || candidate === void 0 ? void 0 : candidate.data) !== undefined ? candidate.data : candidate;
             }
-            // For the custom function, we might want the raw interaction or the processed data
-            // Let's pass the interaction payload or the 'primary' target data.
-            // The Story uses `fn: (selection, activeData) => ...` where activeData seems to be the target object.
             const selectionSet = g.selectAll(selector);
             if (fn) {
                 fn(selectionSet, activeData);

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

@@ -1,6 +1,6 @@
 export * from "./Cursor";
-export * from "./Cursor";
 export * from "./Dim";
+export * from "./DraggablePuck";
 export * from "./Markers";
 export * from "./SelectionUpdate";
 export * from "./Tooltip";

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

@@ -1,6 +1,6 @@
 export * from "./Cursor.js";
-export * from "./Cursor.js";
 export * from "./Dim.js";
+export * from "./DraggablePuck.js";
 export * from "./Markers.js";
 export * from "./SelectionUpdate.js";
 export * from "./Tooltip.js";