@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/ai/index.d.ts

@@ -6,7 +6,11 @@ export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatC
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
 export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestion";
 export type { PromptSuggestionProps, PromptSuggestionTheme, } from "./PromptSuggestion";
-export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
-export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, MarkdownRendererProps, } from "./StreamingResponse";
+export { StreamingResponse, ErrorDisplay, MarkdownRenderer, AnimatedText, StreamingCursor, StreamingSurface, streamingResponseTheme, tokenFadeIn, tokenTransition, blockSlideIn, blockTransition, cursorPulse, staggerContainer, } from "./StreamingResponse";
+export type { StreamingResponseProps, StreamingResponseTheme, MarkdownOptions, AnimatedTextProps, StreamingCursorProps, StreamingSurfaceProps, MarkdownRendererProps, StreamingMotionOptions, StreamingMotionPreset, StreamingTokenEffect, } from "./StreamingResponse";
 export { CodeBlock, codeBlockTheme } from "./CodeBlock";
 export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock";
+export * from "./AgentStatus";
+export * from "./AgentRequest";
+export * from "./Reasoning";
+export * from "./SourceCitation";

package/dist/components/ai/index.js

@@ -6,9 +6,7 @@ import 'react/jsx-runtime';
 import '../../utils/cn.js';
 import 'react';
 import '../core/Link/Link.js';
-import '@heroicons/react/16/solid';
-import '@heroicons/react/24/outline';
-import '@heroicons/react/24/solid';
+import '@phosphor-icons/react';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
@@ -21,8 +19,17 @@ export { ErrorDisplay } from './StreamingResponse/ErrorDisplay.js';
 export { MarkdownRenderer } from './StreamingResponse/MarkdownRenderer.js';
 export { AnimatedText } from './StreamingResponse/AnimatedText.js';
 export { StreamingCursor } from './StreamingResponse/StreamingCursor.js';
+export { StreamingSurface } from './StreamingResponse/StreamingSurface.js';
 import './StreamingResponse/WordAnimationContext.js';
 export { streamingResponseTheme } from './StreamingResponse/StreamingResponse.theme.js';
 export { blockSlideIn, blockTransition, cursorPulse, staggerContainer, tokenFadeIn, tokenTransition } from './StreamingResponse/StreamingResponse.animations.js';
 export { CodeBlock } from './CodeBlock/CodeBlock.js';
 export { codeBlockTheme } from './CodeBlock/CodeBlock.theme.js';
+export { AgentStatus } from './AgentStatus/AgentStatus.js';
+export { agentStatusTheme } from './AgentStatus/AgentStatus.theme.js';
+export { AgentRequest } from './AgentRequest/AgentRequest.js';
+export { agentRequestTheme } from './AgentRequest/AgentRequest.theme.js';
+export { Reasoning } from './Reasoning/Reasoning.js';
+export { reasoningTheme } from './Reasoning/Reasoning.theme.js';
+export { SourceCitation, SourceCitationGroup } from './SourceCitation/SourceCitation.js';
+export { sourceCitationTheme } from './SourceCitation/SourceCitation.theme.js';

