@aiready/components 0.13.6 → 0.13.7

package/src/charts/PackageBoundaries.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {
+  PACKAGE_BOUNDARY_FILL,
+  PACKAGE_BOUNDARY_STROKE,
+  PACKAGE_BOUNDARY_STROKE_WIDTH,
+  PACKAGE_BOUNDARY_DASH,
+  PACKAGE_LABEL_COLOR,
+  PACKAGE_LABEL_FONT_SIZE,
+} from './constants';
+
+interface PackageBoundariesProps {
+  packageBounds: Record<string, { x: number; y: number; r: number }>;
+}
+
+/**
+ * Renders the circular boundaries and labels for package groups in the force-directed graph.
+ *
+ * @lastUpdated 2026-03-18
+ */
+export const PackageBoundaries: React.FC<PackageBoundariesProps> = ({
+  packageBounds,
+}) => {
+  if (!packageBounds || Object.keys(packageBounds).length === 0) return null;
+
+  return (
+    <g className="package-boundaries" pointerEvents="none">
+      {Object.entries(packageBounds).map(([pid, b]) => (
+        <g key={pid}>
+          <circle
+            cx={b.x}
+            cy={b.y}
+            r={b.r}
+            fill={PACKAGE_BOUNDARY_FILL}
+            stroke={PACKAGE_BOUNDARY_STROKE}
+            strokeWidth={PACKAGE_BOUNDARY_STROKE_WIDTH}
+            strokeDasharray={PACKAGE_BOUNDARY_DASH}
+            opacity={0.9}
+          />
+          <text
+            x={b.x}
+            y={Math.max(12, b.y - b.r + 14)}
+            fill={PACKAGE_LABEL_COLOR}
+            fontSize={PACKAGE_LABEL_FONT_SIZE}
+            textAnchor="middle"
+            pointerEvents="none"
+          >
+            {pid.replace(/^pkg:/, '')}
+          </text>
+        </g>
+      ))}
+    </g>
+  );
+};
+
+PackageBoundaries.displayName = 'PackageBoundaries';

package/src/charts/constants.ts

@@ -0,0 +1,30 @@
+/**
+ * Default visual constants for the ForceDirectedGraph component.
+ */
+export const DEFAULT_NODE_COLOR = '#64748b';
+export const DEFAULT_NODE_SIZE = 10;
+export const DEFAULT_LINK_COLOR = '#94a3b8';
+export const DEFAULT_LINK_WIDTH = 1;
+
+/**
+ * Layout and interaction thresholds.
+ */
+export const CIRCULAR_LAYOUT_RADIUS_RATIO = 0.35;
+export const FIT_VIEW_PADDING = 40;
+export const ZOOM_MIN_SCALE = 0.1;
+export const ZOOM_MAX_SCALE = 10;
+
+/**
+ * Transition and animation durations.
+ */
+export const TRANSITION_DURATION_MS = 300;
+
+/**
+ * Package boundary styling.
+ */
+export const PACKAGE_BOUNDARY_FILL = 'rgba(148,163,184,0.06)';
+export const PACKAGE_BOUNDARY_STROKE = '#475569';
+export const PACKAGE_BOUNDARY_STROKE_WIDTH = 2;
+export const PACKAGE_BOUNDARY_DASH = '6 6';
+export const PACKAGE_LABEL_FONT_SIZE = 11;
+export const PACKAGE_LABEL_COLOR = '#475569';