package/dist/components/ai/shared/StatusIndicator.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type AIStatusIndicatorState = "idle" | "active" | "complete" | "pending" | "error";
+export interface AIStatusIndicatorProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+    state: AIStatusIndicatorState;
+    className?: string;
+}
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+export declare const AIStatusIndicator: React.ForwardRefExoticComponent<AIStatusIndicatorProps & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ai/shared/StatusIndicator.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/** A rotating open arc that settles into a drawn semantic status glyph. */
+const AIStatusIndicator = React__default.forwardRef(({ state, className, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const instant = shouldReduceMotion ? { duration: 0 } : undefined;
+    // Unique per instance: SVG gradient ids are document-global, so a shared id
+    // would let the first-mounted indicator's def win for every spinner on the page.
+    const gradientId = `${React__default.useId()}-arc`;
+    return (jsx("svg", { ref: ref, viewBox: "0 0 16 16", fill: "none", className: cn("size-4 overflow-visible", className), "data-ai-status-indicator": state, "aria-hidden": "true", ...props, children: jsxs(AnimatePresence, { initial: false, mode: "sync", children: [state === "active" && (jsx(motion.g, { initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 1, scale: 1 }, exit: shouldReduceMotion
+                        ? { opacity: 0, transition: { duration: 0 } }
+                        : {
+                            opacity: 0,
+                            scale: 0.55,
+                            transition: { duration: 0.18, ease: "easeOut" },
+                        }, transition: {
+                        opacity: { duration: 0.16 },
+                        scale: { duration: 0.2, ease: "easeOut" },
+                    }, style: { transformBox: "view-box", transformOrigin: "8px 8px" }, children: jsxs("g", { className: "animate-spin motion-reduce:animate-none [transform-box:view-box] [transform-origin:center]", children: [jsx("defs", { children: jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: "2.5", y1: "8", x2: "13.5", y2: "8", children: [jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "55%", stopColor: "currentColor", stopOpacity: "1" }), jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), jsx("circle", { cx: "8", cy: "8", r: "5.5", stroke: `url(#${gradientId})`, strokeWidth: "1.75", strokeLinecap: "round", strokeDasharray: "17.3 34.6" })] }) }, "active")), state === "complete" && (jsx(motion.path, { d: "M3.5 8.25 6.65 11.2 12.6 4.9", stroke: "currentColor", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: shouldReduceMotion
+                        ? false
+                        : { opacity: 0, pathLength: 0, scale: 0.7, rotate: -18 }, animate: { opacity: 1, pathLength: 1, scale: 1, rotate: 0 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : {
+                        opacity: { duration: 0.12 },
+                        pathLength: { duration: 0.32, delay: 0.08, ease: "easeOut" },
+                        scale: { type: "spring", stiffness: 420, damping: 24 },
+                        rotate: { type: "spring", stiffness: 360, damping: 22 },
+                    }, style: { transformOrigin: "8px 8px" } }, "complete")), state === "pending" && (jsx(motion.circle, { cx: "8", cy: "8", r: "4.5", stroke: "currentColor", strokeWidth: "1.4", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.7 }, animate: { opacity: 0.55, scale: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.2 }, style: { transformOrigin: "8px 8px" } }, "pending")), state === "error" && (jsx(motion.path, { d: "M4.5 4.5 11.5 11.5 M11.5 4.5 4.5 11.5", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", initial: shouldReduceMotion ? false : { opacity: 0, pathLength: 0 }, animate: { opacity: 1, pathLength: 1 }, exit: { opacity: 0, scale: 0.7 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.24 } }, "error")), state === "idle" && (jsx(motion.circle, { cx: "8", cy: "8", r: "2.25", fill: "currentColor", initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.6 }, animate: { opacity: 0.7, scale: 1 }, exit: { opacity: 0, scale: 0.6 }, transition: instant !== null && instant !== void 0 ? instant : { duration: 0.18 }, style: { transformOrigin: "8px 8px" } }, "idle"))] }) }));
+});
+AIStatusIndicator.displayName = "AIStatusIndicator";
+
+export { AIStatusIndicator };

package/dist/components/canvas/BaseNode.js

@@ -11,7 +11,7 @@ import { cn } from '../../utils/cn.js';
  * `<button>`/`<input>`) to keep them clickable without starting a drag.
  */
 const BaseNode = React__default.forwardRef(function BaseNode({ selected, className, children, ...rest }, ref) {
-    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-300", selected
+    return (jsx("div", { ref: ref, className: cn("relative min-w-[8rem] rounded-[var(--canvas-node-radius,0.75rem)] border bg-[var(--color-surface)] shadow-sm", "transition-all duration-[var(--motion-duration-slow)]", selected
             ? "border-[var(--color-surface)] ring-4 ring-[var(--color-primary)]"
             : "border-[var(--color-border)] group-hover:border-[var(--color-border-hover)] group-hover:shadow-real-md", className), ...rest, children: children }));
 });

package/dist/components/canvas/CanvasToolbar.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { CursorArrowRaysIcon, HandRaisedIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { CursorClick, Hand, Plus } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
 import { Dropdown } from '../core/Dropdown/Dropdown.js';
 import '../core/Dropdown/DropdownTrigger.js';
 import '../core/Dropdown/DropdownMenu.js';
@@ -28,7 +27,7 @@ const Divider = () => (jsx("span", { className: "mx-0.5 h-6 w-px bg-[var(--color
 function CanvasToolbar({ nodeOptions, onAddNode, showTools = true, position = "bottom", className, children, }) {
     const { tool, setTool } = useCanvasApi();
     const hasNodes = !!(nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.length);
-    return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorArrowRaysIcon, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "neutral", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(HandRaisedIcon, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "neutral", size: "sm", className: "rounded-full gap-1.5", children: [jsx(PlusIcon, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
+    return (jsxs("div", { "data-flikkui-nopan": "", className: cn("absolute z-30 flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg p-1 shadow-real-lg", POSITIONS[position], className), children: [showTools && (jsxs(Fragment, { children: [jsx(Button, { variant: tool === "select" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("select"), "aria-label": "Select tool", "aria-pressed": tool === "select", className: cn("rounded-full", tool === "select" && "shadow-inner"), children: jsx(CursorClick, { className: "size-4" }) }), jsx(Button, { variant: tool === "pan" ? "soft" : "ghost", color: "mono", size: "sm", iconOnly: true, onClick: () => setTool("pan"), "aria-label": "Hand (pan) tool", "aria-pressed": tool === "pan", className: cn("rounded-full", tool === "pan" && "shadow-inner"), children: jsx(Hand, { className: "size-4" }) })] })), showTools && hasNodes && jsx(Divider, {}), hasNodes && (jsxs(Dropdown, { placement: "top", offset: 10, onAction: (type) => onAddNode === null || onAddNode === void 0 ? void 0 : onAddNode(type), children: [jsx(Dropdown.Trigger, { children: jsxs(Button, { variant: "ghost", color: "mono", size: "sm", className: "rounded-full gap-1.5", children: [jsx(Plus, { className: "size-4" }), "Add node"] }) }), jsx(Dropdown.Menu, { "aria-label": "Add node", children: nodeOptions === null || nodeOptions === void 0 ? void 0 : nodeOptions.map((opt) => (jsx(Dropdown.Item, { itemKey: opt.type, startContent: opt.icon && (jsx("span", { className: "size-4 grid place-items-center text-[var(--color-text-muted)]", children: opt.icon })), children: opt.label }, opt.type))) })] })), children && (jsxs(Fragment, { children: [(showTools || hasNodes) && jsx(Divider, {}), children] }))] }));
 }
 CanvasToolbar.displayName = "CanvasToolbar";
 

package/dist/components/canvas/Edge.js

@@ -88,9 +88,9 @@ const Edge = React__default.memo(function Edge({ id, type = "bezier", source, so
     const d = buildEdgePath(type, source, sourcePosition, target, targetPosition);
     // Inline stroke beats the class strokes below; selection keeps priority.
     const colorStyle = color && !selected ? { stroke: color } : undefined;
-    return (jsxs("g", { className: "group", children: [onPointerDown && (jsx("path", { d: d, fill: "none", stroke: "transparent", strokeWidth: 16, strokeLinecap: "round", "data-flikkui-edge": "", "data-edge-id": id, style: { pointerEvents: "stroke", cursor: "pointer" }, onPointerDown: onPointerDown })), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 8 : 6, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("pointer-events-none opacity-0 transition-opacity duration-150", selected
+    return (jsxs("g", { className: "group", children: [onPointerDown && (jsx("path", { d: d, fill: "none", stroke: "transparent", strokeWidth: 16, strokeLinecap: "round", "data-flikkui-edge": "", "data-edge-id": id, style: { pointerEvents: "stroke", cursor: "pointer" }, onPointerDown: onPointerDown })), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 8 : 6, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("pointer-events-none opacity-0 transition-opacity duration-[var(--motion-duration-fast)]", selected
                     ? "opacity-20 stroke-[var(--color-primary)]"
-                    : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-150", selected
+                    : "stroke-[var(--color-primary)] group-hover:opacity-10") }), jsx("path", { d: d, fill: "none", strokeWidth: selected ? 2.5 : 1.5, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke", strokeDasharray: dashed ? "5 4" : undefined, style: colorStyle, className: cn("transition-[stroke,stroke-width] duration-[var(--motion-duration-fast)]", selected
                     ? "stroke-[var(--color-primary)]"
                     : "stroke-[var(--color-border)] group-hover:stroke-[var(--color-border-hover)]") })] }));
 }, 

package/dist/components/canvas/NodeControls.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PlusIcon, MinusIcon, ArrowsPointingOutIcon, LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/outline';
+import { Plus, Minus, ArrowsOutSimple, Lock, LockOpen } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { Button } from '../core/Button/Button.js';
-import 'react';
 import { useCanvasApi } from './context/CanvasContext.js';
 import { clamp } from './utils.js';
 
@@ -34,7 +33,7 @@ function NodeControls({ position = "bottom-right", showZoom = true, showFitView
         });
     };
     const ctrlBtn = "size-8 rounded-none";
-    return (jsxs("div", { "data-flikkui-controls": "", className: cn("absolute z-20 flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] divide-y divide-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg shadow-real-lg", POSITIONS[position], className), children: [showZoom && (jsxs(Fragment, { children: [jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(zoomStep), "aria-label": "Zoom in", children: jsx(PlusIcon, { className: "size-4" }) }), jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(1 / zoomStep), "aria-label": "Zoom out", children: jsx(MinusIcon, { className: "size-4" }) })] })), showFitView && (jsx(Button, { variant: "ghost", color: "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => fitView(), "aria-label": "Fit view", children: jsx(ArrowsPointingOutIcon, { className: "size-4" }) })), showLock && (jsx(Button, { variant: locked ? "soft" : "ghost", color: locked ? "primary" : "neutral", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => setLocked(!locked), "aria-label": locked ? "Unlock canvas" : "Lock canvas", "aria-pressed": locked, children: locked ? jsx(LockClosedIcon, { className: "size-4" }) : jsx(LockOpenIcon, { className: "size-4" }) }))] }));
+    return (jsxs("div", { "data-flikkui-controls": "", className: cn("absolute z-20 flex flex-col overflow-hidden rounded-lg border border-[var(--color-border)] divide-y divide-[var(--color-border)] bg-[var(--color-surface-overlay)]/60 backdrop-blur-lg shadow-real-lg", POSITIONS[position], className), children: [showZoom && (jsxs(Fragment, { children: [jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(zoomStep), "aria-label": "Zoom in", children: jsx(Plus, { className: "size-4" }) }), jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => zoomBy(1 / zoomStep), "aria-label": "Zoom out", children: jsx(Minus, { className: "size-4" }) })] })), showFitView && (jsx(Button, { variant: "ghost", color: "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => fitView(), "aria-label": "Fit view", children: jsx(ArrowsOutSimple, { className: "size-4" }) })), showLock && (jsx(Button, { variant: locked ? "soft" : "ghost", color: locked ? "primary" : "mono", size: "sm", iconOnly: true, className: ctrlBtn, onClick: () => setLocked(!locked), "aria-label": locked ? "Unlock canvas" : "Lock canvas", "aria-pressed": locked, children: locked ? jsx(Lock, { className: "size-4" }) : jsx(LockOpen, { className: "size-4" }) }))] }));
 }
 NodeControls.displayName = "NodeControls";
 

package/dist/components/canvas/NodeRenderer.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React__default, { useCallback, useRef, useEffect } from 'react';
-import { PlusIcon } from '@heroicons/react/16/solid';
+import { Plus } from '@phosphor-icons/react';
 import { cn } from '../../utils/cn.js';
 import { NodeIdProvider } from './context/NodeIdContext.js';
 import { useCanvasApi } from './context/CanvasContext.js';
@@ -78,8 +78,8 @@ function AutoHandle({ nodeId, position }) {
             unregister(nodeId, handleKey("source", handleId));
         };
     }, [nodeId, handleId, position, register, unregister, viewportRef]);
-    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-150 ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
-            "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(PlusIcon, { className: "size-2.5" }) }));
+    return (jsx("button", { ref: ref, type: "button", "data-flikkui-handle": "", "data-node-id": nodeId, "data-handle-type": "source", "data-handle-id": handleId, "data-handle-kind": "auto", "aria-label": `Connect from ${position}`, className: cn("nodrag absolute z-20 grid place-items-center size-4 rounded-full", "bg-[var(--color-primary)] text-[var(--color-primary-contrast)] shadow-md ring-2 ring-[var(--color-surface)] cursor-crosshair", "opacity-0 scale-75 pointer-events-none transition-[opacity,transform,box-shadow] duration-[var(--motion-duration-fast)] ease-out", "hover:scale-110 hover:shadow-lg hover:ring-4 active:scale-95", !disabled &&
+            "group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:scale-100 group-focus-within:pointer-events-auto", AUTO_SIDE_CLASSES[position]), onPointerDown: disabled ? undefined : onPointerDown, children: jsx(Plus, { className: "size-2.5" }) }));
 }
 // Memoized so unrelated graph updates (another node's data/position, selection
 // elsewhere) skip this node: `node` identity is preserved by applyNodeChanges,
@@ -110,7 +110,7 @@ const NodeWrapper = React__default.memo(function NodeWrapper({ node, NodeCompone
         }
     };
     const selected = !!node.selected;
-    return (jsx("div", { className: cn("group absolute top-0 left-0 rounded-[var(--canvas-node-radius,0.75rem)]", "transition-[box-shadow,filter,opacity] duration-150 ease-out", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", tool === "pan"
+    return (jsx("div", { className: cn("group absolute top-0 left-0 rounded-[var(--canvas-node-radius,0.75rem)]", "transition-[box-shadow,filter,opacity] duration-[var(--motion-duration-fast)] ease-out", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]", tool === "pan"
             ? "cursor-grab"
             : node.draggable !== false && "cursor-grab active:cursor-grabbing", 
         // Selection visuals belong to the node component (BaseNode is the

package/dist/components/charts/ActivityRings/ActivityRings.js

@@ -5,9 +5,9 @@ import { motion, useReducedMotion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { activityRingsTheme } from './ActivityRings.theme.js';
 import { ACTIVITY_RINGS_DEFAULTS } from './ActivityRings.types.js';
-import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { Warning } from '@phosphor-icons/react';
 import { useTooltipPosition } from '../hooks/useTooltipPosition.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { getSpringAnimation, CIRCULAR_CHART_ANIMATIONS, getStaggerDelay } from '../utils/animation-utils.js';
 
 const RingElement = React__default.memo(({ ring, index, radius, center, svgSize, strokeWidth, ringColor, hasAnimated, showAnimation, shouldReduceMotion, animationDelay, handleMouseEnter, handleMouseMove, handleMouseLeave, }) => {
@@ -39,7 +39,7 @@ const RingElement = React__default.memo(({ ring, index, radius, center, svgSize,
     }, [index, ring.label, ring.value, ringColor, center, radius, svgSize, handleMouseEnter]);
     const onMouseMove = useCallback((e) => handleMouseMove(e), [handleMouseMove]);
     const onMouseLeave = useCallback(() => handleMouseLeave(), [handleMouseLeave]);
-    return (jsxs("g", { children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-chart-track)", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave }), jsx(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-200", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
+    return (jsxs("g", { children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "var(--color-chart-track)", strokeWidth: strokeWidth, strokeLinecap: "round", className: "cursor-pointer", transform: `rotate(-90 ${center} ${center})`, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave }), jsx(motion.circle, { cx: center, cy: center, r: radius, fill: "none", stroke: ringColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, className: "cursor-pointer transition-opacity duration-[var(--motion-duration-base)]", initial: { strokeDashoffset: circumference }, animate: hasAnimated ? { strokeDashoffset: offset } : {}, transition: showAnimation && !shouldReduceMotion
                     ? getSpringAnimation(CIRCULAR_CHART_ANIMATIONS.activityRings.preset, shouldReduceMotion, animationDelay)
                     : { duration: 0 }, transform: `rotate(-90 ${center} ${center})`, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave })] }));
 });
@@ -127,7 +127,7 @@ const ActivityRings = ({ rings, centerLabel, centerSuffix, size = ACTIVITY_RINGS
     // BarChart.tsx.
     // Early return for invalid configuration
     if (!Array.isArray(rings) || rings.length === 0) {
-        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(ExclamationTriangleIcon, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
+        return (jsxs("div", { className: cn("flex items-center justify-center p-6 border border-[var(--color-border)] rounded-lg", className), role: "alert", ...props, children: [jsx(Warning, { className: "size-5 text-[var(--color-danger)] mr-2" }), jsx("span", { className: "text-base text-[var(--color-text-secondary)]", children: "Invalid ActivityRings: rings array is required" })] }));
     }
     // Get color for a ring by index
     // Priority: ring.color > colors prop > theme colors > fallback

package/dist/components/charts/ActivityRings/ActivityRings.theme.js

@@ -4,7 +4,7 @@
  * Follows the established chart theming pattern with CSS variables
  */
 const activityRingsTheme = {
-    baseStyle: "relative flex items-center justify-center transition-all duration-300 cursor-default",
+    baseStyle: "relative flex items-center justify-center transition-all duration-[var(--motion-duration-slow)] cursor-default",
     svgStyle: "overflow-visible relative",
     ringDefaults: {
         strokeWidth: 8,

package/dist/components/charts/AreaChart/AreaChart.js

@@ -9,7 +9,7 @@ import { useChartDimensions } from '../hooks/useChartDimensions.js';
 import { XAxis } from '../shared/ChartAxis/XAxis.js';
 import { YAxis } from '../shared/ChartAxis/YAxis.js';
 import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
-import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
+import { ChartTooltip } from '../../core/shared/ChartTooltip/ChartTooltip.js';
 import { resolveLegendPosition, ChartLegend } from '../shared/ChartLegend/ChartLegend.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
@@ -17,8 +17,10 @@ import { generateNiceTicks } from '../utils/chart-validation.js';
 import { generateCurvePath } from '../utils/path-utils.js';
 import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
 import { X_AXIS_MARGIN } from '../types/chart.types.js';
-import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.js';
+import { areaChartTheme, getSeriesColorClass } from './AreaChart.theme.js';
 import { RISE_FROM_BASELINE, riseTransition, SCALE_FROM_CENTER, dotEntranceTransition, HALO_FADE_TRANSITION } from '../utils/animation-utils.js';
+import { resolveSeriesColor } from '../utils/series-color.js';
+import { chartTheme } from '../theme/chart.theme.js';
 
 const sanitizeSvgId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "");
 const AreaChart = ({ data, config, 
@@ -34,18 +36,6 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     var _a;
     // Resolve dotRadius with backward compatibility
     const resolvedDotRadius = (_a = dotRadius !== null && dotRadius !== void 0 ? dotRadius : radius) !== null && _a !== void 0 ? _a : AREA_CHART_DEFAULTS.dotRadius;
-    const resolveColor = (color, fallback) => {
-        if (!color)
-            return fallback;
-        if (!color.startsWith("var(") &&
-            !color.startsWith("#") &&
-            !color.startsWith("rgb") &&
-            !color.startsWith("hsl") &&
-            color.includes("-")) {
-            return `var(--color-${color})`;
-        }
-        return color;
-    };
     // Development warning for deprecated radius prop
     if (process.env.NODE_ENV !== "production" && radius !== undefined) {
         console.warn("[AreaChart]: The `radius` prop is deprecated and will be removed in a future version. " +
@@ -105,11 +95,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
     const dataKeys = useMemo(() => Object.keys(config), [config]);
     const resolvedLegendPosition = resolveLegendPosition(legend, config);
     const legendItems = dataKeys.map((key, index) => {
-        var _a, _b, _c;
+        var _a, _b;
         return ({
             key,
             label: (_b = (_a = config[key]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : key,
-            color: resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, getSeriesFillColor(index)),
+            color: resolveSeriesColor(index, key, config, chartTheme.baseStyle.colors.series),
         });
     });
     // Calculate scales. Guarded for empty data (`Math.max(...[])` is `-Infinity`)
@@ -248,13 +238,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
             setHoveredPoint(null);
             handleMouseLeave();
         }, ...props, children: [resolvedLegendPosition === "top" && (jsx(ChartLegend, { items: legendItems, className: "shrink-0 pb-2" })), descriptionProps && jsx("div", { ...descriptionProps }), jsx("div", { className: "relative flex-1 min-h-0", children: jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, className: cn(areaChartTheme.svgStyle, svgClassName), role: "presentation", children: [jsxs("defs", { children: [jsx("filter", { id: shadowFilterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "6", floodOpacity: "0.1", floodColor: "#000000" }) }), jsx("clipPath", { id: clipId, children: jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight }) }), dataKeys.map((key, keyIndex) => {
-                                    var _a;
-                                    const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                    const fillColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                     return (jsx("linearGradient", { id: getAreaGradientId(keyIndex), gradientUnits: isGradientVariant ? "objectBoundingBox" : undefined, x1: "0", y1: "0", x2: "0", y2: "1", children: isGradientVariant ? (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: Math.min(0.42, fillOpacity * 1.15) }), jsx("stop", { offset: "32%", stopColor: fillColor, stopOpacity: Math.min(0.24, fillOpacity * 0.68) }), jsx("stop", { offset: "78%", stopColor: fillColor, stopOpacity: Math.min(0.08, fillOpacity * 0.22) }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: "0" })] })) : (jsxs(Fragment, { children: [jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: fillOpacity * 0.8 }), jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: fillOpacity * 0.05 })] })) }, `gradient-${key}`));
                                 }), isGradientVariant &&
                                     dataKeys.map((key, keyIndex) => {
-                                        var _a;
-                                        const fillColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        const fillColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                         return (jsxs(React__default.Fragment, { children: [jsx("filter", { id: getLineGlowId(keyIndex), x: "-12%", y: "-35%", width: "124%", height: "170%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.42" }) }), jsx("filter", { id: getMarkerGlowId(keyIndex), x: "-120%", y: "-120%", width: "340%", height: "340%", colorInterpolationFilters: "sRGB", children: jsx("feDropShadow", { dx: "0", dy: "0", stdDeviation: "5", floodColor: fillColor, floodOpacity: "0.45" }) })] }, `gradient-filters-${key}`));
                                     }), jsxs("linearGradient", { id: "vertical-fade", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] }), jsxs("linearGradient", { id: "horizontal-fade", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [jsx("stop", { offset: "0%", stopColor: "#6b7280", stopOpacity: "0" }), jsx("stop", { offset: "40%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "50%", stopColor: "#6b7280", stopOpacity: "0.5" }), jsx("stop", { offset: "60%", stopColor: "#6b7280", stopOpacity: "0.3" }), jsx("stop", { offset: "100%", stopColor: "#6b7280", stopOpacity: "0" })] })] }), jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5, className: gridClassName }), jsx(ChartCrosshair, { show: hoveredPoint !== null, x: hoveredPoint !== null
                                 ? data.length === 1
@@ -272,13 +260,15 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         ((numValue - minValue) / (maxValue - minValue)) *
                                             innerHeight);
                                 })()
-                                : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant ? getSeriesFillColor(0) : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
+                                : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1, strokeColor: isGradientVariant
+                                ? resolveSeriesColor(0, undefined, undefined, chartTheme.baseStyle.colors.series)
+                                : undefined, strokeWidth: isGradientVariant ? 1.5 : undefined, strokeDasharray: isGradientVariant ? "3 7" : undefined, opacity: isGradientVariant ? 0.28 : undefined }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
                                 if (Math.abs(value) >= 1000)
                                     return `${(value / 1000).toFixed(0)}k`;
                                 return value.toString();
                             } }), minValue < 0 && maxValue > 0 && (jsx("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })), jsx("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})`, children: measured &&
                                 dataKeys.map((key, keyIndex) => {
-                                    var _a, _b, _c, _d, _e;
+                                    var _a, _b;
                                     const paths = allPaths[key];
                                     const colorClass = getSeriesColorClass(keyIndex);
                                     if (!paths)
@@ -289,21 +279,21 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         // so `originY:1` anchors scaleY to the group's fill-box BOTTOM.
                                         // The invisible rect below pins that bottom to the plot baseline,
                                         // so the series grows UP from the x-axis — not from its own mid-height.
-                                        style: RISE_FROM_BASELINE, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: paths.areaPath, fill: `url(#${getAreaGradientId(keyIndex)})`, className: "transition-colors duration-200", filter: isGradientVariant ? undefined : `url(#${shadowFilterId})`, transform: isGradientVariant
+                                        style: RISE_FROM_BASELINE, children: [jsx("rect", { x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, fill: "none", stroke: "none", style: { pointerEvents: "none" } }), jsx("path", { d: paths.areaPath, fill: `url(#${getAreaGradientId(keyIndex)})`, className: "transition-colors duration-[var(--motion-duration-base)]", filter: isGradientVariant ? undefined : `url(#${shadowFilterId})`, transform: isGradientVariant
                                                     ? `translate(0 ${gradientAreaGap})`
-                                                    : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex)), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                    : undefined }), showStroke && (jsxs(Fragment, { children: [isGradientVariant && (jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series), strokeWidth: gradientStrokeWidth + 1, strokeLinecap: "round", strokeLinejoin: "round", 
                                                         // Stroke width must ignore the group's scaleY rise, else
                                                         // it squashes flat at the start of the animation.
-                                                        vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : (isGradientVariant ? getSeriesFillColor(keyIndex) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
+                                                        vectorEffect: "non-scaling-stroke", opacity: 0.08, filter: `url(#${getLineGlowId(keyIndex)})`, style: { pointerEvents: "none" } })), jsx(motion.path, { d: paths.linePath, initial: { opacity: 1 }, animate: { opacity: 1 }, fill: "none", stroke: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : (isGradientVariant ? resolveSeriesColor(keyIndex, undefined, undefined, chartTheme.baseStyle.colors.series) : undefined), strokeWidth: isGradientVariant ? gradientStrokeWidth : strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", 
                                                         // Constant stroke width through the scaleY rise (no squash).
-                                                        vectorEffect: "non-scaling-stroke", className: cn("transition-colors duration-200", !isGradientVariant &&
+                                                        vectorEffect: "non-scaling-stroke", className: cn("transition-colors duration-[var(--motion-duration-base)]", !isGradientVariant &&
                                                             (colorClass
                                                                 .split(" ")
-                                                                .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_d = config[key]) === null || _d === void 0 ? void 0 : _d.color) ? resolveColor((_e = config[key]) === null || _e === void 0 ? void 0 : _e.color, "") : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                                                .find((cls) => cls.startsWith("stroke-")) || ""), lineClassName), style: { stroke: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined } })] }))] }, `${key}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                                 }) }), showDots && (jsx("g", { className: "chart-dots", children: dataKeys.map((key, keyIndex) => {
                                 const colorClass = getSeriesColorClass(keyIndex);
                                 return (jsx("g", { children: data.map((item, dataIndex) => {
-                                        var _a, _b;
+                                        var _a;
                                         const rawValue = item[key];
                                         const isNull = rawValue === null || rawValue === undefined;
                                         // Don't render dots for null values
@@ -316,12 +306,12 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         const { x, y } = getPointPosition(dataIndex, topValue);
                                         return (jsx(motion.g, { initial: { opacity: 0, scale: 0 }, animate: { opacity: 1, scale: 1 }, 
                                             // Markers pop in left-to-right once the rise has finished.
-                                            transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveColor((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color, "") : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
+                                            transition: dotEntranceTransition(dataIndex, shouldReduceMotion), style: SCALE_FROM_CENTER, children: jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined }) }, `${key}-${dataIndex}${shouldReduceMotion ? "" : `-${dataSignature}`}`));
                                     }) }, key));
                             }) })), jsx("g", { className: "chart-hover-markers", children: jsx(AnimatePresence, { children: (!showDots || isGradientVariant) &&
                                     hoveredPoint !== null &&
                                     dataKeys.map((key, keyIndex) => {
-                                        var _a, _b, _c;
+                                        var _a;
                                         const item = data[hoveredPoint.index];
                                         const rawValue = item[key];
                                         const isNull = rawValue === null || rawValue === undefined;
@@ -338,11 +328,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                             : value;
                                         const { x, y } = getPointPosition(hoveredPoint.index, topValue);
                                         const colorClass = getSeriesColorClass(keyIndex);
-                                        const markerColor = resolveColor((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color, getSeriesFillColor(keyIndex));
+                                        const markerColor = resolveSeriesColor(keyIndex, key, config, chartTheme.baseStyle.colors.series);
                                         if (isGradientVariant) {
                                             return (jsxs(motion.g, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: HALO_FADE_TRANSITION, filter: `url(#${getMarkerGlowId(keyIndex)})`, style: { pointerEvents: "none" }, children: [jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 9, fill: markerColor, opacity: 0.12 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius + 4, fill: "white", stroke: markerColor, strokeWidth: 2.5 }), jsx("circle", { cx: x, cy: y, r: resolvedDotRadius, fill: markerColor })] }, `hover-${key}-${hoveredPoint.index}`));
                                         }
-                                        return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_b = config[key]) === null || _b === void 0 ? void 0 : _b.color) ? resolveColor((_c = config[key]) === null || _c === void 0 ? void 0 : _c.color, "") : undefined }, `hover-${key}-${hoveredPoint.index}`));
+                                        return (jsx(ChartMarker, { cx: x, cy: y, radius: resolvedDotRadius, colorClass: colorClass, strokeColor: ((_a = config[key]) === null || _a === void 0 ? void 0 : _a.color) ? resolveSeriesColor(keyIndex, key, config, []) : undefined }, `hover-${key}-${hoveredPoint.index}`));
                                     }) }) }), jsx("g", { className: "chart-hover-areas", children: data.map((item, dataIndex) => {
                                 // Calculate hover area based on new point positioning
                                 const pointX = data.length === 1
@@ -361,15 +351,14 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, width,
                                         setHoveredPoint({ index: dataIndex, key: dataKeys[0] });
                                         // Create multi-series tooltip data
                                         const seriesData = dataKeys.map((seriesKey, keyIndex) => {
-                                            var _a, _b;
+                                            var _a;
                                             const seriesValue = item[seriesKey];
                                             const numValue = typeof seriesValue === "number" ? seriesValue : 0;
                                             return {
                                                 key: seriesKey,
                                                 label: ((_a = config[seriesKey]) === null || _a === void 0 ? void 0 : _a.label) || seriesKey,
                                                 value: numValue,
-                                                color: ((_b = config[seriesKey]) === null || _b === void 0 ? void 0 : _b.color) ||
-                                                    getSeriesFillColor(keyIndex),
+                                                color: resolveSeriesColor(keyIndex, seriesKey, config, chartTheme.baseStyle.colors.series),
                                             };
                                         });
                                         const content = {

package/dist/components/charts/AreaChart/AreaChart.theme.d.ts

@@ -14,11 +14,6 @@ export interface AreaChartTheme {
 export declare const areaChartTheme: AreaChartTheme;
 /**
  * Get series color class for stroke and fill
- * Uses semantic color CSS variables in production-ready format
+ * Uses the dedicated categorical chart-N tokens, not the semantic status colors
  */
 export declare const getSeriesColorClass: (index: number) => string;
-/**
- * Get fill color for SVG gradients
- * Returns CSS variable value directly for stopColor attribute
- */
-export declare const getSeriesFillColor: (index: number) => string;

package/dist/components/charts/AreaChart/AreaChart.theme.js

@@ -7,39 +7,27 @@
  */
 const areaChartTheme = {
     // Main container with transition utilities for hover states
-    containerStyle: "chart-container w-full h-full relative [&_.chart-areas]:transition-opacity [&_.chart-areas]:duration-300 [&_.chart-hover-areas]:cursor-pointer [&_.chart-hover-markers]:transition-all [&_.chart-hover-markers]:duration-200",
+    containerStyle: "chart-container w-full h-full relative [&_.chart-areas]:transition-opacity [&_.chart-areas]:duration-[var(--motion-duration-slow)] [&_.chart-hover-areas]:cursor-pointer [&_.chart-hover-markers]:transition-all [&_.chart-hover-markers]:duration-[var(--motion-duration-base)]",
     // SVG container with overflow and transition utilities
-    svgStyle: "overflow-visible [&_.chart-areas_path]:transition-all [&_.chart-areas_path]:duration-200",
+    svgStyle: "overflow-visible [&_.chart-areas_path]:transition-all [&_.chart-areas_path]:duration-[var(--motion-duration-base)]",
     // Area group styling with drop shadows
-    areaGroupStyle: "chart-areas [&_path]:drop-shadow-sm [&_path]:transition-all [&_path]:duration-200",
+    areaGroupStyle: "chart-areas [&_path]:drop-shadow-sm [&_path]:transition-all [&_path]:duration-[var(--motion-duration-base)]",
     // Empty state text color using correct CSS variable
     emptyStateStyle: "chart-container flex items-center justify-center text-[var(--color-text-placeholder)]",
 };
 /**
  * Get series color class for stroke and fill
- * Uses semantic color CSS variables in production-ready format
+ * Uses the dedicated categorical chart-N tokens, not the semantic status colors
  */
 const getSeriesColorClass = (index) => {
     const colors = [
-        "stroke-[var(--color-primary)] fill-[var(--color-primary)]",
-        "stroke-[var(--color-warning)] fill-[var(--color-warning)]",
-        "stroke-[var(--color-success)] fill-[var(--color-success)]",
-        "stroke-[var(--color-danger)] fill-[var(--color-danger)]",
+        "stroke-[var(--color-chart-1)] fill-[var(--color-chart-1)]",
+        "stroke-[var(--color-chart-2)] fill-[var(--color-chart-2)]",
+        "stroke-[var(--color-chart-3)] fill-[var(--color-chart-3)]",
+        "stroke-[var(--color-chart-4)] fill-[var(--color-chart-4)]",
+        "stroke-[var(--color-chart-5)] fill-[var(--color-chart-5)]",
     ];
     return colors[index % colors.length];
 };
-/**
- * Get fill color for SVG gradients
- * Returns CSS variable value directly for stopColor attribute
- */
-const getSeriesFillColor = (index) => {
-    const colorVars = [
-        "var(--color-primary)",
-        "var(--color-warning)",
-        "var(--color-success)",
-        "var(--color-danger)",
-    ];
-    return colorVars[index % colorVars.length];
-};
 
-export { areaChartTheme, getSeriesColorClass, getSeriesFillColor };
+export { areaChartTheme, getSeriesColorClass };

package/dist/components/charts/AreaChart/AreaChart.types.d.ts

@@ -1,5 +1,12 @@
 import { BaseChartProps, StandardChartDisplayProps, StandardVisualProps, ChartVariant } from '../types/chart.types';
-export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, StandardVisualProps {
+/**
+ * Visual props that actually apply to an area chart.
+ *
+ * 🔴 Narrowed with `Omit` on purpose — see the note on `StandardVisualProps`.
+ * Dropped: the bar/cell-only props, which an area chart has nothing to apply them to.
+ */
+export type AreaVisualProps = Omit<StandardVisualProps, 'barRadius' | 'gap'>;
+export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProps, AreaVisualProps {
     dotRadius?: number;
     radius?: number;
     strokeWidth?: number;
@@ -14,10 +21,19 @@ export interface AreaChartProps extends BaseChartProps, StandardChartDisplayProp
     gridClassName?: string;
     axisClassName?: string;
 }
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 export declare const AREA_CHART_DEFAULTS: {
+    readonly showGrid: true;
+    readonly showXAxis: true;
+    readonly showYAxis: true;
+    readonly enableKeyboardNavigation: true;
     readonly variant: ChartVariant;
     readonly dotRadius: 3;
-    readonly radius: 3;
     readonly strokeWidth: 2;
     readonly curved: true;
     readonly curveType: import("..").CurveType;
@@ -25,15 +41,6 @@ export declare const AREA_CHART_DEFAULTS: {
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly stacked: false;
-    readonly showGrid: true;
-    readonly showXAxis: true;
-    readonly showYAxis: true;
-    readonly barRadius: 32;
-    readonly cellRadius: 4;
-    readonly gap: 4;
-    readonly categoryGap: 16;
-    readonly orientation: "vertical" | "horizontal";
-    readonly enableKeyboardNavigation: true;
 };
 export type AreaChartData = BaseChartProps['data'][0];
 export type AreaChartConfig = BaseChartProps['config'];

package/dist/components/charts/AreaChart/AreaChart.types.js

@@ -1,11 +1,18 @@
 import { CHART_DEFAULTS } from '../types/chart.types.js';
 
-// Default values using centralized defaults
+/**
+ * Default values using centralized defaults.
+ *
+ * 🔴 Picks explicitly rather than spreading `...CHART_DEFAULTS` — see the note on
+ * `BAR_CHART_DEFAULTS`.
+ */
 const AREA_CHART_DEFAULTS = {
-    ...CHART_DEFAULTS,
+    showGrid: CHART_DEFAULTS.showGrid,
+    showXAxis: CHART_DEFAULTS.showXAxis,
+    showYAxis: CHART_DEFAULTS.showYAxis,
+    enableKeyboardNavigation: CHART_DEFAULTS.enableKeyboardNavigation,
     variant: "gradient", // AreaChart defaults to the gradient (premium) look; use variant="default" for flat fills
     dotRadius: CHART_DEFAULTS.dotRadius, // 20 - For dot markers
-    radius: CHART_DEFAULTS.dotRadius, // @deprecated - kept for backward compatibility
     strokeWidth: CHART_DEFAULTS.strokeWidth,
     curved: CHART_DEFAULTS.curved,
     curveType: CHART_DEFAULTS.curveType,

package/dist/components/charts/AreaChart/index.d.ts

@@ -1,4 +1,4 @@
 export { AreaChart } from './AreaChart';
 export type { AreaChartProps, AreaChartData, AreaChartConfig } from './AreaChart.types';
-export { areaChartTheme, getSeriesColorClass, getSeriesFillColor } from './AreaChart.theme';
+export { areaChartTheme, getSeriesColorClass } from './AreaChart.theme';
 export type { AreaChartTheme } from './AreaChart.theme';