package/src/charts/hooks.ts

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+import * as d3 from 'd3';
+import { GraphNode } from './types';
+
+/**
+ * Hook for managing D3 zoom behavior on an SVG element.
+ */
+export function useGraphZoom(
+  svgRef: React.RefObject<SVGSVGElement | null>,
+  gRef: React.RefObject<SVGGElement | null>,
+  enableZoom: boolean,
+  setTransform: (transform: { k: number; x: number; y: number }) => void,
+  transformRef: React.MutableRefObject<{ k: number; x: number; y: number }>
+) {
+  useEffect(() => {
+    if (!enableZoom || !svgRef.current || !gRef.current) return;
+
+    const svg = d3.select(svgRef.current);
+    const g = d3.select(gRef.current);
+
+    const zoom = (d3 as any)
+      .zoom()
+      .scaleExtent([0.1, 10])
+      .on('zoom', (event: any) => {
+        g.attr('transform', event.transform);
+        transformRef.current = event.transform;
+        setTransform(event.transform);
+      });
+
+    svg.call(zoom);
+
+    return () => {
+      svg.on('.zoom', null);
+    };
+  }, [enableZoom, svgRef, gRef, setTransform, transformRef]);
+}
+
+/**
+ * Hook for managing window-level drag events for smooth node dragging.
+ */
+export function useWindowDrag(
+  enableDrag: boolean,
+  svgRef: React.RefObject<SVGSVGElement | null>,
+  transformRef: React.MutableRefObject<{ k: number; x: number; y: number }>,
+  dragActiveRef: React.MutableRefObject<boolean>,
+  dragNodeRef: React.MutableRefObject<GraphNode | null>,
+  onDragEnd: () => void
+) {
+  useEffect(() => {
+    if (!enableDrag) return;
+
+    const handleWindowMove = (event: MouseEvent) => {
+      if (!dragActiveRef.current || !dragNodeRef.current) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const t: any = transformRef.current;
+      const x = (event.clientX - rect.left - t.x) / t.k;
+      const y = (event.clientY - rect.top - t.y) / t.k;
+      dragNodeRef.current.fx = x;
+      dragNodeRef.current.fy = y;
+    };
+
+    const handleWindowUp = () => {
+      if (!dragActiveRef.current) return;
+      onDragEnd();
+      dragNodeRef.current = null;
+      dragActiveRef.current = false;
+    };
+
+    const handleWindowLeave = (event: MouseEvent) => {
+      if (event.relatedTarget === null) handleWindowUp();
+    };
+
+    window.addEventListener('mousemove', handleWindowMove);
+    window.addEventListener('mouseup', handleWindowUp);
+    window.addEventListener('mouseout', handleWindowLeave);
+    window.addEventListener('blur', handleWindowUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleWindowMove);
+      window.removeEventListener('mouseup', handleWindowUp);
+      window.removeEventListener('mouseout', handleWindowLeave);
+      window.removeEventListener('blur', handleWindowUp);
+    };
+  }, [enableDrag, svgRef, transformRef, dragActiveRef, dragNodeRef, onDragEnd]);
+}

package/src/charts/layout-utils.ts

@@ -0,0 +1,93 @@
+import { GraphNode } from './types';
+import { CIRCULAR_LAYOUT_RADIUS_RATIO } from './constants';
+
+/**
+ * Calculates node positions for a circular layout.
+ *
+ * @param nodes - Array of dependency nodes.
+ * @param width - Canvas width.
+ * @param height - Canvas height.
+ * @lastUpdated 2026-03-18
+ */
+export function applyCircularLayout(
+  nodes: GraphNode[],
+  width: number,
+  height: number
+): void {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radius = Math.min(width, height) * CIRCULAR_LAYOUT_RADIUS_RATIO;
+
+  nodes.forEach((node, i) => {
+    const angle = (2 * Math.PI * i) / nodes.length;
+    node.fx = centerX + Math.cos(angle) * radius;
+    node.fy = centerY + Math.sin(angle) * radius;
+    node.x = node.fx;
+    node.y = node.fy;
+  });
+}
+
+/**
+ * Calculates node positions for a hierarchical layout by grouping packages.
+ *
+ * @param nodes - Array of dependency nodes.
+ * @param width - Canvas width.
+ * @param height - Canvas height.
+ * @lastUpdated 2026-03-18
+ */
+export function applyHierarchicalLayout(
+  nodes: GraphNode[],
+  width: number,
+  height: number
+): void {
+  const groups = new Map<string, GraphNode[]>();
+  nodes.forEach((n: any) => {
+    const key = n.packageGroup || n.group || 'root';
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key)!.push(n);
+  });
+
+  const groupArray = Array.from(groups.entries());
+  const cols = Math.ceil(Math.sqrt(groupArray.length));
+  const groupSpacingX = (width * 0.8) / cols;
+  const groupSpacingY = (height * 0.8) / Math.ceil(groupArray.length / cols);
+
+  groupArray.forEach(([groupKey, groupNodes], gi) => {
+    const col = gi % cols;
+    const row = Math.floor(gi / cols);
+    const groupX = (col + 0.5) * groupSpacingX;
+    const groupY = (row + 0.5) * groupSpacingY;
+
+    if (groupKey.startsWith('pkg:') || groupKey === groupKey) {
+      groupNodes.forEach((n, ni) => {
+        const angle = (2 * Math.PI * ni) / groupNodes.length;
+        const r = Math.min(80, 20 + groupNodes.length * 8);
+        n.fx = groupX + Math.cos(angle) * r;
+        n.fy = groupY + Math.sin(angle) * r;
+        n.x = n.fx;
+        n.y = n.fy;
+      });
+    }
+  });
+}
+
+/**
+ * Calculates initial random positions for nodes in a force-directed layout.
+ *
+ * @param nodes - Array of dependency nodes.
+ * @param width - Canvas width.
+ * @param height - Canvas height.
+ * @lastUpdated 2026-03-18
+ */
+export function applyInitialForceLayout(
+  nodes: GraphNode[],
+  width: number,
+  height: number
+): void {
+  nodes.forEach((node) => {
+    if (node.fx === undefined || node.fx === null) {
+      node.x = Math.random() * width;
+      node.y = Math.random() * height;
+    }
+  });
+}

package/src/components/icons/IconBase.tsx

@@ -0,0 +1,38 @@
+/**
+ * Props for the IconBase component.
+ */
+export interface IconBaseProps extends React.SVGProps<SVGSVGElement> {
+  /** Additional CSS classes for styling. Defaults to w-6 h-6. */
+  className?: string;
+  /** The child elements (paths, circles, etc.) of the SVG. */
+  children?: React.ReactNode;
+  /** Viewbox of the icon. Defaults to "0 0 24 24". */
+  viewBox?: string;
+}
+
+/**
+ * A shared base component for all icons to reduce code duplication
+ * and improve AI signal clarity.
+ *
+ * @param props - Icon properties and SVG attributes.
+ * @returns A standardized SVG icon element.
+ */
+export const IconBase = ({
+  className = 'w-6 h-6',
+  children,
+  viewBox = '0 0 24 24',
+  ...props
+}: IconBaseProps) => {
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {children}
+    </svg>
+  );
+};

package/src/components/icons/index.tsx

@@ -0,0 +1,367 @@
+import { IconBase, IconBaseProps } from './IconBase';
+
+export function AlertCircleIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </IconBase>
+  );
+}
+
+export function AlertTriangleIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </IconBase>
+  );
+}
+
+export function ArrowRightIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <polyline points="12 5 19 12 12 19" />
+    </IconBase>
+  );
+}
+
+export function BrainIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.74-3.41A2.5 2.5 0 0 1 2 14c0-1.5 1-2 1-2s-1-.5-1-2a2.5 2.5 0 0 1 2.3-2.48A2.5 2.5 0 0 1 7 5.5a2.5 2.5 0 0 1 2.5-3.5z" />
+      <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.74-3.41A2.5 2.5 0 0 0 22 14c0-1.5-1-2-1-2s1-.5 1-2a2.5 2.5 0 0 0-2.3-2.48A2.5 2.5 0 0 0 17 5.5a2.5 2.5 0 0 0-2.5-3.5z" />
+    </IconBase>
+  );
+}
+
+export function ChartIcon(props: IconBaseProps) {
+  return (
+    <IconBase {...props}>
+      <rect x="3" y="3" width="18" height="18" rx="2" strokeWidth="1.2" />
+      <rect x="7" y="11" width="2" height="6" fill="currentColor" />
+      <rect x="11" y="8" width="2" height="9" fill="currentColor" />
+      <rect x="15" y="5" width="2" height="12" fill="currentColor" />
+    </IconBase>
+  );
+}
+
+export function ClockIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </IconBase>
+  );
+}
+
+export function FileIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+    </IconBase>
+  );
+}
+
+export function HammerIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M18.42 13.59L7.46 2.63a1 1 0 0 0-1.42 0l-4.7 4.7a1 1 0 0 0 0 1.42L11 18.23l1.07-1.07-1.41-1.41 1.42-1.42 1.41 1.41 1.41-1.41-1.41-1.41 1.42-1.42 1.41 1.41 2-2z" />
+      <path d="M13 18l6 6" />
+    </IconBase>
+  );
+}
+
+export function InfoIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </IconBase>
+  );
+}
+
+export function PlayIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polygon points="5 3 19 12 5 21 5 3" />
+    </IconBase>
+  );
+}
+
+export function RefreshCwIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+      <path d="M3 21v-5h5" />
+    </IconBase>
+  );
+}
+
+export function RobotIcon(props: IconBaseProps) {
+  return (
+    <IconBase {...props}>
+      <rect x="3" y="7" width="18" height="11" rx="2" strokeWidth="1.2" />
+      <rect x="7" y="10" width="2" height="2" fill="currentColor" />
+      <rect x="15" y="10" width="2" height="2" fill="currentColor" />
+      <path d="M9 3v2M15 3v2" strokeWidth="1.2" strokeLinecap="round" />
+    </IconBase>
+  );
+}
+
+export function RocketIcon(props: IconBaseProps) {
+  return (
+    <IconBase {...props}>
+      <path
+        d="M12 2c1.5 0 3 1 3 1s1.2 1.8 1.2 4.2c0 2.4-1.2 5-3.6 7.4-2.4 2.4-5 3.6-7.4 3.6C3.8 18.2 2 17 2 17S3 15.5 3 14c0-2.1 1.5-3.6 1.5-3.6S7.5 9 9 9c2.4 0 3-7 3-7z"
+        strokeWidth="0"
+        fill="currentColor"
+      />
+      <path
+        d="M14 10c.8.8 2 2 3 3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+}
+
+export function SaveIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+      <polyline points="17 21 17 13 7 13 7 21" />
+      <polyline points="7 3 7 8 15 8" />
+    </IconBase>
+  );
+}
+
+export function SettingsIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </IconBase>
+  );
+}
+
+export function ShieldCheckIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+      <path d="M9 12l2 2 4-4" />
+    </IconBase>
+  );
+}
+
+export function ShieldIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </IconBase>
+  );
+}
+
+export function TargetIcon(props: IconBaseProps) {
+  return (
+    <IconBase {...props}>
+      <circle cx="12" cy="12" r="10" strokeWidth="1.2" />
+      <circle cx="12" cy="12" r="5" fill="currentColor" />
+      <path
+        d="M22 12h-3M5 12H2M12 2v3M12 19v3"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </IconBase>
+  );
+}
+
+export function TerminalIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polyline points="4 17 10 11 4 5" />
+      <line x1="12" y1="19" x2="20" y2="19" />
+    </IconBase>
+  );
+}
+
+export function TrashIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </IconBase>
+  );
+}
+
+export function TrendingUpIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+      <polyline points="17 6 23 6 23 12" />
+    </IconBase>
+  );
+}
+
+export function UploadIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </IconBase>
+  );
+}
+
+export function WalletIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-1" />
+      <path d="M16 12h5" />
+      <circle cx="16" cy="12" r="1" />
+    </IconBase>
+  );
+}
+
+export function ZapIcon(props: IconBaseProps) {
+  return (
+    <IconBase
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+    </IconBase>
+  );
+}
+
+export default {
+  AlertCircleIcon,
+  AlertTriangleIcon,
+  ArrowRightIcon,
+  BrainIcon,
+  ChartIcon,
+  ClockIcon,
+  FileIcon,
+  HammerIcon,
+  InfoIcon,
+  PlayIcon,
+  RefreshCwIcon,
+  RobotIcon,
+  RocketIcon,
+  SaveIcon,
+  SettingsIcon,
+  ShieldCheckIcon,
+  ShieldIcon,
+  TargetIcon,
+  TerminalIcon,
+  TrashIcon,
+  TrendingUpIcon,
+  UploadIcon,
+  WalletIcon,
+  ZapIcon,
+};